los (1K) 3.Die Seite teilen

Mit verborgenen Tabellen oder Frames arbeiten

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-Layout

Wir brauchen: Einen Raum mit Computer


 

Einführung

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
Klassische Seitenaufteilung

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 Kapelli
Hier steht alles über unseren tollen Zirkus
Erweiterte Variante

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.

Unkonventionelle Lösungen

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.

Auf welche Art willst du die Seite teilen?

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.

 

Seite teilen mit verborgenen Tabellen - Die "all in one"-Methode mit table border="0"

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.

Zusammenfassung
Vorteile Tabellenlayout
Nachteile Tabellenlayout

Mehrere Seiten in einem framset zeigen

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.

Die Datei in der Datei - Eingebettete Rahmen - iframe

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.

Trickreich und sehr flexibel: CSS-Layout

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.

Vorbereitung der HTML-Seite für das CSS-Layout:

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>
Die Layout-Steuerung mit CSS:

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.

Optimale Anpassbarkeit

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:


Erste Schritte | Projektordner anlegen | Farbe verwenden | nach oben