Die meisten unserer Designer verwenden immer noch das traditionelle Tabellenlayout, die Präsentation und die Struktur, um Websites zu erstellen. Das Erlernen der Verwendung von XHTML+CSS erfordert einen Prozess, und die Anpassung einer vorhandenen Website an Website-Standards kann nicht in einem Schritt erfolgen. Der beste Ansatz besteht darin, Schritt für Schritt und in Etappen vorzugehen, um das Ziel der vollständigen Einhaltung der Website-Standards zu erreichen. Wenn Sie ein Anfänger sind oder sich mit Code nicht so gut auskennen, können Sie auch standardkonforme Bearbeitungstools verwenden, wie zum Beispiel Dreamweaver MX 2004, das derzeit umfassendste Tool, das CSS-Standards unterstützt.
1． primäre Verbesserung
Fügen Sie der Seite den richtigen DOCTYPE hinzu
Viele Designer und Entwickler wissen nicht, was DOCTYPE ist und wofür es verwendet wird. DOCTYPE ist die Abkürzung für Dokumenttyp. Wird hauptsächlich verwendet, um anzugeben, welche Version von XHTML oder HTML Sie verwenden. Der Browser interpretiert den Seitencode gemäß der durch Ihren DOCTYPE definierten DTD (Document Type Definition). Wenn Sie also versehentlich den falschen DOCTYPE eingestellt haben, werden Sie die Ergebnisse überraschen. XHTML1.0 bietet drei DOCTYPE-Optionen:
(1) Übergangsweise
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
(2) Streng
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd>
(3)Rahmentyp (Frameset)
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Frameset//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd>
Für unsere primäre Verbesserung müssen wir lediglich eine Übergangserklärung verwenden. Es kann weiterhin mit Ihrem Tischlayout, Ihren Auftrittslogos usw. kompatibel sein, sodass Sie nicht das Gefühl haben, dass die Änderungen zu groß und schwer zu bewältigen sind.
Tipp: Wenn Sie zu faul sind, den obigen Übergangscode einzugeben, können Sie die Homepage der Website http://www.macromedia.com/ besuchen, sich dann den Quellcode ansehen und denselben Code kopieren und in den Kopfbereich einfügen .
Legen Sie einen Namensraum fest (Namespace)
Fügen Sie den folgenden Code direkt nach der DOCTYPE-Deklaration hinzu:
<html XMLns=http://www.w3.org/1999/xhtml >
Ein Namespace ist eine detaillierte DTD, die Elementtypen und Attributnamen sammelt. Mit der Namespace-Deklaration können Sie Ihren Namespace über einen Online-Adresszeiger identifizieren. Geben Sie einfach wie gewohnt den Code ein.
Deklarieren Sie Ihre Programmiersprache
Um von Browsern korrekt interpretiert zu werden und die Markup-Validierung zu bestehen, müssen alle XHTML-Dokumente die von ihnen verwendete Codierungssprache deklarieren. Der Code lautet wie folgt:
<meta http-equiv=Content-Type content=text/html charset=GB2312 />
Die hier deklarierte Codierungssprache ist Vereinfachtes Chinesisch GB2312. Wenn Sie Inhalte in traditionellem Chinesisch erstellen müssen, können Sie sie als BIG5 definieren.
Schreiben Sie alle Beschriftungen in Kleinbuchstaben
Bei XML wird die Groß-/Kleinschreibung beachtet, daher wird bei XHTML auch die Groß-/Kleinschreibung beachtet. Alle XHTML-Element- und Attributnamen müssen in Kleinbuchstaben geschrieben sein. Andernfalls wird Ihr Dokument bei der W3C-Validierung als ungültig betrachtet. Beispielsweise ist der folgende Code falsch:
<TITLE>Firmenprofil</TITLE>
Die richtige Schreibweise ist:
<title>Firmenprofil</title> Ändern Sie auf ähnliche Weise <P> in <p>, <B> in <b> usw. Dieser Konvertierungsschritt ist sehr einfach.
Alt-Attribut zum Bild hinzufügen
Fügen Sie allen Bildern ein Alt-Attribut hinzu. Das Alt-Attribut gibt an, dass Ersatztext angezeigt wird, wenn das Bild nicht angezeigt werden kann. Dies ist für normale Benutzer entbehrlich, für Nur-Text-Browser und Benutzer, die Bildschirmleseprogramme verwenden, ist dies jedoch von entscheidender Bedeutung. Erst wenn das Alt-Attribut hinzugefügt wird, besteht der Code die W3C-Korrektheitsprüfung. Beachten Sie, dass wir aussagekräftige Alt-Attribute hinzufügen müssen. Das Schreiben wie folgt ist bedeutungslos:
<img src=http://www.chinahtml.com/0608/logo_unc_120x30.gif alt=http://www.chinahtml.com/0608/logo_unc_120x30.gif>
Richtige Schreibweise:
<img src=http://www.chinahtml.com/0608/logo_unc_120x30.gif alt=UNC-Firmenlogo, klicken Sie, um zur Startseite zurückzukehren>
Zitieren Sie alle Attributwerte
In HTML müssen Sie Attributwerte nicht in Anführungszeichen setzen, aber in XHTML müssen sie in Anführungszeichen gesetzt werden.
Beispiel: Höhe=100, nicht Höhe=100.
Schließen Sie alle Tabs
In XHTML muss jedes offene Tag geschlossen werden. So was:
<p>Jeder geöffnete Tab muss geschlossen werden. </p> <b>HTML kann nicht geschlossene Tags akzeptieren, XHTML jedoch nicht. </b>
Diese Regel kann HTML-Verwirrung und -Probleme vermeiden. Beispiel: Wenn Sie das Bild-Tag nicht schließen, kann es in einigen Browsern zu Problemen bei der CSS-Anzeige kommen. Mit dieser Methode stellen Sie sicher, dass die Seite so aussieht, wie Sie sie entworfen haben. Es ist zu beachten, dass auch leere Tags geschlossen werden müssen. Verwenden Sie einen Schrägstrich / am Ende des Tags, um sich selbst zu schließen. Zum Beispiel:
<br /> <img src=http://www.chinahtml.com/0608/webstandards.gif />
Nach der Verarbeitung durch die oben genannten sieben Regeln erfüllt die Seite grundsätzlich die Anforderungen von XHTML1.0. Aber wir müssen noch überprüfen, ob es wirklich den Standards entspricht. Wir können W3C nutzen, um kostenlose Validierungsdienste bereitzustellen (http://validator.w3.org/). Beheben Sie die Fehler einzeln, nachdem Sie sie entdeckt haben. In der folgenden Ressourcenliste stellen wir auch andere Verifizierungsdienste und URLs bereit, die Hinweise zur Verifizierung geben und als Ergänzung zur W3C-Verifizierung verwendet werden können. Wenn Sie die XHTML-Validierung schließlich bestanden haben, herzlichen Glückwunsch, Sie haben einen großen Schritt in Richtung Website-Standards gemacht. Es ist nicht so schwierig, wie Sie denken!
2. Zwischenverbesserung
Unsere nächste Verbesserung liegt hauptsächlich in der Trennung von Struktur und Leistung. Dieser Schritt ist nicht so einfach zu erreichen wie der erste Schritt. Wir benötigen eine Änderung des Konzepts sowie das Erlernen und die Anwendung der CSS2-Technologie. Aber etwas Neues zu lernen braucht Zeit, oder? Der Trick besteht darin, durch Handeln zu lernen. Wenn Sie immer Tabellenlayout und noch nie CSS verwendet haben, müssen Sie sich nicht überstürzt vom Tabellenlayout verabschieden. Sie können zunächst das Schriftart-Tag durch ein Stylesheet ersetzen. Je mehr Sie lernen, desto mehr können Sie tun. Okay, schauen wir uns an, was wir tun müssen:
Definieren Sie das Erscheinungsbild von Elementen mit CSS
Beim Schreiben von Logos haben wir uns angewöhnt, die Schrift größer zu machen, indem wir <h1> verwenden, und wenn wir ein Punktsymbol voranstellen möchten, verwenden wir <li>. Wir stellen uns <h1> immer als groß, <li> als Punkte und <b> als „fetten Text“ vor. Tatsächlich kann <h1> durch CSS zu allem werden, was Sie wollen, <h1> kann zu einer kleinen Schriftart werden, <p> kann zu einem großen und fetten Text werden und <li> kann zu einem Bild werden und so weiter. Wir können Strukturelemente nicht dazu zwingen, eine Darstellung zu erreichen, wir sollten CSS verwenden, um das Erscheinungsbild dieser Elemente zu bestimmen. Beispielsweise können wir dafür sorgen, dass die ursprünglichen Standardüberschriften der Ebene 6 dieselbe Größe haben:
h1, h2, h3, h4, h5, h6{ Schriftfamilie: 宋体, Schriftgröße: 12px;
Ersetzen Sie bedeutungslosen Müll durch strukturierte Elemente
Viele Menschen haben vielleicht nie gewusst, dass HTML- und XHTML-Elemente dazu gedacht sind, Struktur auszudrücken. Viele von uns haben sich daran gewöhnt, Elemente eher zur Steuerung der Präsentation als zur Strukturierung zu verwenden. Eine Liste könnte beispielsweise so gekennzeichnet sein:
Satz 1<br /> Satz 2<br /> Satz 3<br />
Es wäre besser, wenn wir stattdessen eine ungeordnete Liste verwenden würden:
<ul> <li>Satz 1</li> <li>Satz 2</li> <li>Satz 3</li> </ul>
Sie könnten sagen: „Aber <li> zeigt einen Punkt an, und ich möchte keinen Punkt verwenden.“ Tatsächlich legt CSS nicht fest, wie ein Element aussieht. Sie können die Punkte mithilfe von CSS deaktivieren.
Fügen Sie jeder Tabelle und jedem Formular eine ID hinzu
Geben Sie einer Tabelle oder Form ein eindeutiges, strukturelles Markup, z.B.
<table id=menu>
Als nächstes können Sie beim Schreiben des Stylesheets einen „Menü“-Selektor erstellen und ihn mit einer CSS-Regel verknüpfen, die angibt, wie Tabellenzellen, Textbeschriftungen und alle anderen Elemente angezeigt werden sollen. Auf diese Weise ist es nicht erforderlich, jedem <td>-Tag einige redundante, bandbreitenverbrauchende Attribute der Präsentationsebene wie Höhe, Breite, Ausrichtung und Hintergrundfarbe hinzuzufügen. Mit nur einem angehängten Tag (dem ID-Tag, das „menu“ markiert) können Sie eine Ad-hoc-Präsentationsverarbeitung für sauberes, kompaktes Code-Markup in einem separaten Stylesheet durchführen.
Für zwischenzeitliche Verbesserungen listen wir hier zunächst die wichtigsten drei Punkte auf, enthalten aber viele Inhalte und Wissenspunkte, die wir Schritt für Schritt erlernen und beherrschen müssen, bis wir schließlich das Layout mit CSS ganz ohne den Einsatz von Tabellen erreichen.