Zunächst einmal: Beeilen Sie sich nicht und fangen Sie an! Treffen Sie zwei mentale Vorbereitungen, bevor Sie etwas tun. Das ist das Wichtigste für Ihren Lernprozess:
Lernen braucht Zeit und muss Schritt für Schritt erfolgen;
Unterwegs wird es Rückschläge geben.
Aber Sie sind nicht allein, viele von uns investieren in das Erlernen und Verwenden von Webstandards. Es gibt eine ständig wachsende Community, die Ihnen dabei hilft, leichter zu lernen, Veteranen, die viele Schwierigkeiten beim Erlernen von Techniken und Techniken hatten, und glückliche Nachzügler (ich eingeschlossen), die von ihrem Schweiß und ihren Tränen profitieren werden.
Wenn Sie sich endlich mit Webstandards-basierten Designmethoden auskennen (wodurch diese traditionellen tabellenbasierten Methoden in den Hintergrund treten), werden Sie rückblickend überrascht sein, dass das Layouten von Seiten mit CSS gar nicht so schwierig ist. Oh, natürlich, wenn Mainstream-Browser einige Vorgänge in der CSS2-Spezifikation besser unterstützen würden, wäre die Verwendung möglicherweise tatsächlich einfacher.
Nun ja, ich scheine ein wenig vom Thema abzuweichen.
Beginnen wir also gleich mit den tatsächlich nützlichen Informationen. Kaufen Sie zunächst ein Exemplar von „Designing With Web Standards“ (Anmerkung 1), denken Sie nicht zu viel nach, sondern machen Sie es sofort. Hast du schon eins? Nun, lesen Sie es jetzt und lassen Sie nicht zu, dass es verstaubt. Jeder Punkt, den ich ansprechen möchte, wird im Buch ausführlich erklärt. Das Buch ist in zwei gleiche Teile gegliedert, ein Manifest (warum Sie tun sollten, was Sie tun) und ein Tutorial (wie Sie es tun). Dies kann für Sie nützlich sein.
Der erste Schritt besteht darin, ein ideologisches Systemkonzept für XHTML zu etablieren, unabhängig davon, ob Sie sich für HTML4.01 oder eine nervenaufreibende Aufgabe entscheiden. Alle Dokumente beginnen mit der Auswahl eines DOCTYPE. Wenn Sie dem Browser mitteilen, welche Auszeichnungssprache Ihr Dokument verwendet, werden unnötige Leistungsfehler vermieden, die Sie sonst mit schlechten Seitenanzeigeergebnissen in den Wahnsinn treiben würden. Zum Beispiel: Wenn ich nach Chicago fliegen möchte, muss ich dem Reisebüro mitteilen, wohin ich fliegen möchte, sonst fliege ich möglicherweise ziellos nach Wien. Um HTML oder XHTML anzuzeigen, müssen Sie dem Browser zunächst mitteilen, dass durch die Einstellung des DOCTYPE sichergestellt wird, dass ich das „Ziel“ erreiche.
Nächstes Ziel: konsequent formatierte Logos. Das ist sehr einfach zu meistern. Alle Attribute zitieren (z. B. <a href="link">); alle offenen Tags schließen (z. B. <input type="text" />). Jedes Logo oder Element muss geschlossen sein.
Kurzer Hinweis: Ich weiß nicht, wann Tags zu Elementen wurden. Sie haben die gleiche Bedeutung, aber unterschiedliche Arten, sie auszudrücken. Wie auch immer man sie nennt, der richtige Name scheint jetzt „Elemente“ zu sein, vielleicht war das am Anfang auch so, ich weiß es nicht und niemand hat es mir gesagt.
Unabhängig davon muss jedes Element korrekt geschlossen werden. Wenn Sie HTML4.01 verwenden, können Sie einzelne Elemente wie <br>, <hr> und <input> ignorieren. Wenn Sie XHTML verwenden, müssen einzelne Elemente auch geschlossen werden, indem Sie am Ende einen Schrägstrich hinzufügen, zum Beispiel: <br > wird zu<br />.
Als nächstes gibt es eine etwas verwirrende Regel zu XHTML-Attributen: Alle Attribute müssen einen Wert haben, und wenn kein Wert vorhanden ist, wird der Wert selbst verwendet. Zum Beispiel <input type="radio" geprüft="checked" />. In HTML4.01 ist der geprüfte Wert nicht erforderlich, in XHTML jedoch erforderlich.
Schließlich erfordert XHTML, dass Sie den gesamten Code in Kleinbuchstaben schreiben. HTML unterscheidet nicht zwischen Groß- und Kleinschreibung, XHTML jedoch schon und folgt den Regeln der XML-Syntax.
Das ist alles über die Logo-Änderungen! Du weißt schon alles! Atmen Sie tief ein, trinken Sie ein Bier und entspannen Sie sich. Denn das ist nur der erste Schritt.
Abschnitt 2
Jetzt lernen wir, korrektes HTML/XHTMLL zu schreiben und es im Validator (Validator) der W3-Organisation zu validieren. Wenn Sie es richtig geschrieben haben, wird eine Erfolgsmeldung mit gelbem Text auf blauem Hintergrund angezeigt. Versuchen Sie, diese Farb-/Schriftkombination zu mögen, sie wird Ihr bester Freund sein.
Warum ist die Verifizierung so wichtig? Ist es wichtig? Denn schlecht geschriebene (zufällige, ungenaue) Logos führen zu völliger Unvorhersehbarkeit. Das „Leben und Sterben“ einer Seite hängt vollständig von der Fehlerbehandlungsmethode des Browsers ab. Obwohl die meisten Browser auch schlecht geschriebene Logos gut unterstützen können, ist dies eine falsche Angewohnheit. Hallo, warum gewöhnen wir uns an Nicht-Standards? Der erste Grund ist der Browserkrieg. Im Jahr 1995 konnte Microsoft mit Netscape konkurrieren und Marktanteile gewinnen, da der IE Webseitenfehler genauso behandelte wie Netscape.
Eine andere Perspektive: Die Validierung hilft Ihnen, fehlerhaften Code zu finden und stellt sicher, dass sich Ihre Seiten konsistenter verhalten. Das Überprüfen des Codes ist das Erste, was ich beim Debuggen eines Layouts mache, und ich glaube, Sie tun das auch.
OK, wenn Sie Ihre erste Website zum ersten Mal verifizieren, müssen Sie wahrscheinlich siebzig oder achtzig unglaubliche Fehlermeldungen ertragen. Leider ist die Prüfsumme zwar hilfreich, aber nicht perfekt und wird nur von wenigen Freiwilligen gepflegt. Die gute Nachricht ist, dass diese Fehler zusammenhängen. Wenn Sie feststellen, dass ein </p>-Tag fehlt, und es beheben, sind die nächsten 24 Fehler wahrscheinlich verschwunden. Kurz gesagt: Es sieht vielleicht so aus, als wäre das Verifizierungsergebnis schlecht, aber das ist oft nicht der Fall.
Jetzt haben Sie die Validierung bestanden und Ihr Code ist konform. Zu diesem Zeitpunkt halten Sie sich an eine strikte Richtlinie, wissen jedoch nicht genau, warum Sie dies überhaupt tun.
Abschnitt 3 Der nächste Schritt besteht darin, die von Ihnen erstellte Dokumentation mithilfe eines wohlgeformten Markups umzugestalten, die Attribute der Präsentationsschicht zu entfernen, die in neueren DOCTYPEs zunehmend als „veraltet“ aufgeführt sind, und sie in einer separaten Datei abzulegen. Dabei handelt es sich um die umstrittene „Trennung von Leistung und Struktur“, weshalb CSS so wichtig ist.
Hier ist eine Analogie: Ihr Text ist Inhalt. Der Inhalt ist vollständig, aber es gibt keinen Hinweis auf die Inhaltsstruktur (wie Leerzeichen, Abschnitte, Titel, Listen usw.). Sie erhalten lediglich einen unordentlichen Text, der überhaupt nicht einfach zu verwenden ist. Die Strukturebene ist zusätzlich. Einzelne Elemente werden dem Dokument hinzugefügt, um zusätzliche Strukturinformationen zu übermitteln, um den unübersichtlichen Text aufzulockern und ihn logischer und organisierter zu gestalten. Diese Elemente steuern jedoch nicht die Standarddarstellung des Textes. Beispielsweise stellt man häufig fest, dass der Titel auf der ersten Seite größer ist als die Textschrift. Dies ist keine Funktion der Struktur.
Es ist Zeit, dass die „Präsentationsebene“ erscheint. Bei der Darstellung handelt es sich um einen Formatierungshinweis, der angibt, dass der Titel der ersten Seite rot und kursiv geschrieben ist und die Schriftgröße 150 % der Hauptschriftart betragen soll. Die Präsentationsschicht ist eine zusätzliche Schicht über der Dokumentstrukturschicht. CSS gehört zur Präsentationsebene und kann Dokumente durch einfache Tags im Dokument in erstaunliche Formen umwandeln – besuchen Sie CSS Zen Garden, um Beispiele zu sehen.
Was ist also der beste Weg, Leistung von Struktur zu trennen? Nehmen wir zur Veranschaulichung einen traditionellen Code, der HTML-Elemente oder -Attribute enthält, die zur Bereitstellung der Präsentation verwendet werden. Es ist Zeit, diese bgcolors- und <center>-Tags abzuschneiden. Machen wir einen einfachen Test:
Welche Präsentationsattribute und Tags sollten im folgenden Democode entfernt werden?
<center><h1><font face="Verdana">Dies ist meine erste Website.</font></h1></center> <table border="0" cellpadding="0" cellpacing="0" > <body bgcolor="#ffffff" topmargin="0" leftmargin="0" marginwidth="0" marginheight="0"> <td bgcolor="#ffffff" valign="top" align="center">< p>Sie kommen, um mich mitzunehmen...</p></td>
Sind Sie mit Ihrer Antwort fertig? OK, unten ist das korrekte Ergebnis aufgeführt, bei dem es sich um sauber strukturierten Code ohne Leistungseinbußen handelt:
<h1>Dies ist meine erste Website.</h1> <table> <body> <td><p>Sie kommen, um mich mitzunehmen...</p></td>
das ist alles? Das ist es.
Obwohl dieser Code nicht ausdrücklich einer Spezifikation entspricht, ist die größere Bedeutung dieser Trennung, dass die richtigen Elemente verwendet werden. Die Verwendung des Tabellenlayouts ist ein zweitrangiges Problem. Im obigen Beispiel ist die Methode zur Verwendung von Tabellen falsch. Aus langfristiger und umsichtiger Sicht sollten die Elemente <table> und <td> entfernt werden. Obwohl ihre Verwendung veraltet ist, sind Tabellen immer noch sehr nützlich und können an geeigneten Stellen verwendet werden – für tabellarisch angeordnete Daten.
Nun, wir haben die Formatierung von unseren Seiten entfernt, Hurra! Was machst du jetzt noch? Dadurch bleiben nur einige hässliche Elemente, Texte und Linien in der Schriftart Times-New-Roman übrig. Überhaupt nicht lustig, wo sind die hellen und schönen Seiten, die uns versprochen wurden?
Wenn Sie auf das Zen-Garten-Beispiel zurückblicken, erkennen Sie das niedliche Design? Wie unterschiedlich sehen sie aus? Der Punkt ist: Unter diesem schönen Design befindet sich dasselbe XHTML, das genauso langweilig ist wie das unformatierte Dokument, das Sie gerade erstellt haben. Stimmt das nicht?
Tatsächlich hat langweilig und hässlich eine gute Grundlage. Möglicherweise haben Sie bemerkt, dass dieses unformatierte HTML genauso schlecht aussieht wie das Web im Jahr 1994. Mit wenigen Ausnahmen sind diese Elemente so alt wie das Web selbst, denn <h2> gibt es bereits seit den Tagen des Mosaik-Browsers.
Die Vorteile enden hier sicherlich noch nicht: Benutzerfreundlichkeit (für spezielle Anforderungen), integriertes SEO, reduzierte Bandbreitenkosten und so weiter. Jeffrey Veen hatte bereits letztes Jahr „The Business Value of Web Standards“ geschrieben, und auch Roger Johansson erläuterte in seinem kürzlich erschienenen „Developing with Web Standards“ die Techniken und Vorteile von standardbasiertem Design.
CSS wird heute von allen gängigen Browsern gut unterstützt und es gibt unzählige Ressourcen, die Ihnen beim Erlernen der CSS-Syntax, des CSS-basierten Layouts und fortgeschrittener Techniken helfen. Ich empfehle ein paar gute: westCiv bietet einen fortlaufenden kostenlosen CSS-Kurs an, der Ihnen den Einstieg und die schnelle Beherrschung erleichtert. Andrew Fernandez hat eine riesige Liste von CSS-Ressourcen zusammengestellt, die hilfreich sein werden, unabhängig davon, ob Sie CSS-Neuling sind oder nicht. Eric Meyer hat ein Bündel Bücher geschrieben, die Sie jederzeit auf Ihrem Schreibtisch aufbewahren und nachschlagen können. Zu diesen Büchern gehören die fallbasierten Bücher „Eric Meyer über CSS“ und „Mehr Eric Meyer über CSS“. Das CSS-Nachschlagewerk „The Definitive Guide to CSS“, herausgegeben vom O'Reilly Publishing House, ist in der zweiten Auflage erschienen, und Sie sollten es besser auf Ihrem Schreibtisch behalten. Außerdem erhältlich sind „The Designer's Edge“ von Molly Holzschlag und „Designing CSS Web Pages“ von Chris Schmitt.
Es würde zu viel Zeit in Anspruch nehmen, auf die Details der Anwendung von CSS und der Erstellung von Layouts einzugehen. Ich werde nicht viel mehr sagen. Das Obige ist der Rat, den ich Designern geben kann, die anfangen, auf Webstandards zu achten. Lesen Sie durch und teilen Sie Ihre Gedanken und lassen Sie uns als Community wachsen. Viele von uns fördern aktiv Webstandards. Nutzen Sie dies.
Anmerkungen 1. „Designing With Web Standards“ ist ein von Zeldman geschriebenes Buch zur Förderung von Webstandards. Die chinesische Version wurde im Mai 2004 eingeführt und veröffentlicht. Das Buch trägt den Titel „Website Reconstruction – Designing with Web Standards“.