www.BuntesWeb.de - Computer & Internet

Das Homepage-Handbuch speziell für blutige Anfänger

Webdesign - Wir erstellen eine Beispielhomepage

Das Layout - Jetzt kommt Farbe ins Spiel

Nachdem wir nun das Layout - sozusagen im Rohbau - vorliegen haben, können wir uns um die "Tapete" kümmern. Wir versehen die Homepage mit einem hübschen Hintergrund und setzen die einzelnen Bereiche (Kopfzeile, Navigation, Inhalte und Fußzeile) farblich in Scene.

1. Hintergrundbild und Hintergrundfarbe für die Seite allgemein

Das Bild anbei habe ich als Tapete ("tapete.gif") vorgesehen. Sie können es mit einem Rechtsklick und 'Speichern unter' auf Ihren Rechner herunterladen. Speichern Sie es direkt in Ihrem Homepageverzeichnis. Dann öffnen Sie Ihre Seite "vorlage.htm" und wählen diese Grafik als Hintergrundbild aus. Näheres über den Einbau von Hintergrundfarben und -bildern können Sie im Kapitel Grundelemente-Dokumenteigenschaften nachlesen. Mit der Tapete sollte die Seite etwa aussehen, wie die Beispielseite 6. - Wow, wir machen Fortschritte! Plötzlich wirkt die Seite schon beinahe komplett. Wir wollen aber sicher gehen, dass die Seite auch dann noch ganz passabel aussieht, wenn der unwahrscheinliche Fall eintritt und jemand keine Bilder in seinem Browser sehen kann. Für diesen Zweck bestimmen wir zusätzlich zum Hintergrundbild in den Dokumenteigenschaften auch noch eine Hintergrundfarbe, so wie in der folgenden Abbildung:

Die Farbe mit der Hexadezimalen Bezeichnung #EEDDCC entspricht nur ungefähr der Tapete. Es kommt gar nicht so sehr darauf an, da diese Farbe wirklich nur benötigt wird, wenn das Bild für die Tapete (noch) nicht geladen wurde.

  

  

Texthintergrund

Auf dieser gemusterten Tapete ist der Text nicht sonderlich gut lesbar. Für den Textbereich wählen wir daher lieber einen einfarbigen Hintergrund. Wie wäre es mit einem freundlichen und nicht zu knalligen Gelb. Rufen Sie die Tabellenzelleneigenschaften des Textbereiches (Inhalte) auf und wählen Sie als Hintergrundfarbe den Wert #FFFFCC.

Diese Farbe passt recht gut zu dem hautfarbenen Rest der Seite und auf der hellen musterfreien Farbe ist der Text sehr gut lesbar. Siehe Beispielseite 7.

  

  

Farben von Navigation und Fußzeile

Die Navigation und die Fußzeile befinden sich in externen Seiten, deren Hintergrundfarbe müssen wir daher auch gesondert festlegen. Bearbeiten Sie jeweils die Seite navigation.htm und die Seite fusszeile.htm und wählen Sie in deren Dokumenteigenschaften eine Hintergrundfarbe aus. Ich schlage die Farbe #886644 vor. Das ist ein recht dunkler Braunton.

Nachdem wir als Hintergrundfarbe das recht dunkle Braun gewählt haben, ist der schwarze Text natürlich nicht mehr gut lesbar. Darum kümmern wir uns sofort auch um die Textfarben. Hier wählen wir den Gelbton (#FFFFCC), den wir auch für den Texthintergrund unserer Inhalte verwenden. Der macht sich ganz gut auf dem dunklen Braun. Und da wir weder in der Navigationszeile noch in der Fußzeile die üblichen blauen Links haben wollen, wählen wir auch für sämtliche Linkfarben den selben Gelbton.

Hier die Beispielseite 8 mit allen Farben bis dahin.

  

  

  

Textfarben für die Hauptseite

Da nun alle Hintergrundfarben und die Textfarben für Navigation und Fußzeile festgelegt sind, sollten wir auch den Text auf der Seite "vorlage.htm" einfärben. Als Gegenstück zu den Leisten haben wir ja für den Text als Hintergrundfarbe den Gelbton festgelegt. Wie wäre es nun auch mit einem dunklen Braun als Schriftfarbe? Allerdings wäre die Hintergrundfarbe der Navigation als Schriftfarbe viel zu blass. Daher wählen wir einen wesentlich dunkleren Braunton für die Schriftfarbe. Und da wir schon dabei sind, legen wir auch gleich die Farben für die Links fest. So sehen die Dokumenteigenschaften letztlich aus:

Damit wir uns das Ergebnis anschauen können und auch die Linkfarben betrachten können, sollten wir einen Testlink in den Text einbauen. Sehen Sie sich die Beispielseite 9 an.
 

Das wars eigentlich schon. Abschließend probiert man das Layout mit einigen Testinhalten aus. Dabei bemerkt man oft noch das eine oder andere Problem.

Lesen Sie daher weiter >>>  Noch etwas Feinschliff und das wars dann

Seitenanfang || www.BuntesWeb.de - Startseite | Stichwortverzeichnis | Impressum