Erstellen einer Beispielwebsite

Nachdem ihr erfolgreich den html- und css-Lehrgang absolviert habt, wollen wir uns nun daran machen, eine erste richtige Website zu erstellen.

Über diesen Link könnt ihr euch diese vorab einmal anschauen: Beispielwebsite "Zauberwald bei Ramsau"

Wir beginnen zunächst mit dem Inhalt:

Das Ergebnis im Browser:

Wenn wir uns jetzt das Ergebnis im Browser anschauen, sehen wir noch nicht viel:

Wir haben bisher nur die Bereiche (div) defininert. Geben wir nich etwas Inhalt hinein. Dazu benutzen wir einen Blindtext, der nur die Aufgabe hat, den Content zu füllen, um einen Überblick für das Aussehen zu bekommen.

Den Fülltext könnt ihr hier kopieren und in den Content unterhalb der Überschrift einfügen:

<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>

<p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>

<p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>

<p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,no sea takimata sanctus est Lorem ipsum dolor sit amet. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. </p> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>

<p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>

<p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>

<p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,no sea takimata sanctus est Lorem ipsum dolor sit amet. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. </p> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>

<p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>

<p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>

<p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,no sea takimata sanctus est Lorem ipsum dolor sit amet. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. </p>

So sollte unsere Site jetzt aussehen:

Den Content haben wir nun gefüllt. Nun fehlen noch die beiden Navigationen unterhalb des Kopfes und im Fuss

Hier der Code für die Navigation oben:

Und hier für den Fuss:

Und so sollte es aussehen:

Der Fussbereich:

Jetzt fügen wir noch die Bilder hinzu:

In der Browserausgabe:

Der Inhalt ist nun mit html formatiert, wir können nun mit dem Stylen beginnen.

Dazu gehen wir der Reihe von oben nach unten vor. Fangen wir also mit dem Kopf an. Wir wollen ein Logo einfügen sowie die Überschrift in der Größe anpassen und anders positionieren sowie einen Hintergrund hinzufügen.

Das Ergebnis:

Der Kopfbereich ist nun schon ganz gefällig. Widmen wir uns der Navigation. Diese sieht nun gar nicht so aus wie das Endergebnis, da sie als Liste erstellt wurde. Ändern wir die css-Eigenschaften:

Das sehen wir im Browser:

Das Ergebnis im Browser entspricht nun tatsächlich unseren Vorstellungen. Was haben wir getan?

  • Wir haben die Listenpunkte entfernt (list-style-type:none;).
  • Wir haben den Zeilenumbruch entfernt (float:left;).
  • Wir haben den Listenpunkten einen Innenabstand gegeben (padding:0px 40px 0px 40px;).
  • Wir haben rechts einen Rahmen gesetzt (border-right:1px solid #999;).
  • Ausserdem haben wir dem Hyperlink die Farbe schwarz zugewiesen und
  • Wir haben die Unterstreichung unterbunden (text-decoration:none;)
  • Zu guter Letzt haben wir angewiesen, dass beim Hovern die Unterstreichung wieder angezeigt wird.

Dazu kommen noch ein paar Schriftformatierungen, das euch aber nun hinreichend bekannt sein sollten.

Kümmern wir uns nun um den Content. Hier fällt besondes aud, dass sich die Bilder alle links befinden. Dies und einige andere Dinge wollen wir nun ändern.

Das Ergebnis:

Folgendes haben wir gemacht:

  • Dem Content haben wir eine Breite zugewiesen sowie eine Hintergrundfarbe.
  • Der Überschrift h2 gaben wir einen Innenabstand sowie eine Schriftgröße
  • Den Absätzen gaben wir ebenfalls einen Innenabstand
  • Ausserdem haben wir angewiesen, dass der erste Buchstabe eines jeden Absatzes (p:first-letter)ein anderes Aussehen erhalten soll: eine Größe von 170% und eine andere Farbe.
  • Den Bildern des Content gaben wir einen weißen Rahmen sowie einen Außenabstand.
  • Außerdem haben wir mit style=float:... den Textfluss um die Bilder gesteuert.

Bleibt nun noch der Fussbereich:

Der sieht nun folgendermaßen aus:

Wir gibt es eigeltich nichts Neues. Daher schauen wir uns jetzt einmal an, was noch fehlt.

Die gesamte Website soll zentriert sein und der Außenbereich eine Hintergrundfarbe erhalten.

Zur Zentrierung der Website brauchen wir noch ein zusätzliches div, das um sämtliche Bereiche fließt. Fügen wir also dies hinzu und geben wir diesem div die styles.

Zuerst einfügen des div-Tags nach dem body-Tag:

Dann schließen wir das div vor dem schließenden body-Tag

Jetzt definieren wir dei css-Eigenschaften:

Et Voilà ist die Website zentriert.

Und eins - zwei - drei ferig ist unsere Website.

Was jetzt noch bleibt ist das Auslagern der styles in eine externe Datei.

Die beiden Dateien seht ihr hier nochmals. Zuerst das html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html>
<head>
<title>Beispielwebsite</title>

<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"/>
<meta name="description" content=""/>
<meta name="author" content=""/>
<meta name="keywords" content=""/>
<link href="styles.css" type="text/css" rel="stylesheet"/>

</head>

<body>
<div id="wrapper">

<div id="kopf"><h1>Zauberwald bei Ramsau</h1></div>

<div id="navi">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Bilder</a></li>
<li><a href="#">Kontakt</a></li>
<li><a href="#">Impressum</a></li>
<li><a href="#">Gästebuch</a></li>
</ul>

</div>
<div id="content">
<br/>
<h2>Willkommen auf unserer Beispielwebsite</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
<img src="bilder/bild1.png" width="300" height="423" style="float:left;"/> <p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
<p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
<p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,no sea takimata sanctus est Lorem ipsum dolor sit amet. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. </p> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
<img src="bilder/bild2.png" width="300" height="423" style="float:right;"/> <p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
<p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
<p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,no sea takimata sanctus est Lorem ipsum dolor sit amet. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. </p> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
<img src="bilder/bild3.png" width="300" height="423" style="float:left;"/> <p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
<p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
<p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,no sea takimata sanctus est Lorem ipsum dolor sit amet. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. </p> <p> </p>
<p> </p>

</div>
<div id="fuss">
<p style="text-align:center">
<a href="#">Home</a>&nbsp;&nbsp;&bull;&nbsp;&nbsp;
<a href="#">Kontakt</a>&nbsp;&nbsp;&bull;&nbsp;&nbsp;
<a href="#">Impressum</a></p>
</div>
</div>
</body>
</html>

Nachfolgend das css:

*{
margin:0;
padding:0;
font-family:"Trebuchet MS", verdana, arial, sans-serif;
}

body{
background-color:#aff04d;
}

#wrapper{
width:800px;
margin-left:auto;
margin-right:auto;
}

#kopf{
width:800px;
height:200px;
background:url(bilder/logo.png);
}

#kopf h1{
padding:5px;
font-size:20px;
position:relative;
top:120px;
left:500px;
width:230px;
background-color:#d1ba9a;
}

#navi{
width:800px;
height:24px;
line-height:24px;
background-color:#d1ba9a;
}

#navi ul li{
float:left;
padding:0px 40px 0px 40px;
border-right:1px solid #999;
font-size:12px;
list-style-type:none;
}

#navi ul li a{
color:#000;
text-decoration:none;
}

#navi ul li a:hover{
color:#1c6507;
text-decoration:underline;
} #content{
width:800px;
background-color:#ebddc5;
}

#fuss{
width:800px;
height:50px;
background-color:#d1ba9a;
}

#fuss a{
font-size:12px;
color:#000000;
text-decoration:none;
}

#fuss a:hover{
text-decoration:underline;
}

h2{
padding:5px;
font-size:20px;
}

p{
padding:5px;
}

#content p:first-letter{
font-size:170%;
color:#1c6507;
}

img{
border:12px solid #ffffff;
margin:7px;
}


« zurück