Accentsconagua

WordPress als CMS Teil 2

Code
Share

Im letzten Tutorial haben wir ein schnelles, einfaches Layout in Photoshop erstellt und müssen nun eine statische HMTL- und CSS-Seite erstellen.

Auch in dieser Serie erhältlich:

  1. WordPress als CMS: Teil 1
  2. WordPress als CMS: Teil 2
  3. WordPress als CMS: Teil 3

Dieses Tutorial enthält einen Screencast für Tuts + Premium-Mitglieder.

Sobald Sie sich mit HTML und WordPress vertraut gemacht haben, können Sie diesen Schritt überspringen und einfach Ihr WordPress-Design erstellen. Dies würde jedoch den Zweck dieses Tutorials zunichte machen, so dass wir diesen zusätzlichen Schritt tun werden.

Es gibt zwei verschiedene Arten von Tutorials, die ich da draußen sehe. Das beliebteste Tutorial scheint hier der vollständige HTML-Code zu sein, und hier ist der vollständige CSS-Code, und damit endet das Tutorial. Ich bin kein großer Fan dieser Methode, deshalb werde ich Sie durch den gesamten Prozess führen. Für die Leute, die Fans der anderen Methode sind, finden Sie die vollständige HMTL und CSS am Ende dieses Tutorials.

In Würfel schneiden

Wir haben ein extrem einfaches Design beibehalten, so dass wir wirklich nur 2 Bilder zerschneiden müssen. Dies sind das Logo und unser Inhaltsbild.

Nehmen Sie Ihr Cropper-Werkzeug heraus und schneiden Sie beide Bilder aus.


Versuchen Sie, das Logo so nahe wie möglich an jeder Kante zu halten.



Speichern Sie das Bild für das Web und machen Sie dasselbe für unser Inhaltsbild.


Sie brauchen eine solide Grundlage

Nachdem wir nun alle unsere Bilder ausgeschnitten und gespeichert haben, können wir unsere HTML-Datei erstellen.

Öffnen Sie Ihren Editor und bereiten Sie sich auf die Erstellung einiger Ordner und Dateien vor. Erstellen Sie in Ihrem Stammordner diese Ordner und Dateien.

img /

inc /

index.html

Verschieben Sie Ihre neu erstellten Bilder in den img-Ordner und gehen Sie in Ihren inc-Ordner. Sobald Sie sich in inc befinden, erstellen wir einen neuen Ordner sowie 2 neue Dateien. Erstellen Sie einen neuen Ordner namens CSS, und erstellen Sie in diesem Ordner 2 neue Dateien, reset.css und style.css.

Ihre Ordnerstruktur sollte wie in der Abbildung unten aussehen.


Reset und Grundstruktur

Beim Erstellen einer Site ist es immer gut, mit einem soliden CSS-Reset zu beginnen. Dadurch wird sichergestellt, dass Sie am Nullpunkt beginnen und etwaige Browserinkonsistenzen beseitigen.

Das CSS-Reset, das ich immer verwende, ist von http://meyerweb.com/eric/tools/CSS/reset/. Richten Sie Ihren Browser also auf diese Website und kopieren Sie den von ihm erstellten CSS-Reset-Code.

Bevor wir dies in unsere reset.CSS-Datei einfügen, komprimieren wir es schnell in eine kleinere Datei.

Wenn Sie den CSS-Kompressor verwenden, gibt es Hunderte von Skripts, die dies für Sie tun. Ich persönlich verwende CSSdrive http://www.CSSdrive.com/index.php/main/CSScompressor/.

Fügen Sie Ihren CSS-Reset-Code in dieses Feld ein und setzen Sie den Komprimierungsmodus auf "Super Compact". Hit komprimiere es!



Sie werden mit unserem neu komprimierten CSS-Reset-Code auf eine andere Seite umgeleitet. Code kopieren, öffnen reset.css in Ihrem Editor und fügen Sie Ihren Code ein. sparen reset.css und schließe diese Datei.

Nachdem wir nun alle CSS-Einstellungen zurückgesetzt haben, erstellen wir die grundlegende HTML-Struktur unserer Website, sodass wir einige CSS-Stile anwenden können, um sicherzustellen, dass alles ordnungsgemäß funktioniert.

Full Screencast


Bausteine

Aufmachen index.html und fügen Sie diesen HTML-Code für die grundlegende HTML-Datei hinzu.

    WordPress CMS - Teil 2

Nachdem wir nun die grundlegendste HTML-Datei erstellt haben, können wir die 4 Hauptelemente unserer Seite erstellen. Diese Elemente sind Kopfzeile, Seitenleiste, Inhalt und Fußzeile. Da wir mit einer Vorlage arbeiten, die vor einem absolut soliden Hintergrund steht, müssen wir uns nicht darum kümmern, den Elementen Padding hinzuzufügen. Daher können wir einfach 4 Container-Divs erstellen und ein wenig Stil hinzufügen.

Erstellen Sie 4 Divs für jedes Element und hängen Sie an jeden Namen _container an. Wir werden 1 Container hinzufügen, in dem jedes unserer Elemente untergebracht wird, sodass wir unseren gesamten Inhalt auf der Seite zentrieren können. Dies wird als Container bezeichnet.

Sie werden feststellen, dass jedem abschließenden div-Tag ein Kommentar daneben steht. Unsere Vorlage wird nicht sehr lang werden, aber wenn Sie mit einer Vielzahl von divs und Elementen auf Ihrer Seite arbeiten, kann es schwierig sein, den Überblick zu behalten

Tag gehört zu seiner Eröffnung
Etikett. Durch das Hinzufügen von Kommentaren kann verwendet werden, welcher Ender zu seinem Opener gehört.

Wir haben unsere Container alle eingerichtet, so dass wir ein wenig Stil hinzufügen können, um sicherzustellen, dass unsere Sidebar- und Content-Container schön nebeneinander schweben!

Aufmachen style.css und fügen Sie schnell einige allgemeine Stile hinzu.

Dieser Mann hat etwas Stil

 body background: # f5f5f5; Schriftgröße: 62,5%; Farbe: # 6e6e6e; Schriftfamilie: Helvetica, Verdana, Sans-Serif;  p font-size: 1.4em; Zeilenhöhe: 1.5em; Marge: 0 0 15px 0;

Wenn Sie jemals eine CSS-Datei verwendet haben, sollte diese sehr vertraut aussehen. Wenn Sie dies nicht getan haben, haben wir einige Variablen unseres Körperelements geändert. Dies hat Auswirkungen auf unsere Haupt-HTML-Datei. Wir haben die Hintergrundfarbe in die Farbe unserer PSD-Datei geändert und die Standardfarbe des Texts auf der Seite mit Farbe geändert.

Als Nächstes legen wir den Standard-Schriftartenstapel fest, den wir für unsere Site verwenden möchten. Dies teilt unserem Browser mit, dass wir möchten, dass Helvetica die Hauptschrift für unsere Seite ist. Wenn Helvetica nicht verfügbar ist, sucht der Browser nach Verdana und schließlich nach der nächsten verfügbaren serifenlosen Schrift.

Wenn Sie sich öffnen index.html In Ihrem Browser wird eine leere Seite angezeigt. Da sich in unserem Container keine Elemente befinden, werden wir eine Standardhöhe und einige Hintergrundfarben hinzufügen, damit wir sehen können, woran wir arbeiten.

 div Höhe: 200px;  / * - Strukturelemente - * / #container width: 900px; Marge: 0 auto;  #header_container width: 100%; Hintergrund: rot;  #sidebar_container width: 280px; Hintergrund: blau;  #content_container width: 580px; Hintergrund: Orange;  #footer_container width: 100%; Hintergrund: grün;

Aktualisieren Sie die Seite und Sie sollten etwas haben, das wie in der Abbildung unten aussieht.


Wir haben für alle unsere divs eine Standardhöhe von 200px festgelegt, damit wir sie ohne Inhalt sehen können. Ohne die Standardhöhe hätten unsere divs alle eine Höhe von 0px und wir würden nichts sehen.

Nachdem nun unsere Divs auf der Seite angezeigt werden, müssen wir sicherstellen, dass die Seitenleiste und die Inhaltscontainer auf der Seite nebeneinander sitzen. Wir werden die Float-Eigenschaft dazu verwenden.

Hinweis: Wenn Sie nicht alle Stile aus dem aktuellen CSS-Element entfernen, fügen Sie einfach die neuen Eigenschaften zu den bereits vorhandenen Eigenschaften hinzu.

 #header_container float: left; Lösche beide;  #sidebar_container float: left;  #content_container float: right #footer_container float: left; Lösche beide;

Wir verschieben unser Seitenleisten-Div links von der Seite und das Inhalts-Div auf die rechte Seite der Seite. Dies ist eines der einfacheren Spaltenlayouts, auf das Sie stoßen werden. Wir möchten nicht, dass sich in unseren Kopf- und Fußzeilen-Containern Elemente befinden, die neben ihnen schweben. Eigenschaft mit der Float-Eigenschaft. Clear stellt sicher, dass sich keine anderen Elemente auf beiden Seiten des aktuellen Containers befinden.

Aktualisieren Sie und konsultieren Sie den Screenshot!


Die Grundstruktur unserer Seite ist nun fertiggestellt, sodass wir der Seite weitere Elemente hinzufügen können. Wir werden mit dem Header beginnen. Wir wissen, dass alles schwebend und richtig ausgerichtet ist, sodass Sie die Hintergrundfarben aus unseren Container-Divs entfernen können.

Wie wäre es mit einer Navigation?

In Ihrem header_container div können Sie ein h1-Tag sowie eine ungeordnete Liste hinzufügen, die als unsere obere Navigation fungiert.

 / * - header_container - * / 
Gear'd

Wenn Sie die Seite aktualisieren, werden die Standard-Tags angezeigt. Es ist nicht wirklich viel zu sehen. Wir werden das h1 als unser Logo verwenden. Wechseln Sie wieder zu style.css und fügen Sie dem h1 # -Logo-Tag einige Eigenschaften hinzu.

 h1 # Logo Breite: 280px; Höhe: 96px; Text-Gedankenstrich: -9999px; Hintergrund: URL (… /… /img/logo.gif) oben links keine Wiederholung; Schwimmer: links;

Wir haben hier die Höhe und Breite von out h1 auf die Höhe und Breite unseres Logobilds eingestellt. Als Nächstes haben wir den Text durch Einrücken um -9999px entfernt. Als letztes haben wir den Hintergrund unseres h1 auf unser Logo-Tag gesetzt und es nach links verschoben. Dadurch wird sichergestellt, dass es neben der Navigation gut sitzt.


Das Logo sieht toll aus, aber die Navigation braucht etwas CSS-Liebe. Lass es uns geben!

Ein kleiner kleiner Schritt von unserer Navigation. Wir werden in Kürze unsere Days-Schrift enthalten, die wir für unser Logo und unsere Navigation verwendet haben.

Wir werden @ font-face verwenden, um CSS mitzuteilen, dass wir die neue Schriftart für unsere Datei verwenden möchten. Diese Eigenschaft ist nicht in allen Browsern verfügbar. Wir werden jedoch einen Schriftartenstapel verwenden, um sicherzustellen, dass der andere Browser unsere Stile weiterhin sehen kann.

Zuerst müssen wir unsere Schriftart in unsere CSS-Datei einfügen. Erstellen Sie einen neuen Ordner mit dem Namen fonts in unserem inc-Ordner und ziehen Sie days.otf in den neuen Schriftartenordner.

Wenn Sie nicht über die Tage-Schriftart verfügen, können Sie diese sowie andere font-face-sichere Schriftarten von http://spyrestudios.com/21-awesome-font-face-embedable-typefaces/ herunterladen.

Sobald wir die Schriftart haben, können wir @ font-face verwenden, um sie in unser CSS-Skript aufzunehmen.

 @ font-face font-family: Tage; src: url ("… /fonts/days.otf");

Die erste Eigenschaft teilt unserer CSS-Datei mit, wie der Name der Schriftart lautet, sodass wir sie in unserer Eigenschaft font-family zusammen mit anderen Elementen verwenden können. Die zweite Eigenschaft ist, wo sich unsere Schrift befindet.

Zurück zu unserer Navigation. Es ist zum Standard geworden, ungeordnete oder geordnete Listen zu verwenden, wenn es um die Navigation geht. Das Styling der Navigation kann für Anfänger etwas schwierig werden, aber wenn Sie es erst einmal verstanden haben, kann es sehr mächtig sein.

 ul.nav float: right; Marge: 25px 0 0 0;  ul.nav li float: left; Marge: 0 0 0 10px;  ul.nav li a Schriftfamilie: Tage, Helvetica, Verdana, Sans-Serif; Textdekoration: keine; Polsterung: 5px 10px; Farbe: # 6e6e6e; -moz-border-radius: 5px; -webkit-border-radius: 5px; Schriftgröße: 1.4em;  ul.nav li a: hover hintergrund: # e0e0e0;  ul.nav li.active a background: # 00b8ff; Farbe: # f5f5f5;

Wir verweisen auf ul.nav und schwenken es richtig. Damit steht es ganz rechts in unserem Content-Div gegenüber unserem Logo.

Standardmäßig befinden sich die Li-Tags unserer Listen in einer neuen Zeile für jedes Li. Wir wollen das nicht, wir möchten, dass unsere Navigation nebeneinander sitzt. Float zur Rettung! Wir fügen jedem li-Element ein wenig Spielraum hinzu, um sie ein wenig auszuleben.

Wir werden unseren Link-Elementen ein wenig Stil verleihen, damit sie wie grafische Schaltflächen aussehen. Wir werden eine andere Eigenschaft verwenden, die nicht in allen Browsern verfügbar ist, aber ich möchte aus Gründen des Lernens alles einfach halten.

Dies wo -Moz-Rand-Radius und -Webkit-Grenzradius komm in das Spiel. Diese beiden Eigenschaften fügen jedem Linkelement einen schönen Radius von 5 Pixeln hinzu. Sie werden die Rundung nur bemerken, wenn der Link aktiv ist oder angehalten wird, da dies die einzigen zwei Ereignisse sind, bei denen die Hintergrundfarbe geändert wird.

Aktualisieren und genießen Sie den Ruhm Ihrer neuen Navigation!


Mit unserem neuen Listenwissen werden wir zur Seitenleiste wechseln und eine weitere ungeordnete Liste für die Navigation in der Seitenleiste hinzufügen. Die Methode zum Erstellen der Sidebar-Navigation ist fast identisch mit unserer Top-Navigation. Wenn Sie also nach einer Herausforderung suchen, versuchen Sie, die Sidebar selbst zu erstellen und zu formatieren, bevor Sie den eigentlichen Code betrachten!

Nachfolgend finden Sie den HTML- und CSS-Code für die Navigation in der Seitenleiste. Ich werde Sie nicht durchgehen, denn wie ich schon sagte, sie ist ziemlich identisch mit unserer Headernavigation, außer, wir setzen unseren Link-Elementen eine Breite, da sie die volle Größe der Seitenleiste haben sollen.

 
 #sidebar_container ul, #sidebar_container ul li float: left; Lösche beide; Breite: 280px;  #sidebar_container ul li margin: 0 0 10px 0;  #sidebar_container ul li a -moz-border-radius: 5px; -webkit-border-radius: 5px; Polsterung: 7px 10px; Textdekoration: keine; Farbe: # 6e6e6e; Schwimmer: links; Lösche beide; Breite: 260px; Schriftgröße: 1.5em; Text-Transformation: Großbuchstaben; Schriftfamilie: Days, Helvetica, Verdana, Sans-Serif;  #sidebar_container ul li a: hover background: # e0e0e0;  #sidebar_container ul li.active a background: # 00b8ff; Farbe: # f5f5f5;

Inzwischen sollten Sie ein ungeordneter Listenprofi sein und ich hasse es, Ihnen das anhaben zu wollen, aber wir werden eine weitere Liste rocken, die ich verspreche. Wir werden eine andere Liste für unsere Fußzeile verwenden.

Ich werde Ihnen sowohl den HTML- als auch den CSS-Code mit einer kleinen Erklärung zur Verfügung stellen, da er fast identisch ist, außer dass wir einige Elemente dieses Mal anders verschieben.

 
 #footer_container color: #bebebe;  #footer_container a color: # 6e6e6e; Textdekoration: keine; Schriftgröße: 1.4em;  #footer_container ul li float: right; Rahmen links: 1px fest #bebebe; Polsterung: 0 10px;  #footer_container ul li.copyright float: left; Polsterung: 0; Grenze: 0;  #footer_container ul li p margin: 0;

Wir haben unsere Fußzeilenliste und jedes unserer Li-Elemente wird nach rechts verschoben, aber wir möchten, dass sich li.copyright auf der linken Seite unserer Seite entfernt von der eigentlichen Fußzeilenliste befindet. Um dies zu tun, geben wir ihm eine Klasse von Urheberrechten. Wir haben auch ein paar Ränder links von jedem li-Element hinzugefügt, außer unserem Copyright-li für ein wenig Würze.

Hast du schon Listen satt? Wenn die Antwort lautet: Ja, Sie haben Glück, sind wir mit Listen für dieses Tutorial fertig. Danke, dass Sie so lange bei uns bleiben: P

Wir sind kurz vor der Ziellinie, wir müssen nur einige Inhaltselemente hinzufügen und in letzter Minute einige Korrekturen vornehmen.

Füllen Sie es mit Inhalten auf

 
Pläne & Preise
 
Kostenloser Plan
 
 
  
Lorem ipsum dolor sitzt amet, Konsument, der elitiert. Etiam sitzt am elit vitae arcu interdum ullamcorper. Nullam Ultrices, Nisquis Scelerisque Convallis, Neue Zeit, und Mattis Justo Nibh Eu Elit. Quisque Ultrices Gravida Pede. Mauris accumsan vulputate tellus. Phasellus condimentum bibendum dolor. Mauris sed ipsum. Phasellus in Durchm. Nam Sapien Ligula, Consectetuer Id, Hendrerit, Cursus Sed, Leo. Nam tincidunt rhoncus urna. Aliquam id massa ut nibh bibendum imperdiet. Curabitur neque mauris, porta vel, lacinia quis, placerat ultrices, orci.
 
Lorem ipsum dolor sitzt amet, Konsument, der elitiert. Etiam sitzt am elit vitae arcu interdum ullamcorper. Nullam Ultrices, Nisquis Scelerisque Convallis, Neue Zeit, und Mattis Justo Nibh Eu Elit. Quisque Ultrices Gravida Pede. Mauris accumsan vulputate tellus. Phasellus condimentum bibendum dolor. Mauris sed ipsum. Phasellus in Durchm. Nam Sapien Ligula, Consectetuer Id, Hendrerit, Cursus Sed, Leo. Nam tincidunt rhoncus urna. Aliquam id massa ut nibh bibendum imperdiet. Curabitur neque mauris, porta vel, lacinia quis, placerat ultrices, orci.
 
Lorem ipsum dolor sitzt amet, Konsument, der elitiert. Etiam sitzt am elit vitae arcu interdum ullamcorper. Nullam Ultrices, Nisquis Scelerisque Convallis, Neue Zeit, und Mattis Justo Nibh Eu Elit. Quisque Ultrices Gravida Pede. Mauris accumsan vulputate tellus. Phasellus condimentum bibendum dolor. Mauris sed ipsum. Phasellus in Durchm. Nam Sapien Ligula, Consectetuer Id, Hendrerit, Cursus Sed, Leo. Nam tincidunt rhoncus urna. Aliquam id massa ut nibh bibendum imperdiet. Curabitur neque mauris, porta vel, lacinia quis, placerat ultrices, orci.

Alle unsere Inhaltselemente sind hauptsächlich Standardelemente auf der Seite, mit Ausnahme unseres header_image div. Das ist gut, weil es eine minimale Menge an CSS bedeutet, um unsere Seite fantastisch aussehen zu lassen.

 / * - Header-Elemente - * / h1, h2, h3 Schriftfamilie: Tage, Helvetica, Verdana, Sans-Serif;  h2 font-size: 4em; Farbe: # 00b8ff;  h3 font-size: 2em; Farbe: # 6e6e6e; Zeilenhöhe: 2em;  / * - Post Elements - * / .header_image float: left; Lösche beide; Marge: 10px 0; Hintergrund: # 00b8ff; Polsterung: 10px; -moz-border-radius: 5px; -webkit-border-radius: 5px;

Header werden gestaltet, das Header-Image sieht gut aus. Alles scheint zusammen zu kommen. Aktualisieren Sie die Seite und genießen Sie den Ruhm Ihrer neuen Seite! Die Kopfzeile sieht ein wenig ab, obwohl sie ganz oben auf der Seite abgesaugt wird.


Wir werden unserem Header-Container ein wenig oberen und unteren Rand hinzufügen, um alles zu platzieren.

Fügen Sie die Margin-Eigenschaft unserem header_container-Element hinzu.

Marge: 20px 0;

Dies fügt dem oberen und unteren Rand von header_container 20 Pixel Rand hinzu. Es ist sehr einfach!

Die letzte Überarbeitung, die wir hinzufügen werden, ist ein wenig Polsterung und Grenze zu unserem footer_container.

 Border-Top: 1px fest # d0d0d0; Polsterung: 10px 0;

Wir sind alle verschlüsselt und alles sieht gut aus, also ist das Ende dieses Tutorials. Fahren Sie mit dem nächsten Lernprogramm fort, in dem wir diese Datei verwenden und WordPress für jede Seite Inhalt generieren lassen!

Code
×