Du meinst wie das fette Wort "Notebook" in deinem Beispiel?
Da gibt es zwei Vorgehensweisen: (lle meine Namensvorgaben sind natürlich willkürlich)
1. Du gibst dem Link der jeweiligen Kategorie eine extra Klasse.
Beispiel:
Man befindet sich auf deiner Seite im Bereich "homepage". Dann sieht dein Menü wie folgt aus:
<div id="menu">
<ul>
<li><a href="/design2/index.html" class="aktiv">home<strong>page</strong></a></li>
<li><a href="/design2/index.html">guest<strong>book</strong></a></li>
<li><a href="/design2/index.html">about<strong>me</strong></a></li>
<li><a href="/design2/index.html">test<strong>page</strong></a></li>
<li><a href="/design2/index.html">test<strong>page</strong></a></li>
<li><a href="/design2/index.html">test<strong>page</strong></a></li>
</ul>
</div>
Wenn man sich im Bereich "guestbook" befindet sieht dein Menü so aus:
<div id="menu">
<ul>
<li><a href="/design2/index.html">home<strong>page</strong></a></li>
<li><a href="/design2/index.html" class="aktiv">guest<strong>book</strong></a></li>
<li><a href="/design2/index.html">about<strong>me</strong></a></li>
<li><a href="/design2/index.html">test<strong>page</strong></a></li>
<li><a href="/design2/index.html">test<strong>page</strong></a></li>
<li><a href="/design2/index.html">test<strong>page</strong></a></li>
</ul>
</div>
In deinem CSS Datei schreibst du dann:
#menu a.aktiv { font-weight:bold; }
oder irgendwas anderes...
Diese Methode ist einfach umzusetzen. Nachteil ist daß der HTML-Code deines Menüs nun nicht mehr auf jeder Seite gleich ist, da jede Seite natürlich an anderer Stelle ein class="aktiv" stehen hat. Falls du nun PHP, Java, SSI oder sonstwas nutzt um das Menü serverseitig als Baustein in jede Seite einsetzen zu lassen, hast du ein Problem, denn der immergleiche Baustein hat sich gerade in Luft aufgelöst.
2. Du gibst dem Element body auf jeder Seite eine eindeutige ID. Also auf der Seite "homepage" steht dann <body id="homepage">, auf der Seite "guestbook" steht <body id="guestbook">, usw.
Den HTML-Code des Menüs änderst du wie folgt um, und zwar auf allen Seiten gleichermaßen:
<div id="menu">
<ul>
<li><a href="/design2/index.html" id="mhome">home<strong>page</strong></a></li>
<li><a href="/design2/index.html" id="mguest">guest<strong>book</strong></a></li>
<li><a href="/design2/index.html" id="mme">about<strong>me</strong></a></li>
<li><a href="/design2/index.html" id="mtest1">test<strong>page</strong></a></li>
<li><a href="/design2/index.html" id="mtest2">test<strong>page</strong></a></li>
<li><a href="/design2/index.html" id="mtest3">test<strong>page</strong></a></li>
</ul>
</div>
Beachte bitte, daß IDs seitenweise eindeutig sein müssen.
In deine CSS Datei schreibst du:
#homepage #mhome { font-weight:bold; }
#guestbook #mguest { font-weight:bold; }
#me #mme { font-weight:bold; }
#test1 #mtest1 { font-weight:bold; }
#test2 #mtest2 { font-weight:bold; }
Dein Menü ist nun weiterhin auf jeder Seite gleich, es läßt sich also als Baustein skriptgesteuert einsetzen. Egal auf welcher Seite du dich befindest schlägt aber immer nur genau eine der obigen CSS-Regeln zu und macht den aktuellen Menüpunkt fett, und zwar gesteuert durch die ID des body-Elements.
Dan Cederholm hat wenn ich das richtig seh die ganzen IDs für body und Menüeinträge gesetzt, nutzt aber trotzdem eine extra Klasse namens "active" um den aktuellen Menüpunkt hervorzuheben. Interessant.
Es gibt übrigens einige Webdesigner die vorschlagen dem body Element generell jeder Seite eine ID der Form "www-domain-tld-pagename" zu geben, natürlich angepaßt an die jeweilige Seite. So können sich Besucher eigene Stylesheets, Skripte, etc schreiben die dann an dieser weltweit eindeutigen ID aufgehängt werden.