Es ist wieder so weit. Ich habe mir tatsächlich mal die Zeit genommen wieder etwas zu schreiben.
Wie schon früher erwähnt gebe ich für alle meine Hinweise und Anmerkungen keine Gewähr. Es entspricht alles meinen Erfahrungen und auch meiner persönlichen Arbeitsweise.
Diesmal geht es um folgende Themen:
Im zweiten Teil habe ich ein Seitengerüst aufgebaut und habe allen wichtigen Seitenbereiche mit eindeutigen und sprechenden Namen versehen:
<div id="wrapper"> <div id="page"> <div id="header"></div> <div id="content"> <div id="left"><div> <div id="right"></div> </div> <div id="footer"></div> </div> </div>
DIV-Ebenen zu verwenden hat neben der Einhaltung des Standards auch Sinn für die Barrierefreiheit. Wenn ein Layout mit Tabellen gestaltet wird, müsste z.B. eine Software, welche die Seite vorliest jede Tabellenzeile einzeln durchlaufen, auch wenn diese nur Layout-Zwecke dient.
Dies kann man schon mal durch ein solches Gerüst einfach verhindern.
Aber nun kommen wir zum CSS. Mitlerweile kann man ohne eine zentrale CSS-Datei keine Webseite mehr gestalten. Es ist das ultimative Werkzeug des W3C-Standards, um Formatierungen an zentraler Stelle einzurichten und auch zweckgebunden einzusetzen.
Im Head der HTML-Seite wird der Verweis auf die externe CSS-Datei gesetzt:
<link rel=”stylesheet” type=”text/css” href=”style.css” />
Um innerhalb der CSS-Datei die Übersicht zu wahren und gleichzeitig die Hierarchie des Layouts hervorzuheben gehe in der folgenden Weise bei der Erstellung der CSS-Datei vor:
Zum einen definiere ich zunäst die globalen HTML-Formate.
* {
margin: 0;
padding: 0;
}body {
font-family: arial, sans-serif;
font-size: 1em;
background: #333366;
color: #222222;
}h1, h2, h3, h4, h5, p, hr {
margin-top: 5px;
margin-bottom: 5px;
}
Hiermit habe ich schonmal die volle Kontrolle über alle weiteren Formatierungen. Ich habe Schriftart, Farbe und Größe bestimmt und alle Abstände von Elementen zu Anfang auf 0 gesetzt, da ich diese für jedes Element selbst bestimmen möchte.
Anschließend baue ich Anhand meines DIV-Layouts meine Hierarchie auch für die Formatierungen nach. Hierbei rücke ich die Untergeordneten Elemente solange Sie ebenfalls eine eindeutige ID besitzen lediglich ein. Später setze ich die Vererbung für weitere HTML-Elemente auch direkt um:
#wrapper {
text-align: center; /* für IE */
}#page {
width: 958px; /* 960px abzüglich dem Rand links+rechts */
margin: 0 auto; /* horizontal zentrieren, nur in Verbindung mit width */
background: #FFFFFF;
border: 1px solid #000000;
}#header {
height: 100px;
background: #EEEEEE;
}#content { }
#left {
float: left; /* alternativ kann man mit position arbeiten */
width: 198px; /* linke Spalte = Breite von Page – Breite von Right */
background: #F9F9F9;
}#right {
float: left; /* Left und Right direkt nebeneinander angeordnet */
width: 760px;
}#right h1 {
font-size: 1.4em;
color: #663333;
}#footer {
clear: both; /* floatings auflösen */
height: 30px;
background: #EEEEEE;
}
Bisher konnte ich mit dieser Variante meine CSS-Dateien relativ sauber halten. Obwohl ich globale Formatierungen z.B. für Überschriften (h1-h5) gestalten kann, mache ich diese Formatierungen zu gerne auch für jeden Layout-Bereich einzeln. Die Datei wird dadurch evtl. etwas größer, aber die Formatierungen werden dadurch eindeutig und übersichtlich und auch der InternetExplorer bekommt weniger Anlass zum meckern.
Informationen über CSS erhält man sehr gut bei CSS4You.
Jetzt habe ich die ersten Inhalte also schön formatiert. Nun widme ich mich der Barrierefreiheit.
Was bedeutet Barrierefrei eigentlich? Ich versuche es mal ganz einfach zusammenzufassen. Der Begriff Barrierefrei wird im Zusammenhang mit Behinderungen genutzt. Z.B. wenn ein Supermarkt eine Rampe für Rollstuhlfahrer im Eingangsbereich hat und alle Gänge auch leicht mit Rollstühlen passierbar sind, dann bezeichnet man den Ort als barrierefrei.
Barrierefreie Internetseiten sind solche, die keine Hindernisse z.B. für Behinderte beinhalten und zusätzlich eine intuitive Bedienung besitzen. Hierfür wurden International Richtlinien aufgesetzt, um die Bedienbarkeit für den Benutzer zu verbessern. Wikipedia Artikel.
Für Webdesigner bedeutet das im Groben das man folgende Punkte beachten sollte:
<a href="" accesskey="s">link</a>). Der Aufruf des Accesskeys ist evtl. je Browser unterschiedlich z.B. alt+strg+accesskeyWenn man sich an diese Regeln etwas hält und noch nach dem W3C-Standard validiert ist, ist man schon auf der sicheren Seite, weil man dies z.B. auch gut als Marketing-Mittel verwenden kann.
Das sollte es nun erstmal gewesen sein. Ich werde diesen Text jetzt nicht mehr auf Rechtshraibfeler untersuchen und schluß machen.
Im letzten Teil (Teil 4) werde ich nochmal eine Reihe von kleinen Tipps und Hinweisen auflisten. Code-Snippets und andere Dinge, welche einem helfen können eine ordentliche Webseite zu gestalten.
Einen Kommentar schreiben