Webdesign: CSS und Layer

Die Verlinkung von Daten, Bildern und Texten ist seit Beginn ein zentrales Konzept des Internets. Dies wird durch einfache Hyperlinks bewerkstelligt und war zu Beginn des World Wide Web ein effektiver Weg, um zusammengehörige Informationen darzustellen und Absprungmarken zu weiteren Seiten innerhalb oder außerhalb der eigenen Webpräsenz darzustellen. Auch heute noch bedient sich beispielsweise ein Wiki dieser Methode bei der logischen Verknüpfung von Inhalten und Seiten. Mit den Cascading Style Sheets haben vor allem Designer ein Werkzeug an die Hand bekommen, um Hyperlinks an das Gesamtaussehen der Website anzupassen und leider teilweise auch so zu maskieren, dass ein Link nicht mehr sofort, sondern erst nach Berührung des Mauszeigers als solcher erkennbar war. Sie erfahren in diesem Workshop, wie Sie Verlinkungen gezielt für Navigationselemente, Begriffserklärungen oder die Einblendung weiterer Inhalte einsetzen können. Besonders sei an dieser Stelle auch noch auf die Kopplung mit dem Lightbox-Effekt hingewiesen, auf den separat auf Seite 3 eingegangen wird.

Damit können Sie beispielsweise aus einer Sammlung mehrerer Bilder einzelne Fotografien hervorheben, wenn der Betrachter diese anklickt.

Formatierungsgrundlagen

Das erste Beispiel vermittelt Ihnen die Grundlagen und geht auf die Formatierung von Links ein. Das Codebeispiel ist bewusst einfach gehalten und zeigt auf der linken Seite drei Navigationselemente und im Hauptfenster einen Text mit einigen eingebetteten Links. Die Formatierung der Seite wird mithilfe von < div >-Containern erreicht und kapselt auf einfache Weise die Navigation und den Inhalt.

Die < div >- Elemente klammer, pos_navi und inhalt werden lediglich zur Ausrichtung und Formatierung der Inhalte eingesetzt und sorgen beispielsweise dafür, dass die Navigation auf der linken Seite zu finden ist. Auf der Webseite wird mit mehreren Arten von Links gearbeitet - die Navigation auf der linken Seite zeigt auf interne Inhalte, im Haupttext finden Sie auch einen Link auf Sport1.de, einer Sportseite im Internet.

Mithilfe von CSS können Sie nun auf verschiedene Aktionen reagieren - die maßgeblichen Ereignisse eines Links sind hover, active und visited. Zur Veranschaulichung werden die vier Zustände - der vierte ist der Ausgangszustand - mit unterschiedlichen Farben versehen, sodass ein angeklickter, der gerade aktive, ein mit der Maus berührter und ein normaler Link in unterschiedlicher Farbe erscheinen.

Die Farbtöne werden als Hex-Werte dargestellt - eine Umrechnung auf Basis des RGB-Modells nehmen Sie beispielsweise über den wissenschaftlichen Taschenrechner von Windows vor.

Fortgeschrittene Aktionen

Nun ist Link nicht immer gleich Link und Sie möchten den ein oder anderen Verweis auf eine Information, die sich nicht auf der aktuellen Seite befindet, speziell hervorheben. Dazu können Sie etwa Ihrem Link mithilfe von CSS einen entsprechenden Hintergrund verpassen. Im zweiten Beispiel wird besonderes Augenmerk auf die Informationen des Orakels von Delphi gelegt und deswegen sollen die Hinweise auch farblich hervorgehoben werden.

Dazu verwenden Sie eine neue CSS-Klasse und fügen diese dem Tag < li > hinzu:

Zusätzlich müssen Sie noch innerhalb der CSS-Definition li.hervorgehoben eine entsprechende Formatierung zuweisen. Dazu verwenden Sie die Eigenschaft background und geben dieser den Wert #FFFF00.

Externe Verlinkung

Eine spezielle Kennzeichnung externer Links ist immer noch in einigen Websites zu finden und hilft auch den Besuchern zu erkennen, ob sie nun die eigentliche Seite verlassen oder zu Inhalten innerhalb der Homepage verzweigen. Dazu können Sie sich wieder der Eigenschaft background bedienen, allerdings wird diese nun anstelle mit einer Farbe mit dem Verweis auf eine Grafik versehen, im Beispiel mit dem Namen aoutside.gif.

Damit das Symbol auch wirklich nur bei Verlinkungen innerhalb des Textes angezeigt wird, sollten Sie den Bezeichner Ihres Inhalt-Containers bei der Definition verwenden, sodass diese sich dann aus dem Inhalt des Containers, dem Tag, der Klasse und dem Ereignis zusammensetzt: #inhalt a.outside:hover.

Damit der externe Link auch als solcher erkannt wird, fügen Sie dem Anchor-Tag einfach die Klasse outside hinzu. Von nun an wird bei einer Berührung des externen Links immer zusätzlich rechts neben dem Text ein Symbol angezeigt, das auf eine externe Verlinkung hinweisen soll.

Aufgepeppt

Natürlich können Sie dieses Verhalten auch auf die einzelnen Navigationselemente anwenden. So ist es nicht nur hilfreich, sondern auch optisch ansprechend zu erkennen, bei welchem Navigationspunkt Sie sich aktuell befinden. Dies lösen Sie beispielsweise über eine entsprechende Farbe, die Sie mit dem Hintergrund verbinden oder mit einem Symbol, das beim Berühren des Texts angezeigt wird.

Damit alles optisch ein wenig ansprechender aussieht, bekommt der normale Link eine blaue Farbe und der unterstrichene Text verschwindet dank der Eigenschaft text-decoration:none.

Damit verbleibt nur noch die Aufgabe, dem gerade berührten Link ein spezielles Symbol zuzuweisen. Dies geschieht analog dem vorherigen Beispiel, nur dass an dieser Stelle der Wirkungsbereich der Container mit dem Namen navi_main ist.

Sie sehen, dass anhand der unterschiedlichen Container auch problemlos unterschiedliche Reaktionen auf die einzelnen Links möglich sind.

Mehr zum Thema "Mausklicks mit Javascript" und "Platz sparen" finden Sie auf Seite 2...