Bei der Webseitenerstellung gibt es viele Begriffe, wie zum Beispiel: CSS, HTML, DHTML, XHTML und so weiter. Im folgenden Artikel werden wir einige Grundkenntnisse über HTML verwenden. Bevor Sie dieses Einführungs-Tutorial studieren, stellen Sie bitte sicher, dass Sie bereits über gewisse Grundkenntnisse in HTML verfügen. Beginnen wir Schritt für Schritt mit der Verwendung von DIV+CSS zum Entwerfen des Webseitenlayouts.
Der erste Schritt bei allen Designs ist die Konzeption. Im Allgemeinen müssen Sie PhotoShop oder FireWorks (im Folgenden als PS oder FW bezeichnet) und andere Bildverarbeitungssoftware verwenden, um einfach das zu erstellende Schnittstellenlayout zu zeichnen Folgendes habe ich mir für das Schnittstellenlayout ausgedacht.
Als nächstes müssen wir das Layout der Seite basierend auf dem konzeptionellen Diagramm planen. Nach sorgfältiger Analyse des Diagramms können wir leicht feststellen, dass das Bild grob in die folgenden Teile unterteilt ist:
1. Der obere Teil, der auch das Logo, das Menü und ein Bannerbild enthält;
2. Der Inhaltsteil kann in Seitenleiste und Hauptinhalt unterteilt werden;
3. Unten finden Sie einige Copyright-Informationen.
Mit der obigen Analyse können wir unsere Designebene einfach wie unten gezeigt anordnen:
Basierend auf dem Bild oben habe ich ein weiteres tatsächliches Seitenlayoutdiagramm gezeichnet, um die Verschachtelungsbeziehung der Ebenen zu veranschaulichen, damit es leichter zu verstehen ist.
Die DIV-Struktur ist wie folgt:
│body {} /*Dies ist ein HTML-Element, ich werde die Details nicht erklären*/
└#Container {} /*Seitenebenencontainer*/
├#Header {} /*Seitenkopf*/
├#PageBody {} /*Seitentext*/
│ ├#Sidebar {} /*Sidebar*/
│ └#MainBody {} /*Hauptinhalt*/
└#Footer {} /*Ende der Seite*/
Zu diesem Zeitpunkt sind das Seitenlayout und die Planung abgeschlossen und als Nächstes müssen wir mit dem Schreiben von HTML-Code und CSS beginnen.
Als nächstes erstellen wir einen neuen Ordner auf dem Desktop und nennen ihn „DIV+CSS Layout Exercise“. Erstellen Sie zwei leere Notepad-Dokumente unter dem Ordner und geben Sie den folgenden Inhalt ein:
Dies ist die Grundstruktur von XHTML. Nennen Sie sie index.htm und das andere Notepad-Dokument css.css.
Als nächstes schreiben wir die Grundstruktur von DIV in das Tag-Paar <body></body>. Der Code lautet wie folgt:
<div id=container><!--Page Layer Container-->
<div id=Header><!--Page header-->
</div>
<div id=PageBody><!--Page body-->
<div id=Sidebar><!--Sidebar-->
</div>
<div id=MainBody><!--Main content-->
</div>
</div>
<div id=Footer><!--Bottom of page-->
</div>
</div>
Um das Lesen des Codes in Zukunft zu erleichtern, sollten wir relevante Kommentare hinzufügen. Öffnen Sie als Nächstes die Datei css.css und schreiben Sie die CSS-Informationen.