In diesem Artikel zeige ich Ihnen, wie Sie mithilfe von div-Tags und in Kombination mit CSS-Eigenschaften ein einfaches Webseiten-Layout erstellen.

In dieser Lektion lernen Sie, wie Sie eine separate Stildatei zum Anhängen an eine HTML-Seite erstellen, einen separaten Bildordner zum Speichern von Mediendaten erstellen … dies ist die grundlegendste Unterteilung, die Sie wissen müssen.

Hinweis : Da Sie Tags wie Kopfzeile, Fußzeile, Artikel in HTML5 nicht gelernt haben, werde ich das gesamte div-Tag verwenden.

Erstellen Sie eine Ordnerstruktur für das Layout

Erstellen Sie zuerst einen Ordner für sich selbst, Sie können ihn überall ablegen. Als nächstes erstellen Sie einen images , eine index.html -Datei und eine style.css -Datei.

Verwenden Sie nun einen beliebigen Editor, um die Dateien index.html und style.css zu öffnen. Derzeit verwende ich Netbeans.

Über die Dateistruktur erkläre ich ein bisschen wie folgt :

• Der Ordner images wird verwendet, um alle Bilder für die Benutzeroberfläche zu enthalten.
• Die Datei index.html ist die Hauptlaufdatei für die Website.
• Die Datei styles.css dient zum Speichern des CSS-Codes

In diesem Beitrag wird ein einfaches HTML-Layout erstellt

Zuerst müssen Sie die grundlegenden Platzierungen auf einer Website verstehen. Schauen Sie sich das Bild unten an.

Wir haben 7 grundlegende Positionen, die jede Website hat, und zwar:

1. Logo => Enthält das Hauptlogo
2. Header => Enthält den Inhalt des oberen Abschnitts.
3. Menü => Abschnitt Hauptmenü zum Navigieren auf der Website
4. Linke Seitenleiste => Der Teil, der die Daten auf der linken Seite der Website enthält
5. Inhalt => Der Teil, der den Hauptinhalt der Website enthält
6. Rechte Seitenleiste => Der Teil, der die Daten auf der rechten Seite der Website enthält
7. Footer => Der untere Teil der Webseite.

Schauen Sie sich die Struktur der freetuts.net-Website selbst an, die Oberfläche hat immer solche Positionen.

HTML-Layout für Layout erstellen

Zuerst müssen wir ein div-Tag erstellen, das alle 7 Positionen umschließt. Für jede Position erstellen wir ein zusätzliches div-Tag, um sie zu umgeben.

 <div id="main_wrapper"> <div id="header"> Header </div> <div id="menu"> Menu </div> <div id="main_content"> <div id="left_sidebar"> Left sidebar </div> <div id="right_sidebar"> Right sidebar </div> <div id="content"> Main Content </div> </div> <div id="footer"> Footer </div> </div>

Jetzt werde ich CSS schreiben, um den Hintergrund für die Positionen festzulegen, es wird einfacher zu sehen sein, wenn diese Anwendung ausgeführt wird.

 #header{ background: yellow; height: 100px; } #menu{ background: grey; height: 30px; } #main_content{ background: pink; } #footer{ background: red; height: 150px; }

Die Kopf-, Menü- und Fußzeilenpositionen sind in Ordnung. Was den Inhalt betrifft, so haben wir die Verarbeitung noch nicht abgeschlossen, da left_sidebar , right_sidebar und Inhalt klar getrennt werden müssen.

Wir werden die Eigenschaft float:left verwenden, um die left_sidebar nach links zu verschieben, float:right auf die right_sidebar nach rechts und ihre Länge auf etwa 300px . Insbesondere für den content geben wir margin-left und margin-right auf 300px an, da die Länge dieser beiden Seitenleisten 300px beträgt.

 #left_sidebar{ float:left; width: 300px; height: 400px; background: blue; } #right_sidebar{ float:right; width: 300px; height: 400px; background: orange; } #content{ margin-left: 300px; margin-right: 300px; height: 300px; background: #fff }

Die linke Seitenleiste und die rechte Seitenleiste haben die Fußzeile überschrieben. Der Grund dafür ist, dass wir float:left und float:right für diese beiden Positionen gesetzt haben, wodurch sie hängend angezeigt werden, also wie weit die Fußzeile nach unten gedrückt wird, wird durch den Main Content bestimmt . Für diesen Teil habe ich die Höhe auf 300 Pixel eingestellt, 400 Pixel niedriger als die Seitenleistenseiten. Es überschreibt also die Fußzeile.

Um dies zu lösen, setzen wir ein nächstes div unter den Inhalt und setzen dann CSS auf clear:both .

 <div id="main_wrapper"> <div id="header"> Header </div> <div id="menu"> Menu </div> <div id="main_content"> <div id="left_sidebar"> Left sidebar </div> <div id="right_sidebar"> Right sidebar </div> <div id="content"> Main Content </div> <div style="clear: both"></div> </div> <div id="footer"> Footer </div> </div>

Bilder ins Layout einfügen

Bitte beachten Sie, dass die Datei index.html eine Ebene über der Bilddatei logo.png .

Fügen Sie es jetzt mit dem img-Tag ein. Bitte ändern Sie die Kopfzeile wie folgt:

 <div id="header"> <img src="./images/logo.png"/> </div>

Legen Sie CSS in einer separaten Datei ab

Wir sollten das CSS in einer separaten Datei ablegen, um es später einfacher zu verwalten. Öffnen Sie die Datei style.css und kopieren Sie den gesamten CSS-Code dorthin.

Importieren Sie als Nächstes diese style.css -Datei in die index.html -Datei, indem Sie den folgenden Code in den Head- Abschnitt einfügen.

 <link href="./style.css" rel="stylesheet"/>

Jetzt haben wir den gesamten Code wie folgt :

 #header{ background: yellow; height: 100px; } #menu{ background: grey; height: 30px; } #main_content{ background: pink; } #footer{ background: red; height: 150px; } #left_sidebar{ float:left; width: 300px; height: 400px; background: blue; } #right_sidebar{ float:right; width: 300px; height: 400px; background: orange; } #content{ margin-left: 300px; margin-right: 300px; height: 300px; background: #fff }

 <!DOCTYPE html> <html> <head> <title>Layout HTML Basic</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="./style.css" rel="stylesheet"/> </head> <body> <div id="main_wrapper"> <div id="header"> <img src="./images/logo.png"/> </div> <div id="menu"> Menu </div> <div id="main_content"> <div id="left_sidebar"> Left sidebar </div> <div id="right_sidebar"> Right sidebar </div> <div id="content"> Main Content </div> <div style="clear: both"></div> </div> <div id="footer"> Footer </div> </div> </body> </html>

Sie wissen also bereits, wie Sie das Layout für eine Website aufteilen. Obwohl dies ein ziemlich einfacher Teil ist, ist er sehr nützlich für diejenigen, die neu in HTML sind. Ich werde diesen Artikel hier beenden, wir sehen uns im nächsten Beitrag.