zur Startseite vom TP

1Grundaufbau

Zuerst muss die Menüstruktur gezeichnet werden. Dies einfach auf einer Ebene tun, man braucht nicht mehrere dazu. Rechtecke (Auslöser) mit entsprechender Rundung und über die Hälfte am besten eine Hilfslinie (Abb. 1).

2Der erste Frame

Dann ein Rechteck für den Inhalt zeichnen, diese Stelle kann später als Textsegment bestimmt werden. Im Moment dient es als Orientierungshilfe. Die Auslöser entsprechend einfärben und den Contenbereich für den ersten Auslöser nehmen wir in der gleichen Farbe. Das ist der ganze Frame 1 (Abb. 2).

3Frame duplizieren

Nun dupliziert man den ersten Frame noch zweimal für dieses Beispiel (Abb. 3 und 4).

4Größe anpassen

Dann für jeden Frame die Farbe des großen Rechteckes an die jeweilige Kategorie anpassen (Abb. 5 und 6).

5Segment einfügen

Jetzt ein Segment einfügen (am Schluss etwas mehr dazu). Alles markieren und Einfügen/Segment, die Abfrage mit Einzeln beantworten (Abb. 7).

6Hotspot

Nun zu den Auslösern, die machen wir jetzt mit Hotspots. Wählen Sie aus der Werkzeugleiste das Polygonhotspot und zeichnen wie im Bild über jeden Auslöser einen Hotspot (Abb. 8).

7Verhalten

Jetzt das Verhalten. Klicken Sie auf Hotspot 1 und ziehen Sie den runden Kreis auf das große Segment. Es steht Frame 2 im Austauschfenster, dort stellen Sie auf Frame 1. Der ist zwar schon aktiv, aber es muss ja beim Wechsel der anderen wieder zurück gehen. Klicken Sie auf Weitere Optionen und entfernen sie das Häkchen bei "Bild bei onMouseout wiederherstellen" Abb. 9

8Austauschen

Machen Sie dasselbe für den zweiten Hotspot (Frame 2 austauschen) und mit dem dritten (Frame 3 austauschen).

9Verhalen für onClick

Die Verhalten der Hotspots für jeden einzeln auf onClick in folgendem Fenster einstellen, klicken Sie dazu auf den kleinen Pfeil (Abb. 10).

10Testen

Klicken Sie auf Vorschau in der Leinwand und testen Sie ob alles richtig funktioniert. Damit wäre das Menue fertig.

Die weitere Verarbeitung als HTML ist eine andere Sache, trotzdem mal kurz erläutert, weil diese Stelle immer wieder missverstanden wird.

11Segment transformieren

Markieren Sie das erste Segment und transformieren es nach oben wie im folgenden Bild (Abb. 11).

12Neues Segment

Zeichnen Sie unterhalb ein neues Segment über die ganze Fläche des restlichen Rechteckes. Geben Sie im Objektbedienfeld dem Segment als Typ: Text. Schreiben Sie irgendwas rein. Drücken Sie F12 für die Vorschau im Browser und probieren Sie die Auslöser, es ändert sich nicht der Inhalt im Textsegment (Abb. 12).

Hinweis! Sie können mit dem Textsegment den Bereich für späteren HTML Inhalt festlegen, den Sie dann mit z.B. DW einfügen. Es ist nicht möglich dieses Textsegment mit mehreren unterschiedlichen Inhalten für die einzelnen Frames zu belegen. Glauben Sie nicht, einfach mehrere Segmente in jedem Frame zeichnen zu können, das geht nicht, da Segmente immer an oberster Stelle sitzen, nämlich auf der Webebene. Segmente selbst lassen sich nicht aus/einblenden.

Es gibt ein paar Tricks schon mit HTML-Inhalt in FW zu arbeiten, aber das würde hier zu weit führen! Es ist einfach besser HTML-Inhalt mit dafür vorgesehen Editoren einzufügen!