Frames oder table

[Michael Jendryschik]

Hallo Mathias!

1. Frames
   Du solltest Frames einsetzen, wenn Du eine bestimmte Navigationsstruktur oder einen Teil der Seite immer unverändert im Bild haben willst

... und bereit bist, all die bekannten Nachteile von Frames, die auf http://www.subotnik.net/html/frames.html erläutert werden, in Kauf zu nehmen. Dies nur als Ergänzung.

2. Tabellen

[snip]

3. CSS von schlechten Webdesignern

Wenn Du zur Avantgarde der Layouter hier gehören möchtest, solltest Du alles per <div> und entsprechenden Positionierungsbefehlen auf den Bildschirm ballern.

Das ist ein weitverbreiteter Irrtum. 'div'-Soup ist genau so schlechtes Markup wie für das Layout missbrauchte und/oder in mehreren Ebenen ineinander verschachtelte Tabellen. Eine schlechte Struktur bleibt eine schlechte Struktur, egal ob sie mit Tabellen, Frames, Dutzenden von 'div' oder anderen veralteten, aktuellen oder zukünftigen Techniken realisiert wird. Schau dir z.B. http://jscript.dk/lycos/2/ an, das ist einfach gruselig:

<div id="pagecontainer">

<div id="topbarcontainer">
  <div id="dogpic">
  <div id="topbarleft"> </div>
  <div id="topbarright"> </div>
  <a href="http://www.lycos.de"><img src="i/logo.gif" alt="Lycos - Ihr persönlicher Internetguide" id="logo" border="0" width="173" height="56" /></a>
  <a href="http://link.to.banner.com"><img src="i/b_fullsized.gif" alt="This is a banner" id="adfullsize" border="0" width="468" height="60" /></a>
  <div class="breaker"> </div>
  <div id="tabs">
  <div class="taba"><a href="http://www.lycos.co.uk/cgi-bin/nph-bounce?pnb1|/">Home</a></div>
  <div class="tab"><a href="http://www.lycos.co.uk/cgi-bin/nph-bounce?pnb1|/">Suche & Katalog</a></div>
  <div class="tab"><a href="http://www.lycos.co.uk/cgi-bin/nph-bounce?pnb1|/">Kommunikation</a></div>
  <div class="tab"><a href="http://www.lycos.co.uk/cgi-bin/nph-bounce?pnb1|/">Services</a></div>
  <div class="tab"><a href="http://www.lycos.co.uk/cgi-bin/nph-bounce?pnb1|/">Channels</a></div>
  <div class="tab"><a href="http://www.lycos.co.uk/cgi-bin/nph-bounce?pnb1|/">My Lycos</a></div>
  <div class="tab"><a href="http://www.lycos.co.uk/cgi-bin/nph-bounce?pnb1|/">Shopping</a></div>
  <div class="breaker"> </div>
  </div>
  </div>
  </div>
  <div id="topsplit"> </div>

<div id="left">

<!-- Und so weiter -->

4. CSS von guten Webdesignern

Schritt 1:
Zunächst wird überlegt, mit welchen Elementen die Informationen bzw. Inhalte, die das Dokument enthält und transportieren möchte, ausgezeichnet werden sollten. Wo sind Überschriften sinnvoll? Wie lauten sie? Sind Tabellen und/oder Listen geeignet? Wo wird zitiert, wo wird betont, wo wird ein Quelltextbeispiel gebracht, wo gibt es Bilder, wo Abkürzungen, die
erläutert werden müssen...? Logische Textauszeichnung ist wichtig und hilft, die Information sinnvoll zu gliedern. Ganz nebenbei wird dafür gesort, dass die textuell darzubringende Information von *jedem* User-Agent transportiert werden kann, ob von Screen-Readern, Braille-Zeile, Textbrowsern oder graphischem Browser.

Schritt 2:
Nun kann man weiter strukturieren. Wahrscheinlich gibt es irgendwo eine Navigation, einen Kopfbereich, vielleicht ein Logo, vielleicht einen Fußbereich und so weiter. Diese Information will auch ausgezeichnet werden, auch hier müssen die richtigen Elemente gefunden werden. Ob diese Arbeit vor der Auszeichnung des eigentlichen Content erledigt wird oder später, spielt oft keine Rolle oder ist abhängig von der gestellten Aufgabe. Es gilt jedoch auch hier,  möglichst logisch auszuzeichnen. Falsch ist es sicher, vorsorglich alles in 'div' einzupacken oder sich erst einmal ein Tabellengerüst zu bauen.

Schritt 3:
Nun hat man ein sauber strukturiertes Dokument vorliegen, dessen Darstellung per Browser-Stylesheet allerdings wohl kaum überzeugen wird. Nun wird CSS eingesetzt und ein Seitenkonzept überlegt, das den Inhalt am besten präsentiert. Navigation neben den Content oder darüber? Ein- oder zweidimensionales Layout? Starke Abtrennung der einzelnen Bereiche oder einheitliches
Erscheinungsbild? 'div' und 'span' werden hierzu benutzt, um Block- bzw. Inline-Elemente zu jeweils einem Element zusammenzufassen, um das entworfene Konzept mit geeigneten Regeln umsetzen zu können. Besonders gute Webautoren brauchen hier nur noch wenige (oder keines) dieser Elemente einzusetzen, da sie in Schritt 1 und 2 bereits ausreichend strukturiert oder Blöcke verwendet haben, die sich ohne Container ausreichend gestalten lassen.

Dann gehörst Du zur reinen Lehre und alle lieben Dich, vor allem wenn Du dabei alle Browser berücksichtigst und alles extrem flexibel herumfloaten lässt, nach einigen kleineren Frustrationen kannst Du dann unter den Webdesignern das werden, was bei den Reitpferden die Lippizaner sind, nämlich ein Rassedesigner *g* Du kannst Dir dann wie der englische König (RI) ein eingängiges Kürzel für Deinen Namen ausdenken und Deine Postings damit verzieren. MI ist allerdings schon vergeben!

Danke für die in Ironie getauchten Blumen.

Ich hoffe, du hast verstanden, worauf es ankommt.

Gruß,

MI