Multimediakurs Leinfelder, Anlage: Quicktime

Multimediakurs Leinfelder: Modul 11 - Anlagen: Steuerleisten

(© copyright) Letzte Änderungen:05.01.2008

Modul 11: Anlage 9:

Steuerleisten: 161 Buttons oder 3 produzieren?

von Reinhold Leinfelder

Komplexe Sites haben etliche Kategorien und viele Unterkategorien. Wie wir in Modul 4.4.3 erarbeitet haben, können Sie solche Sites entweder mit Frames oder mit einer Buttonleiste steuern. Wenn man die Fallstricke (z.B. falsche Targets, versehentliches Webnapping) und Einschränkungen (z.B. fehlende Bookmarkmöglichkeiten) von Frames vermeiden will, bleibt nur die Reproduktion von Buttons auf jeder Seite der Site.

Beispiele finden Sieetwa bei www.apple.com, www.bahn.de oder auch bei unseren Servicen (z.B. der Paläontologischen Gesellschaft oder der Palaeo.tv.-Site.

Nachfolgend nochmals der in Modul 4.4.3 gezeigte Screenshot einer palaeo.tv-Seite:

In Modul 4.3.3 haben wir bereits ausgerechnet, wieviele Buttons Sie für ein derartiges Beispiel eigentlich produzieren müssen (und dann auch noch richtig einsetzen müssen):

Die Site hat 8 Hauptkategorien und einen Home-Button (der Nautilus-Knopf). Zu jeder Hauptkategorie gibt es bis zu 9 Unterkategorien. Jede Haupt- und Unterkategorie hat jeweils einen Aktiv-Status (mit roter Schrift) sowie einen Passiv-Status.

Dies ergibt also: 8x2 (Hauptkategorien) +8x (9x2) (Unterkategorien für alle 8 Kategorien) + 1 (für den Homebutton), insgesamt: 161 Buttons

Hier ein Workaround, der Sie nur 3 bzw. 6 Buttons kostet:

Produzieren Sie die Buttons, die gleich breit und für die Haupt- und Unterkategorien jeweils gleich hoch sein müssen. Bitte kopieren Sie nicht einfach untenstehende Buttons (© Paläontologie München bzw. Paläontologische Gesellschaft). Viele der durch Paläontologie München produzierten Websites haben (bzw. bekommen) dieses Navigationslayout, um eine Art Corporate Identity zu erreichen. Bitte respektieren Sie dies. Produzieren Sie ähnliche, schönere, buntere oder auch auffälligere Buttons, aber bitte nicht die gleichen. Sie können sich ja anregen lassen (wie ich mich durch die Apple-Site etwas anregen lies).

	Homebutton (hier das Beispiel für die Paläontologische Gesellschaft). Für die 3-Button-Lösung verzichten Sie auf diesen Button (s.u.)
	inactive Button für Hauptkategorie
	active Button für Hauptkategorie
	Button für Unterkategorie
	Linker Abschlussbutton für Unterkategorie Für die 3-Button-Lösung verzichten Sie auf diesen Button
	Rechter Abschlussbutton für Unterkategorie Für die 3-Button-Lösung verzichten Sie auf diesen Button

Die Buttons müssen nun richtig angeordnet werden, dazu verwenden Sie eine Tabelle mit automatischer Breiteneinstellung, ohne Rand, sowie mit cellpadding und cellspacing = 0. Die Spaltenanzahl richtet sich nach der Anzahl Ihrer Hauptkategorien, nehmen wir mal nur fünf an.

Der Homebutton wird ganz normal als Bild in die Zelle eingebaut. Die anderen Buttons sind jeweils Hintergrundbilder der einzelnen Zellen (mit GoLive ganz einfach zu bewerkstelligen, geht aber auch per Hand, siehe untenstehenden Code). Wichtig: bei leeren Zellen (also bei fast allen obigen) wird unter Netscape das Hintergrundbild nur angezeigt, wenn sich wenigstens ein Zeichen in der Zelle befindet. Wir nehmen dazu ggf. das feste Leerzeichen & nbsp;

Ganz wichtig ist, dass Sie in der oberen Reihe die Zellen so breit machen wie es dem Hintergrundbild entspricht (sonst verschiebt sich ggf. alles). In obigem Beispiel sind es 86 Pixel. Genauso wichtig ist es, dass Sie in der zweiten Zeile in einer Zelle die Höhe eingeben, in unserem Fall sind es 27 Pixel. Ansonsten sieht es so aus, wie in unten gezeigtem Beispiel.
(Die Höhe für die erste Zeile ist nicht notwendig, da sie durch die Höhe des Homebuttons, der ja normal, d.h. nicht als Hintergrundbild eingebaut ist, vorgegeben wird.)

Der Code sieht also bislang folgendermaßen aus:

Wir setzen nun sicherheitshalber noch die tatsächliche Breite und Höhe für die Tabelle ein, ändern also die erste Zeile (für unser Beispiel) in:

<table border="0" width="430" height="54"cellpadding="0" cellspacing="0">

Der Rest ist grundsätzlich sehr einfach, aber es gibt kräftig Tücken.

Sie tauschen nach Bedarf das Hintergrundbild aus (in Aktiv oder Nichtaktiv).
Sie beschriften die Zellen wie gewünscht, färben Sie und machen Links daraus. Außerdem am besten Text zentrieren.
Sie verlinken das Homebutton-Bild.

Da kann aber dann ohne weiteres z.B. folgendes herauskommen:

So war's von Ihnen gedacht (Sie haben z.B. in Ihrem Testbrowser als Standardschriftgröße 12 Punkt eingestellt).
(jedoch Fehler in diesem Bild: die Höhe für die zweite Zeile wurde nicht eingestellt, dadurch fehlen Teile der Hintergrundbuttons).

Ein schlecht sehender (oder mit schlechtem Bildschirm ausgestatteter) Nutzer hat abe vielleicht r Schriftgröße 18 als Standard in seinem Browser eingestellt, das sieht dann wie nebenstehend aus. Die Hintergrundbilder haben sich z.T. verdoppelt, es gibt Schriftumbrüche etc. Jedenfalls nicht tolerierbar. Außerdem bekommen Sie auch die Unterstreichungen unter den Links nicht weg (oben nicht eingebaut). Auch hier übrigens die fehlende Höhe für die zweite Zeile.

Deshalb absolut empfehlenswert bzw. notwendig: Sie müssen die Schriften, auch die Links mit Stylesheets formatieren (sehen Sie hierzu im Stylesheet-Kursmodul 6.2 sowie in Anlage 5 nach. Ich empfehle dringend die Verwendung externer Stylesheets, damit Sie diese mit jeder Seite verlinken können.

Ich verwende folgendes Stylesheet (externes Sheet, muss entsprechend verlinkt werden):

.activemenu { color: maroon; font-style: normal; font-weight: normal; font-size: 11px; line-height: 11px; font-family: Arial, Helvetica, Geneva, Swiss, SunSans-Regular; text-decoration: none; word-spacing: 0px; letter-spacing: 0px } .menulinks { color: #333; font-style: normal; font-weight: normal; font-size: 11px; line-height: 11px; font-family: Arial, Helvetica, Geneva; text-decoration: none; word-spacing: 0px; letter-spacing: 0px } td { font-size: 11px; line-height: 11px; font-family: Arial, Helvetica, Geneva, Swiss, SunSans-Regular }

Wichtig ist, dass Sie die Schriftart und Schriftgröße fest definieren und als text-decoration none angeben (dann bleibt auch die Linkunterstreichung weg). Wenn Sie mit GoLive arbeiten, müssen Sie zuerst den Link angeben und erst dann die Klasse zuweisen, ansonsten wird nicht richtig formatiert. Nachfolgend der Code zwei Zellen mit korrekter Formatierung (Verweis auf die entsprechende Klasse):

<td background="steuerleiste/darkbutton.gif" width="86"> <div align="center"> <a href="(Empty Reference!)"><span class="activemenu">Kat. 1</span></a></div> </td> <td background="steuerleiste/lightbutton.gif" width="86"> <div align="center"> <a href="(Empty Reference!)"><span class="menulinks">Kat. 2 </span></a></div>

Wichtig ist auch, dass Sie eine td-CSS-Element formatieren, für den Fall, dass feste Leerzeichen oder nicht mit den beiden Klassen .activemenu bzw. .menulinks formatierte Textbereiche vorhanden sind. Bei zweizeiligen Einträgen reicht sonst ggf. die Gesamthöhe trotz der gemachten Größenvorgaben von Zellen und Tabelle nicht aus.

So sollte es korrekt aussehen. (die Links laufen ins Leere, sie sind nur Beispiele).

Weitere Tipps:

Überlegen Sie sich genau alle Kategorien und Unterkategorien. Müssen Sie diese später ergänzen, ist es eine enorme Arbeit, da sie evtl. alle Seiten ändern müssen.
Wenn Sie noch keine Inhalte für Kategorien bzw. Unterkategorien haben, erstellen Sie dennoch eine Platzhalterseite und verlinken diese. Dies erspart wiederum Arbeit.
Machen Sie einmal eine Seite mit richtiger Steuerleiste und richtig eingebundenem externen bzw. internem Stylesheet. Kopieren Sie dieses dann jeweils als Vorlage und ändern die Steuerleisteneintragung sowie den gesamten Inhalt.
Wenn Sie wirklich nur 3 Knöpfe erstellen wollen, lassen Sie den Homebutton weg und beschriften auch hier nur die Zelle. Dann müssen Sie aber in Zeile 1 einmal die Höhe der Hintergrundbuttons mit in eine Zelle eingeben. Daneben lassen Sie die Endknöpfe für die Unterkategorien weg.

Nun habe ich Ihnen wirklich sehr vieles aus dem Nähkästchen des Webmasters verraten. Machen Sie nun Ihre schönen Steuerleisten, aber bitte respektieren Sie, wie oben erklärt, das Copyright für das Beispiellayout. Vielen Dank!

Inhaltsseite

Anlagenverzeichnis