Dabei soll eine Trennung zwischen der Struktur und dem Design der Seite vorgenommen werden. Dies wird erreicht durch die Auslagerung des Designs aus dem HTML-Quelltext in eine externe CSS-Datei (Cascading Style Sheets). CSS-Attribute haben wir ja bereits bei der Formatierung von Texten kennengelernt (style="..."). Das Erstellen der Seitenvorlage erfolgt in vier Schritten.
<!DOCTYPE html> <html lang="de"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>HTML-Grundkurs</title > </head> <body> <div id="seite"> <div id="titel"> Titel der Seite... </div> <ul id="navigation"> <li><a href="datei1.htm">Seite 1</a></li> <li><a href="datei2.htm">Seite 2</a></li> Verweise anpassen / ergänzen... </ul> <div id="inhalt"> Inhalt der Seite... </div> <div id="fusszeile"> Inhalt der Fußzeile... </div> </div> </body> </html>
Ergänzt die Grundstruktur dann von oben nach unten im body-Bereich um durch div-Tags eingeklammerte Bereiche für den gesamten Seitenbereich, den Titelbereich, den Inhaltsbereich sowie den Bereich der Fußzeile. Weiterhin muss zwischen Titel und Inhalt der Navigationsbereich in Form einer Liste von Verweisen hinzugefügt werden, die zunächst natürlich nur einen fiktiven Inhalt haben, der später angepasst und erweitern werden muß.
<head> .... <link href="design.css" type="text/css" rel="stylesheet"/> </head>
body { /* Voreinstellung für alle Inhalte im body-Bereich */
margin: 0 auto;
background-color: darkblue; /* Hintergrund neben der Seite */
font-size: 1em;
font-family: Arial, sans-serif; /* Schriftart Arial */
color: black;
font-weight: normal;
}
div#seite { /* Einstellungen für die gesamte Seite */
width: 800px; /* Breite des Seitenbereiches */
height: auto;
text-align: left; /* Inhalte links ausrichten */
margin: 0 auto; /* standardkonforme horizontale Zentrierung */
background-color: white;
}
div#titel { /* alle Einstellungen für den Titelbereich */
height: 70px;
background-color: yellow;
text-align: center;
font-size: 2.7em;
font-family: Comic Sans MS;
font-weight: bold;
letter-spacing: 0.2em;
color: blue;
border-bottom: 1px solid darkgrey;
}
Hierin werden zunächst allgemeine Festlegungen für den gesamten
body-Bereich und den darin befindlichen Seitenbereich getroffen.
Dies sind die jeweilige Hintergrundfarbe (blau / weiss), die Schriftgröße
und Ausrichtung etc. sowie eine Breite von 800px (passt auf's Smartphone).
Die einzelnen Bereiche können direkt über die in den entsprechenden div-Tags vergebenen ID's angesprochen bzw. zugeordnet werden (z.B. "div#titel").
Für den Titelbereich wird festgelegt, dass dieser eine Höhe von 70 Pixeln, einen gelben Hintergrund, 2.7-fach vergrößerte Schrift vom Typ Comic Sans MS in blau und fett sowie eine 1px dicke, dunkelgraue untere Randlinie haben soll.
Nachfolgend wird der Listenstil so eingestellt, dass keine Aufzählungspunkte der unordered list angezeigt werden sowie Links unabhängig vom angezeigten Text Listelemente vollständig füllen, damit bei Selektion mit der Maus immer ein gleich großer farbiger Hintergrundbereich angezeigt wird.
/*-------------------- Navigationsbereich ---------------*/
ul#navigation {
float: left; /* Liste für die Navigation links am Seitenrand */
width: 10em; /* die Breite des Navigationsbereiches ist 10em */
height: auto; /* Höhe automatisch bestimmen lassen */
border: 1px solid darkgrey; /* Rahmen um die Navigationsliste */
border-radius: 5px; /* abgerundete Ecken */
margin: 20px 10px 6px 6px; /* Außenabstände der Liste */
padding: 12px 3px 12px 6px; /* Innenabstand vom Rahmen */
}
ul#navigation li {
list-style: none; /* keine Listenpunkte (bullets) anzeigen */
padding: 0.2em; /* Innenabstände im List-Item */
}
ul#navigation a {
display: block; /* unabhängig von der Textlänge den */
/* umgebenden li-Block füllen */
}
ul#navigation a:link,
ul#navigation a:visited {
text-decoration: none; /* links ohne Unterstrich */
color: #0000CD; /* links immer in Mittelblau */
}
ul#navigation a:hover, /* Aussehen für mouse-over und */
ul#navigation a:focus, /* ausgewählten link */
ul#navigation a:active {
color: white; /* weisse Schrift */
background-color: red; /* dunkelroter Hintergrund */
border: none; /* kein Rand */
border-radius: 2px; /* abgerundete Ecken */
}
Abschliessend wird festgelegt, dass Links immer im gleichen Mittelblau und ohne Unterstrich angezeigt werden (Pseudoklassen link und visited) sowie beim Überfahren oder Selektieren mit der Maus mit rotem Hintergrund und weisser Schrift erscheinen (Pseudoklassen hover, focus und active).
/*------------------- Inhaltsbereich -------------------*/
div#inhalt {
margin-top: 3px;
margin-bottom: 3px;
padding: 0 0.4em 0 0.4em; /* Innenabstände rechts und links */
min-height: 300px; /* Minimalhöhe des Inhaltsbereiches */
height: auto !important;
height: 300px;
max-height: 600px; /* Maximalhöhe, für Scrollbalken erforderlich */
overflow: auto; /* automatisch Scrollbalken einblenden */
}
Zum Schluss wird neben Randvorgaben für den Inhaltsbereich eine Minimalhöhe von 300px vorgegeben, damit Seiten mit wenig Inhalt nicht beliebig klein werden können. Ebenso wird eine Maximalhöhe von 600px eingestellt, die in Verbindung mit der Anweisung "overflow: auto;" dazu führt, dass der Inhaltsbereich bei Bedarf automatisch Scrollbalken erhält und dadurch Navigation und Fußzeile immer sichtbar bleiben (probiert mit einer Seite mit viel Inhalt einmal aus, wie diese dargestellt wird, wenn die beiden Anweisungen weggelassen werden...)
/*--------------- Fußzeile --------------*/
div#fusszeile {
clear: both; /* floats wieder zusammenführen */
font-size: 1.4em;
color: red;
border-top: 1px solid darkgrey;
padding: 3px 0 3px 0;
}
| entweder | die entsprechenden Bereichsdefinition und die Navigation in die bestehenden HTML-Dateien, z.B. "textformatierung.htm", |
| oder | die in den einzelnen Dateien zwischen den body-Tags befindlichen Inhalte in eine leere Seitenvorlage |
| © K. Milzner, 2013 |