moritz-abraham.de
Website Template: barrierefrei und grafisch (Teil 2)
Nachdem wir im ersten Teil dieses Tutorials schon das grundlegende Design und die dazu benötigten Bilder erstellt haben, wollen wir uns nun darum kümmern, alles zusammen in ein XHTML-Dokument zu verpacken. Um es ein wenig spannender zu machen und lehrreicher gehe ich nicht den ganz direkten Weg sondern erweitere die Quelltexte Schritt für Schritt, Damit wird man auf Probleme und ihre Lösung aufmerksam, die man in einer fertig vorgesetzten Lösung nicht sehen würde.
Struktur
Fangen wir mit der Basis-Struktur an:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="de" lang="de">
<head>
<title>der titel</title>
<link rel="stylesheet" type="text/css"
href="main.css" />
</head>
<body>
<div id="header">#kopf#</div>
<div id="menu">#menü#</div><div id="text">#text#</div>
<div id="footer">#fuß#</div>
</body>
</html>
Wichtig ist dabei, den DOCTYPE anzugeben, da sonst der Internet Explorer in den Quirks-Mode schalten und die Seite nicht korrekt darstellen würde. Noch macht es keinen Unterschied, aber sobald die Seite zentriert werden soll bemerkt man schnell den Unterschied zwischen Firefox (FF) und Internet Explorer (IE).
Um das Aussehen und die Struktur anzupassen -der Text sollte ja neben dem Menü sein, nicht darunter- binden wir ein externes Style-Sheet ein. Extern daher, um später Änderungen zentral vornehmen zu können. Zudem versehen wir die einzelnen Blöcke noch mit eindeutigen (dokument-weit einmalig) IDs, die uns die gezielte Formatierung erleichtern.
In der Style-Sheet-Datei legen wir jetzt zuerst Schriftart, Größe und Farbe, Hintergrundfarbe sowie Abstand zum Fensterrahmen für das ganze Dokument fest. Dem Menü-Block weisen wir zu, dass er linksbündig sitzen soll und umflossen werden darf. Der Fuß-Bereich hebt das wieder auf.
body {
background-color: #dce0d3;
font-family: Verdana, Helvetica, sans-serif;
font-size: 12px;
color: black;
margin: 0px;
}
#menu {
float:left;
}
#footer {
clear:left;
}
Grafik
Jetzt fügen wir die vorbereiteten Grafiken ein. Dazu müssen wir aber zuerst noch einen weiteren div-Block einfügen, da wir ja nur eine Grafik für den mittleren Teil haben.
<body>
<div id="header">#kopf#</div>
<div id="middle">
<div id="menu">#menü#</div><div id="text">#text#</div>
</div>
<div id="footer">#fuß#</div>
</body>
Im Style-Sheet geben wir die Grafiken als Hintergrundgrafiken an, was den Vorteil hat, dass wir einfach Text darüber platzieren können und die Grafiken zudem nicht im Quelltext der XHTML-Datei auftauchen. Das ist wichtig, um Inhalt vom Design zu trennen und so zum Beispiel Screen Readern für Blinde die Arbeit zu erleichtern. Jedem Block wird auch eine Größe zugewiesen, die den Abmessungen des Hintergrundbildes entspricht. Und auch dem Menü wird eine Breite zugwiesen.
#header {
width:600px;
height:135px;
background-image:url('top.png');
}
#middle {
width:600px;
background-image:url('middle.png');
}
#menu {
float:left;
width:155px;
}
#footer {
clear:left;
width:600px;
height:75px;
background-image:url('bottom.png');
}
Zentrieren und Ränder einfügen
Soweit, so gut. Aber sollte das nicht mittig sein? Ja doch. Daher kommt um das ganze jetzt eine weitere Box, die wir hier mal outer_box nennen. Dieser Box weisen wir als Außenabstand nach links und rechts den Wert auto zu, was bewirkt, dass der Abstand einerseits auf beiden Seiten gleich ist und zweitens der Fenstergröße angepasst wird. Was dann nichts anderes als eine Zentrierung ist. Einen Außenabstand kann man aber nur zuweisen, wenn eine Größe angeben ist, daher setzen wir auch diese fest. Hier kann man jetzt schön den Quirks-Mode erkennen. Löscht man aus der XHTML-Datei den DOCTYPE, dann wird der Inhalt nur im FF zentriert, nicht aber im IE.
Jetzt soll noch erreicht werden, dass die Texte nicht schon auf dem Rand beginnen sondern erst im weißen Bereich. Dazu fügen wir testweise in der Style-Definition des Kopfbereichs einen Innenabstand nach allen Seiten, außer nach unten, ein. Doch leider verschiebt uns das alles. Die Box wird größer, das Hintergrundbild zeigt sich mehrfach. Warum? Im Prinzip ganz einfach, man muss es sich nur mal klarmachen. Die Angaben witdh und height beziehen sich nur auf den Inhalt. Die Boxgröße aber berechnet sich aus Inhalt, Innenabstand, Rahmendicke und Außenabstand (siehe CSS 4 You: Workshop: Boxmodell) Daher müssen wir überall die Breite und Höhe anpassen. Also immer den Rand, oder die Ränder abziehen. Zusätzlich noch explizit den Rahmen auszuschalten kann nicht schaden.
Die Quelltexte bis jetzt:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="de" lang="de">
<head>
<title>der titel</title>
<link rel="stylesheet" type="text/css"
href="main.css" />
</head>
<body>
<div id="outer_box">
<div id="header">#kopf#</div>
<div id="middle">
<div id="menu">#menü#</div>
<div id="text">#text#</div>
</div>
<div id="footer">#fuß#</div>
</div>
</body>
</html>
body {
background-color: #dce0d3;
font-family: Verdana, Helvetica, sans-serif;
font-size: 12px;
color: black;
margin: 0px;
}
#outer_box {
width:600px;
margin-left:auto;
margin-right:auto;
}
#header {
width:570px;
height:120px;
background-image:url('top.png');
padding:15px 15px 0px 15px;
border: none;
}
#middle {
width:570px;
background-image:url('middle.png');
padding: 0px 15px 0px 15px;
border:none;
}
#menu {
float:left;
width:140px;
}
#footer {
clear:left;
width:570px;
height:60px;
padding: 0px 15px 15px 15px;
border: none;
background-image:url('bottom.png');
}
Text-Fluss anpassen
Jetzt ersetzen wir mal testweise den Platzhalter #text# durch einen längeren Text. Dann sehen wir, dass der Text das Menü wirklich umfließt und ungewünscht. Also weisen wir dem Text einen Außenabstand nach links von 145px zu, dann fließt er nicht mehr ins Menü und hält auch noch 5px Abstand dazu, was einfach schöner aussieht.
Als nächstes fügen wir auch in den Menüblock einen längeren Text ein. Im FF sieht das jetzt nicht mehr so schön aus. Denn weil der Menüblock die Option float gesetzt hat, kann er den umschließenden div-Block nicht mehr auf seine Größe aufweiten. Der IE verhält sich hier anderns und zeigt das erwünschte Verhalten. Als Lösung habe ich folgendes gewählt: Das mittlere Hintergrundbild weise ich nicht dem mittleren Block zu, sondern dem großen, äußeren Block outer_box. Dann ist dieses Bild hinter allen Blöcken, wird aber bei Kopf und Fuß durch ein anderes überdeckt. Und da der Fuß die Eigenschaft float wieder aufhebt, ist auch sichergestellt, dass das Menü nicht über den Fuß fließt.
Banner-Grafik
In den Kopf-Block fügen wir jetzt einen neuen div-Block ein mit der ID top. Diesem Block weisen wir zuerst eine Höhe von 120px zu, damit er auch den ganzen Kopf ausfüllt. Nun kann man diesem Block ein Hintergrundbild zuweisen, welches dann die Bannrgrafik der Seite ist. Dieses Bild muss 570px auf 120px sein und kann nach Belieben ausgetauscht werden, da es von Basislayout unabhängig ist.
Ersetzt man in diesem Block jetzt noch den Platzhalter #kopf# duch eine Überschrift, löscht deren Browser spezifische Abstände und setzt den Abstand nach oben auf ca 100px und nach links auf 5px hat man auch schon den Seitenkopf fertig.
Das Menü wird eine Liste ohne Bullet-Zeichen. Auch hier ist es wieder einfacher zuerst die Abstandswerte des Browsers zu löschen und dann eigene zu definieren.
Im Fußbereich wird auch noch mal ein div-Block erstellt, der dann zentriert wird und der eine kleinere Schriftgröße hat.
Fertig!
Damit sollte das grundlegende Design fertig sein, alles weitere ist Feinschliff. Die Blöcke sollten ihre Größe nicht mehr ändern, das Layout sollte also fest sein und sich nicht unschön verschieben.
Hier noch der entgültige Quelltext mit ein paar Ergänzungen, die aber am Gesamt-Layout nichts ändern.
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="de" lang="de">
<head>
<title>moritz-abraham.de</title>
<link rel="stylesheet" type="text/css"
href="main.css" />
</head>
<body>
<div id="outer_box">
<div id="header">
<div id="top">
<h1>moritz-abraham.de</h1>
</div>
</div>
<div id="middle">
<div id="menu">
<ul>
<li>eins</li>
<li>zwei</li>
</ul>
</div>
<div id="text">
<h1>Lorem ipsum dolor sit amet,</h1>
consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet
dolore magna aliquam erat volutpat.
</div>
</div>
<div id="footer">
<div>
(c) by ma
</div>
</div>
</div>
</body>
</html>
body {
background-color: #dce0d3;
font-family: Verdana, Helvetica, sans-serif;
font-size: 12px;
color: black;
margin: 0px;
}
#outer_box {
width:600px;
margin-left:auto;
margin-right:auto;
background-image:url('middle.png');
}
#header {
width:570px;
height:120px;
background-image:url('top.png');
padding:15px 15px 0px 15px;
border: none;
}
#top {
background-image:url('topimg.png');
height:120px;
}
#top h1 {
margin:0px;
padding:0px;
color:white;
font-weight: bold;
font-size: 14px;
padding-top:100px;
padding-left:5px;
}
#middle {
width:570px;
padding: 0px 15px 0px 15px;
border:none;
}
#menu {
float:left;
width:140px;
}
#menu ul {
list-style-type: none;
margin:0px;
padding:0px;
padding-top:10px;
padding-left:10px;
}
#text {
margin-left: 145px;
padding-top:5px;
}
#text h1 {
font-size: 14px;
}
#footer {
clear:left;
width:570px;
height:60px;
padding: 0px 15px 15px 15px;
border: none;
background-image:url('bottom.png');
}
#footer div {
text-align:center;
padding-top: 20px;
font-size:10px;
}
Und jetzt selber machen!
Ich hoffe hiermit ein paar Tipps und Tricks gezeigt zu haben, mit denen man ein einfaches, hoffentlich barrierefreis und dennoch ansehnliches Layout erstellen kann, das zumindest mit IE und FF fast gleich dargestellt wird. Es steht jedem frei, dieses Layout auf seiner Webseite zu verwenden und an seinen Geschmack anzupassen. Nur eine direkte Kopie sollte es nicht sein, da diese Layout fast eins zu eins dem meiner aktuellen Seite entspricht.
Links zum Thema