Navigationselemente in Microsoft Expression Web
Das Internet ist ein interaktives Medium, in dem der Nutzer von einer Information zur nächsten gelangt. Dafür werden Navigationselemente benutzt. Es gibt unterschiedliche Arten von Navigationselementen, dazu gehören der normale Text-Hyperlink und Bild-Verknüpfungen. Außerdem unterscheidet man zwischen externe Hyperlinks, die auf andere Webseiten zeigen und relativen Hyperlinks, die innerhalb derselben Website auf andere HTML-Seiten zeigen sowie so genannten "Anker" oder "Textmarken", die innerhalb der gleichen HTML-Seite auf einen bestimmten Abschnitt springen.Einfügen eines Text-Hyperlinks
Wenn ein Wort oder ein Abschnitt mit einer anderen internen oder externen Seite oder Datei verknüpft werden soll, dann markieren Sie dieses Wort oder den Textabschnitt und wählen entweder den Menübefehl Einfügen -> Hyperlink aus oder klicken in der Symbolleiste auf der rechten Seite auf die Schaltfläche "Hyperlink einfügen" oder wählen die Tastenkombination [Strg+K].
Darstellung: Einfügen eines Text-Hyperlinks
Navigationsleisten
Mit Hilfe von Navigationsleisten kann sich der Besucher nicht nur rasch einen Überblick verschaffen, was ihn auf dieser Website erwartet, sondern kann damit natürlich auch von einer Seite zu einer anderen gelangen. Navigationsleisten können aus Hervorgehobenen Textspalten oder aus Bildschaltflächen, die meist auch interaktive Schaltflächen sind, bestehen. Wenn Sie keine Vorlage benutzen, denken Sie an die Regel für die Anzahl der Buttons für Navigationsleisten 7 +/- 2. Es ist besser bei sehr inhaltsreichen Seiten Ober- und Untermenüs und eine Sitemap, zum Beispiel in einer Organigramm-Form zu verwenden. Egal ob man Text oder Bildnavigationsleisten verwendet, empfiehlt es sich immer die Verwendung von Tabellen und Layoutvorlagen. Bei einer Textnavigationsleiste kann man die einzelnen Zellen farblich akzentuieren. In die einzelnen Zellen der HTML- oder Layouttabelle werden dann die entsprechenden Hyperlinks eingetragen.Interaktive Schaltflächen
Interaktive Schaltflächen bringen mehr Dynamik auf eine Website. Gerade bei Navigationsleisten, wenn die Links nahe beieinander liegen kann es passieren, dass ein Nutzer womöglich auf einen benachbarten Link klickt, denn er eigentlich gar nicht auswählen wollte. Interaktive Schaltflächen haben den Vorteil, dass der Nutzer recht gut erkennen kann auf welchen Link er gerade klickt. Denn diese dynamischen Schalflächen bestehen meist aus drei Grafiken, die sich nur minimal oder sehr stark voneinander unterscheiden. Die verschiedenen Grafiken dienen für die JavaScript-Befehle onMouseOut, onMouseDown und onMouseUp. Das bedeutet, sie dienen den unterschiedlichen Anzeigeoptionen je nachdem, ob sich der Mauszeiger über der Schaltfläche befindet oder nicht oder ob die Schaltfläche schon geklickt wurde. Um eine interaktive Schaltfläche auf einer Webseite einzufügen, setzen Sie den Cursor an die Stelle im WYSIWYG-Bereich des Dokumentfensters und wählen den Menübefehl Einfügen -> interaktive Schaltfläche. Es öffnet sich das Dialogfenster "Interaktive Schaltflächen" in dem Sie aus rund 30 Vorlagenarten mit unterschiedlichen Farbgebungen auswählen können. Leider sind die Vorlagenarten nummeriert und nicht mit der entsprechenden Farbe gekennzeichnet, so dass man für die Auswahl, selbst wenn man sich für einen Vorlagentyp entschieden hat, trotzdem noch auf das Vorschaufenster schauen muss, um die richtige Farbe zu wählen. Auf der vordersten Registerkarte "Schaltfläche" kann man unten den Anzeigetext für die Schaltfläche eintragen zum Beispiel "Kontakt". Wenn man sich den Quellcode eines einzigen Navigationsbuttons anschaut, freut man sich über ein Autorenprogramm wie dieses. Denn diesen Text von Hand zu programmieren wäre schon etwas müßig:<img style="border: 0" id="img1" src="buttonD.jpg" height="33"
width="100" alt="Kontakt"
onmouseover="FP_swapImg(1,0,/*id*/'img1',/*url*/'buttonE.jpg')"
onmouseout="FP_swapImg(0,0,/*id*/'img1',/*url*/'buttonD.jpg')"
onmousedown="FP_swapImg(1,0,/*id*/'img1',/*url*/'buttonF.jpg')"
onmouseup="FP_swapImg(0,0,/*id*/'img1',/*url*/'buttonE.jpg')"
/><!-- MSComment="ibutton" fp-style="fp-btn: Embossed Tab 1"
fp-title="Kontakt" -->
In dem Dialogfenster "Interaktive Schaltflächen" stehen neben der Registerkarte "Schaltfläche" noch die beiden Register "Schriftart" und "Bild" zur Verfügung. Dort lassen sich jeweils die Optionen für die Schriftart und das Bild anpassen. Es ist auch möglich auszuwählen, ob das Bild, welches für die Schaltfläche verwendet wird, im JPEG-Format mit einem bestimmten Hintergrund oder als GIF mit transparentem Hintergrund angezeigt werden soll. Insbesondere bei einer Webseite mit einem bunten Muster oder einem Farbverlauf als Hintergrund empfiehlt sich die Auswahl des transparenten GIF-Formats. Sobald ein Dokument, das interaktive Schaltflächen enthält gespeichert wird, erscheint ein das Dialogfenster "Eingebettete Daten speichern". Das Programm vergibt für die drei Grafiken automatisch Dateinamen, die immer mit dem Wort button beginnen, sich durch eine Zahlen-Buchstabenkombination voneinander unterscheiden und die ausgewählte Extension.gif oder .jpg enthalten. In diesem Dialogfenster können Sie auf einen Namen klicken und dann auf die Schaltfläche umbenennen, um den Grafiknamen zu ändern. Weiterhin haben Sie dort auch die Möglichkeit über die Schaltfläche "Bilddateityp" das Grafikformat noch zu ändern. Die Bilder für die Schaltflächen werden dann in dem Verzeichnis, in dem sich die Website befindet abgespeichert, so dass diese, wenn die Seiten nach der Erstellung perFTPauf dem Webserver abgelegt werden, auch zur Verfügung gestellt werden können.
Du arbeitest in einer Agentur oder als Freelancer?
Dann wirf doch mal einen Blick auf unsere Software FeatValue.
Weiterlesen: ⯈ Bilder und Design
Über uns
Wir entwickeln Webanwendungen mit viel Leidenschaft. Unser Wissen geben wir dabei gerne weiter. Mehr über a coding project