Vorwort
Als ich zum ersten Mal im Internet surfte, benutzte ich ein dummes Terminal. Schon bald könnte ein monochromer Monitor in Minnesota den Film „Monty Python und der Heilige Gral“ über einen Server abspielen. Es gab keine Maus, keine gute Benutzeroberfläche, geschweige denn 24-Bit-Farbe. Gopher ist das einzige verfügbare Tool. Die Suche kann nur Archie und Veronica verwenden. Niemand hatte von W3 (World Wide Web) gehört, und das Web schien damals ausreichend.
Anmerkung des Übersetzers:
1. Dummes Terminal. Ähnlich wie ein PC, jedoch ohne eigene CPU, Speicher und Festplatte. Transaktionen werden über einen gemeinsamen Host abgewickelt.
2. Gopher. Eine Client/Server-Anwendung, die dem Endbenutzer alle Informationen in Menüform anzeigt, indem sie FTP-Übertragung, Remote-Anmeldung, Archie-Suche usw. durchführt und es dem Benutzer ermöglicht, eine große Anzahl von Informationen zu durchsuchen. Auf diese Weise müssen Benutzer beim Zugriff auf Internetressourcen ihre Adressen nicht kennen (oder eingeben).
3.Archie ist das erste Programm, das anonyme FTP-Websitedateien im Internet automatisch indiziert, aber es ist noch keine echte Suchmaschine.
4.Veronica ist eine Ressource vom Typ Gopher, mit der Sie alle Menüelemente abrufen können, die bestimmte Sonderwörter im Gopher-Bereich enthalten.
Nach einer Weile überschwemmte seltsamer Code meine Suchergebnisse. Ich konnte immer noch lesen, was ich brauchte, aber es war nervig. Ein Kollege erzählte mir, dass es sich um HTML handelte, eine grafische Sprache für das Internet. Ich hatte einige Methoden gelernt, um zu versuchen, HTML herauszufiltern. Später erschienen 256-Farben-Monitore und die erste Version des Mosaik-Browsers, und alles begann sich zu ändern.
Seitdem ist viel Zeit vergangen, die Technologie hat sich unglaublich verbessert und Weboberflächen wurden unzählige Male überarbeitet, neu überdacht und neu erfunden. Seit ich als Webdesigner arbeite, habe ich die verschiedenen Phasen des tabellenbasierten Designs, die Probleme von JavaScript, die Schwierigkeiten von CSS und, was noch wichtiger ist, allgemein akzeptiertere Webstandards aus erster Hand miterlebt.
Am Anfang wurde das Internet nur nach den Vorstellungen von Geeks (Technikfanatikern) erstellt. Es gab nur reine Inhalte im Internet. Sie haben nicht auf Hintergrundfarben und schöne Bilder geachtet. Aber die Wahrheit ist, dass die Leute beim Surfen gerne sattere Ausdrucksformen sehen. Das Aufkommen der Tabellenentwurfsmethode löst dieses Problem. Wir können das Layout durch Tabellen steuern! Wir haben alle angefangen, das System zu „betrügen“. Können wir nicht eine dünne Linie von 1 Pixel erstellen? Fügen Sie einfach einen transparenten GIF-Punkt in die Tabellenzeile ein und legen Sie eine Hintergrundfarbe fest – fertig! Schriftarten können nicht gesteuert werden? Dann verwenden Sie einen anderen Tag <font>!
Bevor ich mit CSS und Webstandards in Berührung kam, habe ich viele Jahre lang mit Tabellen entworfen. Die Designmethode von Webstandards ist völlig anders als zuvor. Sie ist effizient und charmant. Ich habe mich tief und leidenschaftlich in neue Designmethoden verliebt. Es kann sinnvollen Code verwenden, um Inhalte vom Layout zu trennen, aber dennoch Leerraum und schönes Design beibehalten. Ich mag sofort „das Neue und hasse das Alte“ und verwende die alten Designmethoden nicht mehr.
Bis heute.
Es gab viele Diskussionen über Webstandards und CSS. Wie jedes gute Schlüsselwort wird es der nächste „große Name“ in der Geschichte der Webtechnologieentwicklung werden. Es begann mit der Neugestaltung von Wired.com durch Dougl als Bowman und hat sich seitdem weiterentwickelt. Im Jahr 2003 wurde das von Zeldman verfasste Buch „Designing with Web Standards“ veröffentlicht, das uns allen zeigt, dass Designer auf der ganzen Welt die neue Designmethode angenommen und bejubelt haben. Es ist strukturiert, semantisch, schnell und leichtgewichtig.
Es gibt jedoch immer noch einige Leute, die immer noch die traditionelle Tabellenentwurfsmethode verwenden und sogar das <font>-Tag verwenden. Sie sagen, dass die traditionelle Methode einfacher, bequemer für die Wartung und eine schnelle Entwicklung ist. Wer hat recht?
Ich beschloss, selbst ein Experiment durchzuführen, um zu sehen, wie sich die Dinge veränderten und welche Methode wir besser wählten.
Herausforderung
Ich habe mit einer Grafiksoftware eine hypothetische Website entworfen. Verwenden Sie dann zuerst HTML4.01, um es zu erstellen, und verwenden Sie Tabellen ohne CSS als Vergleich. Verwenden Sie dann XHTML1.0 Transitional, um es zu erstellen. Der Code entspricht den Spezifikationen für Benutzerfreundlichkeit und Barrierefreiheit und verwendet CSS, um Tabellen so weit wie möglich zu vermeiden (es sei denn, die Tabelle wird zur Darstellung tabellarischer Daten verwendet.)
Der Produktionsprozess ist in drei Phasen unterteilt, der Prozess wird detailliert aufgezeichnet und die Vor- und Nachteile verglichen, um zu sehen, was wir bekommen haben? Was ist verloren gegangen? Auf welcher Seite sollen wir stehen?
Phase eins: Entwerfen Sie die Website
Ich begann, eine fiktive Website zu entwerfen. Ich gehe davon aus, dass ich eine Website für eine Organisation namens „Butterfly Watchers Association“ erstelle. Haha, das ist wahrscheinlich mein bester Kunde, der nicht in den Designprozess involviert sein wird. Ich habe versucht, es so realistisch wie möglich zu gestalten, indem ich mir die Zielbenutzer der Website vorstellte und ein traditionelles Layout und maßgebliche Schriftarten verwendete.
Ich möchte, dass die Website kompakt, effektiv und prägnant ist. Außerdem dachte ich, dass es auf der Seite Schmetterlinge geben sollte, also suchte ich überall nach einem passenden Schmetterlingsbild und fand bald eines bei stock.xchng. Der blaue Schmetterling, der zwischen den grünen Blättern ruht, passt perfekt zum Bild des Ortes. Nach einiger Bearbeitung und Änderung wird dieses Bild zur Kopfzeile unserer Seite.
Während des Designprozesses habe ich mich an einige Usability-Grundsätze gehalten. Versuchen Sie beispielsweise, die Größe der Bilddatei so klein wie möglich zu halten. Zuerst hatte ich geplant, die Schriftart Garamond für die Navigation zu verwenden. Da der Computer des Benutzers diese Schriftart später möglicherweise nicht hat, entschied ich mich für die Schriftart Georgia (diese Schriftart ähnelt Times New Roman und im schlimmsten Fall). es kann durch die Schriftart Times New Roman ersetzt werden). Aber für das Header-Bild habe ich immer noch Georgia verwendet, weil es ein Bild ist.
Der Text hat einen grauen Hintergrund und verwendet die Schriftart Trebuchet MS; die Nachrichten verwenden die Schriftart Verdana, die auch verkleinert gut aussieht. Es gibt eine ungeschriebene Faustregel, 4 Schriftarten in einem Design zu verwenden, und damit bin ich nicht wirklich einverstanden.
Die zweite Stufe: „Verwenden Sie die vorherige Methode und verwenden Sie transparente GIF-Bilder, um den Abstand zu steuern.“
Wenn Sie bereits Webdesigner sind und an mehreren Projekten mitgewirkt haben, ist Ihnen folgende Struktur bestens bekannt:
<table bgcolor="#ffffff" cellpacing="0" cellpadding="0" border="0" align="center" width="200"> <tr> <td colspan="3" bgcolor="#545454" ><img src="blank.gif" width="1" height="1" alt=""></td> </tr> <tr> <td bgcolor="#545454"><img src=" blank.gif" width="1" height="1" alt=""></td> <td width="100%" align="center">Inhalt kommt hierher.</td> <td bgcolor=" #545454"><img src="blank.gif" width="1" height="1" alt=""></td> </tr> <tr> <td colspan="3" bgcolor="# 545454"><img src="blank.gif" width="1" height="1" alt=""></td> </tr> </table>
Wir sind es gewohnt, Tabellen zum Sprechen zu verwenden, weil sie unsere grundlegendsten „Bausteine“ sind. Beispiel: Verwenden Sie transparente GIF-Bilder, um den Abstand zu steuern, und verwenden Sie verschiedene Attribute von Tabellen, um die Position zu steuern. Jemand hat es so erklärt: Tabellen sind zuverlässig und mit Tabellen angelegte Seiten können vorwärtskompatibel sein! Kein CSS wagt es, mit Tabellen zu konkurrieren, Tabellen passen in alle Browser und so weiter.
Beginnen wir damit, den gesamten Designprozess Schritt für Schritt zu reproduzieren.
Stunde 1
Oh. Es scheint, als könnten wir in der Zeit zurückgehen. Wie können wir die Hintergrundfarbe definieren, ohne CSS zu verwenden? Oh ja ... es ist bgcolor, danke für den Tipp. Okay, beginnen wir mit der Erstellung des Formulars und sehen uns den Effekt in der Vorschau an. Ich habe „align=center“ so definiert, dass es in allen Browsern zentriert ist. Großartig, wie einfach das ist! Die Form sieht nicht schlecht aus und ich habe das Gefühl, mit einem alten Freund wieder vereint zu sein. Ich habe fachmännisch transparente GIF-Bilder verwendet, um die Abstände zu kontrollieren, und die Arbeit ging schnell! Freundlichkeit? Warum gibt es zwischen der Kopfzeile und dem Menü ein Leerzeichen? Oh, es stellt sich heraus, dass nach dem Bildcode ein zusätzliches Leerzeichen vorhanden ist und der IE-Browser es anzeigt. Dies lässt sich leicht ändern, indem Sie einfach die Leerzeichen löschen.
Stunde 2
Ich verwende JavaScript, um einen Flip-Effekt für das Navigationsmenü zu erstellen:
<td ... onMouseOver="chBg(this);" onMouseOut="chBg2(this);" >...</td>
JavaScript ist folgendermaßen geschrieben:
function chBg(obj) { obj.bgColor = "#E1E5DB" } function chBg2(obj) { obj.bgColor = "#CBD1C3" }
Abgesehen davon, dass ich die alten Designmethoden ein wenig vergessen habe, ging der gesamte Fortschritt recht schnell voran. Obwohl ich versucht habe, die Verschachtelung von Tabellen so weit wie möglich zu reduzieren, sah der Code immer noch etwas kompliziert aus. Deshalb habe ich einige Kommentare hinzugefügt, um das Auffinden der Stellen zu erleichtern, die wir ändern müssen.
Ich bin auf ein kleines Problem gestoßen: Ich kann die Unterstreichung des Links nicht entfernen, ohne CSS zu verwenden. Vielleicht gibt es eine Lösung, suchen wir mal bei Google danach.
Stunde 3
Nach der Suche bei Google finde ich immer noch keine Möglichkeit, einen Link ohne Unterstreichung zu erstellen. Es muss eine Lösung geben!
4. Stunde
Werfen wir einen Blick auf die Ergebnisse der ersten 4 Stunden auf anderen Browsern als IE6. Oh! Sehr hässlich in Firefox, sieht in Opera und Netscape gut aus.
Stunde 5
Machen Sie weiter und programmieren Sie..., debuggen und ändern Sie.
Bei der Arbeit erkannte ich die Einschränkungen des <font>-Tags zur Steuerung der Schriftgröße. Ich konnte nicht mehrere Größen definieren. Verdammt!
Ich bin auch auf Probleme mit dem Textlayout im Abschnitt „News“ gestoßen. Um den Effekt zu erzielen, musste ich mehr Tabellenverschachtelung verwenden. Um die Schmetterlingsbilder im Text rechts neben dem Text anzuordnen, musste ich zur Lösung des Problems auch eine Tabelle hinzufügen. Diese Art des „Schummelns“ beim Satz macht mich hilflos.
Stunde 6
Das Design ist fertig und sieht im Großen und Ganzen genauso aus wie das Originaldesign. Klicken Sie hier, um einen Blick darauf zu werfen.
Klicken Sie hier, um zu sehen, wie viele Tabellen enthalten sind.
Phase 3: Wir brauchen keine Formulare!
Im Folgenden werfen wir einen Blick darauf, was ein Design ist, das auf Webstandards basiert und mit CSS gestaltet ist. Ich beginne mit der Identifizierung des Inhalts. Ich werde versuchen, das Logo semantisch zu gestalten und redundante Tags zu vermeiden.
Der Header ist ein Bild, aber auch ein Titel, also schreibe ich den Code so:
<h1>Butterfly Watchers Association. Wir beobachten sie.</h1>
Ich werde später darüber nachdenken, wie ich diesen Titel richtig darstellen kann (idealerweise kümmern wir uns so viel wie möglich um den Inhalt und so wenig wie möglich um das Layout). Andere Überschriften (Neuigkeiten, Sichtungen und Mitgliedschaft) werden mit <h2> gekennzeichnet.
Ein Menü ist im Grunde eine ungeordnete Liste (Liste), daher wird es als Liste identifiziert. Absätze müssen nicht klassifiziert werden (wir verwenden Vererbungsselektoren, um sie in der enthaltenden Ebene zu „hängen“). Ich vergleiche ihn mit dem ursprünglichen Inhaltstext, um zu sehen, wie viele zusätzliche Tags ich hinzufügen muss, um das Layout zu erreichen (ich werde versuchen, das Hinzufügen von Tags so weit wie möglich zu vermeiden).
Dies ist der ursprüngliche Inhaltstext. Schauen Sie sich den Originalcode an. Er entspricht der Übergangsspezifikation xhtml1.0. Beachten Sie, dass alle Elemente bereits in <div>s mit definierten Namen enthalten sind. Das Datum in den Nachrichten wurde ebenfalls mit der Datumsklasse hinzugefügt. Sie sehen, der Code ist sehr einfach.
Stunde 1
Definieren Sie den Rand der Ebene „Container“ auf 1 Pixel. Zentrieren Sie den Inhalt, indem Sie im Textkörperstil „text-align: center“ definieren. Um in allen Browsern zentriert zu sein, ist auch margin: 0 auto; (bedeutet oben=0, rechts=auto, unten=0, links=auto) in „container“ definiert. Die Zentrierung ist genauso einfach wie bei Tischen möglich.
Definieren Sie die Auffüllungswerte „oben“ und „unten“ von „body“ auf 20 Pixel (die direkte Definition der Auffüllung in „container“ ist für alle Browser geeignet).
Die ungeordnete Liste (li) muss als „display:inline“ definiert werden, damit das Menü in einer Zeile angezeigt wird. Ich habe Navigationssymbole zwischen den Menüs hinzugefügt. Diese Navigationssymbole werden mithilfe der sich nicht wiederholenden Hintergrundmethode definiert, mit der die (x, y)-Position genau definiert werden kann, ähnlich wie folgt:
Hintergrund: url(menuBullet2.gif) no-repeat 4px 9px; Der Klick-Farbänderungseffekt des Menüs übernimmt den Hover-Stil des Links und erfordert kein JavaScript mehr.
Ich habe das Schmetterlingsbild am Kopf der Seite als Hintergrund für <h1> festgelegt, damit ich mir keine Sorgen um die Benutzerfreundlichkeit machen muss und der Titel auf Geräten, die keine Bilder anzeigen können (z. B. dem Bildschirm), normal gelesen werden kann Leser und Suchroboter).
Stunde 2
Das erste Element des Menüs (HOME) verwendet ein anderes Symbol und ich musste den ursprünglichen Hintergrund ausblenden und dem HOME-Menü eine zusätzliche ID (frst) hinzufügen:
#hMenu ul li #frst
Ein weiteres (KONTAKT-)Symbol:
Hintergrund: transparente URL (menuBullet3.gif) no-repeat 615px 9px; ich kann die beiden Spalten nicht so steuern, dass sie die gleiche Höhe haben. Glücklicherweise kann ich ein Hintergrundbild verwenden, um dies zu umgehen. Ich habe einen „Container“ definiert, der den Hintergrund vertikal wiederholt.
Hintergrund: #fff url(bgMain.gif) wiederholen-y;
Stunde 3
CSS-Definitionsfelder sind viel praktischer als Tabellen, insbesondere die vielen Eigenschaften von Rahmen sind sehr nützlich.
Jetzt fange ich an, den <h2>-Header zu definieren. Die Definition des Symbols ist dieselbe wie oben.
Ich schiebe die Ebene „Neuigkeiten“ rechts neben „Sichtungen“ und „Mitgliedschaft“. Definieren Sie die Ebene „Copyright“ mit „clear: Both;“, sodass sie der schwebenden Ebene folgt. Schweben Sie das Schmetterlingsbild im Text nach rechts, und der Text kann automatisch um das Bild herum umbrochen werden. Durch Definieren des 1-Pixel-Rands des Bildes und Festlegen des Füllabstands kann der Verschachtelungseffekt der beiden ursprünglichen Tabellen erzielt werden.
Es wurden einige Probleme entdeckt: Die Urheberrechtsebene und die Inhaltsebene überschneiden sich teilweise.
4. Stunde
Der angezeigte Fehler hängt mit der float:right;-Definition von „Sichtungen“ und „Mitgliedschaft“ zusammen. Wenn man sie nach links verschiebt, wird dieses Problem gelöst, was seltsam erscheint. Ich habe für den ersten Test Firefox verwendet. Naja, es sieht nicht schlecht aus, außer dass die Menüsymbole um ein paar Pixel verschoben wurden.
Es gibt einige CSS-Techniken, die den Anzeigeeffekt in Nicht-IE-Browsern korrigieren können, z. B. die Zuweisung unterschiedlicher Eigenschaftswerte an verschiedene Browser.
Ich habe den Wert !important in der Definition desselben Elements verwendet. Die zuvor geschriebene Definition kann zuerst ausgeführt werden. Dieser Wert wird vom IE-Browser nicht unterstützt.
Hintergrund: url(menuBullet2.gif) no-repeat 4px 6px !important;
Hintergrund: URL(menuBullet2.gif) no-repeat 4px 9px;
Wenn es in CSS mehrere Definitionen für dasselbe Element gibt, ist die letzte gültig. Da der IE !important jedoch nicht unterstützt, verwendet der IE den zweiten definierten Wert und andere Browser verwenden den ersten definierten Wert.
Alles erledigt, die Ergebnisse sehen Sie hier.
abschließend
tabellenbasiertes Design
Ich habe die Seite mit jedem Browser getestet, den ich finden konnte, einschließlich denen für Linux-, Windows- und Macintosh-Plattformen. Tabellenlayoutseiten sehen in verschiedenen Browsern gleich aus. „Es ist felsenfest“, so lautet der erste Kommentar zum Tischlayout.
Wenn jedoch Teile des Seiteninhalts geändert werden müssen, ist die Änderung des Tabellenlayouts recht mühsam. Dies stellt ein Problem dar. Wenn wir ein CMS (Content Management System) verwenden, ist die Formatierung des Inhalts problematisch.
Die ganze Entwurfszeit ist etwas lang, weil ich die alte Methode vergessen habe. Wenn ich es noch einmal mache, denke ich, dass es 1-2 Stunden sparen könnte.
Ich beschreibe tabellenbasiertes Design als eine Menge „Grunzarbeit“, obwohl ich oft von den fortschrittlichen Designtechniken überrascht bin. Bei Designs, die auf reinem CSS basieren, bin ich es normalerweise gewohnt, das Design aufzuschlüsseln und Fehler Schritt für Schritt zu analysieren. Die Verwendung von Tabellendesign erfordert diese Arbeit jedoch nicht. Sie müssen lediglich weiterhin Tabellen in das Design einbeziehen. Schauen wir uns den CSS-Prozess noch einmal an.
CSS-basiertes Design
Das Entwerfen mit CSS fühlt sich viel besser an. Codeänderungen sind direkt und transparent, und ich kann den gesamten Prozess klar steuern. Im Gegensatz dazu ist das Design der Tabelle wie das Verlegen von Ziegeln. Je größer die Änderung auf der Seite ist, desto komfortabler und effizienter wird das CSS-Design.
CSS-Design ist auch sehr sinnvoll, um Bandbreite zu sparen. Durch das Extrahieren aller Stile in separate Dateien und die Verwendung einer oder mehrerer Stylesheet-Dateien für die gesamte Site kann die gesamte Site kleiner werden.
Auch die Trennung von Layoutinformationen und Inhalten hat viele Vorteile. In Zukunft kann ich die gesamte Seite jederzeit überarbeiten, ohne etwas zu ändern, genau wie CSS Zen Garden. Es erhöht auch die Benutzerfreundlichkeit und erleichtert Suchrobotern das Auffinden Ihrer Seite (denken Sie daran: Google ist Ihre wichtigste Besucherquelle).
Obwohl Ihre Arbeitseffizienz sehr hoch ist, wenn Sie mit CSS-basiertem Design vertraut sind, müssen Sie viel Zeit damit verbringen, die Regeln, Unterschiede bei Boxmodellen, Browser-Verarbeitungstechniken und viel Theorie zu erlernen, und es erfordert kontinuierliche Übung, um es zu beherrschen . Kurz gesagt, CSS ist einfacher als Tabellen, aber wenn Sie mit reinem CSS entwerfen möchten, müssen Sie bereit sein, viel Zeit in das Erlernen zu investieren. Selbst wenn Sie ein erfahrener Entwickler sind, sollten Sie darauf vorbereitet sein, mit verschiedenen Fehlern umzugehen. Manchmal kann die Behebung eines Fehlers mehrere Stunden dauern.
Gewinner
CSS- und auf Webstandards basierendes Design gewinnen. Um eine Wahl zu treffen, genügt ein Blick auf den Code beider Methoden. CSS bietet viele weitere Vorteile (hauptsächlich im Hinblick auf die Benutzerfreundlichkeit). Tatsächlich ist der Hauptgrund meine Faulheit. Wenn ich ein Tischdesign verwende und der Kunde mich ein Jahr später kontaktiert und sagt, dass es überarbeitet werden muss, kann ich ihm sagen, dass ich der Armee beigetreten bin und in einem fremden Land bin. Wenn ich CSS verwenden würde, würde ich es ohne Bedenken für den Kunden ändern, weil ich das Rad nicht neu erfinden müsste.