So verbessern Sie Ihre bestehende Website_CSS/HTML

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． Hauptverbesserungen
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) Transitional

nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
(2) Strict

nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
(3) Frameset

nbsp;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 nur 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 ihn kopieren und einfügen Gleicher Code im Kopfbereich.

Legen Sie einen Namespace fest (Namespace)
Fügen Sie den folgenden Code direkt nach der DOCTYPE-Anweisung hinzu:


Ein Namespace ist eine detaillierte Sammlung von Elementtypen und Attributnamen (DTD). Mit der Namespace-Deklaration können Sie Ihren Namespace identifizieren, indem Sie auf eine Online-Adresse verweisen. Geben Sie einfach wie gewohnt den Code ein.

Deklarieren Sie Ihre Kodierungssprache
Um von Browsern korrekt interpretiert zu werden und die Markup-Validierung zu bestehen, müssen alle XHTML-Dokumente die von ihnen verwendete Kodierungssprache deklarieren. Der Code lautet wie folgt:


Die hier deklarierte Codierungssprache ist Vereinfachtes Chinesisch GB2312. Wenn Sie Inhalte in traditionellem Chinesisch erstellen müssen, können Sie ihn als BIG5 definieren.

Schreiben Sie alle Tags in Kleinbuchstaben
XML unterscheidet zwischen Groß- und Kleinschreibung, also unterscheidet XHTML auch zwischen Groß- und Kleinschreibung. 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:

Die korrekte Schreibweise lautet:

Ebenso

wird in

geändert, wird in geändert usw. Dieser Konvertierungsschritt ist einfach.
Alt-Attribut zu Bildern hinzufügen
Alt-Attribut zu allen Bildern hinzufügen. 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 sinnvolle Alt-Attribute hinzufügen müssen. Das Schreiben wie folgt ist bedeutungslos:


Korrektes Schreiben:


Gib alle Attributwerte an ​
In HTML müssen Sie Attributwerte nicht in Anführungszeichen setzen, aber in XHTML müssen sie in Anführungszeichen gesetzt werden.

Beispiel: style="max-width:90%", nicht height=100.

Alle Tags schließen
In XHTML muss jedes offene Tag geschlossen werden. So:

Jeder geöffnete Tab muss geschlossen werden.

HTML kann nicht geschlossene Tags akzeptieren, XHTML jedoch nicht.
Diese Regel kann die Verwirrung und den Ärger von HTML 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. Beispiel:



Nach der Verarbeitung durch die oben genannten sieben Regeln entspricht die Seite grundsätzlich den 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
Die nächste Verbesserung, die wir vornehmen werden, 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 im Konzept sowie im Erlernen und Anwenden von 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:

Verwenden Sie CSS, um das Erscheinungsbild von Elementen zu definieren.
Wir haben uns beim Schreiben von Logos angewöhnt, die Schriftart zu verwenden

, in der Hoffnung, dass es vorne ist. Um ein Punktsymbol hinzuzufügen, verwenden Sie

. Wir denken immer daran, dass groß bedeutet,

Punkt bedeutet und „fetter Text“ bedeutet. Tatsächlich kann

durch CSS alles werden, was Sie wollen,

kann zu einer kleinen Schriftart werden,

kann Text groß und fett werden und

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 mit 6 Ebenen dieselbe Größe haben:

h1, h2, h3, h4, h5, h6{ Font-Family: 宋体, Serif; }
Ersetzen Sie bedeutungslosen Müll durch strukturierte Elemente
Viele Menschen wissen vielleicht nie, 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. Beispielsweise kann ein Listeninhalt die folgenden Tags verwenden:

Satz eins
Satz zwei
Satz drei

Es wäre besser, wenn wir stattdessen eine ungeordnete Liste verwenden würden:

• Satz 1
• Satz 2
• Satz 3

Sie könnten sagen: „Aber

zeigt einen Punkt, ich.“ 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 der Tabelle oder dem Formular ein eindeutiges, strukturelles Tag, z. B.


Als nächstes im Schreibstil Beim Erstellen In einer Tabelle können Sie 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 %lt;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 des „menu“-Tags) können Sie eine Ad-hoc-Präsentationsverarbeitung für sauberes, kompaktes Code-Markup innerhalb eines separaten Stylesheets durchführen.

Mittelmäßige Verbesserung Wir werden hier zuerst die drei wichtigsten Punkte auflisten, aber es enthält viele Inhalte und Wissenspunkte, die wir Schritt für Schritt lernen und beherrschen müssen, bis wir schließlich das Layout mit CSS ganz ohne Verwendung erreichen irgendwelche Tische.