Es gibt viele Gründe, welche früher gegen den Einsatz von Webstandards sprachen. Die vier häufigsten davon sind jedoch schon seit einiger Zeit hinfällig.
Grund 1: Webstandards braucht niemand. Das stimmt nicht, denn Webstandards helfen Ihnen und den Besuchern Ihrer Website. Ihre Website wird kleiner, sie lädt schneller, funktioniert auf mehreren Browsern (auch auf Spezial-Browsern für Behinderte) und ist automatisch optimiert für Suchmaschinen. Eine ausführliche Diskussion dazu finden Sie im letzten MX Magazin.
Grund 2: Webstandards werden von keinem Browser unterstützt. Mittlerweile unterstützen alle aktuellen Browser XHTML und CSS; und das nicht erst seit der neuesten Version. Am besten machen sich dabei Mozilla und dessen Verwandte (Firefox, Camino, etc.). Safari mit der KHTML-Engine ist ebenfalls sehr gut. Sogar der Internet Explorer lässt sich in der Version 6 zu einer korrekten Darstellung von Stylesheets überreden. Und ein alter Browser zeigt wenigstens den Inhalt der Website richtig an, während er bei altmodischem HTML mit Tabellen und blinden GIF-Bildern komplett durcheinander gerät.
Grund 3: Webstandards werden von keinem Design-Programm unterstützt. Dieses Argument ist spätestens seit Dreamweaver MX 2004 hinfällig. Macromedia hat bei der letzten Version ganz besonders auf korrekten XHTML- und CSS-Code geachtet und Dreamweaver ist in der Tat der beste graphische Editor für Webstandards geworden.
Grund 4: Webstandards sind kompliziert. Das ist ebenfalls nicht richtig und als Beweis dient dieser Workshop. Sie werden im Laufe dieses Artikels eine Website in XHTML und CSS erstellen und sehen, dass Webstandards alles andere als kompliziert sind. Im Gegenteil - wenn Sie bereits Erfahrung mit Layout-Programmen wie QuarkXPress oder InDesign haben, werden Sie sich sofort zurechtfinden.
Die Seite. Auf der Heft-CD finden Sie alle Dateien für den Workshop. In der Datei website.txt steht der Text der Seite (formatiert als Unicode UTF-8), sie brauchen ihn also nicht noch einmal abschreiben.
Reiner Text: Aus diesem Text werden Sie eine Website bauen
Starten Sie Dreamweaver MX 2004 und öffnen Sie eine neue, leere Seite. Aus den Vorlagen wählen Sie Einfache Seite und dann HTML. Unten rechts können Sie wählen, ob Sie die Website in HTML oder XHTML schreiben wollen, aktivieren Sie hier Dokument XHTML-kompatibel machen. Sie haben nun die leere Website vor sich. Wechseln Sie in die Code-Ansicht und Sie sehen, daß Dreamweaver als Doctype automatisch XHTML 1.0 Transitional gewählt hat. Jetzt wäre ein guter Zeitpunkt, die Datei zu speichern.
Öffnen Sie die Datei website.txt und kopieren Sie den Inhalt in die Website. Dreamweaver verhält sich unterschiedlich, je nachdem, ob Sie den Text in der Code- oder in der Entwurfsansicht hinein kopieren. In der Entwurfsansicht fügt Dreamweaver automatisch Paragraphen und Zeilenumbrüche mit ein (im Gegensatz zu früheren Versionen, als Dreamweaver nur Zeilenumbrüche einfügte). Speichern Sie die Datei erneut und öffnen Sie sie in einem Browser. Sie sollte jetzt ungefähr so wie in nebenstehendem Bild aussehen. Wenn Sie nur einen langen Textblock sehen, haben Sie den Text in der Codeansicht eingefügt. Löschen Sie ihn wieder und wechseln Sie in die Entwurfsansicht, bevor Sie ihn hinein kopieren.
Eine einfache XHTML-Seite. In der Entwurfsansicht können Sie dem Text jetzt Auszeichnungen vergeben. Die erste Zeile beispielsweise soll die Überschrift sein. Markieren Sie dazu die Zeile, wechseln Sie zur Eigenschaften-Palette und wählen Sie unter Format die Option Überschrift 1. Wenn Sie in die Code-Ansicht wechseln, sehen Sie, dass Dreamweaver um die Überschrift H1-Tags geschrieben hat (wechseln Sie danach wieder zur Entwurfsansicht). Die nächsten vier Zeilen werden die Navigation bilden. Markieren Sie diese und wandeln Sie sie in eine ungeordnete Liste um. Sie müssen die Zeilen der Liste selber anlegen, da Dreamweaver nur Zeilenumbrüche (BR-Tags) und keine Absätze eingefügt hat. Markieren Sie nacheinander die Zeilen der Liste und wandeln Sie diese in Links um. Sie können dazu beliebige Adressen eingeben, oder aber die Raute (#). Speichern Sie die Seite wieder und schauen Sie sie an. Sie sehen eine Website in XHTML mit einer Überschrift und einer Liste von Links. Im Prinzip wäre die Seite damit fertig, herzlichen Glückwunsch. Aber das ist nicht ganz, was Sie sich unter einer schönen Website vorstellen, oder? (An dieser Stelle können Sie auch die Datei website_01.html von der Heft-CD öffnen und damit weiterarbeiten.)
XHTML: So schaut die Website mit korrektem XHTML, aber noch ohne Design aus.
Die Website bekommt Stil. Mithilfe von Stylesheets werden Sie die Website jetzt etwas schöner gestalten. Sie können CSS auf verschiedene Arten in die XHTML-Seite einfügen: Sie können jedes Element mit einem Stil versehen, Sie können am Anfang der Datei ein paar Stile für alle Elemente festlegen oder Sie packen die Stile in eine separate Datei und binden diese dann über einen Link ein. Die erste Option bläht den Code wieder auf, wie es bei früheren Websites mit Tabellen der Fall war, daher scheidet diese Möglichkeit aus. Statt dessen sollten Sie bei einer einzelnen Seite die Stile in die XHTML-Datei mit einbinden und bei mehreren Seiten einer Website die Stile in eine eigene Datei auslagern. So können Sie die gleichen Stile mehrmals einbinden und bei Bedarf das Design der Website an einer zentralen Stelle ändern.
Das Elegante an Stylesheets: Sie können bestehenden HTML-Elementen ein neues Design geben. Klicken Sie im Menü Fenster auf CSS-Stile, um die Stylesheet-Palette zu öffnen. Klicken Sie dann auf das Icon Neuer CSS-Stil in der Palette. Wählen Sie als Selektor-Typ Tag und als Tag H1. Unten können Sie auswählen, ob die Stile in der XHTML-Datei gespeichert werden sollen oder in einer eigenen CSS-Datei. Obwohl es in diesem Workshop nur um eine einzelne Datei geht, speichern Sie die Stile trotzdem in einer neuen Stylesheet-Datei ab. Dreamweaver wird Sie jetzt auffordern, einen Namen dafür anzugeben.
Sie sehen jetzt das Fenster, in welchem Sie die Stile definieren. Sie könnten beispielsweise eine neue Schriftart für die Überschrift auswählen oder eine neue Farbe. Sie können auch die Abstände vor und nach der Überschrift verändern. Alles, was Sie jetzt auswählen, gilt automatisch für alle Überschriften, die mit H1 definiert sind. Das ist das Schöne an Stylesheets - Sie brauchen keine zusätzlichen Tags mehr im XHTML-Code, um das Design kümmert sich eine separate Datei.
CSS in Dreamweaver: Hier editieren Sie Ihre Stile
Wenn Sie mit Ihrer Überschrift zufrieden sind, speichern Sie die Datei und öffnen Sie sie wieder im Browser. Von Zeit zu Zeit sollten Sie das Design in verschiedenen Browsern überprüfen, um sicherzustellen, daß es auch in allen gut aussieht.
Neue Überschrift: Die Überschrift wird nach dem Stylesheet formatiert
Im Quellcode der HTML-Datei sehen Sie übrigens ein neues Element namens Link. Hier wird die CSS-Datei mit der Website verknüpft.
Die Website bekommt nicht nur Stil, sondern auch Klasse. Es gibt Fälle, da wollen Sie einen Stil nicht für alle Elemente anwenden. So schön dieser Automatismus auch ist, manchmal brauchen Sie mehr Kontrolle über das Design. Dafür können Sie einzelnen Elementen gezielt einen Stil geben, entweder über deren ID oder indem Sie eine neue Stil-Klasse anlegen.
Doch zuerst wechseln Sie kurz in die Code-Ansicht. Der Fließtext der Website ist noch nicht besonders schön und damit Sie ihn leichter verändern können, packen Sie ihn in einen DIV-Layer. Schreiben Sie dazu vor dem ersten Absatz (vor dem ersten P-Tag und nach dem letzten UL-Tag) folgende Zeile: <div class="fliesstext">. Und nach dem letzten Absatz des Blindtextes, nach dem Copyright-Vermerk, schreiben Sie
. So legen Sie um den ganzen Text einen DIV-Container, den Sie mit einem neuen Stil versehen können. Stile werden von einem Element zum nächsten vererbt, deshalb erhält der Text in den Absätzen innerhalb des DIV-Layers das gleiche Format, welches Sie dem DIV-Layer geben, solange Sie nicht den Absätzen ein eigenes zuweisen. DIV-Layer haben absichtlich keine semantische Bedeutung in HTML, damit man sie überall einsetzen kann. Übertreiben Sie es damit aber nicht, sonst ist Ihr Code wieder so lesbar wie damals zu Tabellenzeiten.
Hat Ihnen dieser Artikel gefallen? Dann abonnieren Sie VISUAL-X direkt über unser
