4.3 Navigation

Nachdem das Grundgerüst der Seite steht, möchte ich Ihnen in diesem Schritt zeigen wie Sie eine Navigation erstellen können. Dies werde ich Ihnen am Beispiel der recht aufwändigen Navigation dieser Webseite zeigen. Besonders komplex dabei ist die Unternavigation, die ich Ihnen daher in einem separaten Folgekapitel näherbringen möchte.

HTML

Schauen Sie sich zunächst Quellcode 1 an und sehen Sie sich an, um welche Bereiche ich die HTML-Datei erweitert habe.

Quellcode 1 - HTML In diesem Schritt erhält die Webseite ihre Hauptnavigation.
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
  3.  
  4. <head>
  5.   <title>Webdesign Tutorial</title>
  6.   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  7.   <meta name="Description" content="Beschreibung der Seite" />
  8.   <link rel="Stylesheet" type="text/css" href="style.css" media="screen" />
  9. </head>
  10.  
  11. <body>
  12.   <div class="root">
  13.     <a id="top" name="top"></a>
  14.     <div id="header">
  15.       <a style="background-image:url(design/webdesigntutorial.jpg);" href="http://www.webdesign-tutorial.net">Webdesign Tutorial</a>
  16.     </div>
  17.  
  18.     <div id="navi">
  19.       <span id="corner_left"></span><span id="corner_right"></span>
  20.       <ul>
  21.         <li>
  22.           <a class="navilink" href=""><span>1</span> Grundlagen</a>
  23.         </li>
  24.         <li>
  25.           <a class="navilink" href=""><span>2</span> Konzept</a>
  26.         </li>
  27.         <li>
  28.           <a class="navilink" href=""><span>3</span> Design</a>
  29.         </li>
  30.         <li>
  31.           <a class="navilink" href=""><span>4</span> Umsetzung</a>
  32.         </li>
  33.         <li>
  34.           <a class="navilink" href=""><span>5</span> Programmierung</a>
  35.         </li>
  36.         <li>
  37.           <a class="navilink" href=""><span>6</span> Optimierung</a>
  38.         </li>
  39.       </ul>
  40.     </div>
  41.  
  42.   </div>
  43. </body>
  44. </html>

Wie Sie sicherlich richtig festgestellt haben, sind die Zeilen 18 bis 40 hinzugekommen. Eine HTML-Datei können Sie demnach Schritt für Schritt aufbauen ohne dadurch andere Bereiche der Webseite zu beeinflussen, vorausgesetzt Sie haben alles richtig gemacht. Die Navigation kommt unter den Banner, aber dennoch in das größere äußere div-Element mit der root-Klasse. Erneut verwende ich eine Id anstatt einer Klasse, da die Navigation einzigartig ist.

In Zeile 19 füge ich zunächst die beiden Rundungen hinzu. Dafür verwende ich das span-Tag, wobei es sich um ein allgemeines Inline-Element handelt. Inline bedeutet, dass darin lediglich Text und weitere Inline-Elemente enthalten sein dürfen. Bei einem div-Element handelt es sich etwa um ein Block-Element, welches nicht in einem Inline-Element vorkommen darf. Der Unterschied zum Block-Element ist, dass dieses nicht in einer neuen Zeile beginnt. Verwenden Sie mitten im Fließtext ein div-Element, so bricht dieses den Text um.
Die Position und die Grafiken der Rundungen füge ich gleich via CSS ein.

Anschließend folgt eine Liste, die mit dem ul-Tag (unordered list = unsortierte Liste) definiert wird. Die darin enthaltenen Elemente werden mit dem li-Tag (list item = Listenelement) angelegt. In dieser Liste bringe ich alle Menüpunkte unter, die ich für diese Seite benötige. Die Zahlen umschließe ich dabei erneut mit einem span-Tag, da diese anders formatiert werden soll als der Linktext. Alle Links erhalten zudem die Klasse navilink.

CSS

Da die Elemente von CSS gar nicht so zahlreich sind, wiederholen sich in Quellcode 2 viele bereits aus den vorherigen Kapiteln bekannte Eigenschaften. Die einzelnen Eigenschaften auswendig zu können sollte demnach kein Problem sein. Etwas mehr Übung benötigen Sie jedoch um mit CSS genau das umsetzen zu können, was Sie vorher mit einem Grafikprogramm gezeichnet haben.

Quellcode 2 - CSS Die bestehende CSS-Datei muss um diese Eigenschaften erweitert werden, mit denen die Hauptnavigation formatiert wird.
  1. #navi
  2. {
  3.     background-image: url(design/navi_gradient.gif);
  4.     background-repeat: repeat-x;
  5.     background-color: #aba499;
  6.     height: 31px;
  7. }
  8. #navi span
  9. {
  10.     color: #c1bcb4;
  11. }
  12. #navi ul
  13. {
  14.     list-style-type: none;
  15.     margin: 0;
  16.     padding: 0;
  17. }
  18. #navi li
  19. {
  20.     display: inline;
  21. }
  22. #navi #corner_left
  23. {
  24.     width: 2px;
  25.     height: 30px;
  26.     background-image: url(design/navi_corner_left.gif);
  27.     background-repeat: no-repeat;
  28.     float: left;
  29. }
  30. #navi #corner_right
  31. {
  32.     width: 2px;
  33.     height: 30px;
  34.     background-image: url(design/navi_corner_right.gif);
  35.     background-repeat: no-repeat;
  36.     float: right;
  37. }
  38.  
  39. a.navilink
  40. {
  41.     font-size: 16px;
  42.     color: #e6e6e6;
  43.     margin-left: 0;
  44.     padding: 5px 15px 7px 15px;
  45.     float: left;
  46. }
  47. a.navilink:hover
  48. {
  49.     color: #ffffff;
  50.     background: url(design/navi_arrow_hover.gif) no-repeat 50% 24px;
  51. }

Die navi-Id erhält wie auch bereits der Bannerbereich einen Hintergrund und eine feste Höhenangabe in Form von 31 Pixeln. Alle span-Elemente erhalten durch Zeile 8 bis 11 eine andere Textfarbe.
Da Listen in HTML standardmäßig ein Punkt als Aufzählungszeichen besitzen, deaktiviere ich diesen durch Zeile 14. Zudem nulle ich die Standard-Abstände des Listenelements in Zeile 15 und 16. Zeile 20 sorgt anschließend dafür, dass die Liste nicht vertikal, sondern horizontal verläuft.
Die beiden Rundungen werden in den Zeilen 22 bis 37 definiert. Die linke Rundung erhält die Eigenschaft float:left;, wodurch diese linksbündig angeordnet wird und zulässt, dass ich die Navigation rechts daneben platzieren kann. Das Gleiche gilt für die rechte Rundung, die ich mit float:right; am rechten Rand der Navigation ausrichte.
Zu guter Letzt erhalten die Menüpunkte durch Zeile 39 bis 51 das entsprechende Aussehen. Das a vor dem Punkt des Klassennamens sorgt dafür, dass diese Eigenschaften ausschließlich auf ein Anker-Tag angewendet werden.
Die in Zeile 50 angegebene Hintergrundgrafik ist der nicht ausgefüllte Pfeil, der zusätzlich zur weißen Schrift (#ffffff) beim Mouseover über einen Menüpunkt dafür sorgen soll, dass der Nutzer sieht über welchem Link er sich gerade befindet.

Ergebnis

Das in Abbildung 1 gezeigte Ergebnis dieses Kapitels ist eine Navigationsleiste für die Webseite. Die Menüpunkte haben bereits einen Mouseover-Effekt erhalten, so dass diese dezent aufleuchten und ein kleiner Pfeil darunter erscheint.

Abbildung 1In diesem Kapitel hat die Webseite eine Navigationsleiste erhalten.
Abbildung 1
< 4.2 Grundgerüst 4.4 Unternavigation >