Materialien zum Unterricht

Navigation

In der Menü-Box soll nun die Navigation gestaltet werden. Am schnellsten ginge es, wenn dort einfach Links untereinander geschrieben werden. Aber eine moderne HTML-Gestaltung will und kann viel mehr.

Das Menü soll folgende Forderungen erfüllen

Sämtlich Forderungen werden durch Einträge in der style.css realisiert. Der Quelltext in der HTML-Datei bleibt unveränert.

1. Links als ungeordnete Liste eintragen

Es hat sich gezeigt, dass Navigationsleisten sehr gut mit ungeordneten Listen gestaltet werden können. Die lassen sich z.B. verschachteln und erlauben die Darstellung von Untermenüs. 

 <ul>
     <li>Startseite</li>
     <li>Aktuelles</li>
     <li>Industrie</li>
     <li>Historisches</li>
     <li>Bilder</li> 
</ul>

Bevor die Links eingebaut werden, müssen die Dateien erzeugt werden. Zuerst sind das noch leer Dateien, in die dann das fertige Gerüst hineinkopiert wird.
Erzeuge die leeren Dateien
aktuelles.html, industrie.html, historisch.html, bilder.html

Füge nun in den einzelnen Listenpunkten die Links zu den Seiten ein.

Damit wäre der HTML-Teil der Navigation fertig. Schön sieht es nicht aus, aber für Schönheit ist ja der CSS-Teil verantwortlich.

2. Menüeinträge formatieren

Als erstes werden die Aufzählungpunkte vor den Listeneinträgen entfernt: Dazu erzeugt man für den Tag <ul> eine neue Klasse navi.

  #navi {
     list-style-type: none;
     display:inline;
  }
und formatiert die Liste damit. 
  <ul id="navi">
  	   <li><a href="index.html">Startseite</a></li>
		   ....

Die Hintergrundgestaltung nimmt man am Tag <a> vor.
Als erstes werden die typischen Striche unter den Links entfernt:

text-decoration: none;

Die Hintergrundfarbe, Textfarbe, Schriftgröße und Rahmen kann man jetzt wie bei der Formatierung der Boxen vornehmen und sollte der farblichen Gestaltung der Seite angepasst werden. Das könnte so aussehen: 

  #navi a {
      text-decoration: none;  
      display: block;
      width:auto;
      background-color:#FFFF77;
      margin:2px;
      padding: 3px 3px 3px 3px;
   }
3. Mauskontakt

Der Tag <a> besitzt sogenannte Pseudoklassen:

:link = für Verweise zu noch nicht besuchten Seiten
:visited = für Verweise zu bereits besuchten Seiten
:focus = für Verweise, die den Fokus erhalten, z.B. durch "Durchsteppen" mit der Tabulator-Taste
:hover = für Verweise, während der Anwender mit der Maus darüber fährt
:active = für gerade angeklickte Verweise

Möchte man den Link beim Darüberfahren mit der Maus ein anders Aussehen geben, schreibt man in die style.css einen neuen Eintrag:

   #fuss a:hover {
          ....
		   }

In diesem Eintrag kann man nun wieder alle Mittel der Gestaltung einsetzen, um den Link entsprechend zu gestalten. (Hintergrundfarbe usw.)

Zusätzlich zur Klasse :hover sollte auch noch die Klasse :focus mit verändert werden. Die Links lasen sich nämlich nicht nur mit der Maus ansprechen, sondern auch durch Drücken der Tabulatortaste. Man schreibt als besser:

   #fuss a:hover , fuss a:focus{
        ....  
   }

und deckt damit beide Aktiverungsmöglichkeiten ab.

zurück