moritz-abraham.de
Website Template: barrierefrei und grafisch (Teil 1)
Immer wieder stößt man auf das Problem, dass man ein konkretes Bild vom Aussehen einer Website hat, aber Probleme damit hat, es umzusetzten. Will man dann noch auf den Einsatz von Tabellen verzichten und nur mit Blöcken arbeiten wird es noch komplizierter. Aber auch nur mit CSS und XHTML kann man einen ansprechenden Webauftritt gestalten, wie das folgende zweiteilge Tutorial zeigen soll.
Die Zutaten
Als Hilfsmittel verwende ich hier nur GIMP, um die Grafiken zu erstellen, und Proton, meinen Liebingseditor. Prinzipiell ist jedes Grafikprogramm und jeder Editor geeignet, man muss sich nur damit auskennen. Um das neue Layout zu testen benötigt man ein paar verschiedene moderne Browser, denn nichts ist ärgerlicher, als feststellen zu müssen, dass das tolle Design nur in Firefox toll aussieht.
Los gehts
Natürlich müsste hier an erster Stelle der Entwurf stehen. Also die grundlegende Idee, wie die Seite aussehen soll, welche Funktionen sie haben soll und welche Funktion beim Design schon beachtet werden muss. Doch das alles soll hier in den Hintergrund rücken, wir wollen jetzt einfach das vorgegebene Design umsetzten.
Dazu erstellen wir in GIMP ein neues Bild mit 600 x 600 Pixeln. Damit ist die Breite der Seite schon mal festgelegt, die Höhe ist eher willkürlich gewählt. Es hat sich aber als sinnvoll erwiesen, dass Breite und Höhe gleich sind. Dadurch, dass wir die Vorlage in mehrere Teile zerschneiden, sagt die Höhe auch nichts über die mögliche Höhe auf der Website aus.
Jetzt färben wir den Hintergrund in der gewünschten Farbe, bei mir ist es #dce0d3. Dann wird mit STRG+A alles markiert und dann über Auswahl-Verkleinern... die Auswahl um 15 px verringert. Jetzt ist genügend Platz zu allen Seiten um den Schatten über Script Fu-Schatten-Schlagschatten einzufügen. Der Versatz in beide Richtungen muss 0 sein, sonst ist auf einer Seite mehr Schatten zu sehen als auf der anderen. Der Radius des Weichzeichners sollte nicht größer als 15 sein, denn sonst wird der Schatten größer, als das ganze Bild und der Verlauf zum Rand hin wirkt abgehackt. Jetzt kann die noch bestehende Markierung mit weißer Farbe gefüllt werden.
Das Menü
Damit ist das Grunddesign schon mal fertig. Jetzt fehlt noch die Schattierung unter dem Menü und der Verlauf zum Ende der Seite hin. Wenn wir annehmen, dass das Bild im Kopf der Seite 120 px hoch ist und dass der weiße Kasten im Fuß der Seite 60 px hoch sein soll, so muss das Menü also von oben gemessen bei 135 px beginnen und bei 525 px enden. Warum? Nun, wir müssen berücksichtigen, dass der Rand ja schon jeweils 15 px sowohl von oben als auch von unten wegnimmt.
Um das Menü zu erstellen wird wieder alles markiert und dann das rechteckige Auswahlwerkzeug gewählt. In den Werkzeugeinstellungen wählt man aus, dass von der Auswahl abgezogen werden soll. Zudem empfielt es sich, den Zoom-Faktor auf 100% zu stellen, denn nur dann kann man wirklich pixel-genau arbeiten. Nun beginnt man mit der Auswahl oben links außerhalb des Bildes weitet die Markierung bis über das rechte Ende aus. Jetzt richtet man seinen Blick auf die linke untere Ecke des Bildfensters. Hier werden die Koordinaten des Mauszeigers bezüglich des linken, oberen Bildpunktes angezeigt. Achtung: Nicht mit der Größe der Auswahl in der Mitte des unteren Randes verwechseln! Man zieht die Auswahl also jetzt so lange, bis der Vertikal-Wert auf 135 px steht und achtet drauf, dass der Horizontal-Wert über 600 px bleibt. Wenn man jetzt los lässt, hat man schon mal die obere Begrenzung des Menüs erstellt. Jetzt fängt man mit der Auswahl von unten links an und bringt den Vertikal-Wert auf 525 px. Damit ist das Menü nach oben und unten begrenzt, aber noch nicht zu den Seiten hin. Dazu knappst man wieder mit dem Auswahlwerkzeug links 15 px weg (der Schatten!) und von rechts 445 px so, dass das Menü am Ende 140 px breit ist.
Nun kann die Auswahl gefüllt werden und zwar mit der Farbe #eef2e4. So erreicht man, dass zwar der Farbton des Hintergrunds eingehalten wird, das Menü sich aber dennoch sicher vom Hintergrund abhebt. Jetzt markiert man noch unterhalb des Menüs einen 15 px hohen Kasten in der Breite des Menüs. Hier kann man wieder ähnlich wie oben vorgehen: Alles markieren und dann wieder Abziehen, was zuviel ist. Die obere Kante des Kastens ist bei 525 px, die untere bei 540 px, die linke wieder bei 15 px und die rechte bei 155 px. Nun wird die Auswahl mit einer Verlaufsfüllung eingefärbt. Dazu wählt man zuerst die Huntergrundfarbe auf weiß und belässt die Vordergrundfarbe auf #eef2e4. Geht man jetzt auf das Verlaufsfüllungswerkzeug sind schon die richtigen Farben eingestellt Jetzt hilft uns wieder die Anzeige der Cursor-Position. Denn nun platzieren wir den Mauszeiger auf der Höhe 525 px auf der Markierung, drücken die Maustaste und gleich danach die STRG-Taste und ziehen die Maus bis wir 540 px vertikal erreicht haben. Kurze Kontrolle noch, dass der angezeigte Pfad auch gerade ist (die STRG-Taste sorgt in gewissen Rahmen dafür) und dann loslassen. Fertig!
Unterteilen
Das Design ist fertig. Jetzt erst mal speichern. Nun müssen wir das ganze noch in drei Teile unterteilen, damit wir später flexibler gestalten können. Also markieren wir über die ganze Breite hinweg von oben 135 px, gehen auf Bild zuschneiden und speichern das Ergebins als top.png ab. Bei der Warnung, dass PNG keine Ebenen unterstützt müssen wir Exportieren wählen, sonst verschwindet unser Schatten. Nach dem Speichern einmal auf Bearbeiten-Rückgängig klicken und dann die unteren 60 px von 525 px bis 600 px markieren und auf die selbe Art unter bottom.png speichern. Diese Schritte dann noch ein letztes mal für den Breich von 130 px bis 180 px durchführen und als middle.png speichern. Hier benötigen wir nicht den ganzen Bereich, da wir einfach das selbe Bild so oft wiederholen können, bis die gewünschte Höhe erreicht ist.
Damit endet der erste Teil dieses Tutortials. Wie diese drei Dateien eingebunden werden steht im nächsten Teil.
Links zum Thema