Website Layout: So erstellst du das Grundgerüst einer Seite!

OnPage SEO Buch

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.

Ryte Banner
Ryte mobiler Banner

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

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

Website Layout mit fixer oder elastischer Breite?

Wenn es an die Erstellung einer neue Website geht, taucht automatisch eine Grundsatzfrage im Webdesign auf: soll es ein Website Layout mit fixer oder elastischer Breite sein?

Aus Gründen der Usability sind horizontale Scroll-Balken tunlichst zu vermeiden. Für diese Website beispielsweise zeigt sich aus den Besucher-Statistiken, dass die fixe Breite von 800 Pixels gut gewählt ist: ich kann keine Besucher ausmachen, die mit weniger als 900 Pixeln Browser-Fensterbreite surfen.

Da viele Webmaster das Erscheinungsbild ihrer Webseiten zu 100% selbst im Griff behalten möchten (soweit es die Browser denn überhaupt zulassen!), gibt es bei den heutigen Bildschirm-Auflösungen nur noch wenige Gründe, ein elastisches Layout zu wählen.

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.