Lionstarrs Linux Blog

Vor dem Anfang gleich gesagt: Wer das Layout ausprobieren möchte sehe hier nach, und hier kann man das Layout downloaden.

Teil 1
Teil 2
Teil 3

1. Zerschnippeln des Layouts

Wilkommen im zweiten Teil dieses Tutorials. Nachdem wir nun im ersten Teil ein Design in GIMP erstellt haben, wollen wir es nun für CSS aufbereiten. Was man verstehen muss ist, dass CSS den Effekt von sich wiederholenden Bildern nutzt. So muss man keine riesigen Bilder übertragen und hat außerdem die Möglichkeit flexibel auf die Länge des Inhalts zu reagieren bzw. es wird automatisch auf die Länge reagiert. Dazu muss man aber Bilder erstellen, denen es nicht anzusehen ist, dass sie sich wiederholen.

Als erstes nehmen wir uns dazu das wichtigste Hintergrundbild, den Hintergrund der wiederholt wird vor. Dazu wählen wir in der Mitte des Bildes einen Bereich der vollen Breite und von nur wenig Höhe aus. Wichtig dabei ist nur, dass weder der Header noch die Ecken dieses Bereiches hier zu sehen sind. Mit Bearbeiten -> Sichtbares Kopieren und Bearbeiten -> Einfügen als neues Bild erzeugen wir ein neues Bild, welches wir background.png nennen und speichern. Spätestens jetzt ist es Zeit einen Ordner anzulegen, der die “Webseite” enthalten soll – in diesem solte ein weiterer Ordner liegen, mit dem Titel images. Hier speichern wir alle für die Webseite benötigten Bilder.

Insgesamt drei Bereiche sollen auf diese Art als einzelne Bilder gespeichert werden: Das Hintergrundbild haben wir eben schon gespeichert, jetzt fehlen noch der Header und der Footer. Die Auswahl sollte der im Bild ähneln, wichtig ist, dass der Schatten mit ausgewählt ist. Außerdem sollte die Auswahl immer über die volle Breite gehen und beim Header sollte die Höhe 100px betragen, beim Footer 30px. Falls das nicht klappt, kein Problem, hier kann man meine Grafiken runterladen.

Erstellen der HTML und CSS Datei

Jetzt kommt das erste mal Weaverslave oder der Editor der Wahl zum Einsatz.
Hier der HTML-Code und hier der CSS-Code.

Speichert die Dateien als index.html und style.css im selben Verzeichnis, in dem auch euer images-Ordner liegt. Nun müsstet ihr beim Aufrufen der Seite schon das fertige Design sehen.

Der Text im Design ist sogenannten Blindtext – bedeutungsloser Text der nur zur Verdeutlichung der Text-Formatierung benutzt wird. Das gesamte Layout wurde zentriert, indem die CSS-Eigenschaften position auf absolute und top sowie left auf 50% gesetzt wurden. Nun wurde durch einen negativen Margin das Layout positioniert.

Diese Technik funktioniert allerdings nur, wenn man eine feste Breite und Höhe eingestellt hat. Damit wäre das Layout erledigt, wer nun das ganze in allen möglichen Farben erstrahlen lassen will, der lese Teil 3 dieses Tutorials.