German (Deutsch) translation by Władysław Łucyszyn (you can also view the original English article)
Zweimal im Monat besuchen wir einige der Lieblingsbeiträge unserer Leser aus der Geschichte von Nettuts+.
Heute werde ich Sie durch meinen gesamten Prozess von Photoshop zum fertigen HTML führen. Wir werden eine Reihe von 4 PSD-Modellen einer Website aufbauen, die schließlich zu einem WordPress-Thema werden. Es ist ein gewaltiges Tutorial, also wenn du bis zum Ende durchgehst, stell sicher, dass du ein paar Stunden übrig hast!
Demos
Wenn Sie wie ich sind, möchten Sie das Ende sehen, bevor Sie beginnen. Sie können die letzten vier HTML-Dateien sehen, indem Sie diesen Links folgen:
Laden Sie die Dateien herunter
Zusätzlich können Sie hier die vollständigen HTML/CSS/Bildquelldateien herunterladen.
Was wir bauen
Wie du vielleicht weißt oder nicht weißt, habe ich (sehr langsam) ein Buch über WordPress Theming geschrieben. Was wir erstellen, ist tatsächlich der HTML-Code, den ich im Buch verwende, um die wichtigsten Beispielthemen zu erstellen. Der letzte Themensatz heißt Creatif. Sie können die 4 Modelle sehen, die unten in Screenshots gezeigt werden (klicken Sie, um die größeren Versionen zu erhalten).
Teil 1 - Erstellen des Frameworks und der ersten Seite
Anders als bei früheren Site-Builds deckt dieses Tutorial eine anständige Größe ab. Also werden wir das in Etappen machen. Zuerst machen wir das Framework, dann die erste Seite, dann die alternativen Seiten und schließlich ein alternatives Farbschema.
Schritt 1 - Vorbereitungen
Also starten wir zuerst unseren Code-Editor der Wahl. Ich benutze die meiste Zeit Dreamweaver (und manchmal auch Textmate). Ich finde, es hat einige ziemlich anständige Code-Tools und ein paar Features, an die ich wirklich gewöhnt bin (insbesondere einen leistungsstarken Find + Replace und einen schnellen <img> hook up). Wenn Sie Dreamweaver verwenden, empfehle ich, eine "Site" einzurichten.
In jedem Fall müssen Sie zuerst eine Verzeichnisstruktur erstellen und fertig zum Erstellen sein. Ich habe normalerweise ein /images/ -Verzeichnis und ein /scripts/ -Verzeichnis, und plonk dann alle meine CSS und HTML im root.
Schritt 2 - schnelles frühes Layout
Das erste, was wir tun werden, ist ein schnelles Gesamtlayout in HTML mit einigen Barebones CSS, nur um sicherzustellen, dass wir eine solide Grundlage haben. Wir können es auch in den großen Browsern (IE7, IE6, Firefox, Safari) überprüfen, nur um sicherzustellen, dass wir auf einer soliden Basis sind. Es gibt nichts Schlimmeres, als den ganzen Weg bis zum Anfang zurückzukommen, um Probleme mit der Browserkompatibilität zu beheben. Es ist viel besser, es zu tun, während du gehst.
Also bauen wir das erste Modell, wir können ein paar Dinge sehen:
- Das Design ist zentriert. Das sagt uns sofort, wir müssen es in einen Behälter wickeln und dann diesen Behälter zentrieren.
- Im Wesentlichen besteht das Design aus einer Reihe von horizontalen Blöcken. Manchmal haben die Blöcke zwei Spalten, manchmal eine. Also können wir es als eine Reihe von <div> machen. Das ist gut, weil wir dann Elemente zu verschiedenen Seiten mischen und zuordnen können, wie Sie später sehen werden.
- Wir haben eine Fußzeile, die eine andere Farbe hat. Dies bedeutet, dass der Hintergrund diese Farbe sein muss, falls der Browser des Benutzers sich ausdehnt. Also muss die Fußzeile in einem anderen Container als dem Hauptkram sitzen.
Also hier ist ein HTML-Layout:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Creatif</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="main">
<div class="container">
<div id="header">
Logo / Menu
</div>
<div id="block_feature">
Featured Content
</div>
<div id="block_content">
Content
</div>
</div>
</div>
<div id="footer">
<div class="container">
Footer Stuff Goes in Here
</div>
</div>
</body>
</html> Wie Sie sehen können, gibt es zwei Segmente: das #main-Gebiet und das #footer-Gebiet. In jedem Element haben wir ein <div class="container"> Element, das fest und zentriert ist. Dann haben wir im Hauptcontainer eine Folge von <div>. Nun fügen wir ein kleines CSS wie folgt hinzu:
body {
margin:0px; padding:0px;
background-color:#131211;
}
#main {
background-color:#c4c0be;
}
#footer {
color:white;
}
.container {
width:950px;
margin:0 auto;
border:1px solid red;
} Also stellen wir die Hintergrundfarbe des Körpers auf das Dunkelbraun der Fußzeile ein. Dann hat der Bereich #main den helleren Hintergrund. Schließlich können Sie sehen, dass die .container Elemente eine Breite von 950px haben und mit margin: auto zentriert sind. Ich habe auch einen roten Rahmen hinzugefügt, damit Sie sehen können, wo sich die Elemente auf der Seite befinden.
Sie können das Layout hier sehen oder den Screenshot unten ansehen.
Schritt 3 - Fügen Sie einige Hintergrundbilder hinzu
So sieht unser Layout Schiffsform aus. Wenn die Hauptelemente positioniert sind, ist es nur eine Frage des Durchgehens und des Stylens, das könnte nicht einfacher sein :-)
Das erste, was wir brauchen, sind ein paar Bilder. Sie können diese selbst machen, wenn Sie die geschichteten PSDs haben, oder einfach die ZIP herunterladen und Sie werden einige finden, die ich früher gemacht habe!
Hier ist ein Screenshot von mir das erste Bild speichern - einen großen Hintergrund JPG. Ich benutze dieses große Hintergrundbild, um die radiale Farbverlaufs-Hervorhebung zu erhalten, dann benutze ich einen dünnen 1px-Schnitt, um die linke und rechte Seite auszufüllen, so dass sie sich ausdehnt.
Ebenso erstellen wir ein Hintergrundbild für die Fußzeile, das als Grenze zwischen dem Hauptbereich und dem Hauptbereich eingefügt wird (Sie finden das Bild in der ZIP-Datei, es heißt background_footer.jpg). Jetzt aktualisieren wir die CSS-Datei, um diesen roten Rahmen zu entfernen und fügen unsere neuen Hintergrundbilder wie folgt hinzu:
@charset "UTF-8";
/* Background-Styles */
body {
margin:0px; padding:0px;
background-color:#131211;
}
#main {
background:#c4c0be url(images/background_light_slice.jpg) repeat-x;
}
#main .container {
background-image:url(images/background_light.jpg);
background-repeat:no-repeat;
min-height:400px;
}
#footer {
background-image:url(images/background_footer.jpg);
background-repeat:repeat-x;
color:white;
padding:40px;
}
.container {
width:950px;
margin:0 auto;
position:relative;
} Zwei Dinge zu beachten:
- Es gibt mehrere Möglichkeiten, einen Hintergrund festzulegen. In #main habe ich einen einzelnen Selektor verwendet, der drei Eigenschaften - Farbe, Bild, Bildwiederholung - festlegt. Sie können aber auch jede Eigenschaft individuell einstellen, wie ich es in #main .container und #footer gemacht habe.
- Beachten Sie, dass, weil ich das "background_light.jpg" anwenden möchte image zu dem <div class='container'> was innerhalb #main, aber nicht zu dem, der in #footer ist, habe ich #main .container geschrieben. Mit anderen Worten, wenden Sie es nur auf Elemente mit dem class='container' an, die innerhalb von Elementen mit id='main' liegen.
Schritt 4 - Testen in Browsern
So weit, ist es gut. Vergessen Sie nicht, in verschiedenen Browsern zu testen. Hier sehen Sie in IE7 es sieht gut aus und dandy!
Schritt 5 - Erstellen Sie ein transparentes Logo
Schritt 5 - Erstellen eines transparenten LogosNext Ich habe das Logo-Element erstellt.... Weil wir später ein alternatives Farbschema verwenden werden, verwende ich eine transparente Hintergrund-PNG-Datei. Sie können dies tun, indem Sie den Hintergrund in Photoshop ausschalten und dann zu Datei > Für Web und Geräte speichern gehen und PNG-24 auswählen. Sie sollten wissen, dass PNG-24 ziemlich hohe Dateigrößen produziert. Es ist in Ordnung für ein kleines Bild wie dieses, aber für größere kann es groß sein.
(Wenn jemand weiß, wie man komprimierte PNG-Dateien erstellt, hinterlasse einen Kommentar, weil ich ziemlich sicher bin, dass es einen Weg gibt, es zu tun, ich weiß einfach nicht wie!)
Jedenfalls können Sie hier das transparente Logo PNG greifen.
Jetzt fügen wir unser Logo und ein Menü mit diesem HTML hinzu:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Creatif</title>
<link href="step_2.css" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" href="images/favicon.ico" />
</head>
<body>
<div id="main">
<div class="container">
<div id="header">
<ul id="menu">
<li><a href="">Portfolio</a></li>
<li><a href="">Services</a></li>
<li><a href="">About</a></li>
<li><a href="">Testimonials</a></li>
<li><a href="">Request a Quote</a></li>
</ul>
<div id="logo">
<h1>Creatif</h1>
<small>A Family of Rockstar Wordpress Themes</small>
</div>
</div>
<div id="block_feature">
Featured Content
</div>
<div id="block_content">
Content
</div>
</div>
</div>
<div id="footer">
<div class="container">
Footer Stuff Goes in Here
</div>
</div>
</body>
</html> und dieses zusätzliche CSS:
#header {
padding-top:20px;
}
#logo h1, #logo small {
margin:0px;
display:block;
text-indent:-9999px;
}
#logo {
background-image:url(images/logo.png);
background-repeat:no-repeat;
width:194px;
height:83px;
}
ul#menu {
margin:0px; padding:0px;
position:absolute;
right:0px;
}
ul#menu li {
display:inline;
} Einige Dinge zu beachten:
- Statt das Logo-Bild einfach in den HTML-Code zu platzieren, haben wir ein erstellt <div id="logo"> und darin einen <h1> mit dem Titel platziert. Dann haben wir mit CSS den Text verschwinden lassen und ihn gegen das Logo-Bild getauscht. Dies hat einige SEO Vorteile.
- Ich habe den Text einfach so eingestellt, dass er angezeigt wird: versteckt, aber ein freundlicher Kommentator in einem früheren Tutorial hat darauf hingewiesen, dass dies eine schlechte Übung ist und es besser ist, Text-Einzug zu verwenden. Wie du sehen kannst, lese ich meine Kommentare :-)
- Ich habe ein sehr schnelles, unausgegorenes Menü mit einer ungeordneten Liste platziert. Indem Sie die Anzeigeeigenschaft für die <li>-Elemente auf Inline setzen, ändert sich die Liste in eine horizontale Menge von Elementen ... yay!
- Schließlich, weil unser <div class="container"> Element position: relative hat, können wir jetzt die absolute Positionierung innerhalb und nach rechts setzen: 0px für das Menü und es wird nach rechts ausgerichtet. Das ist großartig für ein WordPress-Theme, denn wenn die Person neue Seiten erstellt, wird das Menü erweitert und auf diese Weise bleibt es ausgerichtet.
Schritt 6 - Transparenz in IE6 beheben
Jetzt das eine Problem mit transparenten PNGs ist, dass unser Freund Internet Explorer 6 sie nicht unterstützt! Glücklicherweise ist das relativ leicht zu beheben dank diesem Artikel, den ich gefunden habe - Der einfachste Weg, PNG für IE6 zu reparieren. Wir laden einfach ein Skript herunter und fügen diese Zeile in unser CSS ein:
/* Fix up IE6 PNG Support */
img, #logo { behavior: url(scripts/iepngfix.htc); } Leider für mich, obwohl meine Testversion von IE6, die ich auf einem Mac habe, durch Darwine läuft - erkennt den Fehler nicht ... Also ich habe keine Ahnung, ob mein Hack funktioniert :-)
Also habe ich zu diesem Zeitpunkt aufgehört, auf IE6 zu achten :-) Ich werde mir noch einen anderen Weg verschaffen müssen, IE6 zu betrachten, vielleicht durch Parallelen.
In jedem Fall, hier ist ein Screenshot von dem, was wir in IE6 bekommen, wenn Transparenz * nicht * funktioniert ...
Schritt 7 - Fixieren des Menüs
Jetzt sieht unser Menü noch ziemlich hässlich aus, also fügen wir ein paar Stile hinzu, um es zu beenden, wie folgt:
ul#menu {
margin:0px; padding:0px;
position:absolute;
right:0px;
}
ul#menu li {
display:inline;
margin-left:12px;
}
ul#menu li a {
text-decoration:none;
color:#716d6a;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
font-weight:bold;
text-transform:uppercase;
}
ul#menu li a.active, ul#menu li a:hover {
color:#211e1e;
} Nichts sehr aufregendes hier, außer dass wir einen "aktiven" Stil definiert haben, der der gleiche ist wie der: Hover-Stil (es ist nämlich ein dunklerer Farbton). Das heißt, wir können <a href="" class="active"> and the link will darken. Später in WordPress machen wir es so, dass Sie zu jeder gegebenen Zeit sagen können, auf welcher Seite Sie gerade sind.
Schritt 8 - Hinzufügen des Featured Portfolio Item-Inhalts
Jetzt haben wir die Basis unserer Seite angelegt, es ist Zeit, die Inhaltsblöcke hinzuzufügen. Wie ich bereits erwähnt habe, werden wir diese Seite als eine Reihe von austauschbaren Inhaltsblöcken erstellen. Der erste ist der Block "Featured Project". Lass uns also etwas HTML hinzufügen:
<div id="block_featured" class="block">
<span class="block_inside">
<div class="image_block">
<img src="images/sample_feature.jpg" />
</div>
<div class="text_block">
<h2>Eden Website Design</h2>
<small>in <a href="">web design</a> tagged <a href="">corporate</a>, <a href="">web2</a></small>
<p>And then a short description of the website would go in here. Something saying maybe what awesome skills I used on the project and how happy the client was. </p>
<br />
<a href="" class="button">View Project</a>
</div>
</span>
</div> Dieser Code geht also unterhalb des <div id="header"></div> Codes aus den vorherigen Schritten. Und unstyled sieht es so aus:
Hier sind zwei wichtige Dinge zu beachten:
- Sie werden sehen, dass wir einen<div class="block"> haben, dem unmittelbar ein <span class="block_inside"> folgt. Dies liegt daran, dass die Boxen, die wir zeichnen, eine doppelte Umrandung haben, zuerst gibt es eine 1px dunkelgraue Umrandung, dann innen eine 1px weiße Umrandung. Wenn wir also zwei Elemente haben, können wir jeweils eine Grenze haben. Ich weiß nicht, warum ich ein <span> auf der Innenseite benutzt habe, und wie du später sehen wirst, haben wir es geändert :-)
- Wo wir die Schaltfläche "Projekt anzeigen" haben, erstellen wir anstelle eines Bildes eine "Schaltflächen" -Klasse und wenden sie dann auf normale Textlinks an. Dies sorgt für ein sehr einfaches, wiederverwendbares Tasten-Look-and-Feel.
Schritt 9 - Hinzufügen einiger Grundstile
Jetzt wenden wir ein grundlegendes Styling wie folgt an:
/*
Block-Styles
*/
.block {
border:1px solid #a3a09e;
background-color:#ffffff;
margin-bottom:20px;
}
.block_inside {
display:block;
border:1px solid #ffffff;
background: #ffffff url(images/background_block_slice.jpg) repeat-x;
padding:30px;
overflow:auto;
}
.image_block {
border:1px solid #b5b5b5;
background-color:#d2d2d2;
padding:5px;
float:left;
}
.image_block img {
border:1px solid #b5b5b5;
}
.text_block {
float:left;
width:430px;
margin-left:30px;
} Wie ich bereits erwähnt habe, haben wir die .block-Klasse, die nur einen Rahmen und einen unteren Rand festlegt. Dann haben wir sofort das Element .block_inside, das einen weißen Rand hat, einen dünnen Scheibenhintergrund (um ihm einen schwachen Gradienten zu verleihen), etwas Polsterung und schließlich einen Überlaufwert.
Wir haben einen overflow:auto, weil wir zwei schwebende Elemente haben werden. Früher habe ich einen clearing <div> verwendet, aber jemand in meinen früheren Kommentaren hat darauf hingewiesen, dass das genauso gut funktioniert und viel sauberer ist!
Dann haben wir eine .image_block-Klasse, die unserem Bild einen doppelten Rahmen gibt (einen auf dem <div> und einen auf dem selbst <img>) und der links mit unserem Haupt- .text_block schwebt, der ebenfalls links schwebt, um ein Mini-Säulenlayout zu bilden.
So sieht unser Layout jetzt so aus:
Schritt 10 - Hinzufügen von Textstilen
Jetzt ist das Text-Styling im Moment überall. Es sah im vorherigen Screenshot irgendwie OK aus, weil Firefox, den ich benutzte, standardmäßig auf eine Sans-Serif-Schriftart gesetzt wurde. Aber wenn ich eine IE-Bildschirmkopie gemacht hätte, hättest du stattdessen eine Serifenschrift gesehen. Also sollten wir den Text jetzt aussortieren. Wir fügen diese CSS-Teile unserem Stylesheet hinzu:
body {
margin:0px; padding:0px;
background-color:#131211;
font-family:Arial, Helvetica, sans-serif;
color:#7f7d78;
font-size:13px;
line-height:19px;
}
/*
Text-Styles
*/
h2 {
margin:0px 0px 10px 0px;
font-size:36px;
font-family:Helvetica, Arial, Sans-serif;
color:#000000;
}
small {
color:#595856;
font-weight:bold;
font-size:11px;
display:block;
margin-bottom:15px;
}
a {
color:#007de2;
text-decoration:none;
}
a:hover { text-decoration:underline; }
p { margin: 0px 0px 15px 0px; }
a.button {
background:#32312f url(images/button_bg.jpg) repeat-x;
padding:5px 10px 5px 10px;
color: #ffffff;
text-decoration: none;
border:1px solid #32312f;
text-transform:uppercase;
font-size:9px;
line-height:25px;
}
a.button:hover {
background:#007de2 url(images/button_bg_o.jpg) repeat-x;
border-color:#007de2;
} Damit:
- Zuerst habe ich das Body-Tag aktualisiert, um eine Standardschrift, -farbe, -größe und -höhe zu haben.
- Dann haben wir einen <h2> Stil erstellt, der die Ränder korrigiert und die Schriftart auf Helvetica setzt
- Wir haben auch einen <small> Stil für Unterüberschriften erstellt (wie in welcher Kategorie sich ein Beitrag befindet usw.)
- Wir haben einen Link-Stil und link:hover Stil erstellt
- Wir haben das <p> Design so angepasst, dass die Ränder von den dummen Standardwerten abweichen
- Schließlich haben wir diese Schaltflächenklasse erstellt. Beachten Sie, dass ich es als "a.button" oder mit anderen Worten alle <a> Tags mit dem class = "button" definiert habe. Warum habe ich es nicht einfach ".button" gemacht? Nun, später gibt es eine gute Chance, dass ich eine zweite Button-Klasse machen werde <input> und es wird etwas anders sein. So werden sie nicht zufällig interagieren.
- In der Button-Klasse, die Sie sehen werden, haben wir ein Padding, einen Rahmen, ein Hintergrundbild, einen Hover-Style und ein Line-Height-Attribut gesetzt ... warten Sie ein Line-Height-Attribut? Ja, das ist leider ein Fehler für den IE, der sonst den Knopf abschneidet.
Ohne zusätzliches Styling nimmt die Seite Gestalt an!
Schritt 11 - Hinzufügen der Multifunktionsleiste
Eines der schönen Dinge an diesem Design sind die kleinen blauen Bandstreifen in der rechten Ecke. Dank einer Mischung aus CSS, transparenten PNG-Dateien und absoluter Positionierung sind diese einfach hinzuzufügen. Also müssen wir zuerst das Bild machen. Erneut erstellen wir ein Bild mit einem transparenten Hintergrund und speichern es als PNG-24, hier ist das Bild:
Als nächstes müssen wir das Bild in Ihrem HTML platzieren, wir können es so machen:
<div class="block">
<img src="images/ribbon_featured.png" class="ribbon"/>
<span class="block_inside">
<div class="image_block">
<img src="images/sample_feature.jpg" />
</div>
<div class="text_block">
<h2>Eden Website Design</h2>
<small>in <a href="">web design</a> tagged <a href="">corporate</a>, <a href="">web2</a></small>
<p>And then a short description of the website would go in here. Something saying maybe what awesome skills I used on the project and how happy the client was. </p>
<br />
<a href="" class="button">View Project</a>
</div>
</span>
</div> Sie können also das <img> -Tag dort in der zweiten Zeile sehen. Hinweis: Ich habe ein class="ribbon" angegeben und lege es innerhalb des .block-Elements, aber außerhalb des .block_inside-Elements ab. Das liegt daran, dass wenn wir es innerhalb von .block_inside tun, es die Eigenschaft overflow: auto, die wir früher gesetzt haben, durcheinander bringt. Wie auch immer, das wird gerade unser Layout durcheinander bringen, also lass uns etwas Styling hinzufügen:
.block {
border:1px solid #a3a09e;
background-color:#ffffff;
margin-bottom:20px;
position:relative;
}
.ribbon {
position:absolute;
top:-3px;
right:-3px;
} Sie können sehen, dass wir:
- Eine Position position:relative Attribut zum .block-Element. Dies ist so, dass wir absolute Positionierung innerhalb verwenden können und relativ zum .block-Element haben (und nicht die ganze Seite)
- Dann haben wir das Bild so eingestellt, dass es 3 Pixel hinter der rechten Kante und 3 Pixel hinter der oberen Kante erscheint.
Einfach! Früher hätten wir ein sehr kompliziertes <table> Layout verwenden müssen, um denselben Effekt zu erzielen. So sieht es jetzt aus:
Schritt 12 - Erstellen des zweiten Blocks
Mit dem hinzugefügten Farbband ist unser erstes Blockelement fertig! Jetzt ist es Zeit mit dem nächsten <div> Block zu beginnen. Dieser wird den Text über das Thema und die Liste der letzten Projekte enthalten. Also zuerst fügen wir etwas HTML hinzu:
<div id="block_portfolio">
<div id="portfolio_items">
<div class="mini_portfolio_item">
<div class="block_inside">
<img src="images/sample_mini_portfolio.jpg" class="thumbnail" alt="PSDTUTS" />
<h3>PSDTUTS Theme Design</h3>
<p>Website design for leading photoshop tutorial site and creation and maintenance of Wordpress theme. </p>
<a href="#" class="button">View Project</a>
</div>
</div>
<div class="mini_portfolio_item">
<div class="block_inside">
<img src="images/sample_mini_portfolio.jpg" class="thumbnail" alt="PSDTUTS" />
<h3>PSDTUTS Theme Design</h3>
<p>Website design for leading photoshop tutorial site and creation and maintenance of Wordpress theme. </p>
<a href="#" class="button">View Project</a>
</div>
</div>
<div class="mini_portfolio_item">
<div class="block_inside">
<img src="images/sample_mini_portfolio.jpg" class="thumbnail" alt="PSDTUTS" />
<h3>PSDTUTS Theme Design</h3>
<p>Website design for leading photoshop tutorial site and creation and maintenance of Wordpress theme. </p>
<a href="#" class="button">View Project</a>
</div>
</div>
</div>
<div id="text_column">
<h2 id="text_title">Creatif is a WordPress portfolio theme for designers and creatives</h2>
<p>You can use it to quickly turn WordPress into a portfolio website. Not familiar with WordPress? Fear not, the theme accompanies a book called <a href="#">How to Be a Rockstar Wordpress Designer</a> by Rockstar Resources due for release in 2008.</p>
<p>The book teaches you to use WordPress theming to take advantage of this flexible CMS product to create dynamic sites.</p>
<p>And as if that’s not enough, you can see a photoshop to HTML tutorial on designing the theme over at <a href="http://psdtuts.com">PSDTUTS</a> and <a href="http://nettuts.com">NETTUTS</a>.</p>
</div>
</div> Das sieht nach viel Code aus, ist aber nicht wirklich. Lass es uns durchgehen:
- Zuerst haben wir einen Container<div id="block_portfolio"> erstellt, um das Codesegment zu schließen
- Als nächstes haben wir ein<div id="portfolio_items"> welches drei identische <div class="mini_portfolio_item"> enthält. Wir werden in einer Sekunde darüber reden.
- Als nächstes haben wir eine <div id="text_column">, die mit etwas Text und einer <h2> Überschrift gefüllt ist.
- Was wir tun werden ist, die Textspalte und die Portfolioelemente nebeneinander zu verschieben, um zwei Inhaltsspalten zu bilden.
- Wir werden das <h2> durch ein Hintergrundbild ersetzen.
- Und wir werden diese Mini_portfolio_item DIVS so gestalten, dass sie mit einem ähnlichen Double Border Effekt wie zuvor gut aussehen.
Hier ist das CSS:
/*
Portfolio-Home-Styles
*/
#block_portfolio {
overflow:auto;
margin-bottom:20px;
}
#portfolio_items {
width:615px;
margin-right:25px;
float:left;
}
#text_column {
float:right;
width:310px;
}
#text_column h2#text_title {
text-indent:-9999px;
background-image:url(images/creatif.jpg);
background-repeat:no-repeat;
width:310px;
height:129px;
}
.mini_portfolio_item {
border:1px solid #a3a09e;
margin-bottom:10px;
}
.mini_portfolio_item .block_inside {
background:none; background-color:#e2dddc;
padding:25px 30px 15px 30px;
}
.mini_portfolio_item .thumbnail { float:left; margin-right:20px; border:1px solid #979390; } OK, sieht wieder viel aus, aber es ist nicht so schlimm. Lasst uns Schritt für Schritt durchgehen:
- Als erstes haben wir wieder den Überlauf verwendet: auto im Hauptelement #block_portfolio. Das liegt daran, dass wir wieder zwei schwebende Spalten haben und wenn wir das nicht tun, werden sie über die Fußzeile laufen.
- Als Nächstes haben wir #portfolio_items so eingestellt, dass sie nach links schweben, einen Abstand von der Textspalte haben und eine Breite von 615px haben.
- Die #text_column wird festgelegt, um mit einer Breite von 310px nach rechts zu floaten.
- Inside the text column we've again done that trickery with our <h2> tag where we use a massive text-indent to make the text disappear and then instead use a background image.
Als nächstes haben wir drei Stildefinitionen für die Elemente des mini_portfolio_items wie folgt:
- Zuerst setzen wir eine 1px dunkle Grenze und einen Rand zwischen ihnen
- Als nächstes definieren wir die .block_inside-Stile neu, um diesen Elementen zu entsprechen. Denken Sie daran, dass .block_inside früher definiert wurde, als wir den Bereich Featured Project erstellt haben. Hier überschreiben wir das Hintergrundbild, ändern die Hintergrundfarbe und ändern das Padding.
- Schließlich lassen wir die Miniaturbilder nach links schweben und haben einen Rand.
Alles in allem sieht es so aus:
Schritt 13 - Hinzufügen einer Multifunktionsleiste
Jetzt möchten wir eine Schleife "Letzte Projekte" zum obersten Element hinzufügen. Um dies zu tun, fügen wir es einfach an der gleichen Stelle im HTML wie zuvor ein:
<div class="mini_portfolio_item">
<img src="images/ribbon_recent.png" class="ribbon" alt="Recent Projects"/>
<div class="block_inside">
<img src="images/sample_mini_portfolio3.jpg" class="thumbnail" alt="AudioJungle" />
<h3>AudioJungle Site Design</h3>
<p>Website design for leading photoshop tutorial site and creation and maintenance of Wordpress theme. </p>
<a href="#" class="button">View Project</a>
</div>
</div> Dann fügen wir dem mini_portfolio_item-Element ein position: relative-Attribut wie folgt hinzu:
.mini_portfolio_item {
border:1px solid #a3a09e;
margin-bottom:10px;
position:relative;
} Aber etwas Seltsames passiert... Während die rechte Seite korrekt aussieht, wird die Spitze abgeschnitten, wie Sie auf dem Screenshot sehen können:
Der Grund dafür ist, dass das Element, in dem unser mini_portfolio_item sitzt, es abschneidet. Also überprüfen wir und sehen, dass die mini_portfolio_items alle innerhalb einer <div id="portfolio_items"> sind. So ist die Lösung ziemlich einfach, wir fügen 3px Polsterung an der Oberseite hinzu, die gerade genug Platz für unser Band ist, um durch zu zeigen. Hier ist das angepasste CSS:
#portfolio_items {
width:615px;
margin-right:25px;
float:left;
padding-top:3px;
} Schritt 14 - Fertigstellen der Portfolioelemente
Endlich habe ich ein paar Bilder und Titel getauscht, so dass wir sehen können, wie die Seite mit 3 verschiedenen Elementen aussieht, anstatt dieselbe zu wiederholen. Dann entschied ich mich auch, die Schaltfläche "Projekt anzeigen" loszuwerden und nur einen Textlink zu haben. Das sah etwas sauberer und weniger beschäftigt aus. So, hier ist der letzte Bereich der Portfolio-Elemente (in Safari gezeigt, vergessen Sie nicht, in verschiedenen Browsern zu testen!):
Schritt 15 - Hinzufügen von Fußzeileninhalt
Jetzt gibt es nur noch einen Abschnitt auf unserer Seite: die Fußzeile! Fügen wir ihm einen Textinhalt hinzu:
<div id="footer">
<div class="container">
<div class="footer_column long">
<h3>Designed by Collis Ta’eed, do with this as you please</h3>
<p>You can read a photoshop tutorial for creating the design at <a href="http://psdtuts.com">PSDTUTS</a>, You can read a PS->HTML tutorial for creating the site at <a href="http://nettuts.com">NETTUTS</a> and you can learn how to turn the HTML into a Wordpress theme in the upcoming book <a href="http://freelanceswitch.com/book">How to be a Rockstar Wordpress Designer</a></p>
</div>
<div class="footer_column">
<h3>More Links</h3>
<ul>
<li><a href="http://vectortuts.com">VECTORTUTS</a></li>
<li><a href="http://activeden.net">FlashDen</a></li>
<li><a href="http://audiojungle.net">AudioJungle</a></li>
<li><a href="http://freelanceswitch.com">FreelanceSwitch</a></li>
<li><a href="http://faveup.com">FaveUp</a></li>
</ul>
</div>
<div class="footer_column">
<h3>RSS</h3>
<ul>
<li><a href="">RSS Feed</a></li>
<li><a href="">What is RSS?</a></li>
</ul>
</div>
</div>
</div> Ein paar Dinge zu beachten:
- Ich habe drei <div class="footer_column"> erstellt, um den Inhalt der Fußzeile zu speichern, wir werden sie in Sekundenschnelle in Position bringen.
- Da die erste Spalte eine andere Breite hat, habe ich ihr eine zweite Klasse namens "long" gegeben. Beachten Sie, dass Sie zwei Klassen wie folgt festlegen: class = "class1 class2", nicht wie folgt: class = "class1" class = "class2" was ungültiges Markup ist.
- Innerhalb der Spalten habe ich <ul>-Listen und <h3>-Tags für die Überschriften verwendet. Es ist immer gut, ein gutes semantisches Markup zu verwenden, sowohl weil es es lesbarer macht, als auch, weil Suchmaschinen diese Überschriften und Listen alle korrekt anzeigen möchten.
So sieht es aus!
Schritt 16 - Styling der Fußzeile
Das Styling der Fußzeile ist eine ziemlich einfache Aufgabe, hier ist der Code, den wir brauchen:
/*
Footer-Styles
*/
#footer {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
}
.footer_column {
float:left;
width:120px;
margin-right:30px;
}
#footer .long {
width:610px;
}
#footer h3 {
color:#e2dddc;
text-transform:uppercase;
font-size:10px;
}
.footer_column ul li, .footer_column ul {
list-style:none;
margin:0px;
padding:0px;
} Durchgehen:
- Zuerst haben wir die Schriftarten für den #footer festgelegt
- Dann setzen wir alle Spalten so, dass sie mit einer Standardbreite von 120 px floaten
- Wir überschreiben diese Breite für die .long-Spalte. Beachten Sie, dass ich "#footer.long" eingestellt habe anstatt nur ".long". Der Grund, warum ich das getan habe, ist, dass "lang" die Art von generischem Namen ist, den ich später irgendwo anders benutzen könnte, also ist es eine gute Idee, sie klarer zu spezifizieren.
- Schließlich erhalten die Tags <h3> und <ul> einige einfache Stile
Schritt 17 - Hinzufügen eines Favicon!
Wir sind fast fertig mit unserer ersten Seite. Es ist Zeit, ein paar Feinheiten hinzuzufügen. Zuerst ein Favicon. Dies sind die kleinen Symbole, die in Ihrer Browserleiste erscheinen. Ich brauche nichts Besonderes, nur ein kleines schwarzes Quadrat mit einem C für Creatif wird es gut machen. Also erstellen wir zuerst ein quadratisches Bild wie folgt:
Es gibt viele Seiten, um Favicons zu machen (Besuche SixRevisions für eine Liste von ihnen), aber ich verwende html-kits immer ohne besonderen Grund. Lade einfach das Bild hoch und klicke auf Favicon.ico generieren.
Dann verbinden wir es mit dieser HTML-Zeile:
<link rel="shortcut icon" href="images/favicon.ico" />
Schritt 18 - Validieren!
Jetzt ist es an der Zeit zu überprüfen, ob unser Markup w3c gültig ist! Also gehen wir zum Validator in unseren Code und kreuzen die Finger ... und pah-bow :-( Wir sind nicht gültig. Ich glaube nicht, dass ich jemals auf den ersten Versuch wirklich gültig gewesen bin, ich muss einige schlechte Angewohnheiten haben!
Nach unten sehen Sie 14 Fehler. Das Problem Nummer eins ist, dass es keinen Alt-Text auf meinen Bildern gibt ... hoppla! Also gehe zurück und füge sie so hinzu:
<img src="images/ribbon_featured.png" class="ribbon" alt="Featured Project"/>
sollte viele der Fehler beheben. So, jetzt laufen wir wieder und ... Trommelwirbel ... D'oh! Immer noch ungültig. OK, das sieht etwas kniffliger aus:
Glücklicherweise sind die verbleibenden 8 Fehler eigentlich das gleiche Problem. Im Grunde habe ich ein Inline-Element (genauer gesagt eine <span class="block_inside">) verwendet und dann versucht, Elemente auf Blockebene wie divs hinein zu <div> setzen. Anscheinend ist das nicht erlaubt ... hoppla!
Zum Glück ist das leicht zu beheben, wir ändern nur jede Instanz von <span class="block_inside"> in eine <div class="block_inside">. Und ... YAY! Wir passieren :-)
Fertiger Teil 1!
OK, wir haben unsere Basisseite erfolgreich erstellt! Hier können Sie sehen, wie ich es im IE7 getestet habe und es gibt glücklicherweise keine Fehler.
Teil 2 - Aufbau der Variationen
Mit unserem grundlegenden Framework sind wir nun bereit, die zusätzlichen Seiten und das alternative Farbschema zu erstellen. Glücklicherweise haben wir eine gute Grundlage gelegt und werden in der Lage sein, eine Menge Code zu verwenden, den wir bereits geschrieben haben. Deshalb ist es wichtig, vorausschauend zu planen.
Wenn Sie nicht planen, können Sie leicht mit viel Doppelarbeit, extra Code und andere Torheit enden.
Schritt 19 - Erstellen der Blog-Homepage
Die nächste Seite, die wir erstellen werden, ist die Blog-Homepage. Dies ist vergleichbar mit der Portfolio-Homepage, in der es einen Blogpost und dann eine Reihe von Blogposts gibt. Letzten Endes werden daraus zwei verwandte WordPress-Themen - eines für Portfolios, eines für Blogs.
Also kopieren wir zuerst unsere index.html - die Datei, an der wir bisher gearbeitet haben und rufen die neue Datei blog.html auf.
In unserem Blog.html löschen wir zuerst das ganze <div id="block_portfolio">. Wir werden diesen Block in Kürze durch einen anderen ersetzen. Dann ersetzen wir die <div id="block_featured"> durch einen neuen Block für featured Blog Posts, der nur etwas anders aussieht und wie folgt aussieht:
<div id="block_featuredblog" class="block">
<img src="images/ribbon_featuredblog.png" class="ribbon" alt="Featured Project"/>
<div class="block_inside">
<div class="image_block">
<img src="images/sample_blog.jpg" alt="New Blog"/>
</div>
<div class="text_block">
<h2>New Blog Design Launched</h2>
<small>on <a href="">april 13</a> in <a href="">web design</a> tagged <a href="">blogging</a></small>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla mi risus, tempor in, gravida quis, rutrum vitae, massa. Suspendisse congue, nibh et lacinia sodales. </p>
<p>Risus nulla fringilla enim, sit amet adipiscing sapien risus sed velit. Sed vitae justo. In quis lorem nec justo varius sodales. Nullam eleifend accumsan mi. Nunc at velit. Maecenas velit. </p>
<br />
<a href="" class="button">Read More</a>
</div>
</div>
</div> Alles, was ich getan habe, ist, das ID-Tag in block_featuredblog, das Ribbon-Bild und den Inhalt zu ändern. Im Wesentlichen ist es das gleiche Layout. Sehen wir uns an, wie es aussieht:
Schritt 20 - Einige CSS anpassen
Damit das so funktioniert, werden wir nur ein paar kleine Änderungen am CSS vornehmen:
#block_featuredblog .text_block { padding-top:5px; width:490px;}
h2 {
margin:0px 0px 10px 0px;
font-size:36px;
font-family:Helvetica, Arial, Sans-serif;
color:#000000;
line-height:39px;
letter-spacing:-1px;
}
Hier habe ich die "text_block" -Klasse angepasst, aber nur wenn es im #block_featuredloglog -Element ist. Es hat jetzt ein kleines bisschen Polsterung an der Spitze und ist breiter.
Außerdem habe ich der Überschrift eine passende Zeilenhöhe hinzugefügt und nach einer Laune den Textkerning um -1px angepasst. Und wir sind mit diesem Element fertig! Kinderleicht!
Schritt 21 - Erstellen des Haupt-Inhaltsbereichs
Die Erstellung dieses Inhaltsbereichs ist das letzte, was wir wirklich tun müssen. Es bildet nicht nur den unteren Teil dieser Seite, sondern auch die gesamte Basis der generischen Seite (mit einigen Anpassungen natürlich!). Also lassen Sie uns zuerst einen wirklich einfachen HTML-Code einfügen:
<div id="block_content">
<div id="content_area" class="block">
<div class="block_inside">
Content
</div>
</div>
<div id="sidebar">
<div class="block_inside">
Sidebar Content
</div>
</div>
</div> Was wir also erstellt haben, ist ein Containerelement - <div id ="block_content"> und dann haben wir zwei Blöcke, die wir auf beide Seiten schweben lassen.... Du wirst sehen, dass ich unsere guten alten <div class="block_insode"> Elemente nutze, um den doppelten Rahmen hinzuzufügen. Hier ist das CSS, damit sie richtig sitzen:
/*
Block-Content-Styles
*/
#block_content {
}
#content_area {
width:665px;
float:left;
}
#sidebar {
float:left;
width:281px;
position:relative;
left:-1px;
margin-top:15px;
background-color:#e2dddc;
border:1px solid #a3a09e;
}
#sidebar .block_inside {
background:none;
background-color:#e2dddc;
} Durch die Stile gehen:
- Dann haben wir dem Feld #content_area und dem Feld #sidebar jeweils eine Breite und einen Float gegeben.
- Als Nächstes habe ich die Seitenleiste um 1 Pixel nach links verschoben, indem ich eine relative Position verwendet habe. Ich tat das so, dass die linke Grenze sich überschneiden würde und es so aussehen würde, als würde es herausragen.
- Zusätzlich habe ich einen 15px oberen Rand hinzugefügt, so dass die Seitenleiste nicht oben ausgerichtet ist. Momentan sieht es ein bisschen komisch aus, aber wenn wir etwas hinzufügen, wird es großartig aussehen.
- Schließlich habe ich die .block_inside im Element #sidebar neu definiert, um das Hintergrundbild zu überschreiben, und gebe stattdessen die beige Farbe für einen Hintergrund an.
Schritt 22 - Hinzufügen von Inhalten
Jetzt fügen wir unseren beiden Elementen einen Inhalt hinzu:
<div id="block_content">
<div id="content_area" class="block">
<div class="block_inside">
<h2>Working on a New Project</h2>
<small>on <a href="">april 13</a> in <a href="">web design</a> tagged <a href="">blogging</a></small>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla mi risus, tempor in, gravida quis, rutrum vitae, massa. Suspendisse congue, nibh et lacinia sodales. </p>
<p>Risus nulla fringilla enim, sit amet adipiscing sapien risus sed velit. Sed vitae justo. In quis lorem nec justo varius sodales. Nullam eleifend accumsan mi. Nunc at velit. Maecenas velit. <a href="#">Read More</a></p>
<div class="separator"></div>
<h2>Design Awards!</h2>
<small>on <a href="">april 13</a> in <a href="">web design</a> tagged <a href="">blogging</a></small>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla mi risus, tempor in, gravida quis, rutrum vitae, massa. Suspendisse congue, nibh et lacinia sodales. </p>
<p>Risus nulla fringilla enim, sit amet adipiscing sapien risus sed velit. Sed vitae justo. In quis lorem nec justo varius sodales. Nullam eleifend accumsan mi. Nunc at velit. Maecenas velit. <a href="#">Read More</a></p>
<div class="separator"></div>
<h2>This Site is Almost Complete Finally...</h2>
<small>on <a href="">april 13</a> in <a href="">web design</a> tagged <a href="">blogging</a></small>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla mi risus, tempor in, gravida quis, rutrum vitae, massa. Suspendisse congue, nibh et lacinia sodales. </p>
<p>Risus nulla fringilla enim, sit amet adipiscing sapien risus sed velit. Sed vitae justo. In quis lorem nec justo varius sodales. Nullam eleifend accumsan mi. Nunc at velit. Maecenas velit. <a href="#">Read More</a></p>
</div>
</div>
<div id="sidebar">
<img src="images/ribbon_browse.png" class="ribbon" alt="Featured Project"/>
<div class="block_inside">
<h3>Subscribe</h3>
<ul>
<li><a href="">RSS Feed</a></li>
<li><a href="">Email Updates</a></li>
</ul>
<h3>Categories</h3>
<ul>
<li><a href="">News</a></li>
<li><a href="">Marketing</a></li>
<li><a href="">General</a></li>
<li><a href="">Great Sites</a></li>
</ul>
<h3>Archives</h3>
<ul>
<li><a href="">June 2008</a></li>
<li><a href="">May 2008</a></li>
<li><a href="">April 2008</a></li>
<li><a href="">March 2008</a></li>
</ul>
</div>
</div>
<!-- a Clearing DIV to clear the DIV's because overflow:auto doesn't work here -->
<div style="clear:both"></div>
</div> OK, hier sind drei wichtige Dinge zu erwähnen:
- Zuerst im Inhaltsbereich werden Sie sehen, dass ich drei Dummy-Blogposts eingefügt habe und dazwischen jeweils eine leere <div class="separator">, die wir in kurzer Zeit in eine dünne Linie mit etwas Abstand gestalten werden....
- Als nächstes haben wir ein Ribbon-Bild in der Seitenleiste auf die gleiche Weise wie zuvor hinzugefügt.
- Endlich habe ich eine <div> Freischaltung unten verwendet. Jetzt habe ich zuvor in diesem Tutorial den Überlauf verwendet: auto; Um mit floated-Spalten umzugehen, aber wenn wir den Rand oben im vorherigen Schritt hinzufügen, um die Sidebar nach unten zu bewegen, überlagert es den Überlauf und erstellt eine Bildlaufleiste. Da es also Situationen geben kann, in denen die Seitenleiste länger ist als die Inhaltsbox, werden wir stattdessen diese Methode verwenden, um schwebende <div>-Elemente zu löschen.
Jetzt werden wir einige grundlegende Stile hinzufügen, um alles wie folgt zu beheben:
#sidebar h3 {
font-size:20px;
line-height:23px;
}
#sidebar ul { margin:10px 0px 30px 0px; padding:0px; }
#sidebar ul li { list-style:none; margin:0px 0px 5px 0px; padding:0px; }
#sidebar ul li a { color:#7f7d78; }
#sidebar ul li a:hover { color:#0172dd; text-decoration:none; }
#content_area h2 { font-size:32px; line-height:31px; }
#content_area .separator {
border-top:1px solid #e3e3e3;
margin-top:40px;
padding-top:40px;
} Zwei Dinge zu beachten:
- Formatierte die <ul> Listen in der Seitenleiste, um die Aufzählungszeichen zu entfernen und sie gut auszufüllen
- Erstellt einen Trennungsstil mit Rand und Füllung zusammen mit 1px Rahmen
And that's it, our #block_content element is complete! Sie können den Arbeits-HTML hier sehen.
Schritt 23 - Erstellen der generischen Seite
Die letzte Seite zu machen ist jetzt ein Kinderspiel. Wir kopieren einfach unsere Blog.html und nennen sie diesmal page.html. Entfernen Sie dann den angezeigten Blogpost und ändern Sie den HTML-Code des # block_content-Bereichs wie folgt:
<div id="block_content">
<div id="content_area" class="block">
<div class="block_inside">
<h4>Services</h4>
<h2>Branding</h2>
<br />
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla mi risus, tempor in, gravida quis, rutrum vitae, massa. Suspendisse congue, nibh et lacinia sodales. </p>
<p>Risus nulla fringilla enim, sit amet adipiscing sapien risus sed velit. Sed vitae justo. In quis lorem nec justo varius sodales. Nullam eleifend accumsan mi. Nunc at velit. Maecenas velit. <a href="#">Read More</a></p>
</div>
</div>
<div id="sidebar">
<img src="images/ribbon_navigation.png" class="ribbon" alt="Featured Project"/>
<div class="block_inside">
<h3>Services</h3>
<ul>
<li><a href="">Branding</a></li>
<li><a href="">Graphic Design</a></li>
<li><a href="">Web Development</a></li>
<li><a href="">Marketing</a></li>
</ul>
<h3>Related Portfolio Items</h3>
<ul>
<li><a href="">Eden Branding</a></li>
<li><a href="">FlashDen Logo Design</a></li>
<li><a href="">PSDTUTS Website</a></li>
</ul>
</div>
</div>
<!-- a Clearing DIV to clear the DIV's because overflow:auto doesn't work here -->
<div style="clear:both"></div>
</div> Das ist so ziemlich das gleiche HTML wie vorher nur mit etwas anderem Text und einem neuen Ribbon. Die einzige wirkliche Veränderung ist, dass wir jetzt einen Titel haben und darüber einen Untertitel, der in ein <h4>-Tag eingepackt ist. So können wir das mit ein paar CSS-Zeilen wie folgt gestalten:
h4 {
color:#007de2;
margin:0px 0px 0px 0px;
} Und das ist das! Siehe die letzte generische Seite hier.
Schritt 24 - Es spielt keine Rolle, ob es schwarz oder weiß ist!
Jetzt werden wir ein sehr einfaches CSS machen, um die Seite von hell zu dunkel zu schalten. Was genau dabei ist, ist das einzige HTML, das wir ändern müssen, ist diese eine Zeile:
<body id="dark">
Das ist es! Mit diesem ein bisschen extra HTML-Code können wir alle CSS Anpassungen vornehmen. Das heißt, wenn Sie möchten, können Sie sehr einfach einen kleinen Javascript-Button erstellen, der das Stylesheet umschaltet. Die Art, wie es funktioniert, ist für jede Klasse, die geändert werden muss, wir fügen einfach einen zusätzlichen Stil hinzu, der mit body #dark beginnt. Also sagen wir zuerst:
body#dark {
background-color:#1e1d1b;
}
body#dark #main {
background:#292826 url(images/background_dark_slice.jpg) repeat-x;
}
body#dark #main .container {
background-image:url(images/background_dark.jpg);
}
body#dark #footer {
background-image:url(images/background_dark_footer.jpg);
}
body#dark ul#menu li a.active, ul#menu li a:hover {
color:#ffffff;
} Und das weist den Browser an, dass, wenn <body id="dark">, die Stile für #main, #main .container, #footer und die aktiven und Hover-Zustände des Menüs überschrieben werden, einige neue Hintergrundbilder ausgetauscht und geändert werden die Textfarbe zu weiß! Einfach wie Kuchen!
Schritt 25 - Rahmen und Fixieren des Textes
Wie Sie auf dem Bild unten sehen können, ist unsere Fußzeile dank des neuen Hintergrundbildes und der neuen Farbe fixiert. Es gibt nur zwei weitere Korrekturen: der Text "Creatif ist ein WordPress ..." und die Rahmen um die Boxen, die ziemlich leicht sind und sollten sei jetzt dunkel. Also machen wir das:
body#dark .block, body#dark .mini_portfolio_item {
border-color:#1b1a19;
}
body#dark #text_column h2#text_title {
background-image:url(images/creatif_dark.jpg);
} 
Schritt 26 - Alternative Farbe!
Und das ist es! Wir haben ein alternatives Farbschema, das alle durch ein einzelnes ID-Tag auf dem <body> Element gesteuert wird. Das ist die Magie der transparenten PNG-Dateien und CSS für Sie!
Finito!
So, das war es! Der HTML ist total fertig. Vergessen Sie nicht, dass Sie die vollständigen Seiten über folgende Links sehen können:
Zusätzlich können Sie hier die vollständigen HTML/CSS/Bildquelldateien herunterladen und über PSDTUTS Plus erhalten Sie die vollständigen PSD-Dateien *und* eine Anleitung zum Entwerfen.
Zusätzliche Ressourcen
Wenn Sie PSD neu in HTML konvertieren möchten, empfehlen wir Ihnen eine Reihe von Einführungskursen, um Sie mit den Grundlagen vertraut zu machen:
- PSD zu HTML: Der Responsive Portfolio Build - von Craig Campbell
- PSD zu HTML für Designer von Adi Purdila
Wenn Sie daran interessiert sind, Hilfe bei der Konvertierung Ihres PSD-Designs zu erhalten, bietet Envato Studio eine große Auswahl an PSD-zu-HTML-Diensten, die Sie vielleicht näher kennenlernen möchten.
Envato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!
Translate this post
