Am Besten finde ich persönlich ein Navigations-Menü, das am rechten Rand immer sichtbar ist, egal auf welcher Seite des Internet-Auftritts man sich befindet. Weil mir dazu aber bisher das rechte Werkzeug fehlt, hier ein Navigations-Menü, das als Inhaltsverzeichnis oder auch Gliederung geeignet wäre.
Die Gestaltung der einzelnen Elemente dieses Inhaltsverzeichnisses wurde mit StyleSheets bestimmt, so daß die Anordnung der einzelnen Elemente in einer Liste vergleichsweise "schlank" definiert ist.
StyleSheet Hauptmenü
.MainMenu { background:#F08020;
border: #502008 double 3px;
padding:0.1em 0 0.2em 0;
color: #502008;
width:9em;
font-size:0.8em;
font-weight:bold;
text-align:center;
margin:5px 5px 10px 5px; }
StyleSheet Menüpunkt
.MenuAct { background:#E0C040;
border: #502008 double 3px;
padding:0.1em 0 0.2em 0;
color: #502008;
width:9em;
font-size:0.8em;
font-weight:normal;
text-align:center;
margin:2px 5px 0 5px; }
/* noch nicht besuchte Ziele: */
a:link {color:#0000A0; border:0; }
/* besuchte Ziele: */
a:visited {color:#502008; border:0;}
/* Verweise bei "MouseOver": */
a:hover {color:#E0E0E0; border:0; }
/* Angeklickte Verweise: */
a:active {color:#E0E0E0; border:0; }
/* Verweise, die Fokus erhalten, also
bei "Enter" aktiviert werden: */
a:focus {color:lime; border:0; }
Definition der Menü-Liste:
<ul class="MenuBox" style="float:left">
<li class="MainMenu"><a href="Text-Format.html"
title="Einfache Textformatierung"> Text-Format </a></li>
<li class="MenuAct"><a href="Text-Format.html"
title="Inline-Tags und Sonderzeichen"> Inline-Tags </a></li>
:
:
:
<li class="MenuAct"><a href="Bilder-Format.html"
title="Bilder einfügen"> Bilder </a></li>
</ul>
Ein Bild kann nicht nur als Ganzes einen Link darstellen, man kann auch auf einem Bild (z.B. Landkarte, Farbtafel) Zonen definieren, die verschiedene Links repräsentieren.
Das gewünschte Bild erhält dazu mit dem Attribut usemap="#..."
eine Textmarke (Anker) zugewiesen. Auch sollte man die Attribute
width=, height= und alt= mit angeben,
für den Fall, daß das Bild nicht geladen werden kann.
Dann definiert man die "sensiblen" Zonen des Bildes mit Pixel-Koordinaten, ausgehend von der linken oberen Ecke des Bildes:
<img src="Blocks.gif" alt="Menü-Bild" usemap="#Menu"
width="320" height="320" border="0"/>
<map name="Menu"><!-- Textmarke des Bildes, ohne '#'-->
id="Menu"><!-- Textmarke des Bildes, ohne '#'-->
<!-- Rechteck: coords= x,y,x,y -->
<area shape="rect" coords="0,0,15,8"
href="...." title="..." alt="..."/>
<!-- Kreis: coords=x,y,r -->
<area shape="circle" coords="8,8,5"
href="...." title="..." alt="..."/>
<!-- Polygon: x,y,x,y,x,y, ... -->
<area shape="poly" coords="0,10,5,0,10,10"
href="...." title="..." alt="..."/>
</map>
