Templaterie Blog

~Webdesign, Layout, Templates, Beispiele~

18.02.2007

Step 2: vom grafischen Entwurf zur Planung der HTML

Silke Schümann wrote this 15:41:

Nachdemich mich nun für einen Entwurf entschieden habe, den ich Umsetzen möchte. Kommt die Phase zwei. Schon bei der Arbeit am Entwurf, habe ich verschiedene Schnittmuster im Kopf, mit denen man das jeweilige Template umsetzen könnte. In dieser Phase exportiere ich jedoch auch schon mal die eine oder andere Variante um nach bei der Umsetzung in HTML flexibel verschiedene Lösungen probieren kann. In der folgenden Grafik sind bereits ein paar Elemente gekennzeichnet, die exportiert wurden.

Grafiken exportieren für die HTML-Umsetzung

Der Ast, die rote Fläche, der helle Rahmen, die Birnen im Hintergrund und der Granatapfel, sein Schatten und seine Spiegelung liegen jeweils auf einer eigenen Ebene und können ein uns ausgeblendet werden, gerade so, wie hier die Texte (Title, Navigation und Blindtext) ausgeblendet wurden (Siehe zum Vergleich erster Entwurf in Step 1).

Noch rasch die PHP für die Bild-Liste mit den Werten in den Image-Ordner kopiert, damit die Werte übersichtlich und im schnellen Zugriff sind.

Moment … was sind das für komische Dateinamen?

Sprechende Dateinnamen für die Layout-Grafiken

Meine Templates folgen einem Schema, so das ich nicht lange überlegen muss, was wo hin gehört und welche Position oder Funktion das Element in der Website hat. Weil ich schreibfaul bin gibt es eine einfache Konvention. Das Kürzel “te” damit mein CSS nicht in Konflikt gerät mit CSS-Anweisungen für Plugins. “w” für den Wrapper, der unmittelbar nach dem Body kommt und den ich wenn es geht versuche zu vermeiden. “c” soweit erforderlich und das ist meistens der Fall, der DIV um den zentralen Inhaltsblock. Gelegentlich gibt es hier numerisch “c1″, “c2″, etc. weitere umschließende DIVs. Diese DIVs können häufig in Seiten, die auf ein CMS verzichten weggelassen werden. Mit einem CMS machen diese Sinn, da sie dem Nutzer ersparen Layout-Klassen den Absätzen zu geben oder gar Layout Elemente zu schreiben.

Nun werden die Elemente zu den Grafiknamen zusammengesetzt. bg_tew.jpg verät mir, dass diese Grafik im CSS als Background für den Wrapper nach dem Body mit der ID “tew” definiert werden wird. wenn ich keine unterschiedlichen Rahmen für diverse DIVs im Template habe, spare ich mir gerne die nährere Kennzeichnung. Die Bezeichnung corner_tl.gif verrät mir, dass es sich um eine Ecke lt sprich left top also links oben handelt. natürlich existieren hier alle vier Ecken. Was also frame_left.gif (zu dem es auch ein ~_top.gif gibt) bedeutet, kann man sich nun schon denken. Es exisitert auch ein frame_h.gif und ist eine der erwähnten Varianten, um flexibel zu bleiben. Dieser Name steht für Rahmen hoirizontal zum Counterpart frame_v.gif für den Rahmen vertikal. deco_?.gif sind Dekoelemente, die alleinstehend in das Template eingearbeitet werden. Häufig haben diese einen extra DIV ganz am Ende der Seite. Mit den Konventionen erübrigt sich schon ein Großteil der Dokumentation für das Template, so dass ich mich auch noch nach Wochen und Monaten schnell darin wieder zurecht finde. Dazu aber in Step 3 mehr ….

Parallel greife ich mit dem Kolorgenerator aus der Grafik die Hex-Werte. Mit dem Kolorgenerator deswegen, weil man mit ihm ganze Paletten leicht in verschiedenen Formaten exportieren kann und so z.B. in das demnächst erscheinende Update von Editland zum Template benutzerdefinierte Schriftfarben ergänzen kann. Hier lautet der Farbklang wie folgt: