Artikelformat

Webdesign für Anfänger – So erstellst du ein Layout

Heute legen wir den Hauptbereich, den Container an. Es gibt in HTML viele Tags, die im Grunde die selbe Aufgabe erfüllen: Die Definition von Bereichen. Da wären zum Beispiel <header>, <section>, <nav>, <aritcle> und viele mehr. Wenn man mit diesen arbeitet mag das vielleicht geordneter sein, aber im Grunde gibt es keinen Unterschied zwischen all diesen Tags.

Wir werden für das Definieren von Bereichen den Tag <div> benutzen. Damit wir später im Design verschiedene Divs ansprechen können, geben wir den Tags noch das sogenannte Attribut class bzw. id mit. Der Unterschied zwischen den beiden besteht darin, dass class deutlich allgemeiner verwendet werden kann, so können wir zum Beispiel mehrere Divs, die die selben Design-Eigenschaften bekommen sollen auch die selbe class geben, was bei id nicht möglich ist.
Ids verwenden wir, wenn wir einzelne Elemente direkt ansprechen wollen.

Der Quelltext sieht jetzt folgendermaßen aus:

Der Container wird später 900 Pixel breit sein und mittig in der Seite liegen.
An dieser Stelle sollte man sich das Layout für die Site überlegen. Wir verwenden jetzt ein eher klassisches Design mit Header, Navigation, Contentbereich, Sidebar und Footer.

Der Quellcode mit den dafür Notwendigen Divs sieht so aus:

Im nächsten Teil bringen wir Ordnung in das Layout.

Bewerte diesen Artikel
1 Stern2 Sterne3 Sterne4 Sterne5 Sterne

36 Bewertung(en), durchschnittlich: 5,00 von 5

Loading...

Schreibe einen Kommentar

Pflichtfelder sind mit * markiert.