zur Startseite vom TP

Hinweis

Dieser Tutorial ist mittlerweile veraltet.

und so wirds gemacht:

In einem neuen Dokument müssen zuerst einmal die Hauptlinks welche bei Mouseover die entsprechende Ebene einblenden bestimmt werden. Im Beispiel sind dies: Home | Links | Kontakt diese werden ebenfalls in eine Ebene integriert. Zuerst aber sollten die Lineale eingeblendet werden. Man kann auch mit dem Raster arbeiten.

Abb.1 / 2

1

Mit dem Symbol wie im Bild unten nun eine Ebene (Layer) für die Hauptlinks zeichnen. Eine Ebene kann auch über Menü: Einfügen-->Ebene erzeugt werden.

Abb.3

Die Ausrichtung der Ebene erfolgt immer von der linken oberen Ecke. Den Mauszeiger sollte man nun in etwa dort positionieren wo die Neue Ebene beginnen soll. Dann bei gedrückter linker Maustaste die Ebene nach rechts unten ziehen. Die Lineale sind nun eine große Hilfe für die Position und Größe der neuen Ebene. So sollte es für unser Beispiel aussehen.

Abb.4

2

Dann in die Ebene die Links reinschreiben. Die richtige Textformatierung (Größe/Farbe usw.) spielt an dieser Stelle keine Rolle, dass wird später über CSS realisiert. Die Textlinks könnten natürluch auch Bilder sein.

3

Nun geht es daran die Ebenen zu zeichnen die bei Mouseover eingeblendet werden sollen. Viele scheinen bei der Positionierung noch Probleme zu haben, daher ein paar Tips an dieser Stelle.

Am besten eine Größe für die jeweilige Ebene nehmen die sich rechnerisch einfach positionieren läßt. Das heißt, wie im Beispiel oben wurde die Ebene von oben und links 50px positioniert. Die Höhe beträgt 15px. Die erste Ebene darunter muß also 50px von Links und 50px von oben + 15px der Höhe der Linkebene positioniert werden, also von oben 65px. Die exakte Position wird später sowieso in den Styleanweisungen geregelt.

4

Vorerst wird die Positionierung im Eigenschaftenfenster der ausgewählten Ebene eingetragen. Wichtig sind hier die Werte L=Left (von Links); O=top (von oben) für die richtige Anordnung.

Abb.5 / 6

5

Jetzt die weiteren Ebenen. Wenn man nun eine neue Ebene einfach über die alte zeichnet kann es passieren das Dreamweaver die neue in die alte positioniert was dann im Eigenschaftenfenster eine völlig andere Positionsgröße darstellt. Um dies zu vermeiden gibt es mehrere Möglichkeiten. Am besten weitere Ebenen über das Menü: Einfügen-->Ebene hinzuzufügen. Wichtig dabei ist nur, dass der Cursor sich nicht schon in einer Ebene befindet. Ein einfacher Klick irgendwo in die leere Leinwand reicht dabei aus.

6

Für alle weiteren Ebenen kann nun die Top-Position (O=von Oben) im Eigenschaftenfenster wie für die erste einzublendende Ebene übernommen werden (Beispiel 65px). Für die Left (L) Position kann diese am Lineal abgelesen werden. Wenn die Maus auf der Leinwand hin und her bewegt wird folgt ein kleiner Positionsstrich im Lineal, der ist dabei hilfreich. Die Stricheinteilung verläuft in 5 Pixel Einheiten.

Abb.7

7

Nun schreibt jeder seine Links in die jeweilige Ebene. Auch hier ist die Farbe, Größe usw. vorerst egal. So siehts aus.

Abb.8

9

Jetzt müssen die Hauptlinks Home | Links | Kontakt als solche markiert werden. Im folgenden Bild zu sehen. Einen Link markieren und das Zeichen (#) im Eigenschaftenfenster für jeden einzeln einfügen. Damit wird aus markiertem Text ein einfacher Nulllink.

Abb.9

10

Dieses Zeichen ist wichtig, um dem jeweiligen Text überhaupt das Verhalten Ebene ein bzw. ausblenden zuweisen zu können. Das ist wie schon gesagt, nur für Links oder Bilder möglich. Die restlichen Links in den unteren Ebenen bekommen normale Verweise auf die entsprechenden HTML-Dateien.

Links

Teil zwei: Styleformatierung