Blog - webdesign, javascript, jquery, html, css, php

Nachdem wir die ersten Information über das Projekt erhalten haben erstellen wir den ersten Entwurf für das Layout. Welche Bereiche wir brauchen haben wir in Part 01 schon geklärt. Die Anordnung der einzelnen Elemente unterliegt mitunter auch der grundlegenden Suchmaschinenoptimierung.


#alldiv

dieser Div umschließt allen anderen Inhalt der Seite um eine zentrale Ausrichtung möglich zu machen.

#header
Wie zu erwarten ist der Header unser erstes wirklich Element. Er kann ohne schlechtes Gewissen nach ganz oben gesetzt werden da man dem Schmuckbild ( was ja meistens dort zu finden ist ) nur ein ausreichendes "alt" Attribut geben muss um es Sinnvoll für Google zu gestalten.

#spacer

Ein bislang relativ unnützer Div da sein eigentlicher Sinn, einen Raum zwischen Header und dem Rest zu bilden auch durch ein padding/margin für den #header zu erreichen ist. Aber man weiß ja nie ob man vllt. doch ein Bild oder Text einfügen will und somit darf dieser Div ersteinmal bleiben.

#content

Der eigentliche Inhalt der Seite wird immer in diesem Div dargestellt. Da der Inhalt der Seite fast an erster Stelle kommt wird er normalerweise gut von Google übernommen.

#menuleft

Um zu verhindern das das Menü bei Google vor unserem Inhalt angezeigt wird ist sein Ursprung weiter unten. Per "position: absolute" findet es dann seinen gewohnten Platz auf der linken Seite. Vorteil dieser Methode ist zu einem der SEO Aspekt und zu anderem der Punkt das wir unser Menü einfach per CSS "hinschieben" können wo es gefallen findet.

#menuright

Die Positionierung und Sinn sind dem #menuleft fast identisch. Der Inhalt sind 2 weitere Divs die die Bereiche "dates" und "releases" darstellen. #menuright existiert nur um einen leicht "verschiebbaren" rechten Bereich zu haben.

#divchangepic

Um den Punkt "wechselnde Grafik im Header je nach Menüpunkt" zu erreichen wurde dieser Div erstellt. Er enthält immer das Bild für den aktuell ausgewählten Bereich. Er wird ebenfalls durch "position: absolute" flexibel. Da er Google keine relevanten Daten zur Verfügung stellt ist sein Platz weit unten.

#footer

Prinzipiell ist der Platz des Footers ganz unten auf der Seite aber falls der Inhalt Sinn für Google macht kann man ihn auch weiter oben ansetzen und ihn per CSS wieder nach unten schieben. In unserem Fall ist er aber ein Block Element da wir keine Daten für Google haben.

Das Layout sind nun wie folgt aus:


Die etwas ungewöhnlichen Farben sind nur gegeben um die einzelnen Bereichen besser Erkennbar zu machen. In Part 03 werden wir die Grundstruktur des Menüs bzw. der Navigation in PHP ausarbeiten.

• Veröffentlicht:
• 28.04.2008
• Author:
• Mathias Schübel
• Permalink:
• http://www.schuebel-webdesign.de/blog/11