Workshop Bildergalerie mit MouseOver-Effekt in MAGIX Web Designer 6

Ziel dieses Workshops ist es, eine eigene Bildergalerie zu erstellen, die hnlich wie die Programm eigenen Vorlagen funktioniert. D.h. am Ende soll der Benutzer der Webseite mit der Maus ber ein Foto fahren und in einem greren Bereich soll dieses Bild dann auch grer angezeigt werden. Als erstes erstellen wir ein neues Projekt ber Datei->Neu...->760 Pixel Website. Daraufhin lassen wir uns die Ebenen der Webseite anzeigen. Dies bewerkstelligen wir entweder ber das Tastaturkrzel F10 oder ber Extras->Galerien->Seiten & Ebenen-Galerie. Nun sehen wir ein neues Fenster auf der Arbeitsoberflche und der Bildschirm knnte jetzt in etwa wie in Abbildung 1 aussehen.

Abbildung 1 Beachten Sie auf jedenfall, dass die MouseOff-Ebene aktiviert ist. Dies ist die Standard-Ebene der Webseite, welche immer angezeigt wird. Wir erstellen nun das grundlegende Design unserer Galerie. Hierbei stellt das Vorgehen wie ich es beschreibe lediglich ein beispielhaftes Vorgehen und kann je nach belieben variiert werden. Nun whlen sie aus der Werkzeugleiste an der linken Seite das Rechteck-Werkzeug . Nun ziehen sie ein groes Rechteck als Anzeigeflche fr die groen Bilder und vier kleine Rechtecke. Bei mir sieht die Webseite dann aus wie in Abbildung 2 veranschaulicht.

Abbildung 2

Nun bauen wir die Bilder in die dafr vorgesehenen Umrandungen ein. Dafr klicken Sie mit der rechten Maustaste in das linke obere kleine Rechteck und whlen im daraufhin erscheinenden Kontextmen (Abbildung 3) Bitmap auswechseln.

Abbildung 3 Nun erscheint der Standarddialog von Windows fr das ffnen von Dateien. Hier whlen sie nun das Bild aus, welches beim Aufrufen der Webseite von Anfang an angezeigt werden soll (Bsp. in Abbildung 4).

Abbildung 4

m groen Rechteck gehen sie nun genauso vor und fgen exakt das selbe Bild ein, wie zuvor in das kleine Rechteck. Nun fllen sie noch die restlichen kleinen Rechtecke mit anderen Bildern (diese werden dann am Ende per MouseOver-Effekt im groen Rechteck angezeigt). Am Ende msste ihre Webseite in etwa so aussehen wie in Abbildung 5.

Abbildung 5 Nun kommen wir zum eigentlichen Effekt der Bildergalerie. Der aktuelle Stand der Webseite stellt unsere Grundlage fr die weiteren Ebenen der Bildergalerie dar. Deshalb klicken wir nun mit der rechten Maustaste auf die MouseOff-Ebene und whlen Ebene duplizieren (Abbildung 6).

Abbildung 6 Geben sie der Ebene den Namen Bild2, da wir nun den MouseOver-Effekt fr das zweite Bild erstellen. Whlen sie die Ebene Bild2 am besten durch den Solo-Modus (nur Web Designer 6) wie in Abbildung 7 zu sehen (rotes S). Abbildung 7 Markieren sie nun das groe Rechteck, whlen eine Farbe aus der Farbwerkzeugleiste am unteren Bildschirm aus und klicken mit der linken Maustaste darauf. Im nun erscheinenden Kontextmen whlen sie Fllfarbe definieren (Abbildung 8).

Abbildung 8 Als nchstes markieren sie erneut das groe Rechteck und wechseln, wie bereits mehrfach durchgefhrt, das Bitmap des groen Rechtecks aus (siehe Abbildung 3). Im folgenden Dialog whlen sie das Bild aus, welches bereits als Bild im zweiten kleinen Rechteck vorkommt. Lschen sie nun in der Ebene Bild2 die vier kleinen Rechtecke (sie sind bereits in der Ebene MouseOff enthalten und werden nur dort gebraucht).

Wechseln sie nun in die Ebene MouseOff, klicken sie mit der rechten Maustaste auf das kleine Rechteck mit dem zweiten Bild und whlen im erscheinenden Kontextmen Webeinstellungen (Abbildung 9).

Abbildung 9 Im nun erscheinenden Dialog whlen sie den Reiter MouseOver (Abbildung 10) und whlen in der Auswahl Popup-Ebene die Ebene Bild2.

Abbildung 10 Das gleiche Vorgehen wiederholen sie nun fr die Bilder 3 und 4. Dann ist ihre Bildergalerie fertig und sie knnen sie benutzen.