|
|
URL dieses Artikels:
zu Ausgabe:
8.2005
Webstandards und Dreamweaver
Jetzt erst recht
Holger Eggert
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 Sie wollen aber nicht alle DIV-Layer verändern, sondern nur den mit der Klasse .fliesstext. Wechseln Sie dazu wieder zur Stylesheet-Palette und legen Sie einen neuen Stil an. Dieses Mal wählen Sie aber als Selektor-Typ Klasse und als Namen .fliesstext (beachten Sie bitte den Punkt vor dem Namen, damit werden Klassen markiert). Das Fenster kennen Sie bereits. Suchen Sie sich eine Schrift, Schriftgröße, -Farbe und einen Zeilenabstand aus. Wechseln Sie dann zur Kategorie Positionierung. Sie können nämlich mit Stylesheets ein Element auch an eine andere Stelle verschieben. Den Fließtext schieben Sie ein wenig nach rechts, damit links eine weiße Spalte stehen bleibt. Wählen Sie als Typ absolut, dann geben Sie die Position abhängig von der linken oberen Ecke der Website an. Unter Positionierung habe ich für links 150 und für oben 100 Pixel. Je nachdem, wie groß Ihre Überschrift ist, müssen Sie diese Zahlen anpassen. Damit es noch schöner aussieht, lassen Sie unter der Kategorie Box bei Auffüllen den Absatz von rechts 10 Prozent einrücken. Achten Sie aber darauf, dass nicht Für alle gleich ausgewählt ist. In der Entwurfsansicht sehen Sie jetzt einen dünnen Rahmen um dem DIV-Container. Der ist später nicht mehr sichtbar, er ist nur zu Ihrer Orientierung da. Wenn Sie in den Rahmen klicken, können Sie den DIV-Layer auch mit dem kleinen Kästchen in der linken oberen Ecke positionieren. Testen Sie Ihre Website wieder in verschiedenen Browsern, um sicher zu sein. Noch mehr Stil: Der Text hat sich bewegt und hat mehr Zeilenabstand. Die Navigation. Die Links der Navigation stehen in einer ungeordneten Liste. Das ist sinnvoll, denn eine Navigation ist ja nichts anderes als eine Liste von Links. Trotzdem sollte sie nicht so aussehen. Auch dieser Liste werden Sie eine eigene Klasse zuweisen, nur machen Sie es diesmal anders herum. Zuerst legen Sie in der CSS-Palette eine neue Klasse mit dem Namen .navigation an. Ändern Sie mindestens eine Eigenschaft (beispielsweise die Schriftfarbe), damit Dreamweaver die Klasse auch speichert. Jetzt markieren Sie in der Entwurfsansicht die Liste. In der Eigenschaften-Palette können Sie nun unter Stil die Klasse vergeben. Zurück zu den Eigenschaften der Navigationsklasse. Zuerst sollten Sie unter der Kategorie Liste den Punkt vor den Links entfernen (Typ | keine). Dann können Sie die Position der Liste noch verändern, damit sie besser in das Design passt. Die einzelnen Listenelemente (die LI-Tags) verändern Sie wieder mit einem neuen CSS-Stil. Allerdings wollen Sie nicht sämtliche Listenelemente der gesamten Website verändern, sondern nur diejenigen, die zur Navigation gehören. In CSS kann man dafür Selektoren einsetzen. Klicken Sie wieder auf Neuer CSS-Stil und wählen Sie als Selektor-Typ Erweitert. Oben im Feld Selektor schreiben Sie jetzt .navigation li (achten Sie wieder auf den führenden Punkt). Damit verändern Sie alle LI-Elemente unterhalb eines .navigation-Elements. Geben Sie den Listeneinträgen eine eigene Hintergrundfarbe und spielen Sie etwas mit dem Rahmen und den Abständen herum. Mit etwas Geduld können Sie die Navigation wie kleine Buttons aussehen lassen. Damit ein Rahmen um ein Element angezeigt wird, müssen Sie einen Rahmenstil vergeben. Für den Internet Explorer am Mac müssen Sie den LI-Elementen eine feste Breite geben. Neue Navigation: Der Code für diese Navigation ist immer noch die einfache Liste Für den Text in der Navigation benötigen Sie ebenfalls einen neuen Stil, der dazugehörige Selektor ist .navigation a (für die Links). Sie könnten beispielsweise die Unterstreichung der Links deaktivieren, da sie durch den Rahmen und die Position bereits hinreichend als Navigation gekennzeichnet sind. Eigene Selektoren: Hier können Sie auch eigene Selektoren definieren. Die Navigation zum Zweiten. Eine horizontale Navigation können Sie ebenfalls sehr einfach mit Stylesheets erzeugen. Hier zeigt sich die Stärke der Webstandards: Sie müssen am HTML-Code nichts verändern, lediglich im Stylesheet. Speichern Sie dazu am besten beide Dateien unter neuen Namen ab. Dreamweaver sollte die HTML-Datei mit der neuen CSS-Datei verknüpfen; wenn das nicht klappt, ändern Sie bitte den Verweis im HTML-Code (bei link href=...). Für eine horizontale Navigation müssen Sie die LI-Elemente nebeneinander anordnen. Dazu dient die Eigenschaft Anzeigen in der Kategorie Block. Ein Listenelement ist ein sogenanntes Block-Element. Das heißt, es steht für sich alleine und nach dem Element kommt ein Zeilenumbruch. Eine Überschrift ist beispielsweise ebenfalls ein Block-Element, wohingegen ein Bild ein Inline-Element ist: Es fließt zusammen mit dem Text, der es umgibt. Damit die Listenelemente nebeneinander statt untereinander angezeigt werden, müssen Sie sie als Inline-Elemente auszeichnen, wählen Sie dazu bei Anzeigen die Option Inline. Natürlich ändern sich dadurch auch die Abstände zu den anderen Elementen, Sie können diese jedoch leicht anpassen. (Damit der Internet Explorer unter Windows die Abstände der Listenelemente richtig darstellt, müssen Sie diesen zusätzlich eine Höhe geben. Die darf auch Null sein.) Horizontale Navigation: Auch das geschieht nur mithilfe des Stylesheet Und weiter. Öffnen Sie die Datei styles.css, die Dreamweaver bisher für Sie angelegt hat. Hier sehen Sie, wie der CSS-Code in Wirklichkeit aussieht. Aber eigentlich müssen Sie sich darum nicht kümmern, das ist die Aufgabe von Dreamweaver. Stylesheet-Palette: Hier haben Sie alle Stile im Blick Die Website sieht trotz Stylesheet noch sehr spartanisch aus. Das ist Absicht, um den Rahmen dieses kleinen Workshops nicht zu sprengen. Sie könnten mit den Hintergrundfarben der Liste weiter herumexperimentieren. Sie können auch der Überschrift etwas mehr Farbe verleihen oder als Hintergrund Bilder einsetzen. Oder Sie geben dem letzten Absatz mit dem Copyright-Hinweis eine eigene Klasse und setzen ihn so etwas vom Fließtext ab? Es stehen alle Möglichkeiten offen. Dies ist nur ein sehr kleiner Einblick in die Möglichkeiten, die Ihnen XHTML, CSS und Dreamweaver bieten. Am meisten lernen Sie, indem Sie mit der Stylesheet-Palette spielen und die Ergebnisse in möglichst vielen verschiedenen Browsern testen (mindestens jedoch in Mozilla und Internet Explorer). Und wenn Sie eine schöne Website im Netz finden, schauen Sie sich den Quellcode davon an. schließlich ist das der Vorteil von offenen Standards, dass man immer sehen kann, wie etwas gemacht ist. Listing 1 Das komplette Stylesheet für die Website h1 {
Listing 2 Code der XHTML-Seite (Blindtext gekürzt) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> Autor Holger Eggert Holger Eggert ist die eine Hälfte von HS-2, einem Büro für Design in München. Er schreibt für Fachzeitschriften und ist außerdem Dozent für Design, Flash und Datenbanken. Sie finden ihn im Netz unter www.hs-2.de. |
||
|
