Das Dokument erzeugen
(Auszug aus "CSS − Anspruchsvolle Websites mit Cascading Stylesheets" von Rachel Andrew & Dan Shafer)
Nachdem wir entschieden haben, welches die Hauptkomponenten unserer Seite sein werden, können wir mit der Arbeit beginnen. Als Erstes erzeugen wir ein XHTML-Dokument, das alle Textelemente, die wir in unserer Layout-Grafik sehen, als korrekt ausgezeichnete XHTML-Elemente enthält.
Zunächst mag Ihnen diese Arbeitweise ein bisschen seltsam vorkommen, besonders, wenn Sie daran gewöhnt waren, in visuellen Umgebungen zu arbeiten, wie etwa Dreamweaver, und sich lediglich darauf konzentriert hatten, wie das Design aussieht. Einer der Vorteile beim Entwickeln von Layouts mit CSS ist jedoch, dass man die Struktur der Seite und ihre Darstellung voneinander trennen kann. Dadurch können wir uns auf die Erstellung eines guten und soliden Dokuments als Grundlage unserer Seite konzentrieren, bevor wir sie mit CSS gestalten.
Wir beginnen mit den Grundvoraussetzungen eines Dokuments, das die Vorgaben von XHTML.strict erfüllt. Da wir für alle gestalterischen Elemente dieser Seite CSS benutzen werden, gibt es nichts, was gegen die Verwendung einer Strict-DOCTYPE-Deklaration spricht. Mit den Transitionalen DOCTYPEs (sowohl für XHTML als auch HTML 4.01) können Attribute und Elemente verwendet werden, die in den W3C-Empfehlungen als veraltet bezeichnet sind. Diese veralteten Elemente und Attribute werden hauptsächlich zur Präsentation benutzt, und da wir CSS — und nicht XHTML — für das Aussehen der Seite benutzen, brauchen wir sie ohnehin nicht.
Beispiel: index.html
Den Zeichensatz deklarieren
In unseren Seiten haben wir das Element meta mit dem Attribut http-equiv="Content-Type" benutzt, um den Zeichensatz unseres Dokuments zu deklarieren. Damit kann der Browser (und der W3C-Validator) einfach feststellen, welcher Zeichensatz in dem Dokument verwendet wird. Falls diese Information fehlt, könnte der Browser die Zeichen in der Seite falsch interpretieren und somit Seiten als unverständlichen Müll anzeigen.
Alle Beispiele in diesem Buch benutzen den ISO-8859-1-Zeichensatz, der in den meisten gebräuchlichen Texteditoren und Programmen, wie etwa Dreamweaver, voreingestellt ist. Wenn Sie es mit einem anderen Zeichensatz zu tun haben, beispielsweise Unicode, müssen Sie die meta-Elemente entsprechend ändern.
Die Kopfleiste
Fangen wir an, die Inhalte der Seite in unser Dokument einzufügen. Bei dieser Aufgabe werden wir das Dokument in die bereits identifizierten Bereiche einteilen, indem wir jeden Bereich der Seite in <div>- und </div>-Tags einschließen. Für jeden <div> geben wir das Attribut id an und benennen so die entsprechenden Abschnitte. Damit sprechen wir jeden Bereich einzeln an und gestalten ihn mit CSS.
Nach dem <body>-Element fügen wir folgenden HTML-Code ein:
<div id="header">
<p>The Home of the Hack</p>
<ul>
<li><a href="">Contact Us</a></li>
<li><a href="">About Us</a></li>
<li><a href="">Privacy Policy</a></li>
<li><a href="">Sitemap</a></li>
</ul>
</div> <!-- header -->Wir machen uns zum jetzigen Zeitpunkt noch keine Gedanken über Bildelemente, weil es zahllose Möglichkeiten gibt, Bilder mit CSS in Seiten einzufügen. Welche davon am besten geeignet ist, entscheiden wir für jedes Bild, wenn wir unseren CSS-Code schreiben. Deshalb enthält die Kopfleiste nur die Überschrift »The Home of the Hack« und eine Liste mit den Links für die Hauptnavigation.
Der Hauptbereich
Als Nächstes kommt der Hauptbereich, der in ein <div>-Element mit dem id-Attribut-Wert content eingeschlossen ist.
<div id="content">
<h2>Simon Says</h2>
<p>Simon Mackie tells us how a change of shoes has given him new moves and a new outlook as the new season approaches.</p>
<p><a href="">Read More</a></p>
<h2>Recent Features</h2>
<ul>
<li>
<h3>Head for the Hills: Is Altitude Training the Answer?</h3>
<p>Lachlan 'Super Toe' Donald</p>
<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent hendrerit iaculis arcu.</p>
<p><a href="">Full Story</a></p>
</li>
<li>
<h3>Hack up the Place: Freestylin' Super Tips</h3>
<p>Jules 'Pony King' Szemere</p>
<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent hendrerit iaculis arcu.</p>
<p><a href="">Full Story</a></p>
</li>
<li>
<h3>The Complete Black Hat Hacker's Survival Guide</h3>
<p>Mark 'Steel Tip' Harbottle</p>
<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent hendrerit iaculis arcu.</p>
<p><a href="">Full Story</a></p>
</li>
<li>
<h3>Five Tricks You Didn't Even Know You Knew</h3>
<p>Simon 'Mack Daddy' Mackie</p>
<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent hendrerit iaculis arcu.</p>
<p><a href="">Full Story</a></p>
</li>
</ul>
</div> <!-- content -->Dieser Bereich soll das große Bild mit dem eingeblendeten Text enthalten, der einen längeren Beitrag hervorhebt. Darunter sollen vier neue Einträge angezeigt werden.
Die Seitenleiste
Zum Schluss fügen wir noch die Seitenleiste hinzu, die ein Suchformular und einige wichtige Termine enthält:
<div id="sidebar">
<h3>Site Search</h3>
<form method="post" action="" id="searchform">
<div>
<label for="keywords">Keywords</label>:
<input type="text" name="keywords" id="keywords" />
</div>
<div>
<input type="submit" name="btnSearch" id="btnSearch" />
</div>
</form>
<h3>Coming Events</h3>
<ul>
<li>10 Apr 06 -<br /><a href="">Seattle Zone Qualifier</a></li>
<li>13 Apr 06 -<br /><a href="">World Cup - Round 8</a></li>
<li>21 Apr 06 -<br /><a href="">FootbagOOM 05 - NY</a></li>
<li>28 Apr 06 -<br /><a href="">WFPA AGM - Hong Kong</a></li>
<li>3 May 06 -<br /><a href="">World Cup - Round 9</a></li>
</ul>
<h3>Move of the Month</h3>
<h4>The Outer Stall</h4>
<p>Eti bibendum mauris nec nulla. Nullam cursus ullamcorper quam. Sed cursus vestibulum leo.</p>
<p><a href="">more</a></p>
</div> <!-- sidebar -->Damit sind die Auszeichnungen für unsere Seite komplett. Speichern Sie Ihre Seite und betrachten Sie sie im Browser. Die Inhalte der Seite werden mit den Standardeinstellungen Ihres Browsers für die verwendeten Elemente angezeigt, wie Sie in der folgenden Abbildung sehen. Es sieht zwar nicht hübsch aus, aber es ist leicht lesbar!
Abbildung: So sieht die Seite aus, wenn sie nur Text enthält.
Bevor wir CSS-Code in die Seite einfügen, um damit das Design der Beispielgrafik nachzubilden, bleibt uns noch als letzte Aufgabe, die Seite zu validieren. Wenn wir die Datei zum jetzigen Zeitpunkt prüfen, sind wir sicher, dass wir CSS in ein gültiges Dokument einfügen: Wir werden keine Probleme bekommen, die durch fehlerhafte Auszeichnungen verursacht werden.
| << zurück | vor >> |
| Tipp der data2type-Redaktion: Zum Thema CSS bieten wir auch folgende Schulungen zur Vertiefung und professionellen Fortbildung an: |
Copyright © 2006 der deutschen Übersetzung dpunkt.verlag GmbH
Für Ihren privaten Gebrauch dürfen Sie die Online-Version ausdrucken.
Ansonsten unterliegt dieses Kapitel aus dem Buch "CSS − Anspruchsvolle Websites mit Cascading Stylesheets" denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.
dpunkt.verlag GmbH, Ringstraße 19, 69115 Heidelberg