Notwendige Quellcodes für Teil 1
Hier ein Beispiel-Code für die erste HTML-Seite. Beachten Sie die Einbindung mehrerer Stylesheets. Zu Beginn konzentrieren wir uns auf das Stylesheet css/define.css, das mittels @import eingebunden wird.
Es empfiehlt sich, auch die Stylesheets css/mager.css und css/extra.css wie im Beispiel einzubinden, sie aber zunächst nicht mit Anweisungen zu füllen (einfach leer lassen). Sie bedienen später die Text-Version, zB. für Netscape4x-Browser und für den Ausdruck oder halten sekundäre Formatanweisungen fest.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="de" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Testseite</title>
<link rel="STYLESHEET" type="text/css" href="css/mager.css">
<style type="text/css">
@import url("css/define.css");
@import url("css/extra.css"); /* bei Bedarf */
</style>
</head>
<body>
<div id="main">
<div id="head">
<p>Der Kopfbereich</p>
</div>
<div id="content">
<p>Der Content-Bereich</p>
</div>
<div id="foot">
<p>Der Fuß der Seite</p>
</div>
</div>
</body>
</html>
Das dazugehörige Stylesheet css/define.css enthält folgende Anweisungen, die der Definition der einzelnen 'Container' dienen:
html, body {
margin: 0;
background: #ccc;
color: #000;
}
body {
padding: 1% 10%;
}
#main {
padding: 0;
background: #aaa;
border-right: 1px solid #369;
border-left: 1px solid #369;
}
#head {
background: #09c;
overflow: visible;
}
#content {
margin: 5px 0;
background: #e0e0e0;
padding: 20px;
}
#foot {
background: #09c;
overflow: visible;
}
#head, #content, #foot {
border-top: 1px solid #369;
border-bottom:1px solid #369;
}
Code zur Lösung der Aufgabe 1
Der body der ersten Seite bekommt den folgenden zusätzlichen Container:
<div id="menue">
<p><a href="xx.html">Link 1</a> |
<a href="xx.html">Link 2</a> |
<a href="xx.html">Link 3</a></p>
</div>
Das dazugehörige Stylesheet enthält folgende zusätzliche Anweisungen:
#menue {
background: #fc9;
overflow: visible;
margin-top: 5px;
text-align: center;
}
#head, #menue, #content, #foot {
border-top: 1px solid #369;
border-bottom:1px solid #369;
}
Der Rahmenanweisung wird die ID #menue hinzugefügt.