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 ganz einfach wie unten gezeigt anordnen:
Basierend auf dem Bild oben habe ich ein 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.