Das Webdesign von Startseite, Header und Footer der CoffeeLove-Webseite haben wir im vierten Teil des Tutorials abge­schlossen. Der schwie­rigste 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 gene­rieren. Hast du all dies erle­digt, kannst du im nächsten Schritt (bzw. im nächsten Tutorial) end­lich 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üm­mern. 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 wich­tigsten Elemente.

1.1. Die About-Seite

Auf der About-Seite gibt es eigent­lich keine beson­deren Schwierigkeiten in der Programmierung. Als zen­trales 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

Das Blog-Element habe ich »Aktuelles« getauft, da hier vor allem Neuigkeiten, Veranstaltungen und kleine Hinweise ver­öf­fent­licht werden sollen. Ich plane in diesem Theme nicht den sonst übli­chen Weiterlesen-Button zu ver­wenden, son­dern die kom­pletten Beiträge auf der Haupt-Seite des Blogs anzu­zeigen. Da die Beiträge meist eher kurz sein werden, halte ich das in diesem Fall für die geeig­nete Lösung (ansonsten müssten die Leser zu viele Unterseiten ankli­cken, um die aktu­ellen Beiträge lesen zu können).

Auf der Blog-Seite habe ich auch eine kleine Sidebar ein­ge­richtet. Ein wich­tiges Element sind dabei die Flickr-Fotos. So können immer aktu­elle 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 Über­sicht der neusten Blog-Beiträge und der neusten Kommentare in der Sidebar geben.

1.3. Die Kontakt-Seite

Auf der Kontaktseite habe ich mir für ein Kontakt-Formular ent­schieden (dieses kann ich mit einem prak­ti­schen WordPres-Plugin leicht umsetzen), und die Integration eines Google Maps Elements. Adresse und Öffnungs­zeiten 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 wei­tere Elemente hin­zu­kommen. Wichtig finde ich aller­dings, dass das Seiten-Layout geklärt ist und alle vor­han­denen Elemente inner­halb des Grids ange­ordnet sind, bevor man mit der Programmierung einer Webseite beginnt.

2. Images aus­schneiden und für die CSS Programmierung vorbereiten

Nach der Gestaltung der Unterseiten gibt es noch eine wei­tere wich­tige Aufgabe, bevor es end­lich mit der Programmierung los geht. Du soll­test alle Images des Webdesigns (z.B. Hintergründe, Icons, das Logo) aus­schneiden und als trans­pa­rente PNG oder JPG’s in einen Images-Ordner spei­chern. Dabei ist wichtig, dass die Bilder nicht unscharf sind, und das die Dateigröße der Bilder mög­lichst gering ist.

Ich habe mir das Webdesign der CoffeeLove-Seite noch einmal ganz genau ange­schaut, und über­legt wie viele Images ich benö­tigen werde.

Alle Elemente, die ich als Images benö­tige habe ich im Layout nummeriert.

Natürlich benö­tige ich ein Hintergrund-Bild für die gris­se­lige, hell­braune Fläche, sowie ein Image für die alte Landkarte im Header-Bereich. Außerdem ist mein Logo ein Bild, und alle ver­wen­deten Icons. Da ich im Footer eine gestri­chelte Linie, sowie eine zwei­far­bigen Rand (border) gestaltet habe, werde ich hierfür eben­falls ein Image aus­schneiden. Für alle hori­zon­talen Flächen (wie z.B. den Footer-Hintergrund) reicht es aller­dings, wenn ich ein ganz kleines Stückchen des Bildes aus­schneide, und dieses dann im CSS mit back­ground x-repeat hori­zontal aneinanderreihe.

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

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

3. Praktische CSS Sprites verwenden

Um nicht jede Menge ein­zelne Images für deine Programmierung zu ver­wenden, kannst du alle gemeinsam auf einem Bild, einem soge­nanntes Sprite anlegen. Mit Sprites kannst Ladezeiten für deine Webseite sparen, und außerdem hast du alle Bilder über­sicht­lich gemeinsam ange­legt. Mit der CSS-Eigenschaft »background-position« kannst du dann jeweils bestimmen, wel­cher Ausschnitt das Sprites jeweils ange­zeigt werden soll.

Auf der Webseite von CSS-Tricks fin­dest du eine aus­führ­liche und hilf­reiche Erklärung zum Thema CSS Sprites.

Die Sprites selbst anzu­legen, und die Positon jedes Elements zu bestimmen, ist jedoch sehr mühsam. Daher gibt es prak­ti­sche Sprites Online-Generatoren, die diese Arbeit für dich über­nehmen. Du kannst also wie gewohnt erst alle Bilder ein­zeln aus­schneiden, und dann anschließen ein ein­zelnen Sprite-Image, inklu­sive dem dazu­ge­hö­rigen Code aus deinen Einzelbildern generieren.

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

Beim CSS Sprites-Generator kannst du alle ein­zelnen Bilder für dein Layout von deinem Computer hoch­laden, und als Sprites generieren.

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

So sieht das gene­rierte Sprite für die Bilder der CoffeeLove-Webseite aus.

Nachdem du dir alle benö­tigen Bilder für dein Webdesign aus­ge­schnitten und als CSS Sprites gene­riert hast, geht es im nächsten Teil des Webseiten-Tutorials end­lich mit der Programmierung des WordPress-Themes los. Dazu werde ich ein leeres WordPress-Theme als Grundlage ver­wenden, 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, wei­tere Tipps und deine eigenen Erfahrungen freue ich mich sehr!