AW: Frage zum CSS-Layout
Wie krieg ich denn dann eine Struktur in eine Seite? Klar, dass ich das nicht so strikt machen kann wie beim Printdesign (von der Variante »großes Bild mit Imagemaps« mal abgesehen).
Nun es ist relativ einfach, wie mein Vorposter schon schrieb.
Man hat fuer nahezu jede Situation ein passendes Element, wodurch 'Container' eigentlich nur noch zum Zusammenfassen von Bereichen verwendet werden sollten. Man kann es sogar strikter als im Printbereich machen, weil man hier logischer gliedern kann -bzw. darf. Oberpunkte mit einem Div-Container zusammenfassen, den Inhalt des Containers wiederum mit semantisch, sinnvollen Elementen auszeichnen und schon hat man das nahezu perfekte Markup.
Einfaches (falsches) Beispiel:
HTML:
<!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" >
<head>
<meta http-equiv="content-type" content="text/html; UTF-8" />
<title>Datenbank</title>
<style type="text/css" media="screen, projection" id="id">
@import "style.css";
</style>
</head>
<body id="index">
<div id="header">
<div id="logo"><img src="" alt="" /></div>
<div id="ueberschrift1">Seitentitel</div>
</div>
<div id="sidebar">
<div id="menue">
<a href="#" title="">Lorem</a> |
<a href="#" title="">Lorem</a> |
<a href="#" title="">Lorem</a> |
<a href="#" title="">Lorem</a> |
</div>
<div id="werbung">
<div id="werbeueberschrift">Werbung</div>
<script type='text/javascript'><!--//<![CDATA[
[Werbescript]
//]]>--></script>
</div>
</div>
<div id="main">
<div id="ersterParagraph">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</div>
<div id="zweiterParagraph">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</div>
</div>
<div id="footer">© Firma | Datum | Ipressum usw.</div>
</body>
</html>
Mit diesem Code, haettest du zwar eine leckere Suppe gekocht aber nicht jeder steht auf Suppe. Suchmaschinen werden hier streiken, Screenreader melden auch nur noch Muell und deine gesammte Struktur faellt im Benutzermodus komplett auseinander und wird somit nicht verwertbar fuer den Endanwender.
Im Gegendsatz dazu, verwandelnt sich bei einer semantisch, korrekt ausgezeichneten Webseite die Nachteile schon praktisch zu Vorteilen.
Einfaches ('richtiges') Beispiel:
HTML:
<!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" >
<head>
<meta http-equiv="content-type" content="text/html; UTF-8" />
<title>Datenbank</title>
<link rel="stylesheet"
<style type="text/css" media="screen, projection" id="id">
@import "style.css";
</style>
</head>
<body id="index">
<div id="wrapper">
<h1 id="ueberschrift1">Seitentitel</h1>
<div id="sidebar">
<ul id="menue">
<li><a href="#" title="">Lorem</a></li>
<li><a href="#" title="">Lorem</a></li>
<li><a href="#" title="">Lorem</a></li>
<li><a href="#" title="">Lorem</a></li>
</ul>
<h3 id="werbeueberschrift">Werbung</h3>
<script type='text/javascript'><!--//<![CDATA[
[Werbescript]
//]]>--></script>
</div>
<div id="main">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
<ul id="footer">
<li>© Firma</li>
<li>Datum</li>
<li>Ipressum usw.</li>
</ul>
</div>
</body>
</html>
Mit diesem Markup vermittelst du anderen Geraeten mehr Information ueber deinen Inhalt, da du deinen Elementen eine hochwertigere Bezeichnung zuordnest.
Aber spätestens, wenn ein CMS zum Zuge kommt, muss ich doch eine Ordnung drin haben, die sagt "Der Kram kommt in dieses Kistchen", zum Beispiel das Menu. Und soweit ich weiß, was im Nonprint absolut nix heisst!, steht dann da meistens irgendwo div id = menu. (z.B.)
Dann schau noch mal in ein CMS und sieh dir die labels noch mal etwas genauer an
Im Grunde wird doch oftmals, mal ganz einfach gesagt, mit div-containern die alte Tabelle nachgebaut.
In anderen Foren, wird man fuer diese und aehnliche Aussagen nahezu gesteinigt. Nein, so ist es sicherlich nicht, da man hier schon ganz anders denken bzw. vorgehen muss. Bei Tabellen erstellt man meist erst seine Webseite und fuegt dann den Inhalt ein, in der modernen Variante hat man zuerst den Content und bastelt um diesen eine 'benutzergrafisch, ansprechende Oberflaeche'.
Und genau in dem Punkt vermag sich mir der Sinn und Zweck nicht mehr so zu erschließen, was nun besser ist, wenn man div id = links, rechts und mitte nebeneinander packt (und teils noch auf die reihenfolge achten und floaten und was weiß ich noch alles) als wenn man sagt: tabelle, drei spalten.
Ganz einfach:
SEO bzw. Leserlicher fuer Suchmaschinen, keine Spacer *.gifs, leichter zu handlen, semantisch hochwertiger & zugaenglicher fuer Leute mit Einschraenkungen und vorallendingen weniger Code (weniger Traffic)
Blödsinn. Kasten auf, Inhalt rein. Der Rest ist Schmuck.
Und auf den Schmuck kommt es eben an
Hier wird es im InDesign m.E. schon sehr abenteuerlich.
Ich muss es zum Glueck nur selten verweden
