Bei der Anwendung des Div+CSS-Webseitenlayouts zur Erstellung einer Website, die Webstandards entspricht, können leicht Probleme auftreten.
Fassen wir es jetzt zusammen, damit jeder sieht, wo das Problem liegt.
1. Probleme bei der CSS-Validierung
Die von uns gestalteten Webseiten sollen alle den XHTML- und CSS-Standards entsprechen, um die W3C-Verifizierung zu bestehen. Einige Fehler bei der CSS2.0-Verifizierung sind: „Zeile: 0 Schriftfamilie: Es wird empfohlen, als letzte Auswahl eine Schriftfamilie anzugeben.“
Das W3C empfiehlt, bei der Definition von Schriftarten mit einer Kategorie von Schriftarten und nicht mit einer einzelnen Schriftart zu enden. „Sans-Serif“ kann beispielsweise dafür sorgen, dass Webfonts unter verschiedenen Betriebssystemen angezeigt werden können.
Obwohl die meisten Leute „sans-serif“ im Body-Tag definieren, wird davon ausgegangen, dass die Überprüfung fehlschlägt, wenn bei der erneuten Definition der Schriftart in anderen IDs oder Klassen „sans-serif“ weggelassen wird. Dieser Fehler ist nicht sehr schwerwiegend und kann mit etwas Aufmerksamkeit vermieden werden.
2. Vorschläge zum CSS-Schreiben
Fügen Sie Kommentare zu CSS-Dateien hinzu. Kommentare erleichtern Ihre zukünftige Wartung. Es wird empfohlen, so viele Kommentare wie möglich zu CSS-Dateien hinzuzufügen und sich keine Sorgen über das Hinzufügen einer kleinen Anzahl von Bytes zu machen. Versuchen Sie, die CSS-Syntax so weit wie möglich zu kürzen. Beispielsweise kann der Farbwert „#FFFFFF“ als „#FFF“ abgekürzt werden; „padding-top:30px;Padding-right:0;padding-bottom:10px;padding-left:2 0px“ kann als „ padding:30px 0 10px" 20px;". Es gibt mehr Speichertechniken beim Definieren von Techniken, und je besser Sie sich mit CSS-Anwendungen auskennen, desto mehr werden Sie bessere Methoden entdecken.
3. Probleme bei der XHTML-Validierung
Menschen widmen der CSS-Überprüfung oft mehr Aufmerksamkeit, vernachlässigen jedoch die Einhaltung der XHTML-Standards und es treten viele Fehler auf niedriger Ebene auf. Die Hauptprobleme sind unten aufgeführt:
◎target="_blank", diese Syntax ist in HTML4.0 korrekt, in XHTML1.0 jedoch nicht zulässig. Eine Lösung besteht darin, target = „new“ zu schreiben, und eine andere Lösung besteht darin, alle Ziele mit js zu verarbeiten.
◎Es ist am besten, keine Stylesheets einzubetten. Separate Stylesheet-Dateien sind einfacher zu verwalten. Wenn <style> eingebettet ist, muss es als <style type="text/css"> geschrieben werden und der Typ kann nicht ignoriert werden, da XHTML sonst nicht bestimmen kann, wofür Ihr Stil verwendet wird.
◎<br> muss als <br /> geschrieben werden. Auf ungepaarte Tags muss direkt ein „/“ folgen.
◎Verwenden Sie dieselbe ID erneut. Eine ID kann in XHTML nur einmal verwendet werden. Wenn Sie den Stil mehrmals referenzieren müssen, sollten Sie class verwenden.
◎Die Flash-Einbettungsmethode ist falsch. <embed> war ursprünglich ein privates Tag von Netscape. Obwohl es später vom IE unterstützt wurde, wurde es vom W3C nie erkannt. In HTML4.0 gibt es kein <embed>-Tag. Das W3C befürwortet die Verwendung des <object>-Tags. Um das Problem der Kompatibilität zwischen verschiedenen Browsern zu lösen, besteht eine Lösung darin, beide Tags zu verwenden.
Der vollständige Beispielcode lautet wie folgt (der Flash-Hintergrund ist transparent):
| Nachfolgend der zitierte Inhalt: <Objekt classid="clsid:27CDB6E-AE6D-11cf-96B8-444553540000" codebase= „http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0“ width="300" height="100"> <param name="quality" value="high"> <param name="wmode" value="transparent"> <param name="SRC" value="test.swf"> <embed src="test.swf" wmode="transparent" quality="high" Pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="300" height="100"> </embed> </object> |
Aber es ist immer noch nicht möglich, es direkt in XHTML zu schreiben. Jetzt können wir die Überprüfung nur überlisten, indem wir den obigen Code in die Datei flash.js schreiben und ihn dann aufrufen.
<script type="text/javascript" src="flash.js"></script>
Ob Flash den Standards entspricht, ist umstritten.
◎Code ähnlich id=header class=title sollte als id="header" class="title" geschrieben werden. Das Zitieren von Attributwerten ist die grundlegendste XHTML-Syntaxregel.
4. Kompatibilitätsprobleme
Einige Websites sind deformiert und falsch ausgerichtet, wenn sie in IE6.0, Mozilla Firefox 1.0 und Opera 7.12 angezeigt werden.
Es ist im IE zentriert, aber nicht in Mozilla. Das Festlegen des Körpers {TEXT-ALIGN: center;} im IE kann ihn bereits zentrieren, aber in Mozilla müssen Sie der Ebene, die zentriert werden muss, die folgenden Stileinstellungen hinzufügen: MARGIN-RIGHT: auto;MARGIN-LEFT: auto;
Überschreitet die Breite. Die Seite sieht in Mozilla normal aus, aber im IE ist sie deformiert, weil sie die Breite überschreitet, und die nebeneinander liegenden Ebenen werden darunter verschoben. Diese Situation wird durch die unterschiedliche Interpretation des Box-Modells zwischen IE und Mozilla verursacht. Es gibt viele Lösungen, wie zum Beispiel die Methode „!important“.
Webstandards und CSS-Layout werden von immer mehr Designern verstanden und beherrscht. Nach einer Zeit des Verdauens, Verstehens und Anwendens des CSS-Layouts werden weitere Webseiten mit sowohl technischen als auch ästhetischen Überlegungen entstehen.