Das Webdesign von Startseite, Header und Footer der CoffeeLove-Webseite haben wir im vierten Teil des Tutorials abgeschlossen. Der schwierigste Teil des Design-Prozesses ist also bereits geschafft. Jetzt fehlt nur noch die Gestaltung der Unterseiten und des Blog-Elements. Außerdem kannst du auch gleich noch alle Bilder deines Webdesigns zuschneiden, und als CSS Sprites generieren. Hast du all dies erledigt, kannst du im nächsten Schritt (bzw. im nächsten Tutorial) endlich mit der Programmierung deiner Webseite beginnen.

Also los geht’s, machen wir uns an die Arbeit!

1. Die Gestaltung der Unterseiten

Im zweiten Teil des Tutorials hatte ich gezeigt, wie du das Mockup für alle Seiten erstellst. Nachdem die Startseite der CoffeeLove-Webseite bereits fertig gestaltet ist, müssen wir uns jetzt noch um die Unterseiten Über Uns, Kontakt und den Blog kümmern. Da es wenig Sinn macht, alle Gestaltungs-Elemente der Unterseiten hier im Tutorial noch einmal Schritt für Schritt durch zu gehen, habe ich die Unterseiten bereits fertig gestaltet und bespreche jetzt nur noch einmal kurz die wichtigsten Elemente.

1.1. Die About-Seite

Webdesign Tutorial Teil5

Auf der About-Seite gibt es eigentlich keine besonderen Schwierigkeiten in der Programmierung. Als zentrales Element halte ich ein Foto des Teams für sehr wichtig. Außerdem kann man in drei Spalten unter dem Haupt-Element der Über Uns-Seite ein wenig mehr über das CoffeeLove Café erfahren.

1.2. Die Blog-Seite

Webdesign Tutorial Teil5

Das Blog-Element habe ich »Aktuelles« getauft, da hier vor allem Neuigkeiten, Veranstaltungen und kleine Hinweise veröffentlicht werden sollen. Ich plane in diesem Theme nicht den sonst üblichen Weiterlesen-Button zu verwenden, sondern die kompletten Beiträge auf der Haupt-Seite des Blogs anzuzeigen. Da die Beiträge meist eher kurz sein werden, halte ich das in diesem Fall für die geeignete Lösung (ansonsten müssten die Leser zu viele Unterseiten anklicken, um die aktuellen Beiträge lesen zu können).

Auf der Blog-Seite habe ich auch eine kleine Sidebar eingerichtet. Ein wichtiges Element sind dabei die Flickr-Fotos. So können immer aktuelle Bilder des Cafés gezeigt werden. Das Element werde ich in der Programmierung mit Hilfe des Flickr-Widgets in die Sidebar integrieren.

Außerdem wird es eine Übersicht der neusten Blog-Beiträge und der neusten Kommentare in der Sidebar geben.

1.3. Die Kontakt-Seite

Webdesign Tutorial Teil5

Auf der Kontaktseite habe ich mir für ein Kontakt-Formular entschieden (dieses kann ich mit einem praktischen WordPres-Plugin leicht umsetzen), und die Integration eines Google Maps Elements. Adresse und Öffnungszeiten sind ja bereits im Footer untergebracht.

Soweit habe ich also alle Unterseiten mit Hilfe von Blindtexten und Platzhaltern für die Bilder gestaltet. Natürlich können später (z.B. auf dem Blog) noch weitere Elemente hinzukommen. Wichtig finde ich allerdings, dass das Seiten-Layout geklärt ist und alle vorhandenen Elemente innerhalb des Grids angeordnet sind, bevor man mit der Programmierung einer Webseite beginnt.

2. Images ausschneiden und für die CSS Programmierung vorbereiten

Nach der Gestaltung der Unterseiten gibt es noch eine weitere wichtige Aufgabe, bevor es endlich mit der Programmierung los geht. Du solltest alle Images des Webdesigns (z.B. Hintergründe, Icons, das Logo) ausschneiden und als transparente PNG oder JPG’s in einen Images-Ordner speichern. Dabei ist wichtig, dass die Bilder nicht unscharf sind, und das die Dateigröße der Bilder möglichst gering ist.

Ich habe mir das Webdesign der CoffeeLove-Seite noch einmal ganz genau angeschaut, und überlegt wie viele Images ich benötigen werde.

Webdesign Tutorial Teil5
Alle Elemente, die ich als Images benötige habe ich im Layout nummeriert.

Natürlich benötige ich ein Hintergrund-Bild für die grisselige, hellbraune Fläche, sowie ein Image für die alte Landkarte im Header-Bereich. Außerdem ist mein Logo ein Bild, und alle verwendeten Icons. Da ich im Footer eine gestrichelte Linie, sowie eine zweifarbigen Rand (border) gestaltet habe, werde ich hierfür ebenfalls ein Image ausschneiden. Für alle horizontalen Flächen (wie z.B. den Footer-Hintergrund) reicht es allerdings, wenn ich ein ganz kleines Stückchen des Bildes ausschneide, und dieses dann im CSS mit background x-repeat horizontal aneinanderreihe.

Ausschneiden kannst du deine Teil-Bilder entweder mit dem Slice-Tool in Photoshop, oder indem du die Dokument-Ebene auf das Detail zuschneidest, alle anderen Ebenen deines Layouts ausblendest, und dein Bild dann für Web und Geräte abspeicherst.

Webdesign Tutorial Teil5
Hier sind alle Images, die ich für die CoffeeLove-Startseite benötigen werde.

3. Praktische CSS Sprites verwenden

Um nicht jede Menge einzelne Images für deine Programmierung zu verwenden, kannst du alle gemeinsam auf einem Bild, einem sogenanntes Sprite anlegen. Mit Sprites kannst Ladezeiten für deine Webseite sparen, und außerdem hast du alle Bilder übersichtlich gemeinsam angelegt. Mit der CSS-Eigenschaft »background-position« kannst du dann jeweils bestimmen, welcher Ausschnitt das Sprites jeweils angezeigt werden soll.

Auf der Webseite von CSS-Tricks findest du eine ausführliche und hilfreiche Erklärung zum Thema CSS Sprites.

Die Sprites selbst anzulegen, und die Positon jedes Elements zu bestimmen, ist jedoch sehr mühsam. Daher gibt es praktische Sprites Online-Generatoren, die diese Arbeit für dich übernehmen. Du kannst also wie gewohnt erst alle Bilder einzeln ausschneiden, und dann anschließen ein einzelnen Sprite-Image, inklusive dem dazugehörigen Code aus deinen Einzelbildern generieren.

Du kannst dafür z.B. den CSS Sprites-Generator verwenden.

Webdesign Tutorial Teil5
Beim CSS Sprites-Generator kannst du alle einzelnen Bilder für dein Layout von deinem Computer hochladen, und als Sprites generieren.

Der CSS Sprites Generator erstellt dir ein einziges PNG-Image deiner Einzelbilder, und gibt dir dazu auch gleich noch den genauen CSS Code an.

Webdesign Tutorial Teil5
So sieht das generierte Sprite für die Bilder der CoffeeLove-Webseite aus.

Nachdem du dir alle benötigen Bilder für dein Webdesign ausgeschnitten und als CSS Sprites generiert hast, geht es im nächsten Teil des Webseiten-Tutorials endlich mit der Programmierung des WordPress-Themes los. Dazu werde ich ein leeres WordPress-Theme als Grundlage verwenden, und das Design der CoffeeLove-Webseite Schritt für Schritt umsetzen.

Ich hoffe dir hat auch dieser Teil des Tutorials wieder gefallen, und du kannst die Tipps und Tricks meiner Arbeitsweise auch bei deinen eigenen Webseiten-Entwürfen anwenden. Über dein Feedback, weitere Tipps und deine eigenen Erfahrungen freue ich mich sehr!

Weitere Teile der Tutorial-Serie