Anzeige
Tutorialbeschreibung

Professionelle Websites: Seitenlayouts Teil 2 - Navigations- und Menüleisten

Professionelle Websites: Seitenlayouts Teil 2 - Navigations- und Menüleisten

Das Kapitel über Seitenlayouts zeigt, wie Sie mit diesen Bordmitteln professionelle und standardkonforme Seitenlayouts erstellen können. Gestalterische Kreativität und Genialität bei der Komposition von Farbe und Form ist zwar nicht vermittelbar, wohl aber das Handwerkszeug und die richtigen Kniffe, um gestalterische Wünsche umsetzen zu können. Das Kapitel hat Workshop-Charakter.
 


Das nun folgende Tutorial ist ein Auszug aus dem Buch: Professionelle Websites von Stefan Münz.
Die Veröffentlichung des Kapitels erfolgt mit freundlicher Genehmigung von Pearson Education .


Anhand der drei Beispiellayouts wurde gezeigt, wie Seitenlayouts entstehen und welche Mittel dabei zum Einsatz kommen. In allen drei Beispielen wurde jedoch die Navigation nur als Dummy- Grafik dargestellt. Da elegante Link-Formatierung ein Thema für sich ist, wird es in diesem Abschnitt gesondert behandelt.
Vor einigen Jahren musste jedes Menü, das beispielsweise so genannte Rollover-Effekte (Effekt wie beim Auswählen aus einer Liste oder einem Menü) verwenden wollte, auf Grafiken für jeden Link und auf ein JavaScript zum Austauschen von Grafiken zurückgreifen. Dies ist dank CSS nicht mehr nötig. Scheinbar unauffällige CSS-Eigenschaften, wie das Umwandeln von Inline- in Block- lemente oder die Pseudo-Elemente für Links in unterschiedlichen Zuständen, bilden die Basis für
attraktive, CSS-basierte Navigationsleisten.

2.1 Vertikale Navigationsleiste mit Rollover-Effekt

In Kapitel 4 haben wir ein Beispiel für den Einsatz einer Hintergrundgrafik vorgestellt, das wir nun wieder aufgreifen möchten:

Bilder

Abbildung 5.24: Seitenlayout mit vorgesehenem Bereich für die Navigationsleiste

Die Hintergrundgrafik, die in diesem Beispiel dem body-Element zugewiesen und mit background- epeat:repeat-y nur einmal senkrecht wiederholt wird, hat eine Nutzbreite von 280 Pixel. In HTML definieren und in CSS positionieren wir einen passenden Bereich.

Der Quelltext der Seite lautet:

Bilder

Im Stylesheet wird dem body-Element mit background-image die gewünschte Hintergrundgrafik zugewiesen. Die 1-Spalten-Wiederholung wird zugewiesen und als Hintergrundfarbe für die übrige Seite wird Weiß bestimmt. Ferner wird ein Element mit dem id- Namen navigation absolut positioniert, und zwar so, dass der Bereich in der Mitte der Hintergrundgrafik angezeigt wird. Da die farbige Fläche ohne Schatten eine Breite von 280 Pixel hat, wird durch einen linken Randabstand von 30 Pixel und einer Breite von 220 Pixel erreicht, dass sich optisch gesehen rechts ebenfalls ein Rand von 30 Pixel bis zur rechten Grenze des farbigen Bereichs ergibt.

Zwischen <body> und </body> wird ein div-Element mit dem id-Namen navigation notiert. Dadurch wird dieses Element wie im Stylesheet angegeben positioniert. Innerhalb des div-Bereichs sollen die Links der Navigationsleiste notiert werden.

Schritt 3: HTML-Quelltext der Navigationslinks
Die Navigationslinks werden innerhalb des div-Bereichs mit dem id-Namen navigation als gewöhnliche a-Elemente notiert, und zwar einfach in der gewünschten Reihenfolge, ohne andere Formatierungen. In unserem Beispiel lautet die Liste der Links:

Bilder

Alle Links bekommen neben dem href-Attribut, welches das Verweisziel bestimmt, über das class-Attribut einen Klassennamen zugewiesen. Es gibt insgesamt drei Klassen von Navigationslinks: Der erste Link der Liste muss aus optisch-technischen Gründen eine eigene Klasse haben. Diesem Link wird daher die Klasse navi_first zugewiesen. Die aktuell angezeigte Seite soll ebenfalls optisch abweichend dargestellt werden. So kann der Anwender in der Navigationsleiste stets sehen, auf welcher Seite er sich gerade befindet. Da unsere Beispielseite die Startseite ist und der erste Link zur Startseite führt, ist es wieder der erste Link, dem die Klasse navi_self zur Kenntlichmachung der aktuellen Seite zugewiesen wird. Wie erkennbar, ist es kein Problem, einem Element zwei CSS-Klassen zuzuweisen. Die gewünschten Klassennamen werden in der Wertzuweisung an das class- Attribut einfach durch Leerzeichen getrennt. Alle übrigen Links im Beispiel haben die Standard-Linkklasse navi.

Alle Links erhalten außerdem ein title-Attribut, das den gleichen Wert enthält wie der jeweils anklickbare Verweistext. Der Zweck des title-Attributs ist, bei Links, deren Text wegen Überlänge abgeschnitten wird, über die Tooltipp-Fenster, die vom title-Attribut erzeugt werden, doch noch den gesamten Linktext sehen zu können.

Damit aus der Liste von Links optisch gesehen eine Navigationsleiste wird, müssen entsprechende zentrale CSS-Formatdefinitionen her. In unserem Beispiel lauten sie:

Bilder

Zunächst werden Formateigenschaften definiert, die für alle drei erwähnten Linkklassen gelten, also navi, navi_first und navi_self. Gleich die erste Definition ist ein wichtiger Schritt: display:block sorgt dafür, dass die a-Elemente vom Browser wie Blockelemente behandelt werden. Jeder Link erzeugt damit eine neue Zeile im Textfluss und die Elementbox jedes Links erstreckt sich über die gesamte zur Verfügung stehende Breite. Diese wird vom Elternelement, dem div-Bereich navigation, vorgegeben und beträgt 220 Pixel.

Die Angaben zu white-space und overflow stellen sicher, dass der Linktext nicht umgebrochen werden kann (nowrap) und dass er, falls er breiter ist als 220 Pixel, einfach abgeschnitten wird (hidden). Beide Angaben tragen also dazu bei, dass das Layout der Navigationsleiste nicht »zerschossen« wird. Für eventuell abgeschnittene Linktexte haben wir ja in HTML die title- Attribute notiert.

Bilder

Abbildung 5.25: Vertikale Navigationsleiste mit Rollover-Effekt

Links aller drei Klassen erhalten links, rechts und unten einen dünnen schwarzen Rahmen und sollen den Linktext in weißer, fetter Schrift in der Schriftart Tahoma oder irgendeiner anderen serifenlosen Schrift bei leicht erweitertem Zeichenabstand anzeigen. Die Innenabstände zu den Grenzen der Elementbox soll in allen Fällen 3 Pixel betragen. Der Linktext soll zentriert ausgerichtet werden.

Der oberste Link (class="navi_first") erhält auch oben eine dünne schwarze Rahmenlinie. Da die Links abstandslos aneinander anschließen, ist die untere Rahmenlinie zugleich die obere des nachfolgenden Links, weshalb Letztere bei den Links der anderen Linkklassen auch nicht definiert ist.

Schließlich werden noch Hintergrundfarbe und Textfarbe festgelegt. Dabei wird zwischen den möglichen Zuständen der Links unterschieden, also zwischen :link (Verweis zu noch nicht besuchter Seite), :visited (Verweis zu bereits besuchter Seite), :hover (Verweis, der gerade über Maus oder Tastatur den Fokus erhält) und :active (Verweis, der gerade angeklickt bzw. ausgeführt wird). Zwischen Links zu besuchten und noch nicht besuchten Seiten wird in unserer Navigationsleiste optisch nicht unterschieden. Für die beiden Klassen navi und navi_first sind jedoch zwei getrennte Selektoren erforderlich, da beide unterschiedliche Hintergrundfarben erhalten. Zwischen den Zuständen :hover und :active wird optisch auch nicht mehr weiter unterschieden. Alle drei Linkklassen erscheinen in diesen beiden Zuständen mit schwarzem Text auf weißem Hintergrund.

Beim Austesten der Funktionalität mit verschiedenen Browsern fällt auf, dass es beim Internet Explorer erforderlich ist, auf den Linktext zu positionieren, damit der Hover- Effekt eintritt. Bei anderen Browsern (Firefox, Opera) genügt das Positionieren in die Elementbox eines Links. Neuere Browser als der Internet Explorer 6 unterstützen Pseudoelemente wie :hover (oder :focus) auch für andere Elemente als das a-Element.

Andere Effekte
Der Phantasie für CSS-Definitionen bei den einzelnen Linkzuständen sind kaum Grenzen gesetzt. In unserem Beispiel haben wir für :hover und :active lediglich die Hintergrundfarbe und die Textfarbe geändert, was einen klassischen Rollover-Effekt bewirkt. Ebenso können Sie aber auch mit anderen Effekten arbeiten. So bewirkt beispielsweise das Ändern von border:outset zu border:inset einen realistischen Button-Eindrück-Effekt.

2.2 Horizontale Navigationsleiste mit Rollover-Effekt

In diesem Beispiel soll folgende obere Navigationsleiste realisiert werden:

Bilder

Abbildung 5.26: Horizontale Navigationsleiste mit Rollover-Effekt

Wie aus der Abbildung ersichtlich, wird bei dem Beispiel mit einem Karteireiter-Effekt gearbeitet. Um den Effekt zu erzielen, haben wir folgende zwei Grafiken erstellt, die wir als Hintergrundgrafiken einsetzen:

Bilder

Abbildung 5.27: Grafiken für den Einsatz als Hintergrundgrafik

Beide Grafiken messen 100 × 18 Pixel. Die Grafiken wurden im GIF-Format als reiter1.gif und reiter2.gif abgespeichert. Die gelblich-beige Innenfarbe wurde in beiden Grafiken als transparent definiert.

Die zuvor abgebildete Seite im Browser hat folgenden Quelltext (Komplettlisting mit HTML und CSS-Definitionen):

Listing 5.8: HTML- und CSS-Quelltext für Seite mit horizontaler Navigationsleiste

Bilder


Im HTML-Part zwischen <body> und </body> werden zwei div-Bereiche mit den id-Namen top_navigation und left_navigation notiert. Letzterer dient in unserem Beispiel nur der optischen Vollständigkeit und spielt keine weitere Rolle. Im zentralen Stylesheet, also im HTML-Kopfbereich zwischen <style> und </style>, werden die beiden div-Bereiche absolut positioniert, und zwar so, dass sie einen Winkel links oben bilden. Beide Bereiche erhalten die gleiche hellviolette Hintergrundfarbe (background-color: rgb(230,180,250)).

Alle Links der oberen Navigationsleiste erhalten den Klassennamen top_link und zusätzlich individuelle id-Namen. Diese komfortable Ausstattung mit Namen hilft bei den CSSDefinitionen. Gemeinsame Eigenschaften aller Navigationslinks können im Stylesheet über den Selektor a.top_link definiert werden. Dazu gehört – wie schon im Beispiel der vertikalen Navigationsleiste – die Umwandlung des a-Elements vom Inline- in ein Blockelement (display:block). Da alle Links absolut positioniert werden, wird die entsprechende CSS-Definition ebenfalls schon für die Klasse angegeben, ebenso wie die gemeinsame Breite, die Textausrichtung und die Schriftformatierung des Verweistextes.

Als Nächstes folgen im Stylesheet zwei Formatblöcke, welche das Verhalten der Links in den unterschiedlichen Zuständen steuern. Mit dem aufzählenden Selektor a.top_link:link, a.top_link:visited wird festgelegt, wie sich die Links mit dem Klassennamen top_link im Normalzustand verhalten, wobei nicht zwischen bereits besuchten (:visited) und noch nicht besuchten (:link) Linkzielen unterschieden wird. Links in diesen Zuständen sollen eine dunkelviolette Schriftfarbe haben (color:rgb(150,50,170)) auf gelblich-beigem Hintergrund (background-color:rgb(245,240,205)) haben. Ferner wird als Hintergrundgrafik (background-image) die Datei reiter1.gif angegeben. Das Hintergrundbild soll nur einmalig angezeigt werden (background-repeat:no-repeat).

Der Selektor a.top_link:hover, a.top_link:active spricht dagegen die Links in den Zuständen »fokussiert« (:hover) und »aktiviert« (:active) an. In diesen Fällen soll die Textfarbe auf Schwarz und die Hintergrundfarbe auf Weiß wechseln. Als Hintergrundbild soll jetzt reiter2.gif angezeigt werden.

Dass übrigens die Wechsel von Text- und Hintergrundfarbe überhaupt wirksam sind, liegt daran, dass der Hauptbereich in den Grafiken reiter1.gif und reiter2.gif als transparent definiert wurde. »Effektiv« sind also in beiden Grafiken nur die Rahmenlinien und die obere hellviolette Ecke.

Damit der Überlappungseffekt im Karteireiterstil zustande kommt, sind allerdings noch weitere Maßnahmen nötig. Diese betreffen die Links individuell. Für jeden Link-id- Namen werden im Stylesheet deshalb verweisspezifische Formate definiert, z.B. mit dem Selektor a#home für den Link mit dem id-Namen home.

Alle Links werden ja absolut positioniert. Bei den individuellen Formaten wird angegeben, wo genau. Definiert werden ein Linkswert (left) und ein Untenwert (bottom). Da die Links sich innerhalb des absolut positionierten div-Bereichs top_navigation befinden, sind dessen Elementgrenzen der Bezugspunkt für die Angaben. Der Bereich top_navigation beginnt oben bei 0 Pixel und hat eine definierte Höhe von 60 Pixel. Das heißt, dass bottom:0px so viel bedeutet wie 60 Pixel vom oberen Rand des Anzeigefensters gemessen.

Alle Links erhalten außerdem einen z-Index-Wert zum Steuern von Überlappungseffekten. Im Normalzustand überlappen weiter rechts stehende Links ihre linken Nachbarn um 2 Pixel, da die left-Werte der Links sich jeweils um 98 Pixel unterscheiden, die Linkbreite jedoch 100 Pixel beträgt. Mit dem letzten Selektor, der Aufzählung aller einzelnen Links für die Zustände :hover und :active, wird der z-Index-Wert des jeweils betroffenen Links so hoch gesetzt, dass der Link seinen rechten Nachbarn auf jeden Fall überlappt.

2.3 Horizontale Navigationsleiste mit Ausklappmenüs

In einer einfachen horizontalen Navigationsleiste lassen sich naturgemäß nur einige wenige Links unterbringen. Dennoch finden einige Seitenanbieter und Seitenbesucher Gefallen daran, die gesamte Navigation über solch eine horizontale Navigationsleiste abzuwickeln. Die Leiste – so der Wunsch – soll wie die Menüzeile einer typischen Windows- Anwendung temporär aufklappbare Menüs anbieten.

Ganz ohne ein Minimum an JavaScript kommt man dabei nicht aus. Doch der JavaScript- Aufwand lässt sich dank CSS so stark reduzieren, dass nicht mal ein richtiges »Script« erforderlich ist.

Bilder

Abbildung 5.28: Horizontale Navigationsleiste mit abhängigem Aufklappmenü

Der Quelltext aus Listing 5.8 im vorhergehenden Abschnitt wird dabei an drei Stellen erweitert.

Im Stylesheet, also zwischen <style> und </style>, werden die folgenden Definitionen hinzugefügt:

Bilder

Der Selektor #game_sublinks betrifft den Bereich, der für die Sublinks benötigt wird. Der Bereich wird absolut positioniert, und zwar so, dass er sich unterhalb des zugehörigen Links der Navigationsleiste befindet. Der Bereich erhält unten, links und rechts einen schwarzen, 2 Pixel dicken Rahmen. Sein z-Index-Wert ist hinreichend hoch gewählt, um den Dokumentinhalt, für den beispielsweise ein div-Bereich mit dem z-Index-Wert 1 definiert werden könnte, zu überlappen. Entscheidend ist jedoch die letzte Definition visibility: hidden. Dadurch wird verhindert, dass der Bereich per Default angezeigt wird.

Für die untergeordneten Links wird eine Klasse sub_link eingerichtet. Mit dem Selektor .sub_link werden allgemeingültige Formate für all diese Links definiert. Alle Links sollen wieder als Blockelement behandelt werden und den Bereich, innerhalb dessen sie notiert werden, zu 100% in der Breite ausfüllen. Ferner werden diverse Schriftattribute für den Verweistext bestimmt.

Die Selektoren .sub_link:link, .sub_link:visited und .sub_link: hover, .sub_link:active regeln das spezifische Aussehen der Links in den verschiedenen Zuständen. Parallel zur oberen Navigationsleiste werden Hintergrund- und Textfarbe beim Überfahren mit der Maus und beim Anklicken anders dargestellt.

So weit zu den CSS-Anpassungen. Als Nächstes wird im HTML-Teil zwischen <body> und </body> auf der gleichen Ebene wie die div-Bereiche top_navigation und left_navigation der neue Bereich mit dem id-Namen game_sublinks inklusive der gewünschten Sublinks angelegt:

Bilder

Die Links erhalten den Klassennamen sub_link.

Im einleitenden <div>-Tag fallen die beiden HTML-Attribute onMouseover= und onMouseout= auf. Diese so genannten Event-Handler stellen eine Verbindung zu einer Scriptsprache wie JavaScript her. Die Wertzuweisung ist jeweils eine Programmanweisung. Bei onMouseover (der Event bedeutet: beim Überfahren des Elements mit der Maus) wird der Bereich auf »sichtbar« gesetzt; bei onMouseout (wenn die Maus den Elementbereich wieder verlässt) wird er wieder auf »unsichtbar« gesetzt.

Schließlich muss noch der HTML-Quelltext des Links mit dem id-Namen game wie folgt erweitert werden:

<a href="game.htm" class="top_link" id="game"
onMouseover="document.getElementById('game_sublinks').
style.visibility='visible'"
onMouseout="document.getElementById('game_sublinks').
style.visibility='hidden'">
the game
</a>

Auch hier werden noch mal die gleichen beiden Event-Handler eingefügt, diesmal in das einleitende <a>-Tag des Links.

Unser Beispiel hat nur für den Link »the game« ein Aufklappmenü definiert. Wenn Sie für weitere Links der oberen Navigationsleiste solche Menüs wünschen, müssen Sie analog vorgehen, d.h. Bereiche definieren und entsprechend positionieren, und die Links darin notieren. Die Event-Handler müssen ebenfalls bei allen betroffenen Aufklappmenü-Bereichen sowie im jeweiligen Link der Topnavigationsleiste notiert werden. Innerhalb der Klammern von getElementById(...) muss dabei jeweils der id-Name des Bereichs für das Aufklappmenü eingesetzt werden.

Beachten Sie jedoch auch, dass Sie durch das Scripting möglicherweise Seitenbesucher von der Möglichkeit ausschließen, alle Seiten aufzurufen. Denn bei Anwendern, die in ihrem Browser JavaScript deaktiviert haben, funktionieren die Aufklappmenüs nicht. Im vorliegenden Beispiel bietet es sich an, auf den Seiten, die bei Anklicken eines Links in der Topnavigationsleiste aufgerufen werden, die Links auf deren Unterseiten im normalen Seiteninhalt nochmals anzubieten.

Auch die Reihenfolge, in der die Links innerhalb des Quelltextes notiert werden, will bedacht sein. Da die Bereiche im Beispiel alle absolut positioniert sind, spielt es keine Rolle, in welcher Reihenfolge ihr Markup im Dokumentquelltext steht. Ein Test mit einem Text-Browser wie Lynx bringt jedoch ans Licht, welche Probleme sich bei einer nicht grafischen oder nicht visuellen Ausgabe des Seiteninhalts ergeben.

Alle CSS-Definitionen in diesem und im vorherigen Abschnitt wurden der Einfachheit halber im zentralen Style-Bereich des HTML-Dokuments notiert. Sollen die Definitionen für mehrere Seiten gültig sein, empfiehlt es sich natürlich, die Definitionen in eine separate CSS-Datei auszulagern.


Das Tutorial ist ein Auszug aus dem Buch von Stefan Münz:

Professionelle Websites - Programmierung, Design und Administration von Webseiten
Addison-Wesley, 2. Auflage, 1136 Seiten, gebunden, komplett in Farbe, mit DVD

Die Veröffentlichung des Kapitels erfolgt mit freundlicher Genehmigung von
Pearson Education.

Mehr Informationen zu diesem wunderbaren Fachbuch für Webmaster und Webentwickler
gibt es hier: Professionelle Websites

Alle Teile des Buches: 

1 Intro
2 HTML und CSS
3 Dynamische Seiten mit JavaScript/DOM
4 Die Server-Seite
5 PHP und MySQL
6 XML
7 Betrieb von Websites
8 Referenz
Bilder

DVD-Werbung
Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von Guzzi65
  • 22.04.2014 - 11:41

Vielen Dank für das gut erklärte Tutorial!

Portrait von JayJay87
  • 13.03.2014 - 13:01

ich finde das tut auch sehr gelungen....

Portrait von MaoMao
  • 09.01.2013 - 17:01

Gute Tutorial leicht erklärt.

Portrait von Kloppy
  • 08.12.2011 - 15:13

Das ist sehr nützlich!
Vielen Dank!!!

Portrait von Susan99
  • 21.09.2011 - 11:29

Vielen Dank. Sehr nützlich.

LG Susan

Alternative Portrait

-versteckt-(Autor hat Seite verlassen)

  • 24.02.2011 - 21:18

Hallo,
danke für dieses tolle Tutorial, ich habe es zwar noch nicht durchgelesen, der Druck läuft noch, aber wie ich schon sehen kann, ist es genau das, was ich schon seit einer Woche suche. Ein Tutorial, in dem man seine eigenen in Photoshop gebastelten Navireiter in CSS einbinden kann. Also nochmals, Danke.

Portrait von mondstein
  • 30.09.2010 - 10:48

gut beschrieben,veranlasst zu neuenkreative Ideen.

Portrait von williamo
  • 21.08.2009 - 14:55

gute weiterführung .............

Portrait von Freistoss
  • 20.08.2009 - 12:20

Danke vielmals. Wird gleich ausprobiert!

Portrait von greske
  • 27.05.2009 - 13:12

Sehr schönes Tut.
wird mri sicher helfen ;)

Alternative Portrait

-versteckt-(Autor hat Seite verlassen)

  • 01.07.2008 - 10:35

Sehr genial! Sehr detailliert gemacht!
Danke!

Portrait von Haliestra
  • 09.04.2008 - 07:13

Sehr detailliert und von daher dann auch leicht zu verstehen.

Portrait von paT86
  • 08.04.2008 - 20:05

sehr detailliert und ausführlich geschrieben. absolut lobens- & empfehlenswert!

Portrait von Naveh
  • 08.04.2008 - 16:56

Sehr Nett gemacht :)

Alternative Portrait

-versteckt-(Autor hat Seite verlassen)

  • 08.04.2008 - 12:31

Sehr gut. Wird sofort in die Tat umgesetzt.

Alternative Portrait

-versteckt-(Autor hat Seite verlassen)

  • 08.04.2008 - 07:30

Für den tip vielen dank klasse sache

Portrait von HeikoAP
  • 08.04.2008 - 06:17

Schönes TuT sehr ausführlich

Portrait von manno22
  • 07.04.2008 - 17:19

super!
hast dir echt mühe gegeben!

Portrait von Carbonracer
  • 07.04.2008 - 13:38

Super Tutorial. Bin gerade dabei, es auf meine eigene HP umzusetzen. Mit dem Tut kein Problem. THX!!!

Portrait von Yunky
  • 07.04.2008 - 10:56

Gut beschrieben.. und ein gutes totorial!

x
×
×