Lernen Sie CSS-Layout? Können Sie das reine CSS-Layout immer noch nicht vollständig beherrschen? Normalerweise gibt es zwei Situationen, die Ihr Lernen behindern:
Die erste Möglichkeit besteht darin, dass Sie das Prinzip der CSS-Seitenverarbeitung nicht verstanden haben. Bevor Sie die Gesamtleistung Ihrer Seite berücksichtigen, sollten Sie zunächst die Semantik und Struktur des Inhalts berücksichtigen und dann CSS für die Semantik und Struktur hinzufügen. In diesem Artikel erfahren Sie, wie Sie HTML strukturieren.
Ein weiterer Grund ist, dass Ihnen die sehr vertrauten Attribute der Präsentationsebene (z. B. cellpadding, hspace, align="left" usw.) fehlen und Sie nicht wissen, in welche CSS-Anweisungen Sie sie konvertieren sollen. Sobald Sie das erste Problem gelöst haben und wissen, wie Sie Ihren HTML-Code strukturieren, gebe ich Ihnen eine Liste mit detaillierten Angaben darüber, welches CSS Sie verwenden sollten, um die ursprünglichen Präsentationsattribute zu ersetzen.
Strukturiertes HTML
Wenn wir zum ersten Mal lernen, eine Webseite zu erstellen, überlegen wir immer zuerst, wie wir sie gestalten sollen, und berücksichtigen dabei die Bilder, Schriftarten, Farben und Layoutpläne. Dann zeichnen wir es mit Photoshop oder Fireworks und schneiden es in kleine Bilder. Bearbeiten Sie abschließend den HTML-Code, um alle Designs auf der Seite wiederherzustellen.
Wenn Sie möchten, dass Ihre HTML-Seite mit CSS (CSS-freundlich) gestaltet wird, müssen Sie noch einmal von vorne beginnen. Denken Sie nicht zuerst an das „Erscheinungsbild“, sondern zuerst an die Semantik und Struktur Ihres Seiteninhalts.
Das Aussehen ist nicht das Wichtigste. Eine gut strukturierte HTML-Seite kann in jedem Erscheinungsbild dargestellt werden, und CSS Zen Garden ist ein klassisches Beispiel. CSS Zen Garden hilft uns, endlich die Leistungsfähigkeit von CSS zu erkennen.
HTML dient nicht nur zum Lesen auf einem Computerbildschirm. Ihre sorgfältig in Photoshop gestalteten Bilder werden möglicherweise nicht auf PDAs, Mobiltelefonen und Bildschirmleseprogrammen angezeigt. Aber eine gut strukturierte HTML-Seite kann durch verschiedene CSS-Definitionen überall und auf jedem Netzwerkgerät angezeigt werden.
Fang an zu denken
Das erste, was man lernen muss, ist, was „Struktur“ ist, was manche Autoren auch „Semantik“ nennen. Dieser Begriff bedeutet, dass Sie Ihre Inhaltsblöcke und den Zweck, dem jeder Inhalt dient, analysieren und dann die entsprechende HTML-Struktur basierend auf diesen Inhaltszwecken erstellen müssen.
Wenn Sie sich hinsetzen und Ihre Seitenstruktur sorgfältig analysieren und planen, könnten Sie am Ende so etwas erhalten:
Logo und Site-Name
Inhalt der Hauptseite
Site-Navigation (Hauptmenü)
Untermenü
Suchfeld
Funktionsbereiche (z. B. Warenkorb, Kasse)
Fußzeile (Urheberrecht und damit verbundene rechtliche Hinweise)
Normalerweise verwenden wir DIV-Elemente, um diese Strukturen zu definieren, ähnlich wie hier:
| Nachfolgend der zitierte Inhalt: ＜div id="header"＞＜/div＞ ＜div id="content"＞＜/div＞ ＜div id="globalnav"＞＜/div＞ ＜div id="subnav"＞＜/div＞ ＜div id="search"＞＜/div＞ ＜div id="shop"＞＜/div＞ ＜div id="footer"＞＜/div＞ |