Im letzten Teil haben wir den Quellcode etwas aufgeräumt bzw. das Inline-CSS in den Kopf der Seite ausgelagert. Heute wollen wir das Layout etwas verbessern und ein Bild einfügen.


Das jetzige Layout ist farblich nicht sehr einfallsreich und außerdem wird die Navigationsleiste nicht bis nach unten gezogen.
Außerdem sollte man natürlich nicht einfach so drauf los programmieren, um eine Webseite zu erstellen. Vorher sollte ein Konzept und ein Design erstellt werden, damit man auch wirklich weiss, was man programmieren muss. Die hier vorgestellte Vorgehensweise ist nur für das Erlernen von HTML und CSS gedacht!
Siehe dazu auch die anderen Kapitel in dieser Artikelreihe.

unser jetziges Layout

unser jetziges Layout

Wir sorgen erstmal dafür, dass die linke Spalte bis nach unten geht. Dafür kann man der Spalte eine Höhe vergeben:

#navigation {border:1px solid blue; padding:5px; width:150px;
height:350px;float:left;background-color:blue;}
Navigation bis nach unten

Navigation bis nach unten

Dies ist erstmal nur die einfache Variante; sie funktioniert aber nur dann gut, wenn der Inhalt der Boxen nicht länger wird als die programmierte Höhe der Box:

Text länger als die Box

Text länger als die Box

Wie Sie sehen, läuft der Text einfach über die Box hinaus. Hier müßte man noch weitere Befehle in CSS auf #inhalt anwenden, damit es keine solchen Probleme gibt. Wir machen es uns für den Anfang aber erstmal einfach und erstellen eine Webseite, die immer die gleiche Höhe hat.

Farben für Div-Boxen

Als nächstes sollen die Farben der Boxen anders gewählt werden. Für die Farbe wird in CSS und HTML der Hexadezimal-Code benutzt und eine Raute vorangestellt:

#ffffff entspricht Weiß
#000000 entspricht Schwarz

Anstelle von red kann man zum Beispiel #FF0000 benutzen. Es gibt zahlreiche kostenlose Farbwähler im Internet, die dabei helfen einen schönen Farbcode für die Webseite zu finden:

Kuler gefällt mir sehr gut, weil man hier gleich eine Farbgruppe vorgeschlagen bekommt – man kann sich dann das Suchen von zueinanderpassenden Farbe sparen:

Farbauswahl mit Kuler

Farbauswahl mit Kuler

Diese Detail-Ansicht sieht man übrigens nur dann, wenn man auf das Regler-Icon klickt:

Regler in kuler

Regler in kuler

 

Diese Farben wenden wir nun in unserem Layout an:

  • #BF2633 Link-Farbe (kommt später)
  • #A6242F Kopf/Logo-Bereichs-Farbe
  • #D9CEAD Hintergrundfarbe im Inhaltsbereich
  • #C0B18F Hintergrundfarbe für den Navigationsbereich
  • #011C26 Textfarbe (kommt später)
  • #CCCCCC statt grey im body
  • Bitte jetzt auch die Rahmenkanten von allen divs löschen (wer mag kann den Rahmen vom Container belassen)

So sieht es dann aus:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Meine erste Seite</title>
<style>
body {background-color:#CCCCCC;}
#container {border:1px solid black; width:800px; margin:auto;}
#logo {padding:5px;background-color:#A6242F;}
#navigation {padding:5px; width:150px;height:350px;float:left;background-color:#C0B18F;}
#inhalt {padding:5px; height:350px;background-color:#D9CEAD;}
</style>
</head>
<body>
<div id="container">
<div id="logo"> Logo </div>
<div id="navigation"> Navigation und noch mehr TExt </div>
<div id="inhalt"> Inhalt und noch mehr Text... </div>
</div>
</body>
</html>
Layout mit angepassten Farben

Layout mit angepassten Farben

Bild einfügen

Zum Abschluss für heute wird nun noch ein Bild bzw. Logo in das Logo-Div eingebaut. Ich benutze dafür folgende Datei (kann man mit rechtem Mausklick speichern):

yoga

 

 

Eingefügt wird es über den Befehl <img> und dem Verweis, wo das Bild liegt:

<img src="yoga.png" />

Für diesen Fall muss das Bild genau im gleichen Ordner liegen wie Ihre index2.html-Datei!
Der Vollständigkeithalber fügen wir noch den alt-Tag hinzu, damit Suchmaschinen auch wissen, was sich in dem Bild verbirgt:

<img src="yoga.png" alt="Logo vom Yoga-Studio - feines Yoga" />

Hier der fertige Code und danach die Vorschau:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Meine erste Seite</title>
<style>
body {background-color:#CCCCCC;}
#container {border:1px solid black; width:800px; margin:auto;}
#logo {padding:5px;background-color:#A6242F;}
#navigation {padding:5px; width:150px;height:350px;float:left;background-color:#C0B18F;}
#inhalt {padding:5px; height:350px;background-color:#D9CEAD;}
</style>
</head>
<body>
<div id="container">
<div id="logo"> <img src="yoga.png" alt="Logo vom Yoga-Studio - feines Yoga" /></div>
<div id="navigation"> Navigation und noch mehr TExt </div>
<div id="inhalt"> Inhalt und noch mehr Text. Inhalt und noch mehr Text..  </div>
</div>
</body>
</html>
fast fertiges Layout

fast fertiges Layout

In Teil 13 von „wie erstelle ich eine Homepage“ werden wir dann die Farben der Schrift ändern und Hintergrundgrafiken einsetzen.