Ein Grundlayout - Teil IIHTML CSS Grundlagen

Nun benötigen wir noch ein wenig Inhalt - Logo, Kopf, Navigation und Text.

Der Quelltext ist etwas länger geworden:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>The Layoutmaker</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="description" content="The Layoutmaker - eine kurze Einführung in das HTML-Layout">
<link href="css4.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="logo"><img src="/img/pl.gif" /></div>
<div id="kopf">
<h1>The Layoutmaker</h1>
</div>
<div id="navi">
<p><a href="#">Startseite</a></p>
<p><a href="#">Produkte</a></p>
<p><a href="#">Referenzen</a></p>
<p><a href="#">Anfahrt</a></p>
<p><a href="#">Impressum</a> </p>
</div>
<div id="inhalt">
<h2>Herzlich Willkommen</h2>
<p>Wir pr&auml;sentieren Ihnen hier das Grundlayout einer Webseite. So oder
so &auml;hnlich werden die meisten Seiten im Netz gestaltet. Bitte kopieren
Sie die Dateien und versuchen Sie, damit herumzuspielen. </p>
<p>Als wichtigstes Hilfsmittel empfehlen wir <a href="http://de.selfhtml.org/" target="_blank"><strong>Selfhtml</strong></a>
- und dort die Kurzreferenzen f&uuml;r <strong><a href="http://de.selfhtml.org/navigation/html.htm" target="_blank">HTML</a></strong>
und <strong><a href="http://de.selfhtml.org/navigation/css.htm" target="_blank">CSS</a></strong></p>
<p>Die Links in der Navigation zielen nat&uuml;rlich nirgendwohin - sie landen immer wieder hier.</p>
<p>Viel Gl&uuml;ck!</p>
<p>&nbsp;</p>
</div>
</body>
</html>

Auch die CSS-Datei ist gewachsen.

Es kamen die Auszeichnungen für die Überschriften h1 und h2 hinzu, außerdem für den Container füür die navigation und den Inhalt Innenabstände (padding). Die Links (a:link) wurden grün angelegt, beim darüberfahren (a:hover) werden sie blau.

body {
margin:0;
padding:0;
font-family: Times, serif;
font-size:16px;
}
#logo,#kopf,#navi,#inhalt {
position:absolute;
}
#logo {top:0;left:0;height:100px;width:200px;}
#kopf {top:0;left:200px;height:100px;width:600px;text-align:center}
#navi {top:100px;left:0;height:500px;width:200px;}
#inhalt {top:100px;left:200px;height:500px;width:600px;}

h1 {color:#1C029D; margin-top:22px;font-family:arial }
h2 {color:#1C029D;font-family:arial}

#navi {
padding:30px;
font-family:arial;
font-weight:bold;
}

#inhalt{
padding:30px;
}

a:visited {color:#8B9C35}
a:link {
text-decoration:none;
color:#8B9C35;
}
a:hover {color:#1C029D}

Ansehen!

So, das war´s. Ich hoffe, es hat Ihnen Spaß gemacht - und Sie können jetzt Ihre eigene Website gestalten.

· · PhiloPhax · Lauftext · Holzgerlingen-Online · ·
· Schnelladende Layouts · Webtaugliche Texte · Suchmaschinenoptimierung · Bildbearbeitung fürs Web · Wordpress ·
· Holzgerlingen liegt bei Böblingen zwischen Stuttgart und Tübingen an der B 464 ·
· Wir berechnen im näheren Umkreis keine Anfahrtskosten. Weder nach Altdorf oder Ehningen, nach Herrenberg, Hildrizhausen oder Schönaich ·