Im vorigen Abschnitt haben wir Text rechts neben einem Bild anordnen lassen. Dieses Bild habe ich mal durch ein zum Thema passendem ersetzt.

Screenshot vom letzten Stand unserer Homepage

Screenshot vom letzten Stand unserer Homepage

Den aktuellen Code habe ich samt Bildern in dieser Zip-Datei zusammen gefasst.

Wie schon angekündigt wird nun die Seite mit Inhalt gefüllt. Doch Vorsicht, bevor man Hals über Kopf anfängt, sollte man erst GENAU überlegen, was man wirklich auf der Seite haben muss und will. Diese Elemente bzw. die Links zu den entsprechenden Inhalten sollten normalerweise alle über die Startseite erreichbar sein.

Unser Vorgehen ist also folgendes:

  1. Wir erstellen einen Strukturbaum unserer Navigation.
  2. Wir recherchieren auf themennahen Seiten, ob dort Dinge auftauchen, die wir auch einbauen möchten bzw. wir vielleicht vergessen haben.
  3. Bei sehr vielen Menüpunkten überdenken wir die Struktur und versuchen manche Links in Untergruppen aufzuteilen (Zum Beispiel statt Photoshop und Illustrator den Oberbegriff Design-Software wählen).
  4. Unter Umständen legen wir eine zweite Navigation für das Impressum und AGBs an einer anderen Stelle an.
  5. Nachdem die Navigationspunkte festgelegt worden sind, arbeiten wir sie in das Layout ein.
  6. Nun schreiben wir Hyperlinks in die Navigation mit den entsprechenden Namen wie z. B. preise.html oder kontakt.html usw.
  7. Damit wir später Design-Änderungen leicht durchführen können, lagern wir unser bisher geschriebenes CSS in eine externe Datei aus.
  8. Anschliessend überprüfen wir noch mal alles und duplizieren dann unsere index.html-Datei so oft wie wir Navigationspunkte haben und benennen sie genauso wie wir sie unter Punkt 6 verlinkt haben.

Strukturbaum einer Navigation am Beispiel der Homepage Yoga-Studio

Für die Erstellung eines Strukturbaumes reicht normalerweise ein Blatt Papier auf dem man alle Verzweigungen aufzeichnet. Wer sich für Software interessiert, die diesen Vorgang abbildet kann mit Powerpoint oder Word arbeiten. Es gibt für diesen Zweck aber auch spezielle Software, sogenannte Prototype- oder Wireframe-Software. Persönlich nutze ich gerne Balsamiq.

Der Einfachheit halber habe ich den Strukturbaum schnell in Word entworfen:

Strukturbaum für Homepage

Strukturbaum für Homepage

Wer genau hingeschaut hat wird bemängeln, dass das Impressum fehlt. Dieses werde ich in der Fusszeile der Webseite unterbringen 😉

In der Kategorie Trainingsplan sieht man, was ich mit Untergruppe bzw. Verzweigung im Strukturbaum meine. In diesem Menüpunkt könnte man ein Drop-Down-Menü integrieren, welches auf die verschiedenen Unter-Inhalte verweist. Für unsere Homepage ist das allerdings nicht notwendig.

Menüpunkte in der Navigation der Homepage eintragen

<div id="navigation">
<ul>
<li><a href="datei1.html">Punkt 1 </a></li>
<li><a href="datei2.html">Punkt 2 </a></li>
<li><a href="datei3.html">Punkt 3 </a></li>
<li><a href="mailto:meinName@meineDomain.de">Mail an mich </a></li>
</ul>
</div>

Wird zu

<div id="navigation">
<ul>
<li><a href="index.html" title="Startseite vom Yoga-Studio">Start </a></li>
<li><a href="angebot.html" title="Angebot vom Yoga-Studio">Angebot </a></li>
<li><a href="fotos.html" title="Fotos vom Yoga-Studio">Fotos </a></li>
<li><a href="trainingsplan.html" title="Trainingsplan vom Yoga-Studio">Trainingsplan </a></li>
<li><a href="preise.html" title="Preise vom Yoga-Studio">Preise </a></li>
<li><a href="kontakt.html" title="Kontakt und Lageplan">Kontakt </a></li>
</ul>
</div>

Beachten Sie, dass nicht nur die html-Dateien eingetragen, sondern auch title-Informationen für Google hinterlegt worden sind.

CSS-Daten in einer externen Datei auslagern

Die im head-Bereich hinterlegten CSS-Angaben sammeln wir nun in einer extra Datei names stile.css (dieser Name ist frei gewählt und kann mit jedem Text-Editor erstellt werden).

Wir suchen nach der Zeile, in der der Style-Befehl eingeleitet wird:

<style>
@font-face {
    font-family: 'TangerineRegular';
    src: url('Tangerine_Regular-webfont.eot');
    src: url('Tangerine_Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('Tangerine_Regular-webfont.woff') format('woff'),
         url('Tangerine_Regular-webfont.ttf') format('truetype'),
         url('Tangerine_Regular-webfont.svg#TangerineRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'TangerineBold';
    src: url('Tangerine_Bold-webfont.eot');
    src: url('Tangerine_Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('Tangerine_Bold-webfont.woff') format('woff'),
         url('Tangerine_Bold-webfont.ttf') format('truetype'),
         url('Tangerine_Bold-webfont.svg#TangerineBold') format('svg');
    font-weight: normal;
    font-style: normal;
}
body {
    background-color:#CCCCCC; 
    color:#011C26; 
    background-image: URL(496.png)}
#container {
    border:1px solid black; 
    width:800px; 
    margin:auto; 
    box-shadow:8px 8px 8px #000000;}
#logo {
    padding:25px 0 25px 10px;
    background-color:#A6242F;}
#navigation {
    padding:5px; 
    width:150px;
    height:350px;
    float:left;
    background-color:#C0B18F;}
#inhalt {
    padding:5px 5px 5px 170px; 
    height:350px;
    background-color:#D9CEAD;}
h1 {
    font-family:'TangerineRegular';
    font-weight: normal;
    font-size:40px;
    }
p {
    font-family: Verdana, Arial, sans-serif;
    font-size:12px;
    }
#navigation a {
    font-family: Verdana, Arial, sans-serif;
    font-size:14px;
    text-decoration:none; 
    color:#BF2633; 
    font-style:italic;
    }
ul {
    list-style-type:none;}
.fltlft {float:left;}
.fltrght {float:right;}
.abstandNachRechts {margin-right:8px;}
</style>

Alles, was innerhalb von <style></style> steht schneiden wir aus (strg + x bzw. cmd + x) und fügen es in die neue Datei ein.
Es bleibt nur noch

<style>
</style>

übrig – dies löschen wir und setzen stattdessen eine Verlinkung zu unserer CSS-Datei:

<link rel="stylesheet" href="stile.css" type="text/css" />

Nun sind alle Stil-Angaben in einer extra Datei und können vollkommen isoliert bearbeitet werden.
Später hat dies den Vorteil, dass wir mit dieser Datei ALLE Webseiten, die darauf zurückgreifen auf einmal ändern können.

Index-Datei duplizeren

Bevor wir jetzt unsere index.html-Datei duplizieren überprüfen wir noch mal unsere Navigation. Und? Etwas aufgefallen?

Ja, uns fehlt noch der Bereich für AGB und das Impressum UND natürlich ein Bereich, wo sich das Team des Yoga-Studios vorstellt. Also sehr wichtige Elemente einer Website haben wir bzw. ich vergessen 😉

Ein weiterer Link für „Team“ ist schnell eingebaut:

<div id="navigation">
<ul>
<li><a href="index.html" title="Startseite vom Yoga-Studio">Start </a></li>
<li><a href="angebot.html" title="Angebot vom Yoga-Studio">Angebot </a></li>
<li><a href="team.html" title="Team vom Yoga-Studio">Team </a></li>
<li><a href="fotos.html" title="Fotos vom Yoga-Studio">Fotos </a></li> 
<li><a href="trainingsplan.html" title="Trainingsplan vom Yoga-Studio">Trainingsplan </a></li> 
<li><a href="preise.html" title="Preise vom Yoga-Studio">Preise </a></li> 
<li><a href="kontakt.html" title="Kontakt und Lageplan">Kontakt </a></li> 
</ul> 
</div>

Für die zweite Navigation baue ich einen Div-Container in die Fusszeile ein:

<body>
<div id="container">
<div id="logo"> <img src="yoga.png" alt="Logo vom Yoga-Studio - feines Yoga" /></div>
<div id="navigation"> 
<ul>
<li><a href="index.html" title="Startseite vom Yoga-Studio">Start </a></li>
<li><a href="angebot.html" title="Angebot vom Yoga-Studio">Angebot </a></li>
<li><a href="fotos.html" title="Fotos vom Yoga-Studio">Fotos </a></li>
<li><a href="trainingsplan.html" title="Trainingsplan vom Yoga-Studio">Trainingsplan </a></li>
<li><a href="preise.html" title="Preise vom Yoga-Studio">Preise </a></li>
<li><a href="kontakt.html" title="Kontakt und Lageplan">Kontakt </a></li>
</ul></div>
<div id="inhalt"> 
<h1>Willkommen im feinen Yoga-Studio!</h1>
<p><img src="yoga.jpg" alt="Yoga in der Natur" />
Inhalt und noch mehr Text. Inhalt und noch mehr Text. 
Inhalt und noch mehr Text. Inhalt und noch mehr Text. 
</p>    
</div>
<div id="footer">
<a href="impressum.html" title="Impressum vom Yoga-Studio">Impressum </a>
 | 
<a href="agb.html" title="AGBs vom Yoga-Studio">AGB </a>
</div>
</div>
</body>
</html>

Diesem Container gebe ich in der neuen CSS-Datei stile.css jetzt noch Anweisungen für Hintergrundfarbe und Randabstände sowie eine Information über die Darstellung der Links im Footer:

#footer {
    padding:8px 0 12px 10px;
    background-color:#A6242F;}
#footer a{
    font-family: Verdana, Arial, sans-serif;
    font-size:12px;
    text-decoration:none; 
    color:#000; 
    }

So, nun können wir endlich die index-Datei duplizieren und benennen in:

Insgesamt erhalten wir also 8 neue Dateien – mit der Startseite (index.html) sind es dann 9 Dateien zzgl. der CSS-Datei mit den Formatierungsanweisungen.

Nachdem das erledigt ist, testet mal, ob wirklich jeder Link funktioniert (es erscheint zwar immer nur der gleiche Inhalt, aber solange keine Fehlermeldung kommt, ist alles richtig gemacht) 😉

Und nun beginnt die Fleissarbeit – in jede Datei den Inhalt einbauen UND den Seitentitel ändern. Bisher steht ja noch überall „Meine erste Seite“!

Hier der gesamte Code zum Download: wieerstelleicheinewebsite-teil19

Fehler gemacht oder Hinweise? Ich bin für jeden Kommentar dankbar!