Entwerfen und codieren Sie eine glatte Website von Grund auf: Teil 2

() translation by (you can also view the original English article)

Da das Internet von Minute zu Minute beliebter wird, ist eine gut aussehende Website ein Muss. Sie könnten natürlich einen Webdesigner dafür bezahlen, einen für Sie zu entwerfen, aber wäre es nicht wirklich cool, ihn selbst zu entwerfen und zu programmieren? "Schwierig", mögen Sie sagen; aber es ist eigentlich gar nicht so schwer, wenn man es erst einmal gelernt hat!

In diesem zweiten Teil des Tutorials codieren wir unser Design in ein standardkonformes, browserübergreifendes xHTML-, CSS- und JavaScript/jQuery-Layout. Starten Sie Coda oder den Editor Ihrer Wahl... es ist Zeit für das Programmieren!

Schritt eins – Was wir machen werden

Sie könnten denken, dass wir einfach unser zuvor entworfenes Layout als eine Art Basis verwenden und dann ein viel weniger komplexes Design codieren, um es uns einfacher zu machen, aber das ist nicht der Fall! Am Ende dieses Tutorials sieht Ihr Layout in einem Browser so aus:

Beachten Sie, dass dies keine Photoshop-Version ist, sondern das tatsächliche Ergebnis in Firefox. Es wurde mit dem Screengrab aufgenommen! Plugin, so dass Sie genau das sehen werden, wenn Sie fertig sind.

Einige Überlegungen zum Design:

Die Diashow funktioniert vollständig mit fließenden Übergängen
Die Überschrift sind keine Bilder
Das CSS ist sowohl für die 2.1- als auch für die 3.0-Spezifikationen gültig
Das xHTML validiert mit einem strikten 1.0 Doctype

Zweiter Schritt – Anforderungen

Auch wenn ich versuchen werde, in diesem Tutorial so klar und prägnant wie möglich zu sein, wäre es Wunschdenken zu sagen, dass ein kompletter Anfänger folgen und verstehen könnte. Sicher, Kopieren und Einfügen ist möglich, aber um alle Erklärungen zu verstehen, benötigen Sie einige Kenntnisse der Webtechniken:

Solide Kenntnisse in HTML und CSS werden dringend empfohlen, aber Sie werden es wahrscheinlich schaffen, auch nur die Grundlagen zu kennen
Eine Vorstellung davon, wie JavaScript, genauer gesagt jQuery, funktioniert, ist wichtig

Wenn Sie nichts über diese Dinge wissen, können Sie immer weitermachen und sie lernen. Hier sind einige nützliche Links dazu:

30 HTML Best Practices für Anfänger von Jeffrey Way
HTML & CSS – Die SEHR Basics von Chris Coyier
Wie jQuery funktioniert von John Resig

Schritt drei – Einrichten unserer Entwicklerumgebung

In diesem Teil des Tutorials versuche ich nur, meine Vorgehensweise beim Programmieren einer Website zu erklären. Die erste und wahrscheinlich wichtigste Sache sind Ihre Werkzeuge. Welche Apps werden Sie zum Programmieren, Debuggen und Testen verwenden?

In meinem Fall ist Dreamweaver die Wahl für Code. „Oh Gott, nur ein weiterer WYSIWYG-Webentwickler“, könnte man meinen, aber die Antwort ist nein, ich benutze den WYSIWYG-Modus nicht. Ich verwende Dreamweaver, weil ich einfach seine Funktionen zur automatischen Vervollständigung und seine Syntaxhervorhebung liebe. Wenn Sie jedoch keine 799 $für eine Anwendung bezahlen möchten, gibt es eine Reihe großartiger Code-Editoren, die kostenlos oder für viel weniger erhältlich sind. Ich denke an Coda, Text Mate, Espresso oder CSS Edit für Mac OS X und Aptana Studio, Notepad++ oder E Text Editor für Windows. Sie könnten natürlich nur Notepad oder Text Edit verwenden, aber warum tun Sie dies, wenn so viele großartige Tools kostenlos verfügbar sind?

Als nächstes müssen wir einen Entwicklungsbrowser auswählen. Wir brauchen einen Browser mit großartigen Debugging-Tools. Obwohl ich im Alltag ein eingefleischter Opera-Benutzer bin, nutze ich Firefox während meiner Entwicklungszyklen wegen seines herausragenden Tools: Firebug. Klar, Opera hat Dragonfly, und Safari 4 wird auch mit einigen großartigen Tools geliefert, aber Firebug ist immer noch einen Schritt voraus, und daher wähle ich Firefox als meinen Entwicklungsbrowser. Sie sollten auf jeden Fall einen standardkonformen Browser verwenden. Mit anderen Worten, verwenden Sie Internet Explorer nicht als Ihre Haupttestumgebung. Obwohl ich Firefox zum Testen während des Entwicklungszyklus gewählt habe, habe ich alle aktuellen Browser auf meinem Computer installiert, um zu überprüfen, ob auf allen alles einwandfrei funktioniert. Meine Designs werden daher in Firefox 3+, Opera 9.5+, Safari 3+, Chrome 1+ und Internet Explorer 7+ getestet. Auf diese Weise sollten sie für etwa 95% der Internetnutzer korrekt angezeigt werden. *Anmerkung der Redaktion: Diese Zahl wird je nach Zielgruppe der Website erheblich variieren.

Okay, jetzt, da wir die Werkzeuge zum Arbeiten haben, brauchen wir auch eine Verzeichnisstruktur. Um die Übersichtlichkeit zu wahren, habe ich beschlossen, eine neue „Site“ auf meinem lokalen Server zu erstellen, indem ich einfach einen neuen Ordner im Ordner www/ anlege. Ich verwende WAMP als meinen Localhost. Auf dieser Site müssen wir drei Ordner erstellen, js/, css/ und img/. Ich denke, die Namen sind ziemlich selbsterklärend.

Nachdem wir unsere Umgebung eingerichtet haben, können wir mit der Programmierung beginnen!

Schritt 4 – Das xHTML

Ich habe es bereits erwähnt, aber in diesem Tutorial werden wir sicher sein, gültiges xHTML zu erstellen. Was bedeutet das?

Die meisten Seiten im World Wide Web sind in Computersprachen (wie HTML) geschrieben, die es Webautoren ermöglichen, Text zu strukturieren, Multimedia-Inhalte hinzuzufügen und festzulegen, welches Aussehen oder welchen Stil das Ergebnis haben soll.

Wie jede Sprache haben diese ihre eigene Grammatik, ihr eigenes Vokabular und ihre eigene Syntax, und jedes Dokument, das mit diesen Computersprachen geschrieben wurde, soll diesen Regeln folgen. […]

Genauso wie Texte in einer natürlichen Sprache Rechtschreib- oder Grammatikfehler enthalten können, befolgen jedoch Dokumente, die Markup-Sprachen verwenden, (aus verschiedenen Gründen) diese Regeln möglicherweise nicht. […]

Mit diesen Konzepten im Hinterkopf können wir "Markup-Validierung" als den Prozess definieren, bei dem ein Webdokument anhand der Grammatik (im Allgemeinen einer DTD) überprüft wird, die es angeblich verwendet.

W3C-Validierungsservice

Aber warum sollte man sich überhaupt die Mühe machen, eine Seite zu validieren? Nun, es gibt ein paar Vorteile, der erste ist SEO. Der Crawler von Google gibt gültigen Seiten ein besseres Ranking. Der zweite ist die Zugänglichkeit. Personen, die Screenreader verwenden, können Ihre Website möglicherweise nicht richtig sehen, wenn Ihr Markup ungültig ist. Zu guter Letzt zeigt die Fähigkeit, gültigen Code zu erstellen, dass Sie kein einfacher Sonntagscoder sind.

Was wir jetzt tun müssen, ist, ein wenig darüber nachzudenken, wie wir unser Design strukturieren, welche Tags wir verwenden, die IDs, die wir ihnen geben werden usw. Hier ist, was ich mir ausgedacht habe:

Da wir nun wissen, was wir produzieren werden, beginnen wir damit, die Grundlagen unseres Dokuments zu definieren!

Die Grundlagen

Ich habe Ihnen bereits gesagt, dass wir xHTML Strict verwenden werden. Das bedeutet, dass wir unsere Strukturlogik von unserer Layoutlogik getrennt halten müssen. Um dem Browser mitzuteilen, welche „Grammatik“ wir verwenden, müssen wir eine sogenannte DTD oder Document Type Definition definieren. Der xHTML 1.0 Strict Doctype sieht so aus:

1	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Dieser Code sollte in allen Ihren HTML-Dateien an erster Stelle stehen. Das Fehlen einer solchen Definition führt zu einer fehlgeschlagenen Validierung.

Als nächstes müssen wir nur die Grundlagen unserer Seite definieren: den Kopf und den Körper. Sie möchten einen Titel-Tag in Ihrem Kopfbereich, um einen korrekten Namen in der Titelleiste des Browsers anstelle von etwas wie "Unbenannt 1" anzuzeigen. Ich beschloss, auch einige Meta-Tags für SEO zu setzen, obwohl wir alle wissen, dass sie heute nicht so nützlich sind.

<!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" xml:lang="en" >
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name="keywords" content="Roadside, Studio, Design, Web, Icons, Logos" />
		<meta name="description" content="Roadside Studio is a web design agency that makes beautiful websites!" />
		<meta name="author" content="Felix Boyeaux" />
		<meta name="robots" content="all" />

		<title>Roadside Studio</title>
	</head>
	<body>
		<!-- The content will go here -->
	</body>
</html>

Sobald dies erledigt ist, können wir mit der Codierung des eigentlichen Inhalts beginnen.

Die Statusleiste

Erinnern Sie sich, wie ich Sie dazu gebracht habe, eine ganze Reihe von Ebenengruppen zu erstellen und sie in etwas umzubenennen, das ihre Funktion widerspiegelt? Nun, Sie werden jetzt verstehen, warum. Schauen Sie sich diese Ebenenpalette an:

Verstehst du jetzt was ich meine? Dies gibt uns tatsächlich die Struktur unseres HTML: Wir haben einen Wrapping-Ordner namens Status Bar, in dem wir Unterordner haben. Diese Ordner repräsentieren die Blockelemente unserer Seite! Dies ist jedoch nicht narrensicher. Die Erfahrung zeigt, dass wir noch einige Umbruchblöcke benötigen, um den Inhalt des Balkens zu zentrieren und trotzdem den Hintergrund des Balkens 100% der Breite einnehmen zu lassen. Wir brauchen auch einen Wrapper um die Willkommensnachricht und die Aktionsleiste, um das Suchfeld rechts schweben zu lassen. So sollte Ihr Code aussehen:

<div id="status-bar">
	<div id="status-bar-content">
		<form action="#search" method="post" id="search-form">
			<p>
				<input type="text" name="query" value="Search" />
				<input type="submit" name="submit" value="Search!" />
			</p>
		</form>
		<div id="status-bar-commands">
			<p id="welcome">Welcome, Guest</p>
			<p id="action-bar">
				<a href="#login" title="Login">Login</a>
				<a href="#sitemap" title="Sitemap">Sitemap</a>
				<a href="#license" title="License">License</a>
			</p>
		</div>
	</div>
</div>

Das Div-Tag mit einer ID der Statusleiste ist unser Wrapping-Block, wie Sie vielleicht verstanden haben. Der status-bar-content-Block wird benötigt, um den Inhalt dieser Leiste zu zentrieren. Beachten Sie auch die Absatz-Tags innerhalb der Formular-Tags. Dies ist für die Validierung von xHTML 1.0 Strict erforderlich. Der letzte wichtige Punkt in diesem Codeausschnitt ist die Tatsache, dass wir unsere Absatz-Tags nicht durch divs ersetzt haben. Das nennen Webdesigner semantische Codierung. Ein Absatz sollte immer eingeschlossen sein

Tags, um die Tatsache hervorzuheben, dass es sich um lesbaren Text handelt. Dies erleichtert auch das Lesen für Screenreader.

Groß! Das war es für die Statusleiste. Nicht so kompliziert, oder? Der Schlüssel besteht darin, logisch von der Ebenenhierarchie in unserem PSD aus vorzugehen, um unser Markup richtig aufzubauen. Denken Sie nur daran, Ihre HTML-Semantik beizubehalten. Verwenden Sie Absatz-Tags für Absätze, Blockquotes für Anführungszeichen und so weiter.

Die Kopfzeile

Wir müssen uns die Ebenenpalette ansehen, um eine Vorstellung davon zu bekommen, wie man sie erstellt. Das haben wir für den Header:

Lassen Sie uns nun diese Struktur in Code übersetzen. Wir benötigen einen Wrapper, einen Logoblock und zwei Textblöcke: einen für den Header, einen für den Untertitel. In diesem Fall verwenden wir jedoch keine Absatz-Tags. Warum nicht? Nun, einfach, weil wir mit Header-Tags noch semantischer sein können. Da der Kopfzeilentext die erste Überschrift in unserem Dokument ist, werden wir ihn mit einem h1-Tag umschließen. Der Untertitel wird ein h2-Tag sein, wenn man bedenkt, dass es die zweite Überschrift in unserem Dokument ist.

<div id="header">
	<div id="logo">
		<h1><a href="#home" title="Home Page">Roadside</a></h1>
		<h2>Studio</h2>
	</div>
</div>

Eine Sache, die wir hier gemacht haben, war, einen Link zur Homepage auf dem Logo hinzuzufügen. Dies ist eine Konvention, die so ziemlich jeder Webdesigner verwendet. Es ist auch von den Benutzern bekannt, so dass das Nichtanbieten eines solchen Links bei Ihren Lesern zu Verwirrung führen könnte. Ansonsten gibt es zu diesem Teil des Designs nicht mehr zu sagen, also fahren wir einfach mit dem Inhaltsteil fort.

Die Registerkarten

Bevor wir mit den eigentlichen Tabs beginnen, müssen wir ein Wrapping-Div mit einer Inhalts-ID hinzufügen, um die Tabs, den Seiten-Wrapper und sowohl das Twitter- als auch das Blog-Modul zu enthalten. Wenn das erledigt ist, müssen wir uns ein wenig Gedanken über das Menü und seine Struktur machen. Der beste Weg, um ein Menü zu codieren, ist wahrscheinlich eine ungeordnete Liste, auch wenn wir ein horizontales Menü wollen. Warum eine Liste? Well-Listen eignen sich gut, um Elemente mit demselben Wert anzuzeigen, ohne einige hervorzuheben und andere nicht. Genau das wollen wir. In jedem Listenelement fügen wir natürlich ein Anker-Tag hinzu. Dieser Ankerlink verlinkt nicht auf etwas Reales; das href-Attribut ist für unser Tutorial genau gleich #home.

<div id="content">
	<ul id="tabs">
		<li id="previous">
			<a href="#previous" title="Previous">&lt;</a>
		</li>
		<li id="home" class="current">
			<a href="#home" title="Home">Home</a>
		</li>
		<li id="portfolio">
			<a href="#portfolio" title="Portfolio">Portfolio</a>
		</li>
		<li id="about">
			<a href="#about" title="About">About</a>
		</li>
		<li id="contact">
			<a href="#contact" title="Contact">Contact</a>
		</li>
		<li id="next">
			<a href="#next" title="Next">&gt;</a>
		</li>
	</ul>
</div>

Sie sollten beachten, dass wir unsere Tabs nicht in ein div mit einer ID von Tabs verpackt haben, einfach weil das ul-Tag dies bereits für uns erledigt. Sie sollten immer versuchen, so viele unnötige Div-Blöcke wie möglich zu entfernen, um die Seite schneller und sauberer zu machen. Sie können sich auch fragen, was < und > steht für. Nun, es steht für "kleiner als" und gt für "größer als" und das sind einfach die HTML-Werte für < und >.

Machen Sie sich keine Sorgen darüber, dass unser horizontales Tab-Menü im Moment eine vertikale Liste ist; Wir werden sicherstellen, dass es angemessen aussieht, wenn wir unser CSS schreiben.

Der Wrapper

„Wrapper“ nenne ich die Box mit der Slideshow und der Willkommensnachricht. Wir erstellen ein div mit der ID „page-wrapper“, um sicherzustellen, dass die Box richtig definiert ist. Dieses Div ist offensichtlich auch im Inhalts-Div verschachtelt.

Jetzt müssen wir den Diashow-Teil codieren. Wir erstellen einen Container mit der ID "slideshow". Darin erstellen wir ein div namens "slides", das alle Bilder enthält, die wir durchlaufen möchten. Es gibt auch einen Link um sie herum, um den Leser zum Portfolio-Bereich der Website weiterzuleiten. Das div mit der ID "slideshow-commands" enthält vorherige und nächste Befehle sowie den Titel der aktuellen Folie.

<div id="page-wrapper">
	<div id="slideshow">
		<div id="slides">
			<a href="#portfolio.work1" title="See details" class="thumb default-slide">
				<img src="http://nettuts.s3.amazonaws.com/336_siteFromScratch/./img/slideshow/1.png" alt="Flex Engine Web Design" class="slideshow-image" />
			</a>
			<a href="#portfolio.work2" title="See details" class="thumb">
				<img src="http://nettuts.s3.amazonaws.com/336_siteFromScratch/./img/slideshow/2.png" alt="Concept Labs Portfolio" class="slideshow-image" />
			</a>
			<a href="#portfolio.work3" title="See details" class="thumb">
				<img src="http://nettuts.s3.amazonaws.com/336_siteFromScratch/./img/slideshow/3.png" alt="Everlast Studio" class="slideshow-image" />
			</a>
		</div>
		<div id="slideshow-commands">
			<a href="#previous" title="Previous" id="previous-slide">&lt;</a>
			<a href="#next" title="Next" id="next-slide">&gt;</a>
			<h4>
				<a href="#portfolio.work1" title="See details" id="slide-title">
					Flex Engine Web Design
				</a>
			</h4>
		</div>
	</div>
</div>

Das Wichtigste hier ist die Art und Weise, wie wir alle unsere Folienbilder in einem Container hinzugefügt haben, um das Verschieben zu erleichtern. Wir benötigen jedoch eine Standardfolie. In diesem Fall habe ich dem Anker, der das Standardbild enthält, eine Klasse "default-slide" hinzugefügt. Um das Styling zu vereinfachen, fügen Sie einfach auch diesen Bildern eine Klasse "thumb" hinzu. Mehrere Klassen können auf ein Element gesetzt werden, indem sie durch Leerzeichen getrennt werden. Das alt-Attribut auf den Bildern ist für einen gültigen Code obligatorisch. Es wird auch für unsere Diashow wichtig sein, da wir hier den Titel der Folie abrufen.

Der nächste Schritt dieses "Page-Wrappers" ist die angezeigte Nachricht und die Kontaktinformationen. Dieser wird ziemlich einfach sein. Wir brauchen eine Überschrift, die ein h3 sein wird, weil es unsere dritte Überschrift auf der Seite ist, ein Absatz-Tag, das die Nachricht selbst enthält, und ein Absatz-Tag, das die Kontaktinformationen enthält.

<div id="message">
	<h3>We build great websites!</h3>
	<p>
		Curabitur nec sem in risus adipiscing feugiat. Etiam elementum malesuada purus.
		Quisque nec mi eu mauris ornare aliquam. Praesent adipiscing, 
		metus sed luctus condimentum, quam turpis interdum tortor, 
		in dignissim magna urna tempor odio. Integer porttitor. Nam dolor urna,
		ultricies vitae, porttitor ut, dignissim vitae, elit.
	</p>
	<p id="contact-info">
		<span id="phone">+33 1 23 45 67 89</span>
		<span id="address">
			34, Avenue des Champs-<br />
			Elysées, 75006, Paris,<br />
			France
		</span>
	</p>
</div>

Beachten Sie nur, wie wir die Telefonnummer und die Adresse mit Span-Tags umgeben, um sie separat gestalten zu können. Vergessen Sie nicht, dass neue Zeilen in Ihrem Code keinerlei Einfluss auf den Text haben, der auf dem Bildschirm gedruckt wird. Wir können dies verwenden, um unseren Code schön zu gestalten und den Absatz richtig einzurücken.

Sobald dies erledigt ist, ist es Zeit für eine kleine Pause, um zu sehen, was wir getan haben. Das ist der gesamte Code bisher:

<!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" xml:lang="en" >
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name="keywords" content="Roadside, Studio, Design, Web, Icons, Logos" />
		<meta name="description" content="Roadside Studio is a web design agency that makes beautiful websites!" />
		<meta name="author" content="Felix Boyeaux" />
		<meta name="robots" content="all" />

		<title>Roadside Studio</title>
	</head>
	<body>
		<!-- STATUS BAR -->
		<div id="status-bar">
			<div id="status-bar-content">
				<form action="#search" method="post" id="search-form">
					<p>
						<input type="text" name="query" value="Search" />
						<input type="submit" name="submit" value="Search!" />
					</p>
				</form>
				<div id="status-bar-commands">
					<p id="welcome">Welcome, Guest</p>
					<p id="action-bar">
						<a href="#login" title="Login">Login</a>
						<a href="#sitemap" title="Sitemap">Sitemap</a>
						<a href="#license" title="License">License</a>
					</p>
				</div>
			</div>
		</div>
		<!-- HEADER -->
		<div id="header">
			<div id="logo">
				<h1><a href="#home" title="Home Page">Roadside</a></h1>
				<h2>Studio</h2>
			</div>
		</div>
		<!-- CONTENT -->
		<div id="content">
			<!-- TABS -->
			<ul id="tabs">
				<li id="previous">
					<a href="#previous" title="Previous">&lt;</a>
				</li>
				<li id="home" class="current">
					<a href="#home" title="Home">Home</a>
				</li>
				<li id="portfolio">
					<a href="#portfolio" title="Portfolio">Portfolio</a>
				</li>
				<li id="about">
					<a href="#about" title="About">About</a>
				</li>
				<li id="contact">
					<a href="#contact" title="Contact">Contact</a>
				</li>
				<li id="next">
					<a href="#next" title="Next">&gt;</a>
				</li>
			</ul>
			<!-- PAGE WRAPPER -->
			<div id="page-wrapper">
				<!-- SLIDESHOW -->
				<div id="slideshow">
					<div id="slides">
						<a href="#portfolio.work1" title="See details" class="thumb default-slide">
							<img src="http://nettuts.s3.amazonaws.com/336_siteFromScratch/./img/slideshow/1.png" alt="Flex Engine Web Design" class="slideshow-image" />
						</a>
						<a href="#portfolio.work2" title="See details" class="thumb">
							<img src="http://nettuts.s3.amazonaws.com/336_siteFromScratch/./img/slideshow/2.png" alt="Concept Labs Portfolio" class="slideshow-image" />
						</a>
						<a href="#portfolio.work3" title="See details" class="thumb">
							<img src="http://nettuts.s3.amazonaws.com/336_siteFromScratch/./img/slideshow/3.png" alt="Everlast Studio" class="slideshow-image" />
						</a>
					</div>
					<div id="slideshow-commands">
						<a href="#previous" title="Previous" id="previous-slide">&lt;</a>
						<a href="#next" title="Next" id="next-slide">&gt;</a>
						<h4>
							<a href="#portfolio.work1" title="See details" id="slide-title">
								Flex Engine Web Design
							</a>
						</h4>
					</div>
				</div>
				<!-- MESSAGE -->
				<div id="message">
					<h3>We build great websites!</h3>
					<p>
						Curabitur nec sem in risus adipiscing feugiat. Etiam elementum malesuada purus.
						Quisque nec mi eu mauris ornare aliquam. Praesent adipiscing, 
						metus sed luctus condimentum, quam turpis interdum tortor, 
						in dignissim magna urna tempor odio. Integer porttitor. Nam dolor urna,
						ultricies vitae, porttitor ut, dignissim vitae, elit.
					</p>
					<p id="contact-info">
						<span id="phone">+33 1 23 45 67 89</span>
						<span id="address">
							34, Avenue des Champs-<br />
							Elysées, 75006, Paris,<br />
							France
						</span>
					</p>
				</div>
			</div>
		</div>
	</body>
</html>

Sie können die Gültigkeit jetzt unter http://validator.w3.org/ überprüfen und sehen, ob sie gültig ist. Gut, wir können nun mit der Codierung der Module fortfahren.

Das Blog-Modul

Der Code ist hier ziemlich einfach. Wir müssen ein enthaltendes div mit der ID "blog" und eine Klasse von "module" hinzufügen, um die beiden Module zusammen gestalten zu können, da sie ziemlich gleich sind. Die Überschrift wird h4 sein, während die Titel h5 sein werden. Dadurch wird in unserem Dokument eine klare Gliederung mit einer soliden Hierarchie erstellt. Das letzte, was hier zu beachten ist, sind die wenigen Zeilen jedes Eintrags. Wir werden es in Blockquotes-Tags einfügen. Wieso den? Nun, auch wenn es kein richtiges Zitat ist, handelt es sich immer noch um Text aus einem anderen Teil der Website, daher ist es tatsächlich angebracht, hier Blockzitate zu verwenden. Wir haben auch einfach einen "Weiterlesen"-Link in ein Absatz-Tag eingefügt, um die Dinge gültig zu machen.

<div class="module" id="blog">
	<h4 class="module-header-bar">Latest entries from the blog</h4>
	<div class="blog-entry">
		<h5><a href="#blogentry1" title="Vivamus sed risus">Vivamus sed risus</a></h5>
		<p class="meta">By Jonathan Davidson - 05 / 08 / 09</p>
		<blockquote class="content">
			<p>
				Vivamus sed risus quis felis sagittis cursus. Duis blandit tristique turpis. Nulla feugiat vehicula metus.
			</p>
		</blockquote>
	</div>
	<div class="blog-entry">
		<h5><a href="#blogentry2" title="Pellentesque pulvinar">Pellentesque pulvinar</a>
		</h5>
		<p class="meta">By The Team - 05 / 01 / 09</p>
		<blockquote class="content">
			<p>
				Pellentesque pulvinar dolor nec orci. Pellentesque scelerisque elit.
			</p>
		</blockquote>
	</div>
	<div class="blog-entry">
		<h5><a href="#blogentry3" title="Cras in nibh">Cras in nibh</a></h5>
		<p class="meta">By Nicholas Denman - 05 / 01 / 09</p>
		<blockquote class="content">
			<p>
				Quisque dapibus, justo a bibendum pellentesque, tellus felis cursus libero, posuere sodales diam ipsum in lorem.
			</p>
		</blockquote>
	</div>
	<p id="read-more-wrapper">
		<a href="#blog" title="Read More">
			Read More
		</a>
	</p>
</div>

Sie sollten sehen, dass wir innerhalb der Blockquotes Absatz-Tags hinzugefügt haben. Dies ist obligatorisch, um die Validierung zu bestehen. Anstatt allen Eintragselementen IDs hinzuzufügen, haben wir Klassen hinzugefügt, um sie mehrmals platzieren zu können. Sie sehen also beispielsweise einen Absatz mit der ID "meta" oder ein Blockquote mit einer Klasse von "content". Jeder Eintrag wird auch in ein eigenes div eingeschlossen, um die Abstände zu vereinfachen.

Das Twitter-Modul

Das Twitter-Modul wird dem Blog-Modul ähneln, daher gehe ich schneller darauf ein. Denken Sie daran, dass die Struktur hinter dem HTML, das wir codieren, von unserer Ebenenpalette vorgegeben wird. In diesem Fall sieht die Schichtgruppe des Twitter-Moduls beispielsweise so aus:

Wir benötigen daher einen Header-Bar-Wrapper und Container für jeden Tweet, aber auch einen Block, der den Button enthält. So würde der Code aussehen:

<div class="module" id="twitter">
	<h4 class="module-header-bar">Follow the Roadside Team on Twitter</h4>
	<div class="tweet">
		<img src="http://nettuts.s3.amazonaws.com/336_siteFromScratch/img/team/1.png" alt="Jonathan Davidson" />
		<h5><a href="#@JonathanDavidson" title="Jonathan Davidson">Jonathan Davidson</a></h5>
		<blockquote>
			<p>
				Proin et libero. Curabitur molestie mauris eu massa.
			</p>
		</blockquote>
	</div>
	<div class="tweet">
		<img src="http://nettuts.s3.amazonaws.com/336_siteFromScratch/img/team/2.png" alt="Nicholas Denman" />
		<h5><a href="#@NicholasDenman" title="Nicholas Denman">Nicholas Denman</a></h5>
		<blockquote>
			<p>
				Etiam felis ligula.
			</p>
		</blockquote>
	</div>
	<div class="tweet">
		<img src="http://nettuts.s3.amazonaws.com/336_siteFromScratch/img/team/3.png" alt="Jessica Marshall" />
		<h5><a href="#@JessicaMarshall" title="JessicaMarshall">Jessica Marshall</a></h5>
		<blockquote>
			<p>
				Pellentesque est massa, posuere eu.
			</p>
		</blockquote>
	</div>
	<div class="tweet">
		<img src="http://nettuts.s3.amazonaws.com/336_siteFromScratch/img/team/4.png" alt="Ann De Wever" />
		<h5><a href="#@AnnDeWever" title="Ann De Wever">Ann De Wever</a></h5>
		<blockquote>
			<p>
				Nulla facilisi. Nam lacinia tristique ante.
			</p>
		</blockquote>
	</div>
	<p id="get-tweets-wrapper">
		<a href="#twitter">
			Get More Tweets!
		</a>
	</p>
</div>

Nichts überraschend, wir verwenden immer noch Blockquotes für den Inhalt des Tweets. Wir verlinken auch auf die Twitter-Seite über die h5. Wir verwenden auch für den Link "Mehr Tweets erhalten" dieselbe Syntax wie für den Link "Weiterlesen".

Die Fußzeile

Der letzte Teil unseres HTML-Dokuments wird die Fußzeile sein. Es wird sehr einfach zu bauen sein. Wir brauchen nur einen Wrapper mit der ID "footer", einen weiteren mit div für das Bild und einen Absatz für unseren rechtlichen Hinweis und den Firmennamen.

<div id="footer">
	<div id="footer-image"></div>
	<p id="footer-text">
		Copyright © 2009 Roadside Studio<br />
		All Rights Reserved
	</p>
</div>

Wirklich nichts Besonderes da. Beachten Sie nur, dass wir das Copyright-Symbol durch © ersetzt haben, da es sonst nicht richtig angezeigt würde.

Fertig

Okay, glauben Sie es oder nicht, aber wir sind mit unserem Markup eigentlich fertig. Sie haben festgestellt, dass es gar nicht so schwer ist, korrekten und gültigen HTML-Code zu erstellen, indem Sie nur einigen Ebenengruppen folgen. Wichtig ist, logisch und langsam vorzugehen, um nichts zu verpassen.

Dies ist der Code, den wir erstellt haben:

<!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" xml:lang="en" >
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name="keywords" content="Roadside, Studio, Design, Web, Icons, Logos" />
		<meta name="description" content="Roadside Studio is a web design agency that makes beautiful websites!" />
		<meta name="author" content="Felix Boyeaux" />
		<meta name="robots" content="all" />

		<link rel="stylesheet" media="screen" type="text/css" title="Style" href="css/style.css" />

		<title>Roadside Studio</title>
	</head>
	<body>
		<!-- STATUS BAR -->
		<div id="status-bar">
			<div id="status-bar-content">
				<form action="#search" method="post" id="search-form">
					<p>
						<input type="text" name="query" value="Search" />
						<input type="submit" name="submit" value="Search!" />
					</p>
				</form>
				<div id="status-bar-commands">
					<p id="welcome">Welcome, Guest</p>
					<p id="action-bar">
						<a href="#login" title="Login">Login</a>
						<a href="#sitemap" title="Sitemap">Sitemap</a>
						<a href="#license" title="License">License</a>
					</p>
				</div>
			</div>
		</div>
		<!-- HEADER -->
		<div id="header">
			<div id="logo">
				<h1><a href="#home" title="Home Page">Roadside</a></h1>
				<h2>Studio</h2>
			</div>
		</div>
		<!-- CONTENT -->
		<div id="content">
			<!-- TABS -->
			<ul id="tabs">
				<li id="previous">
					<a href="#previous" title="Previous">&lt;</a>
				</li>
				<li id="home" class="current">
					<a href="#home" title="Home">Home</a>
				</li>
				<li id="portfolio">
					<a href="#portfolio" title="Portfolio">Portfolio</a>
				</li>
				<li id="about">
					<a href="#about" title="About">About</a>
				</li>
				<li id="contact">
					<a href="#contact" title="Contact">Contact</a>
				</li>
				<li id="next">
					<a href="#next" title="Next">&gt;</a>
				</li>
			</ul>
			<!-- PAGE WRAPPER -->
			<div id="page-wrapper">
				<!-- SLIDESHOW -->
				<div id="slideshow">
					<div id="slides">
						<a href="#portfolio.work1" title="See details" class="thumb default-slide">
							<img src="http://nettuts.s3.amazonaws.com/336_siteFromScratch/./img/slideshow/1.png" alt="Flex Engine Web Design" class="slideshow-image" />
						</a>
						<a href="#portfolio.work2" title="See details" class="thumb">
							<img src="http://nettuts.s3.amazonaws.com/336_siteFromScratch/./img/slideshow/2.png" alt="Concept Labs Portfolio" class="slideshow-image" />
						</a>
						<a href="#portfolio.work3" title="See details" class="thumb">
							<img src="http://nettuts.s3.amazonaws.com/336_siteFromScratch/./img/slideshow/3.png" alt="Everlast Studio" class="slideshow-image" />
						</a>
					</div>
					<div id="slideshow-commands">
						<a href="#previous" title="Previous" id="previous-slide">&lt;</a>
						<a href="#next" title="Next" id="next-slide">&gt;</a>
						<h4>
							<a href="#portfolio.work1" title="See details" id="slide-title">
								Flex Engine Web Design
							</a>
						</h4>
					</div>
				</div>
				<!-- MESSAGE -->
				<div id="message">
					<h3>We build great websites!</h3>
					<p>
						Curabitur nec sem in risus adipiscing feugiat. Etiam elementum malesuada purus.
						Quisque nec mi eu mauris ornare aliquam. Praesent adipiscing, 
						metus sed luctus condimentum, quam turpis interdum tortor, 
						in dignissim magna urna tempor odio. Integer porttitor. Nam dolor urna,
						ultricies vitae, porttitor ut, dignissim vitae, elit.
					</p>
					<p id="contact-info">
						<span id="phone">+33 1 23 45 67 89</span>
						<span id="address">
							34, Avenue des Champs-<br />
							Elysées, 75006, Paris,<br />
							France
						</span>
					</p>
				</div>
			</div>
			<!-- BLOG MODULE -->
			<div class="module" id="blog">
				<h4 class="module-header-bar">Latest entries from the blog</h4>
				<div class="blog-entry">
					<h5><a href="#blogentry1" title="Vivamus sed risus">Vivamus sed risus</a></h5>
					<p class="meta">By Jonathan Davidson - 05 / 08 / 09</p>
					<blockquote class="content">
						<p>
							Vivamus sed risus quis felis sagittis cursus. Duis blandit tristique turpis. Nulla feugiat vehicula metus.
						</p>
					</blockquote>
				</div>
				<div class="blog-entry">
					<h5><a href="#blogentry2" title="Pellentesque pulvinar">Pellentesque pulvinar</a></h5>
					<p class="meta">By The Team - 05 / 01 / 09</p>
					<blockquote class="content">
						<p>
							Pellentesque pulvinar dolor nec orci. Pellentesque scelerisque elit.
						</p>
					</blockquote>
				</div>
				<div class="blog-entry">
					<h5><a href="#blogentry3" title="Cras in nibh">Cras in nibh</a></h5>
					<p class="meta">By Nicholas Denman - 05 / 01 / 09</p>
					<blockquote class="content">
						<p>
							Quisque dapibus, justo a bibendum pellentesque, tellus felis cursus libero, posuere sodales diam ipsum in lorem.
						</p>
					</blockquote>
				</div>
				<p id="read-more-wrapper">
					<a href="#blog" title="Read More">
						Read More
					</a>
				</p>
			</div>
			<!-- TWITTER MODULE -->
			<div class="module" id="twitter">
				<h4 class="module-header-bar">Follow the Roadside Team on Twitter</h4>
				<div class="tweet">
					<img src="http://nettuts.s3.amazonaws.com/336_siteFromScratch/img/team/1.png" alt="Jonathan Davidson" />
					<h5><a href="#@JonathanDavidson" title="Jonathan Davidson">Jonathan Davidson</a></h5>
					<blockquote>
						<p>
							Proin et libero. Curabitur molestie mauris eu massa.
						</p>
					</blockquote>
				</div>
				<div class="tweet">
					<img src="http://nettuts.s3.amazonaws.com/336_siteFromScratch/img/team/2.png" alt="Nicholas Denman" />
					<h5><a href="#@NicholasDenman" title="Nicholas Denman">Nicholas Denman</a></h5>
					<blockquote>
						<p>
							Etiam felis ligula.
						</p>
					</blockquote>
				</div>
				<div class="tweet">
					<img src="http://nettuts.s3.amazonaws.com/336_siteFromScratch/img/team/3.png" alt="Jessica Marshall" />
					<h5><a href="#@JessicaMarshall" title="JessicaMarshall">Jessica Marshall</a></h5>
					<blockquote>
						<p>
							Pellentesque est massa, posuere eu.
						</p>
					</blockquote>
				</div>
				<div class="tweet">
					<img src="http://nettuts.s3.amazonaws.com/336_siteFromScratch/img/team/4.png" alt="Ann De Wever" />
					<h5><a href="#@AnnDeWever" title="Ann De Wever">Ann De Wever</a></h5>
					<blockquote>
						<p>
							Nulla facilisi. Nam lacinia tristique ante.
						</p>
					</blockquote>
				</div>
				<p id="get-tweets-wrapper">
					<a href="#twitter">
						Get More Tweets!
					</a>
				</p>
			</div>
		</div>
		<div id="footer">
			<div id="footer-image"></div>
			<p id="footer-text">
				Copyright © 2009 Roadside Studio<br />
				All Rights Reserved
			</p>
		</div>
	</body>
</html>

Sie können seine Gültigkeit noch einmal überprüfen und sehen, dass es erfolgreich als xHTML 1.0 Strict geprüft wurde!

Schritt fünf – Das CSS

Die Sprache Cascading Style Sheet hat eine extrem einfache Syntax und ist daher sehr leicht zu erlernen. Vor allem aufgrund von Browser-Inkonsistenzen kann es jedoch äußerst schwer zu meistern sein. Wir werden versuchen, das CSS so einfach und prägnant wie möglich zu halten, aber dennoch versuchen, es auf allen modernen Browsern zum Laufen zu bringen. Dazu müssen wir ein Konzept beherrschen. Ich rede vom Box-Modell.

Das Boxmodell ist die Art und Weise, wie eine Box auf Ihrer Webseite angezeigt wird. Aber ein Bild wäre wahrscheinlich besser als eine lange Erklärung.

Dies ist das Standard-Box-Modell des W3C. Wichtig ist hier zu verstehen, dass die tatsächliche Breite der Box nicht die Breite ist, die durch die Eigenschaft width definiert wird, sondern die Addition der Breite, des Paddings und des Rahmens. Nehmen wir an, wir haben eine Box mit einer Breite von 200px, 25px Padding auf beiden Seiten und einem Rand, der 5px dick um diese Box ist. Die tatsächlich angezeigte Breite der Box beträgt 260px und nicht 200px, wie wir es wollten. Aber das ist in Ordnung, wenn wir eine Box mit einer strikten Breite von 200px haben möchten, müssen wir nur die width-Eigenschaft auf 140px setzen und schon sind wir fertig. Wichtig ist nur zu wissen, wie das tatsächlich funktioniert. Dadurch werden später viele Kopfschmerzen vermieden.

Okay, jetzt, da Sie mit dem Konzept des Box-Modells des W3C vertraut sind, können wir mit der Programmierung unseres Designs beginnen.

Der CSS-Reset

Ich habe vorhin über Browser-Inkonsistenzen gesprochen. Dazu gehören einige Browser, die einen Spielraum von 10px für jeden Block einstellen, einige setzen ihn auf 15px und mehr solcher Probleme. Dies kann offensichtlich einige Probleme beim Codieren verursachen, da wir nicht unbedingt alle diese Eigenschaften in unserem Code zurücksetzen. Um dieses Problem zu lösen und uns dabei zu helfen, pixelgenaue Websites zu erstellen, möchten wir einen CSS-Reset verwenden. Es gibt viele davon, aber meiner ehrlichen Meinung nach ist Eric Meyers immer noch der beste. Ich mag einfach die Art und Weise, wie es so ziemlich alles zurücksetzt und uns die volle Kontrolle über unser Layout ermöglicht. Sie können es hier herunterladen: http://meyerweb.com/eric/tools/css/reset/ . Ich habe mich entschieden, dies in eine eigene CSS-Datei namens reset.css zu legen und sie dann in den CSS-Ordner unseres Templates zu legen.

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

Ich habe gerade beschlossen, den Inhalt zu entfernen: keine; line, weil die CSS-Validierung fehlgeschlagen ist. *Anmerkung der Redaktion: Denken Sie daran, die Validierung sollte für Sie funktionieren, nicht dagegen. Es ist in Ordnung, wenn Ihre Seite nicht validiert, WENN Sie genau wissen, warum. Da ich wusste, dass ich keine Einfügungen und Löschungen benötigen würde, habe ich auch diese Zurücksetzungen entfernt, nur um dieses Ding etwas leichter zu machen.

Wenn Sie die Datei index.html in Ihrem Browser neu laden, sehen Sie, dass sich nichts geändert hat. Dies liegt daran, dass wir in unserem HTML noch nicht auf das Stylesheet verlinkt haben. Wir werden jedoch kein Link-Tag im Head-Bereich hinzufügen. Stattdessen rufen wir einfach die Datei reset.css aus unserem Haupt-Stylesheet mit dem Befehl @import auf, wenn wir mit der Erstellung beginnen.

Die Typografie

Normalerweise teile ich mein CSS in zwei Teile auf. Eines, das das Layout der Seite steuert, das ist mein Haupt-Stylesheet, und eines steuert die Typografie. Dazu gehören Textausrichtung, Schriftfarbe, Schriftgröße, Buchstabenabstand, Zeilenhöhe usw. Dies ist eine gute Sache, da Sie so mehr Flexibilität in Ihrem Codierungsprozess haben. Nehmen wir an, Sie möchten die Schriftgröße von h1 auf 48px statt 36px ändern. Nun, anstatt in Ihrer style.css zu graben, die wahrscheinlich mehrere hundert Zeilen lang ist, können Sie einfach Ihr Typografie-Stylesheet öffnen und die Stile finden, die sich auf das h1-Tag beziehen , Schriftgröße ändern und fertig!

Beim Codieren unseres Typografie-Stylesheets ist unser Photoshop-Layout äußerst nützlich. Wir können das Type Tool(T) in Photoshop greifen und beginnen, die verschiedenen Textblöcke unseres Designs hervorzuheben. Auf diese Weise können wir sehen, dass der h1 eine Schriftgröße von 48px, eine Farbe von #4d4d4d und eine Schriftart auf Myriad Pro haben wird. Dieser letzte Punkt wird einige Probleme verursachen. Myriad Pro ist keine Standard-Webschrift, daher können wir keine Schriftfamilie definieren, die mit Myriad Pro beginnt und der Meinung ist, dass jeder unser Design so sehen wird, wie er es sollte. Wir werden dieses Problem später mit einigen fortgeschritteneren Webtechniken lösen, aber vorerst definieren wir nur eine Fontfamilien-Eigenschaft mit Myriad Pro und einigen anderen Fallback-Fonts, falls der Leser Myriad Pro nicht hat auf seinem Computer installiert.

Wenn wir so fortfahren und unsere PSD durchsuchen, um alle Schriftinformationen zu erhalten, können wir sehen, dass unsere h3-Tags eine Schriftgröße von 24px haben sollten, dass unsere h5-Tags die Farbe #6eb9cc haben und so weiter. Wenn wir logisch vorgehen, kommen wir zu folgendem Ergebnis:

h1 {
	color: #4d4d4d;
	font-family: "Myriad Pro", Helvetica, Arial, sans-serif;
	font-size: 48px;
	font-weight: normal;
}

h1 a { color: #4d4d4d; text-decoration: none; }

h2 {
	color: #6ec9cc;
	font-family: "Myriad Pro", Helvetica, Arial, sans-serif;
	font-size: 12px;
	letter-spacing: 28px;
	text-transform: uppercase;
}

h3 {
	color: #6ec9cc;
	font-family: "Myriad Pro", Helvetica, Arial, sans-serif;
	font-size: 24px;
	font-weight: normal;
}

h4 {
	color: #ffffff;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: normal;
	text-align: center;
}

h4 a { color: #ffffff; text-decoration: none; }

h5 {
	color: #6ec9cc;
	font-family: "Myriad Pro", Helvetica, Arial, sans-serif;
	font-size: 18px;
	font-weight: normal;
}

h5 a { color: #6ec9cc; text-decoration: none; }

/* Paragraph styling */

p {
	color: #525252;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
}

p.meta { color: #707070; font-size: 10px; text-align: right; }

p#footer-text { text-align: center; }

div#message p { color: #4d4d4d; line-height: 20px; }

/* Link styling */

a { 
	color: #999999; 
	text-decoration: none; 
}

a:hover { text-decoration: none; }

p#action-bar a { color: #ffffff; }

p#action-bar a:hover { color: #6eb9cc; text-decoration: none; }

Ich glaube nicht, dass ich viel erklären muss. Dies ist nur das sehr grundlegende Erscheinungsbild. Beachten Sie, dass ich das Styling für Standard-Absatz-Tags und Standard-Anker-Tags definiere, bevor ich beginne, das Erscheinungsbild spezifischerer Textblöcke wie beispielsweise Meta-Absätze zu definieren. Dies ist Teil eines "Don't Repeat Yourself"-Konzepts der Codierung. Die Fallbacks-Schriftarten, für die ich mich entschieden habe, sind Helvetica und Arial, sie sind kein großartiger Ersatz für Myriad, aber wir werden sie wahrscheinlich sowieso nicht brauchen, wie ich später erklären werde. Es ist nur um sicher zu sein.

Eine Sache, über die ich sprechen möchte, ist der Codierungsstil hier. Einrückungen sind natürlich wichtig für die Lesbarkeit des Codes, aber nicht nur. Auf den ersten Blick mögen Sie meinen, dass mein Code etwas unordentlich aussieht, aber wenn Sie genauer hinschauen, werden Sie feststellen, dass ich einer sehr strengen Syntax folge. Der erste Punkt dieser Syntax besteht darin, Eigenschaften alphabetisch zu ordnen. Dies erleichtert das Auffinden einer Eigenschaft erheblich, wenn Sie sie später bearbeiten möchten. Als nächstes behalte ich mein Styling in einer einzigen Zeile, wenn ich nicht mehr als drei Eigenschaften für das Element verwende und dass es sich nicht um ein Standard-Styling handelt, das wie für das p-Tag deklariert wird. Obwohl darüber gestritten werden kann, ob es lesbar ist oder nicht, verringert es die Dateigröße drastisch. Meiner Meinung nach ist es nicht schwer zu lesen, obwohl die Erklärungen in einer einzigen Zeile gehalten werden. Es macht das CSS sogar prägnanter und einfacher zu durchsuchen.

Das Wichtigste bei Ihrem Codierungsstil ist Konsistenz. Wenn Sie keine einzeilige Deklaration verwenden möchten, tun Sie es einfach nicht. Sie müssen sich mit der Art und Weise, wie Sie codieren, wohlfühlen. Ich sage nicht, dass mein Weg der beste ist; Ich mag es einfach so. Ich ermutige Sie jedoch, Ihren eigenen Code noch schneller zu finden!

Einrichten unseres Haupt-Stylesheets

Als wir mit dem Zurücksetzen fertig waren, habe ich Ihnen gesagt, dass Sie es nicht direkt mit einem Link-Tag in die HTML-Datei einfügen sollen, da wir es von unserem Haupt-Stylesheet aus aufrufen würden. Sie könnten natürlich alle Ihre CSS-Dateien direkt in den HTML-Code einfügen, aber ich habe mich dagegen entschieden, da dies den Kopfbereich aufgeräumter hält.

Wir müssen unser Master-Stylesheet erstellen. Normalerweise nenne ich das style.css, aber man könnte es auch main.css, master.css, screen.css oder was auch immer nennen. In dieses Stylesheet müssen wir zuerst unser Reset und dann unser Typografie-Stylesheet einfügen. Dazu verwende ich die @import-Regel. Ihre ersten Zeilen in der Datei style.css sollten so aussehen:

1	@import url('reset.css');
2	@import url('typography.css');

Mit diesen wenigen Zeilen fügen wir unsere beiden Stylesheets in die Datei style.css ein, und wir müssen nur eine Datei in unserem Head-Bereich aufrufen.

1	<link title="Style" href="css/style.css" rel="stylesheet" media="screen" type="text/css" />

Wenn wir uns jetzt unsere Webseite ansehen, würden wir Folgendes sehen:

Ich muss Ihnen zustimmen, wenn Sie sagen, dass es im Moment nicht großartig aussieht, aber Sie können immer noch einige Details sehen, die genau so aussehen, wie wir es uns wünschen, wie die Meta-Absätze oder sogar das Logo. Okay, jetzt, da unser Master-Stylesheet eingerichtet ist, können wir damit beginnen, die Seite richtig zu gestalten!

Der Körper

Wir müssen nur ein grundlegendes Styling für das Body-Tag festlegen. Dazu gehört das Zentrieren des Designs mit margin: auto, das Einstellen einer Hintergrundfarbe und das Einstellen der Breite auf 100 %.

body {
	background-color: #f8f8f8;
	margin: auto;
	width: 100%;
}

Die Statusleiste

Wie immer fangen wir einfach oben an und gestalten uns bis zum Footer. Ich mag es, meine Designs in Blöcke zu codieren. Ich fange zum Beispiel mit dem Header an, mache dann eine Pause, gestalte den Inhalt und so weiter. Es hilft mir, mich zu motivieren. Dazu gehört auch, einen Bereich vollständig zu beenden, bevor ein anderer beginnt.

Bevor wir also mit der eigentlichen CSS-Codierung der Statusleiste beginnen, nehmen wir uns etwas Zeit und sehen, welche Bilder wir dafür benötigen. Das erste ist ein Hintergrundbild, bei dem es sich um einen einfachen Farbverlauf handelt, der auf der x-Achse wiederholt wird. Der zweite ist ein Hintergrund für die Aktionsleiste: ein abgerundetes Rechteck. Wir hätten hier natürlich die Eigenschaft border-radius verwenden können, aber ich habe mich entschieden, ein Bild zu verwenden, um es in allen Browsern pixelgenau zu machen. Das letzte Bild, das wir für unsere Statusleiste benötigen, ist ein Hintergrund für das Suchfeld.

Beginnen wir mit dem Hintergrundbild. Wie ich bereits sagte, wiederholen wir dieses Bild auf der x-Achse, also brauchen wir nur ein Bild, das 1px breit ist. Dadurch wird seine Größe drastisch reduziert. Beginnen Sie also mit dem Einspalten-Markierungswerkzeug in Photoshop, gehen Sie zur Statusleiste / Box-Ebenengruppe, blenden Sie die Ebene "Rahmen" aus und führen Sie die Ebene "Hintergrund" und "Schatten" zusammen. Wählen Sie anschließend mit Ihrem Auswahlwerkzeug ein Slice dieser kürzlich erstellten Ebene aus, kopieren Sie es und fügen Sie es in ein neues Dokument ein. Dieses Dokument sollte 1*50px groß sein. Aufgrund einiger Macken des Boxmodells müssen wir diese Höhe auf 40px reduzieren. Schneiden Sie einfach die 10 obersten Pixel zu und speichern Sie sie dann für Web & Geräte (Alt + Umschalt + Strg + S) in PNG 24 und nennen Sie es status-bar-bg.png. Save For Web & Devices bietet großartige Komprimierungstools, um die Dateigrößen so klein wie möglich zu halten. Dies ist sehr wichtig, wenn Sie mit dem Web arbeiten, und deshalb sollten Sie dieses Tool immer verwenden.

Jetzt der Hintergrund der Aktionsleiste; Öffnen Sie die Ebenengruppe "Action Bar" und wählen Sie die Ebene "Shape" aus. Wählen Sie das gesamte Dokument aus (Strg + A), kopieren Sie die Ebene und fügen Sie sie in ein neues Dokument ein. Sie müssen die Vektorform rastern, um sie richtig zu kopieren. Vergessen Sie nicht, die Deckkraft der Ebene wieder auf 55% zu setzen. Speichern Sie dies erneut für Web & Geräte und nennen Sie es action-bar-bg.png.

Der letzte Schritt zum Konvertieren des Designs in Bilder ist das Suchfeld. Gehen Sie einfach zur Ebenengruppe "Search Field", blenden Sie die Ebene "Search" aus und führen Sie die Lupe und die Form zusammen. Wählen Sie erneut das gesamte Dokument mit Strg + A aus und kopieren Sie es in ein neues Dokument. Speichern Sie es als search-field.png.

Okay, jetzt, da wir mit den Bildern fertig sind, können wir mit dem Codieren beginnen. Als erstes wollen wir den Container einrichten. Legen Sie Breite und Höhe sowie ein Hintergrundbild und einen Rahmen fest.

div#status-bar {
	background: url('../img/status-bar-bg.png') repeat-x;
	border-bottom: 2px groove #ffffff;
	height: 40px;
	width: 100%;
}

Der Groove-Stil für den Rand gibt uns diesen schönen Look, den wir in Photoshop nur schwer erreichen konnten. Wir haben eine Breite von 40px eingestellt, obwohl unser Hintergrund aufgrund des Boxmodells 50px beträgt.

Dann wollen wir sicherstellen, dass der Inhalt dieser Leiste zentriert ist. Die Sache hier ist, dass der Hintergrund 100% der Breite einnehmen soll, während der Inhalt zentriert sein sollte. Aus diesem Grund haben wir ein Wrapping-Div verwendet, das so ziemlich alles enthält, was wir in unsere Statusleiste eingeben. Wir sollten ihm eine Breite von 800px sowie einen gewissen Rand zuweisen.

1	div#status-bar-content {
2	margin: 10px auto 0px auto;
3	width: 800px;
4	}

Um die beiden Teile dieser Statusleiste, den linken und den rechten, richtig zu platzieren, setzen wir die Eigenschaften width und float.

div#status-bar-commands {
	width: 400px;
}

form#search-form {
	float: right;
	width: 200px;
}

Jetzt müssen wir die Statusleisten-Befehle so gestalten, dass die Aktionsleiste in der Mitte der Statusleiste schwebt. Wir haben auch das richtige Hintergrundbild in die Statusleiste eingefügt. Polster und Ränder werden natürlich auch verwendet, um die Dinge so aussehen zu lassen, wie sie sollten. Denken Sie beim Einrichten dieser Eigenschaften an das Boxmodell! Aus diesem Grund haben wir die Höhe der Aktionsleiste auf 14px statt 30px eingestellt; Wir haben eine 8px-Auffüllung.

p#welcome {
	float:left; 
	padding-top: 7px;
	width: 150px;
}

p#action-bar {
	background: url('../img/action-bar-bg.png') no-repeat;
	height: 14px;
	margin-left:200px;
	padding: 8px 28px;
	width: 154px;
}

p#action-bar a:before { 
	content: '|  ';
}

p#action-bar a[title="License"]:after {
	content: '  |';
}

Wir fügen "|" hinzu, um die Links in der Aktionsleiste zu trennen. Ich habe mich dafür entschieden, weil es semantisch korrekter ist. Tatsächlich haben diese Pipes absolut nichts mit unserem Inhalt zu tun, daher wäre es nicht richtig, sie in den HTML-Code zu packen. Beachten Sie den ziemlich komplexen letzten Selektor, der den letzten Link auswählt und eine Pipe danach sowie davor hinzufügt.

Der letzte Punkt wird das Suchfeld gestalten und das Hintergrundbild hinzufügen. Wir müssen einige Browser-Standardstile zurücksetzen, die den Eingaben hinzugefügt werden, und wir müssen auch die Schaltfläche zum Senden ausblenden. Dies ist vielleicht nicht das Beste, wenn wir über Barrierefreiheit sprechen, aber dennoch habe ich mich dafür entschieden, Design vor Barrierefreiheit zu setzen.

form#search-form input[type="text"] {
	background: url(../img/search-field.png) no-repeat;
	border:none;
	height:20px;
	padding: 5px 0px 0px 30px;
	width:170px;
}

form#search-form input[type="submit"] {
	display: none;
}

Das sollten wir jetzt haben:

Es sieht unserer PSD ziemlich ähnlich, nicht wahr? Genau das wollen wir! Fahren wir nun mit der Kopfzeile fort.

Die Kopfzeile

Der Header ist ziemlich einfach, so dass er eigentlich ziemlich einfach zu codieren ist.

Als erstes müssen wir jedoch unser Image vorbereiten. Navigieren Sie einfach zur Ebenengruppe "Header" und führen Sie die Ebene "Image" und die Ebene "Shape" zusammen. Wählen Sie nun das Dokument mit Strg + A aus und kopieren Sie es schließlich und fügen Sie es in ein neues Dokument ein. Die Datei sollte 1600*250px groß sein.

Wir haben jetzt aber ein Problem. Wir möchten nicht, dass sich das Header-Bild über dem Header wiederholt, wenn die Bildschirmauflösung des Readers breiter als 1600px ist. Wir müssen daher die Kanten ausblenden, indem wir eine Ebenenmaske hinzufügen und die linken und rechten Kanten zu Transparenz ausblenden. Das Laden von Transparenz bei so großen Bildern kann jedoch extrem lange dauern, daher habe ich den Hintergrund gerade mit #6eb9cc gefüllt.

Dieses Bild ist riesig, daher müssen wir es komprimieren, damit es schneller geladen wird. Ich habe mich entschieden, es in PNG 8 mit nur 256 Farben zu speichern. Dadurch wird die Größe im Vergleich zu PNG 24 um fast 80% reduziert, was enorm ist! Rufen Sie diese Datei header-image.png auf.

Okay, jetzt zum Code. Wir möchten, dass das Header-Bild innerhalb des "Header"-Divers zentriert ist. Damit unser Design jedoch im Breitbildformat korrekt angezeigt wird, müssen wir auch eine Hintergrundfarbe anwenden, damit es schön ausgeblendet wird. Wir setzen auch eine Grenze. Anstelle von Groove verwende ich den Ridge-Stil, was genau das Gegenteil ist, da die Startfarbe oben und nicht unten platziert wird, was in diesem Fall gewünscht ist. Ich wende nur etwas Styling auf das Logo an, um es richtig zu platzieren.

div#header {
	background: url('../img/header.png') no-repeat;
	background-color: #6eb9cc;
	border-bottom: 2px ridge #ffffff;
	height: 250px;
	width: 100%;
}

div#logo {
	margin: auto;
	padding-top: 35px;
	width: 800px;
}

Das ist eigentlich alles, was wir mit unserem Header zu tun haben. Wir können das Ergebnis nun in einem Browser überprüfen:

Die Inhaltsbox

Wir müssen unsere semantische Regel hier ein wenig brechen. Um den oberen und unteren Schatten in das Inhalts-Div einzufügen, müssen wir in unserem Markup leere Divs erstellen: eines mit der ID "content-top-shadow" und das andere mit der ID "content-bottom". -Schatten". Das erste Div sollte zwischen dem Header-Div und dem Inhalts-Div platziert werden und das andere sollte zwischen dem Inhalt und der Fußzeile platziert werden. Ich weiß, dass wir die mehreren Hintergründe von CSS 3 hätten verwenden können, um dieses Problem zu lösen, aber das Problem ist, dass mehrere Hintergründe von vielen Browsern noch nicht unterstützt werden, also bleiben wir vorerst bei dieser Technik.

Bevor wir codieren, müssen wir Bilder abrufen. Gehen Sie einfach zur Ebenengruppe "Inhalt" / "Box" und fügen Sie die Hintergrundform mit den beiden Schattenebenen zusammen. Verwenden Sie dann das Single Column Marquee Tool und wählen Sie ein 1px-Slice des Hintergrunds aus. Kopieren Sie es und fügen Sie es in ein neues Dokument ein. Verwenden Sie nun das Zuschneidewerkzeug und beschneiden Sie die oberen 20 Pixel des Bildes. Speichern Sie dies für Web und Geräte als PNG 24 und nennen Sie es content-top-shadow.png. Führen Sie dann Bearbeiten->Transformieren->Drehen um 180 aus und speichern Sie es erneut, diesmal als content-bottom-shadow.png.

Zu div#content fügen wir nur einige grundlegende Box-Layouts wie Padding und Breite hinzu, aber der interessante Teil hier sind die beiden "content-shadow" -Container. Wir richten natürlich eine Höhe und Breite sowie ein Hintergrundbild ein, das sich auf der x-Achse wiederholt. Dies erzeugt die Illusion eines Schattens. Ich wende auch nur ein klares an: beides; zum content-bottom-shadow, weil ich weiß, dass meine Module schweben werden und es sonst nicht funktioniert.

div#content {
	margin: auto;
	padding-bottom: 50px;
	position: relative;
	width: 800px;
}

div#content-top-shadow {
	background: url('../img/content-top-shadow.png') repeat-x;
	height: 20px;
	width: 100%;
}

div#content-bottom-shadow {	
	background: url('../img/content-bottom-shadow.png') repeat-x;
	clear: both;
	height: 20px;
	width: 100%;
}

Beachten Sie nur, dass wir position setzen: relativ; der Inhalt div. Dies wird sich später als nützlich erweisen, wenn wir unser Navigationsmenü mit Registerkarten platzieren.

Gut, jetzt, da wir mit dieser Box fertig sind, können wir mit dem Styling des Inhalts beginnen!

Der Seiten-Wrapper

Anstatt mit dem Styling des Menüs zu beginnen, stellen wir nur sicher, dass unser Seiten-Wrapper zuerst richtig angezeigt wird.

Zunächst werden wir dem Seiten-Wrapper einige grundlegende Box-Stylings hinzufügen. Wir definieren Breite, Höhe, Padding und Marge, wie wir es in unserer PSD gewählt haben, während wir das Box-Modell des W3C im Hinterkopf behalten (ja, es verfolgt uns immer noch!) und wir fügen eine weiße Hintergrundfarbe und einen Rand hinzu. Da wir die float-Eigenschaft verwenden, um das Navigationsmenü mit Registerkarten anzuzeigen, müssen wir Folgendes löschen: beide; hier, und da wir eine feste Höhe verwenden, möchten wir auch jeden Überlauf ausblenden, um unser Layout nicht zu stören. Überlauf sollte nicht passieren, aber wir wissen nie.

div#page-wrapper {
	background-color: #ffffff;
	border: 1px solid #bababa;
	clear: both;
	height: 233px;
	margin-top: 75px;
	overflow: hidden;
	padding: 15px;
	width: 768px;
}

Wir wollen nun unsere Slideshow Box gestalten. Das ist wirklich grundlegendes Styling. Dank des Box-Modells können wir die border-Eigenschaft verwenden, um die gewünschte vertikale Trennlinie zwischen der Diashow und der Nachricht anzuzeigen.

div#slideshow {
	border-right: 1px solid #b2b2b2;
	float: left;
	padding-right: 15px;
	width: 375px;
}

Jetzt wollen wir sicherstellen, dass beim Laden der Seite nur ein Thumbnail angezeigt wird, da die Art und Weise, wie sie derzeit codiert ist, alle drei Thumbnails gleichzeitig anzeigt, was unser Design völlig zerstört. Wir könnten dies natürlich von unserem JavaScript beheben lassen, aber es ist einfach nicht akzeptabel, es Menschen ohne aktiviertes JS unmöglich zu machen, unsere Seite zu sehen. Nachdem wir jedem Thumbnail etwas Styling hinzugefügt haben, blenden wir daher alle Thumbnails aus und zeigen dann nur das mit einer Klasse von "default-slide" an.

div#slides {
	border: 1px solid #a7a7a7;
	height: 200px;
	width: 370px;
}

div#slides a.thumb {
	display:none;
}

div#slides a.default-slide {
	display:block;
}

Sobald wir dies getan haben, besteht der letzte Schritt darin, die Diashow-Befehle zu stylen. Wir müssen einige Bilder aus der PSD ausschneiden. Sie beginnen sich an den Vorgang zu gewöhnen, also navigieren Sie einfach zur Ebenengruppe "Inhalt" / "Wrapper" / "Diashow" / "Befehle" und rastern Sie alle Ebenen. Kopieren Sie dann den linken Pfeil, den rechten Pfeil und den Hintergrund in neue Dokumente und speichern Sie sie als commands-previous-slide.png, commands-next-slide.png bzw. commands-bg.png.

Diese müssen wir dann in unsere Vorlage aufnehmen. Ich definiere zunächst das Box-Layout mit Hintergrundbild, Breite und Höhe sowie einer Position: relativ; um es unter dem Thumbnail zentrieren zu können.

Wir können dann eine grundlegende Bildersetzungstechnik verwenden, um unsere vorherigen und nächsten Befehle gut aussehen zu lassen.

Schließlich ist ein Rand oben auf dem Titel erforderlich, um ihn vertikal zu zentrieren.

div#slideshow-commands {
	background: url('../img/commands-bg.png') no-repeat;
	height: 19px;
	left: 15px;
	padding: 3px 25px;
	position: relative;
	width: 290px;	
}

a#previous-slide {
	background: url('../img/commands-previous-slide.png') no-repeat;
	display: block;
	float: left;
	height: 12px;
	margin-top: 2px;
	text-indent: -9000px;
	width: 9px;
}

a#next-slide {
	background: url('../img/commands-next-slide.png') no-repeat;
	display: block;
	float: right;
	height: 12px;
	margin-top: 2px;
	text-indent: -9000px;
	width: 9px;
}

div#slideshow-commands h4 {
	margin-top:1px;
	width:100%;
}

Okay, toll, unsere Diashow wird jetzt richtig angezeigt. Wir wollen nur die Nachricht stylen und sind mit dem Wrapper fertig. Das Styling wird ziemlich einfach sein, da das meiste davon in der Datei typography.css erstellt wurde.

Wir richten zuerst ein Box-Styling ein, damit die Nachricht einen linken Rand von 15px hat, und wir wenden auch einen Rand-unten auf den Titel an, um die Dinge atmen zu lassen.

div#message {
	margin-left: 410px;
	width: 350px;
}

div#message h3 {
	margin-bottom: 20px;
}

Der schwierigste Teil davon wird das Styling der Kontaktinformationen sein. Bevor wir beginnen, stellen Sie sicher, dass Sie das Telefon- und das Mail-Symbol in zwei separaten Dateien speichern und sie jeweils phone-icon.png und address-icon.png nennen. Ich habe das Gefühl, dass Sie alle wahrscheinlich inzwischen wissen, wie das geht, also denke ich, dass es nicht notwendig ist, es noch einmal zu erklären.

Wir werden diese Bilder mit einem Hintergrundbild anwenden, aber um dies tun zu können, müssen wir die span-Tags als Blöcke verwenden, daher die Anzeige: block; auf den Span-Tags. Der Rest ist einfach, wir fügen jedem Span ein Hintergrundbild hinzu, lassen einen nach links schweben und verwenden Paddings, um den Text vom Symbol weg einzurücken.

p#contact-info span {
	display: block;
}

span#phone {
	background: url('../img/phone-icon.png') no-repeat 0px 1px;
	float: left;
	margin-top: 25px;
	padding-left: 35px;
	width: 125px;
}

span#address {
	background:url('../img/mail.png') no-repeat 160px 30px;
	padding:5px 0px 0px 195px;
}

Wenn wir uns jetzt das Design ansehen, sehen wir Folgendes:

Es sieht immer noch nicht gut aus, aber wir fangen wirklich an, etwas zu erreichen. Im nächsten Schritt sieht es noch besser aus!

Das Navigationsmenü

Das wird eine harte Nuss zu knacken. Es ist ein ziemlich komplexes Menü, das wir hier verwenden, und die Tatsache, dass es rechts aufgereiht ist, macht die Sache nicht einfacher. Dabei hilft uns natürlich die Tatsache, dass wir das Menü bereits in Photoshop gestaltet haben, ein wenig weiter.

Sprites

Wir werden etwas namens CSS Sprites verwenden. Anstatt für jeden Link ein Bild zu verwenden, kombinieren wir sie einfach alle zu einem großen Bild namens Sprite. Diese Technik hat zahlreiche Vorteile. Anstatt etwa zwanzig Bilder zu laden, einschließlich Hover- und Aktivstatus, müssen wir nur eines laden. Dies kann die Ladezeit drastisch verkürzen und ist auch gut für Ihren Server.

Also, wie machen wir so ein Sprite? Beginnen Sie mit der Erstellung eines neuen Dokuments mit einer Größe von 425*115px. Ziehen Sie dann das Tabs-Menü von unserem PSD in diese Datei und legen Sie es dort ab. Entfernen Sie alle unnötigen Abstände mit Strg + T und entfernen Sie schließlich den Hover- und Aktivstatus, den wir auf Home und Portfolio gesetzt haben, damit unser Design echt aussieht. Diese Zeile enthält nur unsere Standardschaltflächen: wenn sie weder schweben noch aktiv sind. So sollte es aussehen:

Dann duplizieren Sie diese Ebenengruppe zweimal und platzieren Sie sie mit 5px Platz. Die zweite Zeile ist unser schwebender Zustand, daher sollte die Schriftfarbe #6eb9cc sein. Der dritte ist der aktive Zustand, daher sollte die Schriftart fett sein. So sieht unser Sprite aus, wenn er fertig ist:

Sie sollten Ihren Hintergrund natürlich transparent machen. Ich habe nur einen weißen Hintergrund hinzugefügt, um es als Screenshot besser lesbar zu machen.

Sobald dies erledigt ist, speichern Sie es für Web und Geräte in PNG 24 und nennen Sie es tabs-sprite.png.

Wichtig beim Entwerfen von Sprites ist es, die Breite jedes Elements konstant zu halten und sie gut auszurichten, um später die Hintergrundposition problemlos verwenden zu können.

Okay, wir haben jetzt unser Sprite. Sie fragen sich vielleicht, wie wir dies auf unsere ungeordnete Liste anwenden werden, die wirklich nicht wie ein horizontales Navigationsmenü mit Registerkarten aussieht. Die Antwort kommt.

Bevor wir unsere Hintergrundbilder tatsächlich verwenden, möchten wir nur das Menü richtig platzieren. Hier bietet sich eine relative Positionierung zum Inhalt an. Durch die Verwendung einer absoluten Positionierung auf den Registerkarten können wir sie jetzt mit Bezug auf ihr übergeordnetes Element und nicht auf das Fenster platzieren. Dies bedeutet, dass die Koordinate (0, 0) nicht links oben im Fenster, sondern im "Inhalt" steht! Dies gibt uns viel Flexibilität beim Codieren.

Nachdem wir die Liste platziert haben, müssen wir nun die Aufzählungspunkte formatieren. Indem wir sie nach links verschieben, werden die Elemente in einer einzigen Zeile angezeigt. Nachdem wir auch die Eigenschaften width und height hinzugefügt haben, legen wir das Hintergrundbild für unsere Sprite-Datei fest. Dies bedeutet, dass jedes Element der ungeordneten Menüliste denselben Hintergrund hat, und das ist die Feinheit von CSS-Sprites.

Wir verwenden auch die Bildersetzung, um die Rohtext-Links zu entfernen und den Link über den gesamten Tab anklickbar zu machen.

ul#tabs {
	margin-top: 30px;
	position: absolute;
	right: 0px;
	top: -65px;
}

ul#tabs li {
	background: url('../img/tabs-sprite.png') no-repeat;
	float: left;
	height: 35px;
	margin-right: 1px;
	width: 70px;
}

ul#tabs li a {
	display: block;
	height: 100%;
	text-indent: -9000px;
	width: 100%;
}

Richtig, der nächste Schritt besteht darin, jede Registerkarte zu stylen. Wir müssen die normale Hintergrundposition anwenden, dann die Hintergrundposition beim Schweben und schließlich die aktive und aktuelle Position. So sieht es zum Beispiel für den Reiter „Zurück“ aus:

ul#tabs li#previous {
	background-position: 0px 0px;
	width:80px;
}

ul#tabs li#previous:hover {
	background-position: 0px -40px;
}

ul#tabs li#previous.current, ul#tabs li#previous:active {
	background-position: 0px -80px;
}

Machen Sie sich nur keine Sorgen um die Breite, die wir einstellen, es liegt einfach daran, dass der "vorherige" Tab breiter ist als die Standard-Tabs. Wir müssen uns mit den anderen Tabs nicht darum kümmern. Tun Sie dies einfach für jede Registerkarte und vergessen Sie nicht, die Pixelwerte durch die richtigen zu ersetzen. Sie können das Lineal-Werkzeug (I) von Photoshop verwenden, um Ihnen zu helfen. So sieht der komplette Code aus:

ul#tabs li#previous {
	background-position: 0px 0px;
	width:80px;
}

ul#tabs li#previous:hover {
	background-position: 0px -40px;
}

ul#tabs li#previous.current, ul#tabs li#previous:active {
	background-position: 0px -80px;
}

ul#tabs li#home {
	background-position: -80px 0px;
}

ul#tabs li#home:hover {
	background-position: -80px -40px;
}

ul#tabs li#home.current, ul#tabs li#home:active {
	background-position: -80px -80px;
}

ul#tabs li#portfolio {
	background-position: -150px 0px;
}

ul#tabs li#portfolio:hover {
	background-position: -150px -40px;
}

ul#tabs li#portfolio.current, ul#tabs li#portfolio:active {
	background-position: -150px -80px;
}

ul#tabs li#about {
	background-position: -220px 0px;
}

ul#tabs li#about:hover {
	background-position: -220px -40px;
}

ul#tabs li#about.current, ul#tabs li#about:active {
	background-position: -220px -80px;
}

ul#tabs li#contact {
	background-position: -290px 0px;
}

ul#tabs li#contact:hover {
	background-position: -290px -40px;
}

ul#tabs li#contact.current, ul#tabs li#contact:active {
	background-position: -290px -80px;
}

ul#tabs li#next {
	background-position: -360px 0px;
	width: 65px;
}

ul#tabs li#next:hover {
	background-position: -360px -40px;
}

ul#tabs li#next.current, ul#tabs li#next:active {
	background-position: -360px -80px;
}

Nun, das war alles für die Registerkarten! So sieht unsere Vorlage jetzt aus:

Das Blog-Modul

Wir beginnen wie gewohnt mit den Grundlagen. Ein offensichtliches Layout-Styling gibt uns etwa Folgendes:

1	div#blog {
2	float: left;
3	margin: 50px 15px 0px 0px;
4	width: 385px;
5	}

Danach gestalten wir einfach die Header-Leiste. Wir müssen hier ein Bild erstellen, das als Hintergrund verwendet werden soll. Gehen Sie einfach zur rechten Ebenengruppe, blenden Sie die Textebene aus und führen Sie das Symbol und die Form zusammen. Speichern Sie dies als blog-header-bar.png.

Wir können dieses Hintergrundbild hinzufügen, sobald wir Höhe, Breite, Auffüllung und Rand eingestellt haben:

div#blog h4.module-header-bar {
	background: url('../img/blog-header-bar.png') no-repeat;
	height: 29px;
	margin-bottom: 15px;
	padding-top: 13px;
	width: 385px;
}

Der nächste Schritt besteht darin, jeden Eintrag zu stylen. Da der Großteil der Arbeit in typography.css erledigt wurde, müssen wir hier nicht viel tun, sondern im Grunde nur einige Ränder und Abstände hinzufügen.

div#blog div.blog-entry {
	margin-left:15px;
}

div#blog div.blog-entry h5 {
	float:left;
	width:200px;
}

div#blog div.blog-entry blockquote {
	clear:both;
	padding:10px 0px 10px 15px;
}

div#blog div.blog-entry p.meta {
	padding-top:4px;
}

Der letzte Schritt besteht darin, den Link "Read More" zu gestalten. Da wir für diese Schaltfläche drei Zustände verwenden werden (regulär, schweben und aktiv), verwenden wir auch hier ein Sprite. Ziehen Sie einfach die rechte Ebenengruppe in ein neues Dokument und duplizieren Sie sie zweimal. Ich habe 10px zwischen jedem Staat gelassen. Für den Hover-Zustand habe ich einfach die Textfarbe in #6eb9cc geändert, und für den aktiven Zustand habe ich sowohl die Verlaufsüberlagerung als auch den Strich umgekehrt, um beim Klicken darauf einen 3D-Effekt zu erzeugen. So sieht mein Sprite aus:

Ich habe es als read-more-button.png gespeichert. Um dies anzuwenden, werden wir im Wesentlichen wie bei den Registerkarten vorgehen. Wir müssen auch die Schaltfläche richtig schweben lassen und einige Ränder haben.

p#read-more-wrapper {
	float:right;
	margin-top:10px;
	width:215px;
}

p#read-more-wrapper a {
	background:url('../img/read-more-button.png') no-repeat;
	border:none;
	display:block;
	height:30px;
	text-indent:-9000px;
	width:214px;
}

p#read-more-wrapper a:hover {
	background-position: 0px -30px;
}

p#read-more-wrapper a:active {
	background-position: 0px -60px;
}

Wir sind nun fertig mit dem Blogmodul! Schauen wir uns an, wie es aussieht.

Das Twitter-Modul

Dies ist so ziemlich das gleiche wie das Blog-Modul, also werde ich es einfach schneller durchgehen.

Ich denke, es besteht keine Notwendigkeit zu erklären, wie Sie vorgehen sollten, um den Hintergrund der Kopfzeilenleiste zu erhalten. Denken Sie daran, den Text vor dem Zusammenführen auszublenden. Nennen Sie dieses Bild twitter-header-bar.png.

Wir fügen dem Feld einige Ränder und eine Breite hinzu und fügen dann den Hintergrund der Kopfzeilenleiste wie beim Blog hinzu.

div#twitter {
	margin: 38px 0px 0px 415px;
	width: 375px;
}

div#twitter h4.module-header-bar {
	background: url('../img/twitter-header-bar.png') no-repeat;
	height: 40px;
	padding-top: 26px;
	width: 385px;
}

Danach stylen wir einfach jeden Tweet. Beachten Sie nur, dass wir das Bild schweben lassen, damit es links neben dem Namen erscheint. Ränder und Abstände werden nach dem Boxmodell festgelegt.

div#twitter div.tweet {
	margin: 3px 0px 17px 30px;
}

div#twitter div.tweet img {
	border: 1px solid #757575;
	float: left;
	height: 29px;
	margin-right: 15px;
	width: 29px;
}

div#twitter div.tweet h5 {
	position: relative;
	top: -3px;
}

Der Grund, warum wir den h4 so positioniert haben, ist, dass die standardmäßige Zeilenhöhe von Myriad Pro etwas unkonventionell ist. Machen Sie sich jedoch keine Sorgen, wenn Sie Ihren Code nicht mit Position: relativ füllen möchten, es ist nur ein kleines Detail, das wir hier korrigieren.

Ersetzen Sie für die Schaltflächen "Weitere Tweets" einfach den Text in Ihrem Weiterlesen-Sprite und speichern Sie ihn erneut, diesmal als get-more-tweets-button.png. Danach verwenden wir genau die gleiche Technik, die wir für die Schaltfläche Weiterlesen verwendet haben.

p#get-tweets-wrapper {
	float:right;
	margin-top:9px;
	width:215px;
}

p#get-tweets-wrapper a {
	background: url('../img/get-tweets-button.png') no-repeat;
	border: none;
	display: block;
	height: 30px;
	text-indent: -9000px;
	width: 214px;
}

p#get-tweets-wrapper a:hover {
	background-position: 0px -30px;
}

p#get-tweets-wrapper a:active {
	background-position: 0px -60px;
}

Mit der Fertigstellung dieses Twitter-Moduls beenden wir auch das Content-Styling! Ich weiß, es war wirklich lang, aber schau dir nur an, was wir produziert haben. Ich glaube, es hat sich gelohnt!

Es fängt wirklich an, großartig auszusehen!

Die Fußzeile

Unsere Fußzeile besteht aus zwei Teilen. Der erste ist das Bild und der andere ist der Textteil.

Aus den gleichen Gründen mussten wir das Header-Bild ein wenig bearbeiten, wir müssen auch die Kanten des Footer-Bildes auf #6eb9cc ausblenden. Kopieren Sie einfach das Bild in ein neues Dokument und verwenden Sie dazu das Verlaufswerkzeug (G). Speichern Sie dies in PNG 8 und nennen Sie es Footer-Image.

Um dies unserem Dokument hinzuzufügen, verwenden wir fast genau den gleichen Code wie für den Header.

div#footer-image {
	background: url('../img/footer-image.png') no-repeat #6eb9cc;
	border-top: 2px groove #ffffff;
	border-bottom:2px ridge #ffffff;
	height:50px;
	width:100%;
}

Schließlich fügen wir für den Fußzeilentext das bereits erstellte Bild content-top-shadow.png als Hintergrundbild hinzu, um den Schatteneffekt zu erzeugen. Natürlich legen wir auch Höhe, Breite und etwas Polsterung fest.

p#footer-text {
	background: url('../img/content-top-shadow.png') repeat-x;
	height: 37px;
	padding-top: 13px;
	width: 100%;
}

Fertig mit dem CSS

Und das war es; wir sind jetzt mit dem CSS fertig! Das war ziemlich schwierig, oder? Wichtig beim Codieren eines Layouts ist, logisch vorzugehen und sich immer an das Box-Modell zu erinnern. Sobald Sie wissen, was Sie damit tun, werden Sie viel effizienter codieren und müssen nicht mehr so viel mit browserübergreifenden Fehlern kämpfen. So sieht unsere Seite in Firefox aus:

Ich kann Ihnen versichern, dass diese Seite in IE 8, Safari 3 und 4, Chrome 1 und 2, Firefox 3 und Opera 9.5 genau gleich aussieht! Wenn wir uns jetzt jedoch ansehen, wie es im IE 7 aussieht, werden wir mehrere Mängel feststellen. Wenn Sie IE 7 nicht auf Ihrem Computer haben, führen Sie IE 8 einfach im Kompatibilitätsmodus aus und Sie sehen die Seite genau wie in IE 7.

Diese Themen sind zum Beispiel:

Statusleiste ist zu dünn
Die Aktionsleiste ist nicht richtig positioniert und das Fehlen von :before macht die Polsterung verrückt
Der Seitenwrapper ist nicht richtig positioniert
Der Titel der Diashow ist nicht richtig positioniert.

Das mag viel aussehen, ist es aber nicht. Sie können leicht mit dem !important-Hack oder einem bedingten Kommentar behoben werden. Ich mag CSS-Hacks nicht, also bleibe ich bei einem bedingten Stylesheet. Sie können jedoch jede gewünschte Technik verwenden.

Beheben von IE-Problemen

Ich sagte, wir würden bedingte Kommentare verwenden. Was sind diese? Nun, sie sind einfach eine Möglichkeit, auf die Browser von Microsoft abzuzielen und ein bestimmtes Tag oder eine Gruppe von Tags zu verwenden, die nur im IE angezeigt werden. Andere Browser interpretieren dies nur als Kommentar und zeigen das Tag daher nicht an. In unserem Fall werden wir in diesem Kommentar ein Link-Tag zu einem externen Stylesheet einfügen.

1	<!--[if IE 7]>
2	<link rel="stylesheet" media="screen" type="text/css" title="Style" href="css/ie7.css" />
3	<![endif]-->

Sobald dieses Stylesheet enthalten ist, können wir mit der Behebung der wenigen Probleme beginnen, mit denen wir konfrontiert sind. Erstellen Sie ein neues Stylesheet namens ie7.css und speichern Sie es in unserem CSS-Ordner.

Als erstes müssen wir die Höhe der Statusleiste festlegen. Nichts zu kompliziert, stellen Sie einfach eine neue Höhe ein und stellen Sie sicher, dass der Hintergrund unten angebracht ist, da er nicht 50 Pixel hoch ist, sondern nur 40 Pixel.

1	div#status-bar {
2	background-position: bottom;
3	height: 50px;
4	}

Wir müssen dann das Problem beheben, das aufgrund der Tatsache, dass IE 7 das Pseudoformat :before und :after nicht unterstützt, auftritt. Anstatt den Links in der Aktionsleiste Pipes mit Hintergrundbildern oder ähnlichem hinzuzufügen, platzieren wir die Links einfach etwas mehr und zentrieren sie. Wir müssen auch die Tatsache beheben, dass der IE nicht versteht, wie Elemente, die sich nicht über dem Container im Quellcode befinden, korrekt schweben. Dies kann durch eine absolute Positionierung und Fixierung des Randes links erfolgen.

p#action-bar {
	margin-left: 50px;
	position: absolute;
	text-align: center;
	top: 10px;
}

p#action-bar a {
	margin-right: 5px;
}

Danach haben wir das Problem mit der Position des Seitenwrappers. Hier ist nichts zu kompliziert zu lösen, verwenden Sie einfach das Boxmodell zu Ihrem Vorteil. Wir verwenden diesen Selektor auch, um den Überabstand am unteren Rand des Inhalts-Divs zu entfernen.

div#content {
	padding-bottom: 0px;
	padding-top: 75px;
}

ul#tabs {
	top: 10px;
}

IE scheint unseren Folientitel nicht richtig anzuzeigen, da wir eine relative Positionierung dazu festgelegt haben. Ändern Sie dies einfach in absolut und setzen Sie die oberen und linken Eigenschaften zurück.

div#slideshow-commands h4 {
	left: 0px;
	position: absolute;
	top: 4px;
}

Schließlich kommt es vor, dass der IE die Auffüllung zwischen dem Eintragstitel und seinem Inhalt im Blog-Modul verdoppelt. Wir können dies beheben, indem wir den halben Wert darauf setzen.

1	div.blog-entry blockquote {
2	padding-top: 5px;
3	}

Okay, Sie können jetzt unser Design in IE 7 überprüfen und sehen, dass es auch gut funktioniert!

Schritt Sechs – Das JavaScript

Dies wird nicht sehr kompliziert sein. Wir werden jQuery, das jQuery Cycle Plugin und Cufón verwenden. Ich werde erklären, warum und wo Sie sie herunterladen können, während wir gehen.

Ich verwende hier JavaScript nach der Philosophie der progressiven Verbesserung. Offensichtlich funktioniert die Diashow im Moment nicht, wenn wir JavaScript nicht aktiviert haben, aber es könnte leicht sein, wenn wir der Seite einfach etwas PHP hinzufügen und die nächsten und vorherigen Links ändern. Dies ist jedoch nicht das Thema des Tutorials, daher werde ich es nicht behandeln. Denken Sie daran, dass es nur 5 Zeilen PHP-Code benötigen würde, damit es funktioniert. Das ist für die Diashow, die nach und nach verbessert wird. Wir glätten auch die Überschriften-Schriftarten mit einem JavaScript-Code. Dadurch können wir jede gewünschte Schriftart verwenden, auch wenn der Leser sie nicht auf seinem Computer installiert hat. Wenn der Leser kein JavaScript aktiviert hat, wird ihm nur eine Fallback-Schrift angezeigt.

jQuery

Wir werden in diesem Tutorial nicht die gesamte Leistungsfähigkeit von jQuery nutzen. Es erleichtert uns jedoch die Dinge, also werden wir es in unser Projekt aufnehmen, obwohl es 19 zusätzliche Kilobytes sind.

Sie können die minimierte und YUI-komprimierte Version von jQuery von der offiziellen Website (http://jquery.com/) herunterladen, indem Sie einfach das Kontrollkästchen "Produktion" aktivieren und auf die große Schaltfläche "Herunterladen" klicken. Rufen Sie diese Datei jquery.js auf und legen Sie sie in unserem JS-Ordner ab.

Um die Leistungsfähigkeit von jQuery in unserem Template zu nutzen, müssen wir es natürlich aufrufen. Sie sollten den Code in Ihrem Kopfbereich platzieren.

1	<script type="text/javascript" src="js/jquery.js"></script>

Das ist es; jQuery lädt jetzt mit der Seite und ermöglicht es uns, alle ihre Eigenschaften und Methoden zu verwenden!

Cufón

Ich habe zuvor von einem JavaScript-Code zur Schriftglättung gesprochen, aber das ist es nicht wirklich. Mit Cufón können wir jede beliebige Schriftart in unserem Design verwenden, ohne dass der Leser sie unbedingt installiert haben muss.

Ich werde nicht auf die Grundlagen der Verwendung von Cufón eingehen, da Jeffrey Way hier bereits hervorragende Arbeit leistet: http://net.tutsplus.com/videos/screencasts/the-easiest-way-to-use-any -font-you-wish/.

Laden Sie Cufón einfach von dieser Seite herunter: http://cufon.shoqolate.com/generate/ und verwenden Sie den Online-Fontkonverter, um die Myriad Pro-Schriftart in eine JS-Datei zu konvertieren. Wenn Sie sich nicht sicher sind, wie das geht, sehen Sie sich Jeffs Tutorial an!

Speichern Sie die Cufón-Datei im JS-Ordner und nennen Sie sie cufon.js und die Schriftartdatei myriadpro.font.js.

Sobald sich diese im richtigen Verzeichnis befinden, müssen wir sie aus unserer index.html-Datei aufrufen. Fügen Sie im Kopfbereich unseres Markup-Dokuments script-Tags hinzu und verwenden Sie das src-Attribut, um die Dateien aufzurufen. Vergessen Sie nicht, dass das script-Tag nicht automatisch geschlossen wird. Sie können die Syntax <script /> nicht verwenden. Dies führt zu einer fehlgeschlagenen Validierung. Die Syntax, die Sie verwenden sollten, ist <script></script>, auch wenn das Tag leer ist.

1	<script type="text/javascript" src="js/cufon.js"></script>
2	<script type="text/javascript" src="js/myriadpro.font.js"></script>

Wenn Sie die Seite neu laden, sehen Sie, dass... nichts passiert ist. Dies liegt daran, dass wir die Cufón-Textersetzung aufrufen und angeben müssen, welche Tags geparst werden sollen.

Öffnen Sie ein neues Skript-Tag, aber anstatt eine externe JS-Datei aufzurufen, schreiben wir unseren Code einfach direkt in unsere HTML-Datei. Wir können dies tun, weil wir eine einzige Codezeile verwenden. Sollte Ihr Code jedoch länger sein, sollten Sie ihn in eine externe Datei legen. Die Methode zum Auslösen der Ersetzung ist Cufon.replace() und nimmt das zu ersetzende Tag als Argument. Da wir jQuery bereits aufgerufen haben, können wir auch die CSS-Selektor-Engine verwenden, um die richtigen Tags abzufangen.

Der Code, den Sie in Ihren HTML-Code einfügen könnten, würde so aussehen:

1	<script type="text/javascript">
2	Cufon.replace('h1, h2, h3, h5');
3	</script>

Wir zielen einfach auf die Überschriften-Tags ab und Cufón lässt die Magie geschehen. Laden Sie die Seite neu und Sie können jetzt sehen, wie Cufón alle unsere h-Tags reibungslos durch Bilder ersetzt hat, die im Handumdrehen erstellt wurden!

Was passiert, wenn der Leser JavaScript nicht aktiviert hat? Nun, die verwendete Schriftart ist die, die in unserem CSS angegeben ist! Wenn der Leser Myriad Pro besitzt, wird es verwendet, auch wenn es nicht geglättet wird, und wenn nicht, wird eine unserer Fallback-Schriftarten verwendet. Es ist die Schönheit der progressiven Verbesserung.

Die Diashow

In unserem letzten Schritt geht es darum, die Diashow lebendig zu machen. Dazu verwenden wir ein unglaublich nützliches jQuery-Plugin namens jQuery Cycle Plugin. Sie können es hier herunterladen: http://malsup.com/jquery/cycle/lite/. Wir werden keine komplizierten Übergänge verwenden, daher wird die Lite-Version problemlos funktionieren. Das Tolle daran ist, dass es nur 3kb groß ist!

Stellen Sie sicher, dass Sie die YUI-komprimierte Version des Plugins herunterladen, legen Sie sie dann in unseren JS-Ordner und nennen Sie sie cycle.js. Wir müssen es dann natürlich von unserem HTML aus aufrufen. Platzieren Sie den Aufruf des Cycle-Plugins unter dem Aufruf von jQuery, um sicherzustellen, dass das Plugin an die Bibliothek angehängt wird!

1	<script type="text/javascript" src="js/cycle.js"></script>

Wir müssen dann den Effekt mit etwas JavaScript-Code auslösen. Hier können wir einige Optionen angeben, z. B. Vorherige und Nächste Befehle, Verzögerung usw. Wir werden diesen Code natürlich in eine neue Datei namens slideshow.js im JS-Ordner einfügen, die wir dann aus unserem HTML-Code aufrufen.

Bevor wir mit dem Programmieren beginnen, müssen wir entscheiden, was unsere Diashow tun soll. Das Standardverhalten besteht darin, jedes Element aus einem angegebenen Container zu nehmen und sie dann gleiten zu lassen, wobei die anderen ausgeblendet werden. Das ist gut, da wir alle unsere Diashow-Bilder in einem Container mit der ID "Slides" ablegen. Wie soll es sich verhalten? Nun, alle 5 Sekunden sollte die Folie wechseln, aber sie sollte auch die Folie wechseln, wenn wir auf klicken die Schaltfläche Zurück oder Weiter. Wir möchten auch, dass die Diashow anhält, wenn wir mit der Maus darüber fahren. Das ist gut, weil es den Leuten Zeit zum Klicken gibt, wenn sie an der aktuellen Folie interessiert sind.

Glücklicherweise ist dies alles mit dem Cycle-Plugin extrem einfach. Sobald das DOM fertig ist, lassen Sie jQuery den #slides-Container holen und starten Sie die Diashow mit der Methode cycle(). Dann können wir mit einem anonymen Objekt, das wir als Argument übergeben, das Verhalten auf das gewünschte Verhalten einstellen.

So sollte Ihr Code aussehen:

$(document).ready(function()
	{
		$('#slides').cycle({
				prev 	: '#previous-slide',
				next 	: '#next-slide',
				timeout : 5000,
				pause 	: 1
			});
	});

Wofür stehen diese Eigenschaften? Nun, prev und next sind offensichtlich die IDs unserer Befehle Zurück und Weiter, Verzögerung ist die Zeit zwischen den einzelnen Folien in Millisekunden, und wenn Pause auf 1 gesetzt ist, wird die Folie beim Schweben angehalten.

Wenn wir die Seite neu laden, können wir das Bild gut gleiten sehen und die vorherigen und nächsten Befehle funktionieren einwandfrei! Der Titel ist jedoch unaufhaltsam derselbe. Wir können dieses kleine Problem lösen, indem wir vor jedem Sliding eine Funktion aufrufen. Die Funktion ruft nur das alt-Attribut und das href-Attribut der nächsten Folie ab, um das h4 und den Link korrekt ersetzen zu können. So sieht die Funktion aus:

function changeTitle()
	{
		var title = $(this).find('img').attr('alt');
		var href = $(this).attr('href');

		$('#slide-title').text(title).attr('href', href);
	}

Dies funktioniert jedoch nur, wenn wir angeben, dass diese Funktion vor jedem Folienwechsel aufgerufen werden soll.

Dazu müssen wir lediglich die Eigenschaft "before" in unserem anonymen Konfigurationsobjekt angeben. Diese Eigenschaft sollte auf den Namen der Funktion gesetzt werden. Sie sollten den Namen der Funktion nicht in Anführungszeichen setzen.

So sieht der vollständige Arbeitscode aus:

$(document).ready(function()
	{
		$('#slides').cycle({
				prev 	: '#previous-slide',
				next 	: '#next-slide',
				timeout : 5000,
				pause 	: 1,
				before 	: changeTitle
			});
	});

function changeTitle()
	{
		var title = $(this).find('img').attr('alt');
		var href = $(this).attr('href');

		$('#slide-title').text(title).attr('href', href);
	}

Großartig, wenn wir die Seite jetzt neu laden, sehen wir unsere Diashow so, wie wir es wollten, und das nur mit ein paar Zeilen Code! Das ist die Stärke von jQuery und seinen Plugins.

Schritt sieben – Letzte Gedanken

Wir haben jetzt unser gesamtes Website-Layout mit xHTML 1.0, CSS 2.1 und JavaScript basierend auf der in Teil I entworfenen Vorlage codiert. Sie können jede einzelne Datei aus dem Projekt überprüfen und sehen, dass sie zu 100% gültig ist! Dies ist wichtig, um sich daran zu erinnern, da es die Zugänglichkeit und die Gesamtqualität Ihrer Codierung erheblich verbessern kann.

Ich hoffe aufrichtig, dass Ihnen diese Tutorial-Reihe gefallen hat, dass Sie einige neue Techniken gelernt haben und jetzt in der Lage sind, selbst hervorragende Webvorlagen zu erstellen! Ich freue mich zu sehen, was Sie in den Kommentaren geschafft haben.

Folgen Sie uns auf Twitter oder abonnieren Sie den NETTUTS-RSS-Feed für weitere tägliche Tutorials und Artikel zur Webentwicklung.