Menü anpassen

Das Ziel besteht darin, die Menliste einzustellen:

Jede Meneintrag soll mit der entsprechenden Seite verlinkt werden.
Die Menlinks sollen ohne Unterstreichung gezeigt und mit einem vorangestellen Quadrat gelistet werden.
Der aktive Link soll in einer anderen Farbe dargestellt werden.
Im Quelltext soll das Men fr alle Seiten identisch aussehen, damit dieses anschlieend als einheitlicher Eintrag in einer ausgelagerten PHP-Include-Datei vorgehalten werden kann. Alle Formatvorgaben sollen daher in der externen CSS-Datei eingestellt werden.

Vorgehen

Verlinken: Meneintrag markieren und anschlieend verlinken

Markieren Sie den ersten Meneintrag "Huckebein" und klicken Sie im KompoZer in der Menleiste auf das Symbol "Link".

Geben Sie als Link "index.html" ein. Das ist die erste Seite, die aufgerufen werden soll. Der erste Meneintrag verlinkt somit auf die eben geffnete Seite.

Ergebnis:

im Quelltext steht:

Menpunkte als Quadrat

Erstellen Sie eine Regel fr ul (unordert list) innerhalb des Elements #navilinks

Diese Regel muss daher lauten: #navilinks ul

Geben Sie dieser Regel die Eigenschaft "Listentyp: Quadrat"

Die CSS-Regel in der CSS-Datei lautet:

Voreingestellte Unterstreichung und Farbe aus den Menlinks entfernen

Das HTML-Link-Element a ist so vordefiniert, dass es die damit verknpften Texte als Link unterstreicht. In der Menbox #navlinks soll dieses Element diese Voreinstellung nicht anwenden. Daher definieren Sie eine neue Regel fr alle Elemente a unterhalb von Elementen mit der id="#navibox".

Die neue Regel wird erstellt fr: #navilinks a und Angabe "keine" fr Textattribute.

Damit auch die Linkfarbe nicht voreingestellt blau sondern schwarz erscheint, defnieren Sie in dieser Regel auch die Schriftfarbe.

Der CSS-Befehl lautet:

#navilinks a {text-decoration: none;}

Menlinks und Punkte der aktuellen Seite in einer separaten Farbe anzeigen

Um festzulegen, wie Links auf der jeweils aktuellen Seite dargestellt werden sollen, muss die Seite zunchst identififizierbar werden. Dafr vergeben Sie der Seite z.B. im bergeordneten body-Tag eine id ihrer Wahl.

Body-Tag und Men-Link kennzeichnen

Bezeichnen Sie das Body-Tag der aktuellen Seite im Quelltext als

<body id="index">

Weisen Sie zustzlich im Men dem Listen-Tag fr "Huckebein" eine Klasse "index" zu:

<li class="index"><a href="index.html">Huckebein</a></li>

CSS-Regel fr #index .index erstellen

Jetzt knnen Sie in der CSS-Datei eine Regel definieren, mit der Sie dem Link mit der Klasse: class="index" auf der Seite mit dem Tag body und der id="index" z.B. eine individuelle Farbe und ein individuelles Fontgewicht zuweisen:

In der CSS-Datei lautet dieser Befehl:

#index .index {color: #ff0066; font-weight: bold;}

Ergebnis: Der Listenpunkt ist rot. Damit auch der Link eine andere Farbe erhlt, muss der CSS-Befehl auf das Tag "a" ausgeweitet werden. In desem Tag versteckt sich die Linkauszeichnung.

Erweitern Sie die Regel, indem Sie, getrennt durch ein Komma eine weitere Regel anhngen (blau gekennzeichnet):

#index .index, #index .index a {color: #ff0066; font-weight: bold;}

Damit gilt die Regel auch fr alle Tags "a" in der Box mit der id="index" und class="index".

CSS-Regel erweitern fr den zweiten Menpunkt

Erstellen Sie analog zum ersten Menpunkt die Regel fr den zweiten Menpunkt.

Denken Sie sich eine id fr die Seite "Helene" aus, z.B. id="helene" und eine Klasse, z.B. class="helene".

In der CSS-Datei gengt es, wenn Sie durch ein Komma getrennt diese id und Klasse an die bereits bestehende dran hngen. Fr diese gilt dann die gleiche Anweisung:

Der komplette Befehl lautet dann fr beide Menpunkte:

#index .index, #index .index a, #helene .helene, #helene .helene a
{color: #ff0066; font-weight: bold;}

Klicken Sie im KompoZer auf "#index .index" und ndern Sie in dem sich ffnenden Fenster den Eintrag in:

#index .index, #index .index a, #helene .helene, #helene .helene a

Verlinkung fr den zweiten Menpunkt in der Quelldatei

Verlinken Sie den zweiten Menpunkt "Helene" mit der zweiten geplanten Seite "helene.html"

Da fr diesen Link bereits eine Regel erstellt wurde, die die text-decoration ausschaltet, darf sich durch den Link keine Formatierungsnderung ergeben.