Flashtalk
Aktuelles
Startseite
TP Wettbewerbe
Sitemap
Service
Hilfe-Forum
Kolumnen
Linktipps
Buchrezensionen
Traum-Team
Newsletter
Traumquelle
Dreamweaver
Fireworks
Photoshop
Flash
Traum-Start
gimp
GoLive
php / Apache
Sonstige
Grundlagen
Usability
CSS
Apple / Mac
3D
Intern
TP-Sponsor
TP SHOP
Bild Galerie
TP Wallpapers
Forum-Archiv
Link zu uns
Impressum
Zurück  
TP Portal > Fireworks > Popup mit Fireworks 4

Popup mit Fireworks 4

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

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. tooltipp

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

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.tooltipp

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. tooltipp

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.

Die Änderung des Aussehens wenn im Fenster oben HTML gewählt wurde sowie das Ändern von Links an dieser Stelle:

Ein Codeausschnitt auf den es ankommt:

Codeausschnitt aus einem Fireworkspopup
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.

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.

Codeteile die mit Hilfe eines HTML-Editor geändert werden kö
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.

Die Änderung der Links:

Links ändern
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)

Weiteres 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.

Code:

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

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

Fazit: 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.

 

Autor: (ar)

Abbildungen

Abbildung 1 - Segment über dem Auslöser

Abbildung 1 - Segment über dem Auslöser

Abbildung 2 - Auswahlmenü

Abbildung 2 - Auswahlmenü

Abbildung 3 - Erstellungsfenster

Abbildung 3 - Erstellungsfenster

Abbildung 4 - Das Aussehen des Popups wird hier eingestellt

Abbildung 4 - Das Aussehen des Popups wird hier eingestellt

Buchrezension

Coverimage
AJAX Hacks
Dynamische Webseiten mit AJAX programmieren - dieses Handbuch bietet einen praktischen Einblick.
[mehr]
Gimahhot - Shopping
TP-Partner
Sprachreise London
Webmasterpro
Computerhilfen
Computerhilfen
Eventagentur Hamburg
it-rechtsinfo.de
Designguide
Getreidemühlen
sk-typo3
Kochkurs Berlin
Maandiko.de
d. Webdesigner
PSD Tutorials
Medizin
Handy Forum

Hier könnte Ihre Werbung stehen

 >> INFO << 

\ Startseite | Forum | Impressum | nach oben | Seite zurück /