Weil HTML-Seiten ihre Informationen komplett anders als Bücher oder Zeitungen darbieten, sind sie oft auch optisch anders aufgemacht. Eine Vielzahl von möglichen Verzweigungen, von Information auf engstem Raum legen eine Unterteilung der Seite in mehrere Bereiche nahe. Dann wird aus dem gewohnten "Untereinander" ein "Neben- und Übereinander". Kopf- und Navigationsbereich trennen sich vom eigentlichen Inhalt. Zur Umsetzung gibt es wieder mehrere Möglichkeiten...
Einführung | Verborgene Tabellen | Framesets | Eingebettete Rahmen | CSS-LayoutWir brauchen: Einen Raum mit Computer
Nachdem wir das letzte Mal eine Ordnerstruktur für unser Schulhomepage-Projekt erstellt haben, um es organisatorisch in den Griff zu kriegen, machen wir uns heute Gedanken über seine optische Gestaltung - ob und wenn ja wie wir die Seite(n) aufteilen werden.
Kopfbereich, enthält Logo, Name der
Homepage, z.B. www.unsere-schule.de |
|
Navigationsbereich, enthält die Links zu
weiteren Seiten projekte bilder, etc. |
Inhalt, enthält die eigentlichen Informationen, z.B weitere Links: K.I.D.S. - PIT - Sanitätsdienst - Schlichter - Zirkus Kapelli |
Die Unterteilung in Kopf (oben), Navigation (links) und Inhalt (rechts) ist die konventionelle, vertraute, klassische Seitenaufteilung. Sie hat zumindest den Vorteil, dass sich jeder auf Anhieb zurechtfindet. Natürlich ist sie nicht gerade originell. Bei kleinem Bildschirm wird oftmals der Inhalt auf der rechten Seite abgeschnitten - um das zu verhindern solltest du hier immer mit prozentualen Angaben statt festen Pixelgrößen arbeiten.
www.unsere-schule.de
bilder | projekte | aktuell | schule | erfolge |
|
K.I.D.S. PIT Sanitätsdienst Schlichter Zirkus Kapelli |
Zirkus KapelliHier steht alles über unseren tollen Zirkus |
Recht beliebt und oft gesehen ist auch die folgende Variante:
Die Links zu den Hauptbereichen der Homepage befinden sich direkt
unter dem Kopf in horizontaler Anordnung. Die einzelnen
Unterpunkte des aktuellen Bereichs dann rechts darunter in
vertikaler Staffelung.
Aktive (angeklickte) Links sind im Beispiel gelb unterlegt.
Warum nicht auch einmal die Navigationsleiste an der rechten Bildschirmseite andocken? Wer möchte behaupten, dass die "Links" nunmal nach links gehören - schon allein weil sie so heissen? Und was ist daran auszusetzen, wenn die Navigation mal unten ist? Deiner Fantasie sind keine Grenzen gesetzt - ausprobieren und Vor- und Nachteile selbst herausfinden lautet die Devise!
Nimm dir ein Blatt Papier und zeichne verschiedene Möglichkeiten. Rede mit deinen Freunden und finde heraus, welche Lösung für dich optimal ist.
Langsam ist es an der Zeit, etwas darüber zu lernen, auf welche Art du die Teilung der Seite durchführen kannst! Zuerst einmal wird hier die Methode mit verborgener Tabelle, ihre Vor- und Nachteile beschrieben.
Um diese Methode anwenden zu können, musst du schon ein bisschen darüber Bescheid wissen, wie einfache Tabellen in HTML aufgebaut werden. Solltest du das Kapitel 5. HTML: Tabellen verwenden noch nicht gelesen haben, so kannst du das jetzt nachholen. Zur Wiederholung für die, die bereits Bescheid wissen: Wir arbeiten dabei mit verschmolzenen Zellen. Wenn du nochmal nachlesen willst, wie das funktioniert, so wiederhole den Abschnitt über colspan und rowspan
Wenn du sehen willst, wie ein typisches Layout mit verborgener
Tabelle aussieht, dann öffne das
Beispiel
15
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Seite teilen mit verborgener Tabelle</title> </head> <body> <table border="0" width="100%" cellspacing="0" cellpadding="5" summary="Layout"> <tr> <td colspan="2" bgcolor="teal" id="kopf"><h4>www.unsere-schule.de</h4></td> </tr> <tr> <td width="20%" bgcolor="yellow"> <a href="#">PIT</a><br> <a href="#">Sanitätsdienst</a><br> <a href="#">Schlichter</a><br> <a href="#">Zirkus Kapelli</a></td> <td width="80%"><h5>Zirkus Kapelli</h5></td> </tr> </table> </body> </html>So geht's:
Zuerst notieren wir im body eine Tabelle. In der table-Marke notierst du border="0" width="100%"
In der Tabelle brauchen wir nur zwei Zeilen.
Wir notieren:
<tr></tr>
<tr></tr>
Die Tabelle braucht nur zwei Spalten. Für den Kopfbereich der Seite notieren wir in der ersten Zeile eine verschmolzene Zelle mit <td colspan="2"></td>.
In der zweiten Spalte finden Navigation und Inhalt Platz. Soll
die Navigation nach links, so notierst du zuerst:
<td width="20%"></td>
für den Navigationsbereich, der nun ein Fünftel der zur
Verfügung stehenden Seitenbreite in Anspruch nehmen
wird.
Dann kommt mit<td width="80%"></td> der restliche Tabellenbereich, der für den Inhalt vorgesehen ist.
Soll die Navigation nach rechts, und der Inhalt nach links, so vertauschst du die beiden Zellen: zuerst die Zelle mit dem Inhalt, dann die mit der Navigation.
Um die Abstände der Tabelle zum Rand des Fensters, die der Browser automatisch erzeugt, zu unterdrücken habe ich bei dem Beispiel ein bisschen mit CSS getrickst. Nebenbei habe ich dabei auch die Höhe der Tabelle auf die ganze Seitenhöhe ausgedehnt, die Höhe der Kopfzeile auf 40 Pixel beschränkt und den Inhalt aller Zellen am oberen Zellenrand ausgerichtet.
Wenn du das auch einmal ausprobieren möchtest, so füge diesen Quelltext im head-Bereich einer HTML-Seite ein:
<style type="text/css"> <!-- body { margin:0 } table { height:100%; } td { vertical-align:top; } #kopf { height:40px; } --> </style>
In der verschmolzene Tabellenzelle, die den Kopf der Seite bildet notierst du dann noch id="kopf".
Mehr über CSS: 7. HTML: CSS verwenden.
Wie du framesets programmierst, lernst du in der HTML-Schule in Kapitel 6. HTML: Frames verwenden.
Wer die obenganannten Nachteile des Tabellenlayouts nicht in Kauf nehmen will, weil z.B. die Navigation aus Aktualitätsgründen ständig verändert wird, und die Änderung dann im Gefolge an jeder Seite extra durchgeführt werden müsste, der verwendet wohl besser ein frameset.
Wer ein frameset verwendet, der setzt auf die
vollständige Trennung von Navigation und Inhalt. Durch ein
frameset werden mehrere Enzelseiten, dass heisst
z.B. eine navigationstragende und eine informationstragende Seite
in einem gemeinsamen Fenster angezeigt.
Die Datei mit dem frameset, meist die Index-Seite,
enthält dabei selbst weder Navigationsverweise noch Inhalt,
sondern lediglich Information für den Browser, wie das
Hauptfenster geteilt, und welche Datei in welchem Teilfenster
angezeigt werden soll.
In einem Extrabereich dieser frameset-Seite kann
jedoch zusätzlich ein Bereich mit Verweisenden Links und
Informationen eingerichtet werden, der nur von Browsern angezeigt
wird, die keine Framesets anzeigen können.
Der Vorteil des framesets im Gegenteil zum Tabellenlayout liegt auf der Hand:
Bei allen Vorteilen hat das Verwenden von framesets jedoch auch gravierende Nachteile:
Wie du framesets programmierst lernst du in der HTML-Schule in Kapitel 6. HTML: Frames verwenden.
Eine Alternative zum umfangreichen frameset bietet das schlanke Arbeiten mit eingebetteten Rahmen. Ein eingebetterter Rahmen (iframe) ist wie ein Fenster in der Datei, durch das man auf eine andere Datei sehen kann. Eingebettete Rahmen können an beliebiger Stelle in Einzelseiten platziert werden.
Anders als beim frameset ist das Unterdrücken der Rahmen bei iframes völlig "legall", d.H. W3-konform. Man ist also nicht gezwungen "ungültiges" HTML zu programmieren.
Ausgesprochen vorteilhaft ist das Verwenden von eingebetteten Rahmen für wöchentlich zu aktualisierende Daten, z.B. aktuelle Termine, die auf allen Seiten auftauchen. Die Aktualisierung muss dann nur an der einen Datei, die in allen iframes angezeigt wird, durchgeführt werden.
Als kleiner Nachteil der iframes sei noch vermerkt, das ältere Browser (unter NS 6 und IE3) sie nicht anzeigen können.
Wie du einen iframe programmierst lernst du in der HTML-Schule in Kapitel 6. HTML: Frames verwenden-iframe.
Wer keine Frames verwenden will, und auch die Nachteile des Tabellenlayouts vermeiden möchte, der sollte die Seite mit CSS teilen.
Der besondere Vorteil an dieser Methode, die von führenden Webdesignern empfohlen wird, ist die strenge Trennung von Inhalt und Darstellung.
Dies verbessert die Lesbarkeit des Quelltextes, und verkürzt die Ladezeit, da die Information zur Seitendarstellung nur einmal geladen werden muss.
Die Seiten lassen sich auch sehr viel leichter und damit schneller pflegen.
Um die Seiteanzeige per CSS zu steuern, wird im Allgemeinen so vorgegangen:
Die Hauptblöcke der Seite wie Kopf- und Fußbereich, Navigation und Inhalt werden in Div-Container eingeschlossen.
Jeder dieser Div-Container erhält dann eine individuelle Kennzeichnung, die ihm mittels des id-Attributs zugewiesen wird:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Seite teilen mit CSS</title> </head> <body> <div id="kopf"> <h4>www.unsere-schule.de</h4> </div> <div id="menu"> <a href="#">PIT</a><br> <a href="#">Sanitätsdienst</a><br> <a href="#">Schlichter</a><br> <a href="#">Zirkus Kapelli</a> </div> <div id="inhalt"> <h5>Zirkus Kapelli</h5> </div> <div class="clear"></div> </body> </html>
Da Div-Container als Blockelemente automatisch einen eigenen Absatz erzeugen, muss den Divs von Menu und Inhalt dieses Verhalten erstmal ausgetrieben werden - denn die beiden Blöcke sollen ja spaltenweise angeordnet werden.
Um diese HTML-Elemente jetzt in Reihe fließen zu lassen,
können wir die CSS-Eigenschaft float
benutzen:
#menu { float:left; width:20%; }
Da ein "offener" Float in der HTML massive Probleme nach sich
ziehen kann, sollte man, wenn man floats
verwendet,
abschließend immer ein Element notieren, das das
geänderte Fließverhalten wieder abstellt,
beispielsweise eine Fußzeile. In unserem Beispiel benutzen
wir einen Div-Container, der direkt nach dem Inhalt notiert
wurde, und die Klasse clear
zugewiesen hat.
Darum definieren wir in der externen CSS-Datei noch diese Klasse:
.clear { clear:both; }
So, damit sind wir auf der sicheren Seite.
Nun will ich zum Abschluss den Vorteil der Seitenteilung mit CSS näher beleuchten.
Die per CSS geteilte Seite lässt sich jetzt veränderten Wünschen an die Seitendarstellung, z.B. falls die Navigation rechts erscheinen soll, kinderleicht anpassen - und das ohne den Quelltext der Seite zu verändern.
Einfach in der CSS-Datei statt float:left
notieren float:right
, schon ist die Navigation auf
der rechten Seite.
Cool!
Weiter geht's: