Wir haben gerade in einer kleinen aber gemütlichen Runde über die Vorteile von einem auf Div-Layern basierenden Layout gesprochen. Die Frage, die man sich als erstes stellt, ist natürlich, warum man keine Tables oder Frames verwenden soll.
Der Grund, warum man sein Layout nicht mehr auf Frames aufbauen sollte ist ganz banal. Die sind ab HTML 5 bzw. XHML 2 garnicht mehr implementiert. Zudem gab es schon früher diverse Schwierigkeiten in der Darstellung. Da man außerdem nur für den IE die Scrollbalken der Frames formatieren kann, sehen sie des weiteren auch sehr bescheiden aus und sind ebenfalls wegen ihres ungeschickten Handlings auch bei Besuchern nicht sehr beliebt.
Doch wie sieht das den mit Tabellen aus? War das früher nicht die Methode? Ja man hat früher sehr viel auf der Basis von Tabellen gearbeitet. Jedoch ist der Code eines solchen Designs nicht nur unübersichtlich, nein, die Dinger sind auch noch schlecht in Form zu bringen. Eine Verschachtelung von verschiedenen Bereichen benötigt oftmals mehrere Tabellen, wodurch der Code jedes mal länger wird. Die Fehlersuche wird zum Horror-Trip! Schwört man nun aber auch noch auf CSS wird dieser Code noch länger und sieht mindestens genauso scheußlich aus. Zudem habe ich persönlich festgestellt, dass solche Design wegen der vielen kleinen benötigten Bilder (bei graphisch aufwendigen Designs) sehr hohe Ladezeiten haben.
Doch was ist nun an Div-Layern besser? Nun als erstes benötigt man weniger Tags für das gleiche aussehen, wodurch, wie schon gesagt, der Code übersichtlicher und eine spätere Überarbeitung erleichtert wird. Jedoch baut ein Design niemals rein auf Div-Layern auf. Für den Masthead werden zum Beispiel normalerweise <h1>-Tags verwendet und für den Footer <p>-Tags. Alles wird dann via CSS in Form gebracht und sieht dann, wenn der CSS-Code ausgelagert ist, sehr viel übersichtlicher aus. Eine ordentliche Strukturierung und Kommentierung ermöglicht dann zum Beispiel bei einer späteren Überarbeitung, dass man nicht mehr im Grundgerüst suchen muss, sondern nur noch Farben, Hintergrund-Bilder oder ähnliches nur noch in der CSS-Datei verändert. Es gibt aber noch weitere Vorteile, die ein solcher Aufbau eines Designs mit sich bringt. Hier kommen wir in den Bereich SEO (Suchmaschienen-Optimierung). Viele Suchmaschienen, wie zum Beispiel Google, durchsuchen den Quellcode der Seite nicht nur nach den Meta-Tags, sondern achten speziell auch auf besondere Formatierungen, wie <h1>, <b>, <i> oder ähnliches. Da man nun Standard gemäß den Masthead mit einem <h1>-Tag gemacht hat, erkennt die Suchmaschiene den Namen der Seite als besonders wichtig und Stuft die Seite für diese Suchanfrage höher ein.
Wie sollte nun das Grundgerüst einer solchen Seite nun aussehen? Nun man beginnt, wie es bei jeder Art von Design sein sollte, mit der Zuweisung des Doctype, wobei (X)HTML Transitional vollkommen ausreichend ist. Es folgt das <html>-Tag gefolgt vom <head>-Tag und dem <title>-Tag. Dannach kommen verschiedene Meta-Tags, sowie die Tags zum einbinden der Stylesheets und des Favicon. Der Kopf der Datei wird abgeschlossen mit </head>. Der Body startet mit einem Div-Layer page, der vom Anfang des Bodies bis zum Ende geht, damit man die Seite einfach via Stylesheets zentrieren kann. Der Rest sieht nun im einfachsten Fall so aus, wie oben beschrieben. Ein Masthead mit <h1 id="masthead"></h1>, eine Navigation mit Listen <ul id="navigation"></ul>, ein Content-Bereich mit einem<div id="content"></div> und ein Footer mit <p id="footer"></p>. Das Dokument wird nun einfach mit </div> (page), </body> und </html> abgeschlossen und als *.html-Datei gespeichert. Das ganze sieht dann ungefähr so aus:
- Code: Alles auswählen
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//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>· Deine-Website.tld ·</title>
<meta name="Title" content="Name der Website" />
<meta name="Author" content="name@mail.tld" />
<meta name="Publisher" content="Deine-Website.tld" />
<meta name="Copyright" content="Deine-Website.tld" />
<meta name="Revisit" content="After 2 days" />
<meta name="Keywords" content="hier, stehen, nun, Stcihwörter" />
<meta name="Description" content="Hier steht was zu deiner Seite." />
<meta name="Abstract" content="Here you can tell us something about your website." />
<meta name="Robots" content="INDEX,FOLLOW" />
<meta name="Language" content="Deutsch" />
<meta name="Distribution" content="DE, AT, CH, EU" />
<meta http-equiv="content-Type" content="text/html;charset=iso-8859-1" />
<link rel="shortcut icon" type="image/ico" href="favicon.ico" />
<link rel="stylesheet" type="text/css" href="design.css"/>
</head>
<body>
<div id="page">
<div id="masthead">Deine-Website.tld</div>
<ul id="navigation">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Imprint</a></li>
</ul>
<div id="content">
<h1 class="headline">Herzlich Willkommen</h1>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua.
</div>
<p id="footer">Copyright © 2008 www.Deine-Website.tld - Alle Rechte Vorbehalten.</p>
</div>
</body>
</html>
Weitere Vorteile bringt es nun noch mit sich, wenn man keine zwei getrennten Dokumente für die Stylesheets für den IE und die
anderen Browser macht, da dass eine Sache der Performance ist. Eine Validierung des (X)HTML- und CSS-Codes sorgt für eine gute Performance und Darstellung. Ein guter Host (http://www.der-webdesigner.net) für eine konstant gute Erreichbarkeit.
Ich hoffe, dass ich einigen Leuten etwas Aufschluss geben konnte und dass hier nun eine rege Diskussion entsteht. Ich freue mich.
MfG, Andy
![;-]](./images/smilies/icon_impudently.gif "Extrem frech"){kind=icon}
