Anlegen der Verweise im Menü

Nachdem Sie soeben die Homepagevorlage im Browser getestet haben, können als nächstes die Verweise im Menü angepasst werden.

Nehmen wir an, Sie benötigen für Ihre Homepage sechs Seiten, die beispielsweise wie nachfolgend benannt werden sollen:

1. Home (Startseite = index.htm)
2. Meine Bilder (= bilder.htm)
3. Hobbys (= hobbys.htm)
4. Gästebuch (= gaestebuch.htm)
5. Kontakt (= kontakt.htm)
6. News (= news.htm)

Tipp: Bitte beachten Sie, dass der Dateiname eines Html-Dokuments nicht länger als 256 Zeichen sein darf. Zu vermeiden sind deutsche Umlaute wie "ä", "ö" und "ü" sowie das scharfe "ß". Als Sonderzeichen sind der Unterstrich "_" sowie der Bindestrich "-" erlaubt, wobei der Bindestrich bezüglich der Suchmaschinenoptimierung vorzuziehen ist. Verzichten Sie auf alle anderen Sonderzeichen wie z. B. das Fragezeichen, Komma, Ausrufezeichen usw. Achten Sie ebenso darauf, dass in den Dateinamen keine Leerzeichen enthalten sind.

Öffnen Sie nun im Html-Editor die 'index.htm' in der Html-Ansicht und passen jeweils die Verweise im Menü innerhalb der <a>-Tags an (siehe Beispiel unten). Bei Vorlagen mit Frames sind diese nur einmal im Navigationsframe in der 'navi.htm' zu notieren:

<a href="index.htm">Home</a>
<a href="bilder.htm">Meine Bilder</a>
<a href="hobbys.htm">Hobbys</a>
<a href="gaestebuch.htm">Gästebuch</a>
<a href="kontakt.htm">Kontakt</a>
<a href="news.htm">News</a>

Anlegen von weiteren Seiten ...

... bei Vorlagen ohne Frames:
Nach Anpassung der Verweise legen Sie nun weitere Seiten an. Um die benötigten Seiten zu erhalten, kopieren Sie fünfmal die 'index.htm' und speichern diese jeweils unter einem anderen Namen mit der Endung *.htm in den selben Ordner ab. (siehe dazu Bild links)

... bei Vorlagen mit Frames:
Auch hier sind die Verweise bereits schon im Navigationsframe notiert.

Frameset (Behälter der einzelnen Frameseiten) = index.htm

Alle nachfolgend aufgeführte Html-Dokumente laden sich immer in den Inhaltsframe, wobei die 'inhalt.htm' automatisch bei Aufruf der Seite als erstes angezeigt wird, da diese im Frameset als Startdatei bzw. -seite für das Inhaltsframe definiert wurde.

1. Home (Startseite im Inhaltsframe) = inhalt.htm
2. Meine Bilder = bilder.htm
3. Hobbys = hobbys.htm
4. Gästebuch = gaestebuch.htm
5. Kontakt = kontakt.htm
6. News = news.htm

Bei einem Frameset darf also keinesfalls die 'index.htm' kopiert werden, sondern in diesem Fall die 'inhalt.htm'. Diese speichern Sie dann ebenso unter einem anderen Namen in den Ordner ab, in dem sich bereits die schon vorhandenen Html-Dokumente befinden (siehe Bild links unten). Nach Kopieren der Dokumente sieht Ihr Ordner in etwa so aus, wie auf dem Bild rechts unten dargestellt ist.

Die Anpassung der Fußzeile bzw. Banners erfolgt über die Dateien, wie der 'fuss.htm' und 'banner.htm'.

Ein Frameset hat auch Vorteile:

• zukünftige Änderungen der Verweise im Menü sind nur einmal im Navigationsframe zu bearbeiten, während bei Seiten ohne Frames, diese auf jeder Seite einzeln zu notieren sind.
• das Logo, das Navigationsmenü sowie die Fußzeile bleiben ständig sichtbar.

Info: Die unattraktiven Ränder der Frames (Frameborder) wurden in allen Frameset-Vorlagen deaktiviert, bzw. auf 0px gesetzt.

Beispiel: grafische Darstellung eines 4er-Framesets

Zur Veranschaulichung wird auf dem Bild unten ein Frameset dargestellt, welches in vier Frames unterteilt ist:

• 1 Frame oben = Frame für den Banner bzw. Logo (Homepagename)
• 2 Frames in der Mitte = linkes Frame für die Navigation, rechtes Frame für den Seiteninhalt
• 1 Frame unten = Frame für die Fußzeile.

Um das Beispiel zu o.g. Grafik besser darzustellen, wurden dort die Ränder der Frames (Frameborder) absichtlich nicht deaktiviert.

Das Frameset ist quasi der Behälter, der die einzelnen Frameseiten definiert, in die eigenständige sowie voneinander unabhängige Inhalte geladen werden. Wird das Frameset einmal aufgerufen, so verbleibt es im temporären Browser-Cache des Clienten. Daher müssen die Frames, die jeweils dieselben Informationen enthalten, wie das Logo, Navigation und Fußzeile vom Browser nicht erneut geladen werden, während sich ansonsten nur das Inhaltsframe ändert, in dem sich die verschiedenen Seiteninhalte aufrufen lassen. Im Übrigen kann nur das Inhaltsframe gescrollt werden, sofern sich genügend Text darin befindet. (Selbstverständlich kann ein Frameset auch so definiert werden, dass sich mehr als ein Frame scrollen lässt, z. B. bei Verwendung eines etwas umfangreicherem Navigations-Menüs o.ä. In unseren Vorlagen ist das allerdings nicht der Fall, da es sich optisch unvorteilhaft erweist.)

Definition eines Framesets in der Html-Ansicht (hier nun mit deaktiviertem Frameborder)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
        "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title>Frameset</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
</head>
<frameset framespacing="0" border="0" rows="60,*,50" frameborder="0">
<frame name="Bannerframe" scrolling="no" noresize target="Inhaltsframe"
src="banner.htm" marginwidth="0" marginheight="0">
<frameset cols="150,*">
<frame name="Navigationsframe" target="Inhaltsframe" src="navi.htm"
scrolling="auto" marginwidth="0" marginheight="0">
<frame name="Inhaltsframe" src="inhalt.htm" marginwidth="0"
marginheight="0" scrolling="auto"> </frameset>
<frame name="Fusszeilenframe" scrolling="no" noresize target="Inhaltsframe"
src="fuss.htm" marginwidth="0" marginheight="0">
<noframes>
<body>
<p>Hier ist der Noframe-Bereich.
Für User alter Browser könnten Sie hier beispielsweise ein Inhaltsverzeichnis
oder Sitemap anbieten, da alte Browser Frames nicht unterstützen bzw. nicht
anzeigen können.</p>
</body>
</noframes>
</frameset>
</html>

Das Navigations-Menü ist nun angepasst und die Seiten alle angelegt. Weiter geht es auf der nächsten Seite mit Kapitel III. Dort wird das Thema: "Einfügen von Text und Grafiken in das Html-Dokument" behandelt.

Das könnte Sie vielleicht auch interessieren:

[ CSS-Menüs ohne Javascript ]