Menüleiste für eine Web-Seite entwerfen

Kaum eine Internet-Seite kommt ohne Navigationselemente aus. Unabhängig davon, ob es sich dabei um Symbole oder Texte handelt - meist befinden sich diese Elemente in einer Menüleiste. Eine solche Menüleiste können Sie zum Beispiel mit dem Picture Publisher entwerfen.

Starten Sie das Programm und legen Sie ein neues Bild mit einer »Breite« von »800« und einer »Höhe« von »600« »Pixel« an. Die Auflösung stellen Sie auf »72 ppi«. Da die Größe der Menübalken nicht das ganze Bild ausfüllen wird, werden Sie das Bild zum Abschluß etwas beschneiden.

Nach dem »Erstellen« des neuen Bildes legen Sie zuerst die Maske für das Layout der Menüleiste an. Wählen Sie dazu das Masken-Werkzeug aus der Werkzeugleiste und erzeugen Sie zunächst eine rechteckige vertikale Maske, die fast die ganze Höhe und etwa ein Fünftel oder Sechstel der Breite des Bildes einnimmt. Anschließend maskieren Sie einen rechteckigen horizontalen Bereich, so daß ein um 90 Grad im Uhrzeigersinn gedrehtes "L" entsteht.

Legen Sie nun durch die Auswahl der Aktivfarbe die Farbe für die Füllung der eben angelegten Maske fest. Nach der Auswahl der Aktivfarbe können Sie mit dem Werkzeug »Massive Füllfarbe« aus der Werkzeugleiste »Füllwerkzeuge« die Maske kolorieren. Sie können selbstverständlich auch andere Füllmethoden wie zum Beispiel eine Verlaufsfüllung anwenden. Bedenken Sie jedoch, daß Farbverläufe - vor allem radiale - die Datei erheblich vergrößern und somit auch die Download-Zeit deutlich verlängern.

Öffnen Sie nun das Menü »Effekte« und wählen Sie darin »Kanten formen«. Im folgenden Fenster können Sie einen Rahmen für die Menüleiste anlegen. Dafür gibt es eine große Auswahl an Kanten-Profilen. Nach einem Klick auf das aktuelle »Kantenprofil« erscheint ein kleines Fenster, in dem Sie das gewünschte Profil auswählen. Danach legen Sie bei Bedarf eine »Struktur« für den Rahmen fest und passen auch die restlichen Einstellungen wie »Lichteinfall«, »Breite der Kante«, »Rundung« und »Tiefe der Schatten« nach Belieben an. Das Vorschau-Fenster zeigt Ihnen jederzeit, wie sich Änderungen an den Rahmen-Einstellungen auf die Menüleiste auswirken - vorausgesetzt, Sie haben die Option »Automatische Vorschau« in der linken unteren Ecke des »Kanten formen«-Fensters aktiviert. Sobald Sie mit Ihrem Entwurf zufrieden sind, klicken Sie auf den Button »OK«.

Als nächstes fügen Sie ein paar Menüpunkte in Form von Textobjekten ein. Dazu wählen Sie das Werkzeug »Text« und legen eine passende Schriftart sowie deren Größe und Farbe fest. Dann positionieren Sie den Cursor an der gewünschten Stelle der Menüleiste und schreiben den Text des ersten Menüpunkts. Die Texteingabe beenden Sie mit einem Doppelklick. Danach plazieren Sie den Cursor an der nächsten Stelle und geben den zweiten Menüpunkt ein. Genauso verfahren Sie mit den weiteren Texten. Wenn Sie nachträglich Menüpunkte verschieben wollen, klicken Sie einfach den entsprechenden Text an und ziehen ihn per Drag & Drop an den neuen Bestimmungsort.

Nun sind die Menüpunkte aber noch funktionslos. Sie müssen noch die Links zuweisen. Markieren Sie dazu das Objekt und blenden Sie über das »Ansicht«-Menü die »Objekteigenschaften« ein. Darin können Sie dem Objekt einen Namen geben und über »Einfügen | HTML« eine »URL« zuweisen. Nachdem alle Menüpunkte verlinkt sind, speichern Sie die Menüleiste als HTML-Datei, und zwar so:

Vor dem Sichern wählen Sie aus dem Menü »Maske« den Befehl »Schneiden«, um das Bild auf die Größe der Maske zurechtzuschneiden. Speichern Sie die Datei mit »Speichern unter« aus dem »Datei«-Menü unter dem Dateityp »PPF«, da nur in diesem Format Objekte beibehalten werden. Markieren Sie dann mit der Kombination [Strg]+[A] alle Objekte, öffnen Sie das Menü »Bearbeiten« und wählen Sie »Kopieren in HTML«. Nun erscheint der Assistent für die HTML-Ausgabe.

Nachdem Sie einen Dateinamen und Pfad angegeben haben, können Sie etwa noch die Bildgröße ändern. Aktivieren Sie dann die Option »Nur ausgewählte Objekte in Imagemap einbeziehen« und geben Sie Ihrer »Image-map« einen Namen.