Anzeige
Tutorialbeschreibung

Professionelle Websites: Erweiterte Features von HTML und CSS Teil1 -

Professionelle Websites: Erweiterte Features von HTML und CSS Teil1 -

Einige Aspekte von HTML und CSS wurden in Kapitel 4 bewusst nicht behandelt, weil es sich um problembehaftete oder speziellere Features handelt. In diesem Kapitel gehen wir gesondert darauf ein.


Das nun folgende Tutorial ist ein Auszug aus dem Buch: Professionelle Websites von Stefan Münz.
Die Veröffentlichung des Kapitels erfolgt mit freundlicher Genehmigung von Pearson Education.


1 Mehrfenstertechnik (Frames)

Als der damals führende Browser-Anbieter Netscape 1995 die Technik der Frames implementierte und dazu eine Reihe nicht standardisierter HTML-Elemente einführte, wurde das neue Feature von der Gemeinde der Webdesigner begeistert aufgenommen. Endlich war es möglich, beispielsweise links eine fixe Navigation zu haben, während sich rechts der scrollbare Inhalt befand. Die Navigation befand sich in einer separaten Datei und musste nicht in jeder Datei neu notiert werden.

So weit ist der Segen der Mehrfenstertechnik gut nachvollziehbar. Dennoch tat sich das W3-Konsortium schwer damit, die Frames in den HTML-Standard mit aufzunehmen. 1998 übernahm man das Konzept zwar in HTML 4.0, führte dazu aber eine eigene HTMLVariante neben »strict« und »transitional« ein: die Variante »Frameset«.

Mittlerweile gelten Frames in professionellen Kreisen als verpönt. Dafür gibt es mehrere Gründe:
- Inhaltsseiten haben selbst keine vollständige Struktur und in der Regel keine Navigationslinks.
- Anwender können z.B. keine Bookmarks auf bestimmte Unterseiten eines Angebots setzen, weil in der Adresszeile des Browsers immer nur der URI der Seite angezeigt wird, die das Frameset enthält. Durch etwas Programmieraufwand ist dieses Problem zwar lösbar, doch die meisten Anbieter, die Frames einsetzen, kümmern sich nicht darum.
- Frames sind ungünstig für Suchmaschinen. Die meisten Suchmaschinen lösen zwar die Frame- Struktur auf und indexieren die inhaltstragenden Seiten. Doch die Links bei Suchtreffern führen dann direkt zu den Unterseiten. Da diese aber nur einen Teil der Seite darstellen und meist keine eigene Navigation enthalten, landen die Seitenbesucher in einer Hypertext-Sackgasse, die oft auch vom Layout her wie eine »halbe Sache« wirkt. Der Besucher erhält keinen besonders guten Eindruck vom Anbieter der Seite.
- Sind Frames bei der Bildschirmanzeige noch praktisch, so stellen sie beim Ausdrucken von Webseiten nicht selten ein Problem dar. Hat der Anwender den Fokus im Frame für die Navigation, kann es beispielsweise passieren, dass der Browser nur die Navigation ausdruckt und nicht wie gewünscht den Inhalt. Unerfahrene Anwender sind dadurch schnell irritiert.
- Bei drei und mehr Frames soll pro Link nicht selten mehr als ein anderer Frame seinen Inhalt ändern. Mit HTML allein ist es jedoch nicht möglich, zwei oder mehr URIs pro Link zu adressieren. Deshalb wird zu JavaScript gegriffen, was aber nicht funktioniert, wenn der Anwender JavaScript ausgeschaltet hat. Die gesamte Navigation funktioniert dann nicht mehr.
- Frame-basierte Seiten sind ein Problem für Browser oder Ausgabegeräte, die nicht frame-fähig sind. Zwar erkennen modernere nicht grafische Browser wie Lynx Frames, doch das Handling für den Anwender ist meist unbefriedigend.
- Frames erfordern mehr Kommunikation zwischen Browser und Webserver, da pro Frame Ressourcen übertragen werden müssen.
- Frames verlocken zu einem unfairen, urheberrechtlich sehr bedenklichen Trick: Nur die Navigation gehört zur eigenen Site, während die Inhalte aus fremden Quellen stammen. In der Adresszeile des Browsers ist das für den Anwender jedoch nicht erkennbar.

Im Grunde gibt es zwei Hauptgründe, weswegen Frames immer noch zum Einsatz kommen:
- Bestimmte Inhalte scrollen nicht mit, z.B. eine Navigation, ein Logo usw.
- Wiederkehrende Teile wie der Code für eine Navigation muss nur einmal in einer separaten Datei notiert werden, aber nicht mehr in jeder einzelnen Datei.

Für »non-scrolling-regions« steht mit der CSS-Angabe position:fixed mittlerweile eine Alternative zur Verfügung. Wir werden in diesem Kapitel auch zeigen, wie Sie diese Alternative richtig einsetzen.

Gegen das Argument der einmaligen Notation von Code wird von Frames-Gegnern in der Regel angeführt, dass es serverseitige Möglichkeiten gebe, Code nicht immer wieder kopieren zu müssen. Dies läuft jedoch auf dynamisch erzeugte Seiten hinaus. Im einfachsten Fall über Server Side Includes, meist aber über Scriptsprachen wie PHP. Wenn Sie ohnehin eine Site entwickeln, die nicht mit statischen HTML-Dateien, sondern etwa mit PHP-Scripts arbeitet, dann sind Frames ohnehin nur lästig und problematisch. Wenn Sie ein HTML-basiertes Projekt dagegen unter anderem auch auf Wegen wie CD-ROM verbreiten möchten, müssen Sie statische HTML-Dateien verwenden. In diesem Fall aber zieht das Argument der Frames-Gegner nicht und es ist unter Umständen durchaus vertretbar, sich bewusst für den Einsatz von Frames zu entscheiden.

Bilder

Abbildung 6.1: Frameset im grafischen Browser (oben) und in Lynx (unten)


Link zum Thema Frames-Problematik:
Artikel »Warum Frames out sind«:
http://www.subotnik.net/html/frames.html


1.1 HTML mit Framesets und Frames

Das »Denken in Frames« erfordert zunächst einmal, sich Gedanken über mehrere unterschiedliche Dateien zu machen. Erforderlich sind eine Datei, in der das Frameset definiert wird, also die Aufteilung der Einzelfenster sowie je eine Datei bzw. Quelle, die beim Aufruf der Frameset-Datei in die einzelnen Frame-Fenster geladen werden soll.

Datei mit Frameset-Definitionen
Das nachfolgende Listing zeigt den kompletten Quelltext einer Datei mit einer Frameset- Definition:

Listing 6.1: Datei mit Frameset-Definition

Bilder


Zunächst fällt auf, dass eine andere Dokumenttyp-Deklaration verwendet wird. In Dateien, die ein Frameset definieren, müssen Sie diese Deklaration verwenden. Damit erfüllt eine solche Seite den HTML 4.01-Standard in der Variante für Framesets.

Die weitere Struktur weicht ebenfalls stark von sonst üblichen HTML-Dokumenten ab. Das html- Element enthält nicht wie sonst üblich die Elemente head und body als Inhalt, sondern die Elemente head und frameset. Das body-Element wird also durch das frameset- Element ersetzt. Im head-Element können jedoch die gleichen Daten stehen wie bei gewöhnlichen HTML-Dokumenten. Das title-Element ist Pflicht und andere Angaben, wie etwa meta- oder link-Elemente, sind ohne Ausnahme erlaubt und meist auch sehr sinnvoll.

Das frameset-Element (<frameset>...</frameset>) bestimmt die Verteilung der Fenster. Dazu kann es die beiden Attribute rows= und cols= enthalten. Durch das rows-Attribut werden Fenster untereinander angeordnet (rows = Reihen), durch das cols-Attribut nebeneinander (cols = columns = Spalten).

Im obigen Beispiel-Listing werden durch die Angabe cols="250,*" zwei Frame-Fenster nebeneinander angeordnet. Das linke Frame-Fenster soll 250 Pixel breit sein. Das rechte soll so breit sein, wie der Rest des Browser-Anzeigefensters es erlaubt. Die Wertzuweisung besteht also in kommagetrennten Werten, wobei eine Zahl eine Pixelangabe bedeutet. Ferner sind Prozentangaben erlaubt wie etwa cols="30%,*". Das Sternchen ist ein Platzhalter und bedeutet »die Breite soll vom Browser bestimmt werden«.

Selbstverständlich ist eine Aufteilung in mehr als zwei Spalten oder Reihen möglich. So definiert beispielsweise rows="200,250,*" drei Frame-Fenster untereinander, wobei das erste 200 Pixel hoch ist, das zweite 250 Pixel hoch und das dritte soll so hoch sein wie der Rest der Anzeigehöhe des Browser-Fensters es ermöglicht.

Möglich sind auch Angaben wie cols="100,3*,5*". Dies ist sinnvoll, wenn Sie ein oder zwei Frames mit einer Pixelangabe zu Höhe und Breite versehen möchten, die übrigen Höhen bzw. Breiten dagegen flexibel gestalten. Die Angabe im Beispiel bedeutet: drei Frame-Fenster nebeneinander, wobei das erste 100 Pixel breit sein soll. Von der verbleibenden Breite soll das zweite Fenster drei Achtel einnehmen und das dritte fünf Achtel. Zahlen, gefolgt von einem Sternchen, werden als Verhältnisangabe betrachtet, ähnlich wie Prozentangaben, jedoch bezogen auf den unbekannt großen, verbleibenden Teil des Browser-Fensters. Die Summe der Zahlen ist der gemeinsame Nenner. Die entstehenden Bruchwerte sind für den Browser die Vorgabewerte zur Berechnung der tatsächlichen Framefenster-Breite bzw. -Höhe.

Die Attribute cols= und rows= dürfen auch beide gleichzeitig verwendet werden.

Ein Beispiel:
<frameset rows="100,*" cols="25%,*">
<frame src="obenlinks.html" name="f1">
<frame src="obenrechts.html" name="f2">
<frame src="untenlinks.html" name="f3">
<frame src="untenrechts.html" name="f4">
</frameset>

Durch eine solche Aufteilung wird ein Gitter mit so vielen Spalten mal Reihen wie angegeben erzeugt. Häufig werden jedoch auch andere Aufteilungen gewünscht, wie etwa »oben ein Streifen über die gesamte Breite und unten zwei Spalten«. Für solche Aufteilungen besteht die Möglichkeit, Frameset-Definitionen zu verschachteln:

<frameset rows="100,*">
<frame src="oben.html" name="f1">
<frameset rows="250,*">
<frame src="unenlinks.html" name="f2">
<frame src="untenrechts.html" name="f3">
</frameset>
</frameset>

Es werden also ein äußeres und ein inneres Frameset definiert. Das äußere Frameset besorgt mit rows= die Aufteilung in zwei Frame-Fenster untereinander. Das frame-Element für die obere Quelle wird auch erst einmal notiert. Anstelle des frame-Elements für das untere Frame-Fenster wird jedoch ein weiteres, inneres frameset-Element notiert. Dieses bewirkt eine Aufteilung in zwei weitere, nebeneinander anzuordnende Frame-Fenster (cols=).
Für jeden kommaseparierten Wert, der bei einem rows- oder cols-Attribut zugewiesen wird, muss innerhalb des frameset-Elements also entweder ein frame-Element notiert werden, welches den Fensterinhalt angibt, oder ein weiteres, inneres frameset-Element, welches den Raum des Frame- Fensters für eine Aufsplittung in weitere Frame-Fenster nutzt.

Während das frameset-Element aus Anfangs- und End-Tag besteht, ist <frame...> ein Standalone-Tag. In XHTML muss es folglich in der Form <frameset ... /> notiert werden. Das frame-Element hat zwei wichtige Standardattribute. Beim src-Attribut wird der URI des Inhalts angegeben, der im entsprechenden Frame-Fenster angezeigt werden soll. Es kann sich um eine lokal referenzierte Datei handeln oder auch um eine entfernte, absolute Internetadresse. Inhalte können HTML-Dateien sein, aber natürlich auch andere Quellen, wie Grafiken, Flash-Movies, PDF-Dateien oder Ähnliches. Auch dynamische Quellen wie PHP-Scripts können selbstverständlich in jedem einzelnen Frame-Fenster als Quelle angegeben werden. Bei Grafik- oder Multimedia-Quellen ist allerdings zu beachten, dass hierbei keine Möglichkeit besteht, einen Alternativtext anzugeben.

Das andere wichtige Attribut für jedes frame-Element ist das name-Attribut. Der frei vergebbare Name ist vor allem wichtig, wenn Seiten, die innerhalb eines Frame-Fensters angezeigt werden, mit einem Link den Inhalt eines anderen Frame-Fensters verändern wollen. Bei solchen Links muss das andere Frame-Fenster unter dem hier vergebenen Namen mit adressiert werden.

Noframes-Bereiche
Zwischen <frameset> und </frameset> darf neben inneren frameset-Elementen und frame-Elementen noch ein weiteres Element stehen, ausgezeichnet durch <noframes>... </noframes>. Dieses Element erlaubt es, für Browser oder andere Client-Programme, welche keine Frames anzeigen können, einen alternativen Inhalt anzubieten.

Ein Beispiel:
Bilder


Das noframes-Element darf am Ende einer frameset-Struktur vor dem schließenden </frameset>-Tag des äußersten Framesets notiert werden. Als Inhalt sind beliebige Blockund Inline-Elemente erlaubt.

Interessant ist, dass das noframes-Element auch in HTML-Dokumenten notiert werden darf, die innerhalb eines Framesets in einem Frame-Fenster angezeigt werden. Dort muss allerdings im Dokumenttyp die Transitional-Variante von HTML angegeben werden. Das noframes-Element kann dann als ganz normales Element im Dateikörper notiert werden. Innerhalb davon können z.B. Rückverweise auf eine Seite mit Navigationslinks notiert werden. Browser wie Lynx, die zwar Framesets erkennen, jedoch nicht anzeigen können, stellen den Inhalt von noframes-Elementen im Dateikörper dar. Browser, die Frames anzeigen können, ignorieren die Inhalte dagegen.

1.2 Links zu anderen Frame-Fenstern

Wie bereits erwähnt, müssen Links innerhalb eines Framesets, deren Ziel in einem anderen als dem aktuellen Frame-Fenster angezeigt werden soll, das gewünschte Frame-Fenster benennen. Anzugeben ist der Name, der bei <frame ... name=> vergeben wurde.

Ein Beispiel:
<a href="index.htm" target="inhalt">Startseite</a>

Dieser Link öffnet sein Ziel in einem Fenster, das mit <frame ... name="inhalt"> definiert wurde. Das target-Attribut gibt den gewünschten Fensternamen an (target = Ziel).
Bei Navigationslinks, die alle auf ein anderes Frame-Fenster verweisen, gibt es jedoch noch eine andere Möglichkeit, nämlich im Kopfbereich des HTML-Dokuments ein Zielfenster vorzugeben.

Beispiel:
<head>
<!-- andere Kopfdatendefinitionen -->
<base target="inhalt">
</head>

Das base-Element kann ebenfalls ein target-Attribut enthalten. So notiert wie im Beispiel hat es die Wirkung, dass alle Linkziele des aktuellen Dokuments in einem Frame-Fenster namens inhalt geöffnet werden.
Groß- und Kleinschreibung werden übrigens unterschieden. Wenn beispielsweise ein Fenster mit <frame ... name="Inhalt"> definiert wurde, kann es nicht mit <a ... target= "inhalt"> angesprochen werden! target-Angaben zu nicht existierenden Frame-Fenstern bewirken in den meisten Browsern übrigens, dass der Link stattdessen in einem neuen Fenster oder in einem neuen Tab geöffnet wird.

Wichtig zu wissen ist ferner, dass HTML-Dokumente, die in Hyperlinks oder im base-Element das target-Attribut benutzen, in der Dokumenttyp-Deklaration nicht mit der HTMLVariante »strict« ausgezeichnet werden dürfen. Das target-Attribut gehört zu den HTMLBestandteilen, die im »eigentlich gewünschten« HTML keinen Platz mehr haben, ebenso wenig wie Frames allgemein. Verwenden Sie für Dokumente, in denen target-Attribute vorkommen, stattdessen die HTML- Variante »transitional«, also so:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

1.3 Rahmen und andere Frame-Eigenschaften

Normalerweise zeigen frame-fähige Browser zwischen den Frame-Fenstern systemabhängig aussehende Rahmen an, die es dem Anwender unter anderem erlauben, das Fensterverhältnis durch Ziehen der Rahmen mit der Maus zu ändern. Ein häufiger Wunsch von Seitenanbietern sind »unsichtbare Fensterrahmen«. Dadurch erscheint dem Anwender die gesamte Seite wie aus einem Dokument, obwohl in Wirklichkeit ein Frameset am Werk ist. Meist wurde dieses Feature in der Vergangenheit deshalb verlangt, um zwar eine nahtlose Ansicht im Browser-Fenster anzubieten, jedoch mit einem fixen Bereich für Logo, Navigation usw., der nicht mit scrollt. Der Wunsch ist nachvollziehbar, doch das Mittel, hierfür zu einem Frameset zu greifen, ist mittlerweile nicht mehr zeitgemäß. Fixe Bereiche sollten mithilfe von CSS definiert werden, wie in Abschnitt 6.1.4 beschrieben.

Generell wird die Rahmendicke wie im folgenden Beispiel bestimmt:

<frame src="index.htm" name="inhalt" frameborder="10">

Das frameborder-Attribut ist laut HTML-Spezifikation in <frame>-Tags erlaubt. Dort notiert, bestimmt es die Rahmendicke in Pixel, und zwar für alle Rahmen zwischen diesem Frame-Fenster und benachbarten Frame-Fenstern. Um keine Rahmen anzuzeigen, wird der zugewiesene Wert auf 0 gesetzt. Notieren Sie die frameborder-Angabe sicherheitshalber in allen <frame>-Tags. Andernfalls erreichen Sie in den Browsern möglicherweise nicht den gewünschten Effekt.

Ein anderer Fall ist, dass Sie die Rahmen zwischen den Frame-Fenstern zwar optisch für sinnvoll halten, aber nicht möchten, dass der Anwender die Größe der Frame-Fenster damit verändern kann. Für diesen Fall gibt es ein weiteres Attribut, wie das nachfolgende Beispiel zeigt:

<frame src="index.htm" name="inhalt" noresize>

Das Standalone-Attribut noresize (also »kein Resize«, keine Größenänderung) verhindert für die Rahmen um das betroffene Frame-Fenster, dass diese mit der Maus in ihrer Position veränderbar sind. Beachten Sie, dass Sie bei XHTML noresize="noresize" notieren müssen.

Schließlich können Sie noch das Scrollverhalten von Frame-Fenstern beeinflussen. Dazu können Sie im <frame>-Tag eines Fensters das Attribut scrolling= wahlweise mit den Werten yes, no oder auto versorgen: yes erzwingt Scrollleisten sogar dann, wenn der Inhalt gar kein Scrollen erfordert; no verhindert Scrollleisten in jedem Fall, auch dann, wenn der Inhalt Scrollen erfordert, und auto, die Voreinstellung, bewirkt, dass Scrollbars dann angezeigt werden, wenn es der Inhalt erfordert.

Auf weitere Eigenschaften gehen wir an dieser Stelle nicht mehr ein, da diese entweder nicht zum HTML-Standard gehören oder nicht mehr zeitgemäß sind.

1.4 Fixe Bereiche ohne Frames

Wie bereits erwähnt, werden Frames in den meisten Fällen nur eingesetzt, um einen fixen Bereich zu haben, der nicht mit scrollt (auch als Non-Scrolling-Region bezeichnet). In diesem Abschnitt möchten wir zeigen, wie so etwas auch ohne Frames funktioniert – aus der Überlegung heraus, dass es einfach zu schade ist, die zahlreichen Nachteile von Frames in Kauf zu nehmen, wenn das gewünschte Ziel auch anders erreichbar ist. Das HTML-Dokument hat folgenden Inhalt:

Listing 6.2: HTML-Dokument mit Bereichen für Navigationslinks und Inhalt

Bilder

Die beiden Bereiche erhalten die id-Namen navigation und content. In der eingebundenen CSS-Datei fix.css werden folgende Formate definiert:

Listing 6.3: CSS-Formatdefinition für fixen und normalen Bereich

Bilder


Der Bereich navigation wird mit der Angabe position:fixed fest positioniert. Beim Scrollen wandert sein Inhalt nicht mit. Die restlichen Definitionen betreffen Randabstände sowie einen blauen dicken Rahmen rechts von den Links.
Der Bereich content soll im normalen Textfluss bleiben, erhält also keine Angabe zur Positionierung. Mit margin-left:200px wird ein hinreichend großer linker Rand geschaffen, der die Anzeige der Navigationslinks in diesem Bereich erlaubt.

Eigentlich ist das bereits alles und in Browsern, welche position:fixed interpretieren, funktioniert auch alles wie gewünscht.

Bilder

Abbildung 6.2: Fixer Bereich im Firefox-Browser

Der Inhalt kann gescrollt werden, während die Links fest an ihrer Position bleiben. Leider interpretiert der MS Internet Explorer bis einschließlich Version 6.0 position:fixed nicht. Stattdessen ignoriert er die Positionierungsangabe, was durchaus ein korrektes Verhalten ist, aber dazu führt, dass die beiden Bereiche beide im normalen Textfluss verbleiben.

Bilder

Abbildung 6.3: Nicht erkannter fixer Bereich im MS Internet Explorer

Der div-Bereich für die Navigationslinks verhält sich also wie ein gewöhnliches Blockelement im Textfluss. Es steht an der Stelle, wo es notiert wird (zuerst), und nimmt die gesamte verfügbare Breite ein, so dass der div-Bereich für den Inhalt erst unterhalb davon angezeigt wird.

Dieses Verhalten ist jedoch nicht erwünscht. Andererseits kann ein so verbreiteter Browser nicht einfach ignoriert werden. Wir benötigen also eine Behelfslösung. Dank anderer, proprietärer Fähigkeiten des Internet Explorers ist das Verhalten von position:fixed »simulierbar «.

Workaround für den Internet Explorer
Dazu wird zunächst der Inhalt der CSS-Datei fix.css wie folgt geändert:

body > #navigation {
position:fixed;
top:20px;
left:20px;
padding-right:20px;
border-right:blue solid 4px;
}
body > #content {
margin-left:200px;
margin-right:20px;
}

Geändert wird die Syntax der Selektoren dahingehend, dass von den CSS-2.0-spezifischen Adressierungsmöglichkeiten für Elemente Gebrauch gemacht wird. Diese werden vom Internet Explorer ebenfalls nicht interpretiert. Als Ergebnis ignoriert dieser Browser die Formatdefinitionen für beide div-Bereiche komplett.

Im zweiten Schritt bekommt der Internet Explorer stattdessen eine nur für ihn lesbare CSS-Datei spendiert. Dazu wird im HTML-Dokument – am besten hinter dem <link>-Tag, welches das normale Stylesheet einbindet – Folgendes notiert:

<!--[if gte IE 5]>
<link rel="stylesheet" type="text/css" href="ie-fix.css">
<![endif]-->

Der gesamte Code stellt aus HTML-Sicht einen Kommentar dar. Eigentlich sollten Browser den Inhalt von Kommentaren ignorieren und die meisten tun das auch. Doch nicht so der Internet Explorer. Hier kann der Kommentar interpretierbaren Inhalt haben. Das Konstrukt [if gte IE 5]>.... <![endif] wird, wenn ohne Leerraum nach bzw. vor den Kommentarklammern notiert, als Verarbeitungsanweisung interpretiert. [if gte IE 5]> bedeutet so viel wie: »Wenn ein Internet Explorer mit Versionsnummer größer oder gleich 5.0 das hier liest, dann soll er den HTML-Code bis zu <![endif] trotz Kommentar interpretieren. « Genutzt wird diese Fähigkeit in unserem Fall, um mittels <link>-Tag eine weitere CSS-Datei speziell für den Internet Explorer einzubinden. Im Beispiel nennen wir sie ie-fix.css.

Diese spezielle CSS-Datei erhält folgenden Inhalt:

Bilder


Zunächst wird für die Basiselemente html und body festgelegt, dass diese die volle Breite und Höhe einnehmen. Gleichzeitig wird bestimmt, dass Inhalte, die länger oder breiter sind, einfach abgeschnitten werden (overflow:hidden).
Die beiden div-Bereiche mit den id-Namen navigation und content werden daraufhin beide absolut positioniert. Bis auf die Art der Positionierung sind die Formatdefinitionen für den Bereich navigation die gleichen wie in der normalen CSS-Datei.

Bei den Definitionen für content gibt es hingegen einige Unterschiede. Mit top und left muss dessen gewünschte Anfangsposition bestimmt werden, da er ja absolut positioniert wird. Eigentlich soll er 20 Pixel von oben beginnen. Damit der Internet Explorer die vertikale Scrollleiste jedoch wie üblich oben im Fenster beginnen lässt, weisen wir top:0px zu und schaffen den gewünschten Abstand nach oben über den Umweg padding-top:20px.
Besonders spannend sind die Zuweisungen an die CSS-Eigenschaften height und width. Anstelle eines festen Werts wird ein Wert zugewiesen, der mithilfe von JScript errechnet wird. Der Internet Explorer erlaubt das Zuweisen gewisser Funktionen an CSS-Eigenschaften, unter anderem die Funktion expression(). Diese ermöglicht das Ausführen von JavaScript/JScript-Code. In den beiden Beispielangaben werden die Breite und die Höhe des zu positionierenden Bereichs aus der tatsächlichen Breite und Höhe bestimmt, die der in HTML in diesem Bereich notierte Inhalt einnimmt. Die beiden Objekteigenschaften document.body.clientWidth und document.body.clientHeight liefern die Werte für den gesamten body-Bereich. Abgezogen werden die gewünschten Startpositionen des Inhaltsbereichs (der Obenwert bei der Höhe und der Linkswert bei der Breite). Ausdrücklich zugewiesen wird dann noch overflow:auto. Somit wird der Bereich gescrollt, falls sein Inhalt es erfordert.

Bilder

Abbildung 6.4: Simulierter funktionsfähiger fixed-Bereich im Internet Explorer

In unserem Beispiel gibt es nun keinerlei Unterschiede in der Funktionalität etwa zwischen Firefox, Opera und anderen einerseits und Internet Explorer andererseits. In allen Browsern bleiben die Navigationslinks fix an ihrer Position.

Wenn Sie den hier beschriebenen Workaround für fix positionierte Bereiche an anderer Stelle, beispielsweise oben, nutzen wollen, müssen Sie gegebenenfalls in der CSS-Datei für den Internet Explorer bei html und body nicht overflow:hidden angeben, sondern overflow- y:hidden.

1.5 Eingebettete Frames

Nachdem wir im vorherigen Abschnitt eine Möglichkeit beleuchtet haben, um Frames zu vermeiden, werden wir nun noch eine spezielle Form von Frames kennen lernen, die kein Frameset benötigt, sondern direkt im normalen body-Inhalt notiert werden kann.

Eingebettete Frames (auch als Inline-Frames bezeichnet) ermöglichen es, an einer gewünschten Stelle innerhalb des sichtbaren Inhalts eines HTML-Dokuments Inhalte aus anderen Dateien oder Quellen einzubinden. Dazu stellt HTML das iframe-Element zur Verfügung (iframe = inline frame). Wie der Name schon vermuten lässt, hat dieses Element Inline-Charakter, d.h., es kann – ähnlich wie Grafikreferenzen – auch mitten im Text notiert werden.

Zum reinen Einbetten einer anderen Quelle kann übrigens auch das object-Element verwendet werden, das im Gegensatz zum iframe-Element zum strict-Standard von HTML gehört (siehe auch Abschnitt 4.9.8). Bei Verwendung des iframe-Elements müssen Sie dagegen den Dokumenttyp für die HTML-Variante »transitional« angeben. Erforderlich ist die Verwendung des iframe-Elements jedoch dann, wenn Hyperlinks ihr Verweisziel im Fenster des Inline-Frames öffnen sollen. Genau diesen Anwendungsfall werden wir im nachfolgenden Beispiel behandeln.

Der Quelltext der Datei mit dem eingebetteten Frame lautet:

Listing 6.4: HTML-Dokument mit eingebettetem Frame-Fenster

Bilder

Das iframe-Element wird mit Start- und End-Tag notiert. Zwischen <iframe> und </iframe> kann Inhalt für Browser notiert werden, die das iframe-Element nicht kennen oder interpretieren. Dabei dürfen auch beliebige Block- und Inline-Elemente notiert werden.

Wie beim frame-Element wird auch beim iframe-Element eine Default-Quelle über das src-Attribut referenziert. Es kann sich um einen beliebigen URI handeln, also um eine lokal referenzierte Datei oder auch um eine absolute Internetadresse. Wie auch beim frame-Element ist das name-Attribut wichtig, wenn Linkziele im eingebetteten Frame geöffnet werden sollen.

Weitere Angaben zum Frame-Fenster wie Breite und Höhe des Frame-Fensters werden im obigen Beispiel zeitgemäß über CSS gelöst. Die Angabe width:60% im Beispiel bedeutet: 60% der Breite des Elternelements. Dieses ist das umgebende p-Element, welches sich im normalen Textfluss innerhalb des body-Elements befindet. Da es ein Block-Element ist, nimmt es die maximal verfügbare Breite ein, also die gesamte Breite des Anzeigefensters abzüglich der Default-Ränder, die der Browser setzt.

Bilder

Abbildung 6.5: Im eingebetteten Frame-Fenster angezeigte Verweisziele

Mithilfe von CSS lässt sich auch der Rahmen des eingebetteten Frames optimal gestalten. Im Beispiel haben wir einen dünnen grauen Rahmen (border:thin solid #C0C0C0) gewählt. Dennoch ist zusätzlich das HTML-Attribut frameborder="0" notiert. Damit wird explizit der Frame-eigene Rahmen unterdrückt, den der Internet Explorer andernfalls unabhängig von der CSS-Rahmendefinition anzeigt.

Die Links im Beispiel haben im einleitenden <a>-Tag ein Attribut target="content". Dadurch wird der Fensterbezug zum iframe-Element hergestellt, das mit name="content" definiert wird. Die Verweisziele werden im Frame-Fenster geöffnet. Scrollleisten zeigt der Browser nach Bedarf an. Durch scrolling="no" können Sie die Anzeige von Scrollleisten verhindern.


Das Tutorial ist ein Auszug aus dem Buch von Stefan Münz:

Professionelle Websites - Programmierung, Design und Administration von Webseiten
Addison-Wesley, 2. Auflage, 1136 Seiten, gebunden, komplett in Farbe, mit DVD

Die Veröffentlichung des Kapitels erfolgt mit freundlicher Genehmigung von
Pearson Education.

Mehr Informationen zu diesem wunderbaren Fachbuch für Webmaster und Webentwickler
gibt es hier: Professionelle Websites

Alle Teile des Buches: 

1 Intro
2 HTML und CSS
3 Dynamische Seiten mit JavaScript/DOM
4 Die Server-Seite
5 PHP und MySQL
6 XML
7 Betrieb von Websites
8 Referenz
Bilder

DVD-Werbung
Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von MaoMao
  • 09.01.2013 - 16:52

Gute Tutorial leicht erklärt.

Alternative Portrait

-versteckt-(Autor hat Seite verlassen)

  • 24.02.2011 - 21:49

tolles Tutorial, danke. Nachdem ich im Teil 2 genau das gefunden habe, was ich gesucht hatte, habe ich mir nun auch den Teil 1 geladen. Sobald ich wieder genügend Punkte zur Verfügung habe, werde ich mir noch den Rest dieses Werkes holen. DANKE

Portrait von williamo
  • 21.08.2009 - 14:58

keine echte erweiterung

Portrait von Str4ng3r
  • 11.04.2008 - 16:44

kann mich meinen vorrednern nur anschliessen

Portrait von RohlingX10
  • 09.04.2008 - 19:15

Ich finde ebenfalls den Titel sehr irreführend und habe mir mehr erhofft. Bin gespannt auf Teil 2

Portrait von leg0lyZe
  • 09.04.2008 - 17:13

bäääh frames, aber der rest nice, danke

Portrait von maxxscho
  • 09.04.2008 - 16:44

Wie die Vorredner schon sagten, sind Frames nur mehr sehr bedingt bis gar nicht mehr nötig.
Dafür gibt es bessere Lösungen.
Tut ist aber ganz nett geschrieben.

Portrait von schluggy
  • 09.04.2008 - 15:07

Der Titel ist irreführend. Außerdem sidn Franes veraltet.

Portrait von MasterPSD
  • 09.04.2008 - 00:34

gut wenn jemand noch nicht weiß was frames sind und daß diese veraltet sind.
könnte ruhig auch im Titel stehen anstatt nur "erweiterte features"

sagt mal wenn "ganz nett" 5 sterne sind, was ist dann "sehr gut"?

Portrait von skyflight1981
x
×
×