Strukturiertes HTML: Ein Leitfaden für Anfänger zum Üben von DIV+CSS-Webseitenlayout_CSS/HTML

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 noch 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, Webseiten zu erstellen, denken wir immer zuerst darüber nach, 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 gestaltet wird (sie ist CSS-freundlich), müssen Sie noch einmal von vorne beginnen. Denken Sie nicht zuerst an das „Erscheinungsbild“, sondern zuerst an das 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 typisches Beispiel. CSS Zen Garden hilft uns, endlich die Leistungsfähigkeit von CSS zu erkennen.

HTML eignet sich 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.

Beginnen Sie mit dem Nachdenken

Zuerst müssen Sie lernen, 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 ein paar Teile wie diese erhalten:

Logo und Site-Name

Inhalt der Hauptseite

Seitennavigation (Hauptmenü)

Untermenü

Suchfeld

Funktionsbereich (z. B. Warenkorb, Kasse)

Fußzeile ( Urheberrecht und damit verbundene rechtliche Hinweise)

Wir verwenden normalerweise DIV-Elemente, um diese Strukturen zu definieren, ähnlich wie folgt:

＜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＞

Dies ist kein Layout, sondern eine Struktur. Dies ist eine semantische Beschreibung von Inhaltsblöcken. Wenn Sie Ihre Struktur verstanden haben, können Sie die entsprechende ID zum DIV hinzufügen. Jeder Inhaltsblock kann in einem DIV-Container enthalten sein und ein anderer DIV kann darin verschachtelt sein. Inhaltsblöcke können jedes HTML-Element enthalten – Titel, Absätze, Bilder, Tabellen, Listen usw.

Dem oben Gesagten zufolge wissen Sie bereits, wie man HTML strukturiert, und können nun Layout und Stil definieren. Jeder Inhaltsblock kann an einer beliebigen Stelle auf der Seite platziert werden und Farbe, Schriftart, Rahmen, Hintergrund, Ausrichtungseigenschaften usw. des Blocks können angegeben werden.

Die Verwendung von Selektoren ist eine wunderbare Sache.

Der Name der ID ist eine Möglichkeit, einen bestimmten Inhaltsblock zu steuern, indem Sie diesen Inhaltsblock mit einem DIV umschließen und eine eindeutige ID hinzufügen CSS-Selektoren zur genauen Definition des Erscheinungsbilds jedes Seitenelements, einschließlich Titel, Listen, Bilder, Links, Absätze usw. Wenn Sie beispielsweise eine CSS-Regel für #header schreiben, kann diese völlig anders sein als die Bildregel in #content.

Ein weiteres Beispiel ist: Sie können Link-Stile in verschiedenen Inhaltsblöcken durch unterschiedliche Regeln definieren. Etwa so: #globalnav a:link oder #subnav a:link oder #content a:link. Sie können auch unterschiedliche Stile für dasselbe Element in verschiedenen Inhaltsblöcken definieren. Definieren Sie beispielsweise die Stile von p in #content bzw. #footer durch #content p und #footer p. Strukturell gesehen besteht Ihre Seite aus Bildern, Links, Listen, Absätzen usw. Diese Elemente selbst haben keinen Einfluss darauf, auf welchem ​​Netzwerkgerät sie angezeigt werden (PDA, Mobiltelefon oder Internet-TV). Sie können als beliebiges Erscheinungsbild definiert werden.

Eine sorgfältig strukturierte HTML-Seite ist sehr einfach und jedes Element wird für strukturelle Zwecke verwendet. Wenn Sie einen Absatz einrücken möchten, müssen Sie das Blockquote-Tag nicht verwenden. Verwenden Sie einfach das p-Tag und fügen Sie eine CSS-Randregel zu p hinzu, um den Einrückungszweck zu erreichen. p ist ein strukturiertes Tag und margin ist ein Präsentationsattribut. Ersteres gehört zu HTML und letzteres zu CSS. (Dies ist die Trennung von Struktur und Präsentation.)

Auf einer gut strukturierten HTML-Seite gibt es fast keine Präsentationsattribut-Tags. Der Code ist sehr sauber und prägnant.Beispielsweise kann der ursprüngliche Code

jetzt nur noch in HTML schreiben, und alle Dinge, die die Leistung steuern, sind darin geschrieben CSS In strukturiertem HTML ist Tabelle eine Tabelle, nichts anderes (z. B. für Layout und Positionierung).

Üben Sie die Struktur selbst

Das Obige ist nur die grundlegendste Struktur. In der tatsächlichen Anwendung können Sie die Inhaltsblöcke nach Bedarf anpassen. DIVs sind oft verschachtelt. Sie werden sehen, dass es in der „Container“-Ebene weitere Ebenen gibt. Die Struktur ähnelt dieser:

＜div id="navcontainer"＞

＜div id ="globalnav"＞

＜ul＞a list＜/ul＞

＜/div＞

＜div id="subnav"＞

＜ul＞another list＜/ul＞

＜/div＞

＜/div＞

Mit verschachtelten div-Elementen können Sie weitere CSS-Regeln definieren, um die Leistung zu steuern, z Beispiel: Sie können #navcontainer eine Regel geben, um die Liste nach rechts zu zentrieren, #globalnav eine Regel geben, um die Liste nach links zu zentrieren, und #subnav ein völlig anderes Verhalten für die Liste geben.

Ersetzen Sie traditionelle Methoden durch CSS

Die folgende Liste hilft Ihnen, traditionelle Methoden durch CSS zu ersetzen:

HTML-Attribute und entsprechende CSS-Methoden

HTML-Eigenschaft

CSS-Methodenbeschreibung

align="left"

align="right" float: left;

float: right; Verwenden Sie CSS, um jedes Element zu schweben : Bild, Absatz, Div, Titel, Tabelle, Liste usw.

Wenn Sie das Float-Attribut verwenden, müssen Sie eine Breite für das Floating-Element definieren.

marginwidth="0" leftmargin="0" marginheight="0" topmargin="0" margin: 0; Mit CSS kann der Rand für jedes Element festgelegt werden, nicht nur für das Körperelement. Sie können die Randwerte oben, rechts, unten und links des Elements angeben.

vlink="#333399" alink="#000000" link="#3333FF" a:link #3ff;

a:visited: #339; :hover: #999;

a:active: #00f;In HTML wird die Farbe des Links als Attributwert des Körpers definiert. Der Linkstil ist auf der gesamten Seite gleich. Mithilfe von CSS-Selektoren können Link-Stile in verschiedenen Teilen der Seite unterschiedlich sein.

bgcolor="#FFFFFF" Hintergrundfarbe: #fff; In CSS kann die Hintergrundfarbe für jedes Element definiert werden, nicht nur für Körper- und Tabellenelemente.

bordercolor="#FFFFFF" border-color: #fff; Jedes Element kann einen Rand (boeder) festlegen, Sie können jeweils oben, rechts, unten und links definieren

border="3 "cellspacing="3" border-width: 3px; Mit CSS können Sie die Ränder der Tabelle als einheitlichen Stil definieren oder Sie können Farbe, Größe und Stil des oberen, rechten, unteren und linken Rands separat definieren.

Sie können diese Selektoren „table“, „td“ oder „th“ verwenden ＜ br clear="left"＞

＜br clear="right"＞

＜br clear="all"＞

clear: left

klar: richtig;

klar: beides

Viele 2-Spalten- oder 3-Spalten-Layouts verwenden das Float-Attribut zur Positionierung. Wenn Sie eine Hintergrundfarbe oder ein Hintergrundbild in der schwebenden Ebene definieren, können Sie das klare Attribut

cellpadding="3"

vspace="3"

hspace verwenden = „3“ padding: 3px; Mit CSS kann jedes Element das padding-Attribut auf „oben“, „rechts“, „unten“ und „links“ festlegen. Polsterung ist transparent.

align="center" text-align: center;

margin-right: auto; margin-left: auto

Text-align gilt nur für Text

Blockebenen wie div, p können horizontal zentriert werden durch margin-right: auto; und margin-left: auto

Einige bedauerliche Techniken und Arbeitsumgebung

Aufgrund der Da die Unterstützung von CSS durch Browser nicht perfekt ist, müssen wir manchmal einige Techniken übernehmen (Hacks) oder eine Umgebung einrichten (Workarounds), damit CSS den gleichen Effekt wie herkömmliche Methoden erzielen kann. Beispielsweise müssen Elemente auf Blockebene manchmal horizontale Zentrierungstechniken, Box-Model-Bug-Techniken usw. verwenden. Alle diese Techniken werden in Molly Holzschlags Artikel „Integrated Web Design: Strategies for Long-Term CSS Hack Management“ ausführlich beschrieben.