Popup mit Fireworks 4

TP Login

TP Intern

Popup mit Fireworks 4

In Fireworks 4 eine neue Funktion gegenüber der 3er Version, die Erstellung eines Popups auf schnelle und einfache Weise.

Autor:: ar
Arbeitsmaterial:: download
Schwierigkeit:

1Das Popup

Das Popup kann in FW einer Schaltfläche, einem Segment oder einem Hotspot zugefügt werden. Im Beispiel ein einfaches Rechteck mit Text darüber. Beide markieren und Einfügen --> Segment (Insert-->Slice) wählen. Jetzt ist über dem Auslöser ein grünes Segment. Bei einer evtl. Abfrage ob einzelnes oder mehrere Segmente Einzeln wählen da sonst FW für das Rechteck und den Text jeweils ein Segment einfügt (Abb. 1).

Nun kann diesem Segment das Verhalten Popupmenü zugefügt werden. Dazu auf den weißen Punk im Segment einmal klicken, folgendes Auswahlmenü erscheint (Abb. 2).

Nach dieser Auswahl erscheint das eigentliche Erstellungsfenster. Hier werden die Einstellungen sowie Verlinkung festgelegt. Änderungen sind später aber auch über den Code relativ einfach möglich, am Schluß dazu mehr (Abb. 3).

Menü: Erstellt oder entfernt Menüpunkte. Mit diesem Zeichen kann ein Menü nochmal eingerückt werden. Alle weiteren Links werden dann im eingerückten erzeugt. Man muß dann mit dem links nebenstehenden Zeichen wieder ausrücken falls notwendig.

Text: Ist der Text der im aufgeklappten Menü erscheint.

Ziel: Ist die Art wie die verknüpfte Datei geöffnet wird. Normalerweise braucht hier auch nichts angegeben werden. Im obigen Fall wird die neue Seite als neues Fenster zusätzlich zum ersten geöffnet, also das erste bleibt offen. Wer mit Framesets arbeitet muss den Name des Frames reinschreiben in dem die verlinkte Datei aufgehen soll (z.B. _mainFrame), jenachdem wie der Name des Frames lautet.

Hyperlink: Pfad zur zu öffnenden Datei.

Mit Klick auf Weiter gehts zum Aussehen des Popups. Folgendes Fenster erscheint (Abb. 4).

Zellen:

HTML bedeutet, dass Aussehen wird über einfachen HTML Code geregelt. Dazu noch was zum Schluß.

Bild bedeutet, dass Aussehen wird über Bilder die FW dann automatisch generiert geregelt. Hier ist jedem selbst überlassen was gefällt.

Up- Status: Ist das Aussehen beim aufklappen, ohne die Maus darüber zu bewegen.

Over-Status: Das Aussehen bei MouseOver.

Durch Beenden wird das Popup dann erzeugt und man kann mit F12 dies im Browser testen. Links funktionieren an dieser Stelle aber noch nicht, erst in der richtigen HTML-Datei.

So das wars dann, dass Popup ist fertig. Und jetzt geht der Ärger erst richtig los, was unzählige Nachfragen beweisen. Wer seine Seiten bis auf den Inhalt komplett mit FW macht, hat ausgesorgt. Das einbinden in bestehende Seiten bringt gerade bei der Positionierung noch Ärger satt, genauso wie die Änderung von Links.

2Änderung des Aussehens

Die Änderung des Aussehens wenn im Fenster oben HTML gewählt wurde sowie das Ändern von Links an dieser Stelle. Ein Codeausschnitt aus einem Fireworkspopup auf den es ankommt:

html4strict

function fwLoadMenus() {
if (window.fw_menu_0) return;
window.fw_menu_0 = new Menu("root",52,16,"Verdana, Arial, Helvetica, sans-serif",9,"#000000","#006699","#CCCCCC","#ffffff");
fw_menu_0.addMenuItem("Link 1","window.open('unterordner/link1.html', '_blank');");
...usw.

3Bezeichnung des Popups

fw_menu_0 ist die Bezeichnung für das erste Popup.

Hat man z.B. einem weiteren Segment in FW ein Popup hinzugefügt würde dieses die Bezeichnung fw_menu_1 haben usw. Diesen Code muß man sich nun suchen. Änderungen kann man wie folgt vornehmen ohne dabei jetzt direkt ins Script einzugreifen.

Anbei die Codeteile die mit Hilfe eines HTML-Editors geändert werden können:

html4strict

window.fw_menu_0 = new Menu("root",52,16,"Verdana, Arial, Helvetica, sans-serif",9,"#000000","#006699","#CCCCCC","#ffffff");
52, 16 sind die Breite bzw. Höhe der einzelnen Zellen.
Verdana, Arial, Helvetica.....ist die eingestellte Schriftart.
9 die Schriftgröße.
#000000","#006......die Farben der Schrift und Zellen in folgender Reihenfolge: Schriftfarbe beim Aufklappen, Schriftfarbe bei MouseOver, Zellenfarbe beim Aufklappen, Zellenfarbe bei MouseOver.

4Linkänderung

Anbei ein Beispiel für die Änderung der Links:

html4strict

fw_menu_0.addMenuItem("Link 1","window.open('unterordner/link1.html', '_blank');");
 
Link 1 die Beschriftung im Menü.
unterordner/link1.html Link (Pfadangabe) zu einer Datei.
_blank die Art wie die Ziel-Seite geöffnet wird (siehe Popuperstellung oben)

5Weiteres Beispiel, selbstständiges Browserfenster öffnen

Folgende Beispielzeile öffnet ein neues selbständiges Browserfenster mit Höhe/Breite von 400 Pixel, einer Position von Links 350 px und oben 200px und zeigt in diesem die Datei link1.html an die im selben Verzeichnis wie die aufrufende Datei ist.

Man kann hier so ziemlich alle Verhalten z.B. aus DW einfügen, nur die Schreibweise ist wichtig, da heißts probieren.

javascript

fw_menu_0.addMenuItem("Fenster 1","window.open(' link1.html ', '_blank' , ' width=400, height=400 , left=350 , top=200' ) ;");

6Fazit

Mit FW-Popups kann es noch jede Menge Ärger aber auch Möglichkeiten geben. Man muß immer Aufwand und Nutzen bei Änderungen abwägen.

Man bedenke: Je mehr Spielerei umso größer auch die Wahrscheinlichkeit das dem Anwender letztendlich die Möglichkeit zur Navigation verwehrt bleibt wenn die verschiedenen Browser querschlagen. Hat der Anwender JavaScript im Browser auf Disabled gesetzt ist sowieso Schluß, da hilft nur noch eine gute Sitemap.