Button zum Gestalten der Webseiten

Die Navigation ist eines der wichtigsten Elemente einer Website. Sie verbindet alle Unterseiten sinnvoll miteinander und ist maßgeblich an der Gestaltung der Webseiten beteiligt. Sie sollte deshalb sehr gut durchdacht sein. Technisch gesehen gibt es viele Möglichkeiten eine Navigation anzulegen.

Es wird zwischen Textlinks und Bildlinks unterschieden. Während Textlinks einfach durch den Text, der zwischen öffnendem und schließendem Anker-Tag geschrieben wird, gebildet werden, benötigt man für Bildlinks, oder auch Imagelinks genannt, geeignete Grafiken die zwischen den Ankter-Tags eingebettet werden und so den Link in Form eines funktionstüchtigen Buttons darstellen. Dabei können sich die Button deutlich vom übrigen Layout der Website abheben und ganz konservativ in einer Navigationsleiste untergebracht sein. Sie können aber auch raffiniert in das Layout der Webseiten eingebaut werden, so dass sie beispielsweise Teil einer komplexen Grafik sind.

Grafische Button werden überwiegend zum Gestalten der Haupt- und Subnavigationen verwendet, während Textlinks innerhalb von Texten zur Navigation eingesetzt werden.

Auch die Buttons in einem Formular müssen nicht unbedingt in tristem Grau erscheinen. Diese können in css formatiert und so an das Layout der Webseiten angepaßt werden. Sogar Grafiken lassen sich als Button verwenden, beispielsweise zum Absenden eines Formulares. Langweilige Formulare können zu echten Hinguckern gestaltet werden, da macht sogar das Ausfüllen Spaß.

Rollover Navigation - dynamische Button

Javascript Event-Handler übernehmen die Gestaltung dynamischer Buttons. Dabei wird beim Überfahren des Button mit der Maus eine zweite Grafik an der Stelle der ersten angezeigt. Verläßt die Maus den Button ist die ursprüngliche Grafik wieder sichtbar. Dafür müssen für jeden Button mindestens zwei Grafiken separat abgespeichert werden. Unter Umständen benötigen Sie noch einen dritten Button, wenn Sie der aktiven Webseite noch einen aktiven Button zuteilen wollen, der sich von den beiden ersten unterscheidet. Der künstlerischen Kreativität sind beim Gestalten solcher Button keine Grenzen gesetzt. Auch ein aufwendiges Webdesign läßt sich so umsetzen. Ungünstig kann sich diese Variante allerdings auf die Ladezeit der Website auswirken, wenn sich sehr viele verschiedene Button auf der Seite befinden.

Javascript-Navigationen gehören nicht zu unseren Lieblingsthemen. Nicht, dass wir sie nicht erstellen könnten oder dass sie schlecht aussehen - im Gegenteil, mit Javascript-Navigationen können tolle Effekte erzielt werden. Wir werden später unter dem Kapitel Javascript einige Varianten vorstellen. Solche Navigationen haben aber auch große Nachteile. Besucher, die Javascript abgeschaltet haben können, wenn es ganz schlecht läuft und das Javascript keine Alternative anbietet überhaupt nicht auf die Unterseiten der Website gelangen. Zu diesen Besuchern gehören leider auch die Suchmaschinen, die Javascript-Links nicht verfolgen und so auf der Startseite gleich wieder kehrt machen.
Da uns Barrierefreiheit und Benutzer- und Suchmaschinenfreundlichkeit im Webdesign am Herzen liegt, sind wir bestrebt Navigationen ohne Javascript zu erstellen und möchten Alternativen dazu aufzeigen.

Beschreibung Anwendungsbeispiel:
Das Anwendungsbeispiel wurde mit einem Button aus einer vertikal gekachelten Hintergrundgrafik realisiert. Die Beschriftung erfolgt per css-Formatierung als ganz normaler Textlink. Diese Variante ist besonders suchmaschinenfreundlich, da die Spider dem Link ungehindert folgen können und einen Linktext präsentiert bekommen. Ein weiterer Vorteil ist, dass dieses Beispiel ganz ohne javascript funktioniert. Auch Besucher, die per analogem Modem oder isdn unterwegs sind finden diese Variante sicher optimal, da keine langen Ladezeiten zu erwarten sind.

Weitere Button finden Sie in unserer Bildergalerie.