|
|
|
|
|
|||||
|
|
|
|
|
|
|
||||||||||||||||
|
|
|||||||||||||||
|
|
 |
Verwenden Sie für Ihre Projekte ein vorgefertigtes Grundgerüst (siehe unten), werden Sie bei Ihrer Umsetzung viel Zeit einsparen.
Das korrespondierende Stylesheet-Template
Bestenfalls setzen Sie sich eigene, gut durchdachte Standards (siehe hierzu auch meine Standards bei CSS), welche Sie dann konsistent in allen Ihren Projekte einsetzen. So arbeiten Sie effektiver, und werden sich später besser zurechtfinden falls Sie Änderungen an bereits ausgeführten Projekten vornehmen müssen. Wenn man sich “sauberes”, semantisches Markup angewöhnt, wird man nicht nur schneller W3C-konforme 
Seiten erstellen, sondern auch mit weniger Problemen zu tun haben wenn es an das Feintuning/Abgleich (durch sauberes Markup oft gar nicht nötig!!) zwischen
Firefox ,
Internet Explorer ,
Safari ,
Opera ,
Google Chrome
(etc.) geht.
Das Markup: <!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Seitenname/Beschreibung</title> <link rel="stylesheet" type="text/css" href="/css/index.css" /> </head> <body> <div class="layoutPage"> <div class="layoutPageHead"> </div> <div class="layoutPageBody"> </div> <div class="layoutPageFoot"> </div> </div> </body> </html> Erweiterung des Grundgerüsts Das Basis-Gerüst muss natürlich bei jedem Projekt erweitert werden. Optimalerweise folgt man hier auch gleich den Regeln des semantischen Webs .
Einer (von mehreren) der Gründe ist, damit
Screenreader
die Inhalte in der richtigen Reihenfolge “präsentiert” bekommen.
Beispiel einer Erweiterung:
<!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Seitenname/Beschreibung</title> <link rel="stylesheet" type="text/css" href="/css/index.css" /> </head> <body> <div class="layoutPage"> <div class="layoutPageHead"> <div class="globalLogo"> <h1> <a href="index.php"> <img src="img/logo.png" alt="" title="" /> </a> </h1> </div> <div class="globalNavigationMain"> <ul> <li>(...)</li> <li>(...)</li> (...) </ul> </div> </div> <div class="layoutPageBody"> <div class="teaser"> (...) </div> <div class="product"> (...) </div> </div> <div class="layoutPageFoot"> <div class="globalNavigationMeta"> (...) </div> <div class="globalContact"> (...) </div> </div> </div> </body> </html>
Fazit:
|
 |
|
|
||||||||||
|
||||||||||||||||
