Für die Aufgabe des zweiten Themenkomplexes (Umsetzung einer einfachen Seitennavigation) habe ich mich für das Autorenwerkzeug „Mediator 8 Pro“ der Softwareschmiede MatchWare entschieden. Zwei verschiedene Testversionen (Pro / Exp) stehen auf dem Internetauftritt des Herstellers zur Verfügung, eine Registrierung ist MIT ANGABE der eigenen E-Mail-Adresse notwendig, leidige Werbebotschaften lassen sich jedoch durch das entsprechende Deaktivieren eines „Häkchens“ im Feld „Infos per Mail von MatchWare“ während der Registrierung unterbinden.
Download und Installation
Der Download der rund 50 Mbyte großen Datei läuft mit durchschnittlich 248 KByte/s erfreulich flott über den Datenäther, anschließend leitet eine Setup-Routine (nach Doppelklick auf die heruntergeladene Datei „mediator80_pro_ge_demo.exe“) durch den weiteren Installationsprozess.
Nach der Installation kann das Softwareprodukt unter „Start“ – „Alle Programme“ – „MatchWare“ – „Mediator 8.0 Pro“ – „Mediator (Demo)“ gestartet werden.
Anmerkung: Eine kommerzielle Nutzung ist bei der Demo-Version untersagt, zusätzlich ist die Seitenanzahl auf 5 Stück pro Projekt (die nur 7 Tage nutzbar sind) begrenzt. Auch der Medienkatalog fehlt im Testprodukt – wie dem auch sei, immerhin lassen sich die Grundfunktionen der Vollversion genauer unter die Lupe nehmen.
Nach dem Start des „Mediators“ leitet ein recht übersichtlicher Assistent durch den weiteren Projektverlauf. Drei verschiedene Auswahlmöglichkeiten: „Standard (CD-Rom etc)“, „Flash“ und „HTML“ stehen dabei zur Verfügung. Danach lässt sich der gewünschte Bildschirmmodus: „Fenster(Window)“ , „Ganzer Bildschirm mit Rand“ oder „Ganzer Bildschirm(Fullscreen)“ selektieren um im letzten Schritt des Assistenten die gewünschte Auflösung – die man im Übrigen auch an die individuellen Vorstellungen anpassen kann – auszuwählen. Da das Ziel eine „webbasierte Anwendung“ sein soll, entscheide ich mich für die HTML-Variante.
Anmerkung: Ob MatchWare’s „Mediator 8.0 Pro“ das geeignete Werkzeug für Flash- bzw. HTML-Projekte ist, bleibt fraglich. Für beide bieten alternative Lösungen, etwa „Adobe Dreamweaver“ oder „Macromedia Flash MX“, wesentlich umfangreichere Optionen. Außer Frage steht jedoch, dass der „Mediator“ für CD-ROM-Produktionen ein passables Software-Instrument darstellt.
Realisierung der Projektaufgabe
Nach den obligatorischen Abhandlungen des Projektassistenten erscheint eine leere Seite, die es nun gilt, mit Inhalten zu füllen. Auf der linken Seite des Mediators befinden sich verschiedene Auswahlfenster (Eigenschaften, Seiten, Objekte), darüber eine Werkzeugleiste, aus der unter anderem die Auswahlfunktion, Textfelder, Schaltflächen und Bilder selektiert werden können.
Abb. 1: Die Werkzeugleiste des Mediator
Prinzipiell ist es von Vorteil, zunächst eine Prototyp-Seite mit Navigationselementen (Für die in der Aufgabenstellung vorgegebenen Rubriken „Technik“, „Content“ und „Organisation“), Textfeldern, Überschriften und dem Druck-Button anzufertigen. Diese Elemente der fertigen Prototyp-Seite brauchen später nur noch in die anderen Seiten kopiert werden (die Navigationselemente sind schließlich in allen drei Seiten gleich) – die variablen Inhalte wie Texte und Überschriften lassen sich später schnell anpassen.
Schaltflächen für das Navigationsmenü anlegen
Zunächst wird ein Navigationsbutton (In der Werkzeugleiste den Button „Schaltfläche“ auswählen, auf die Arbeitsfläche wechseln und „ein Rechteck bei gedrückter linker Maustaste ziehen“) angelegt.
Abb. 2: In der Werkzeugleiste kann der Button „Schaltfläche“ zum Anlegen des Navigationsmenüs ausgewählt werden .
Danach kann das Auswahlwerkzeug in der Werkzeugleiste aktiviert werden, um anschließend den angelegten Button im Arbeitsbereich auszuwählen. Der voreingestellte Text kann gelöscht werden, da für die Navigationsleiste externe Bilder (vgl. Material) zur Verfügung stehen. Anschließend kann man im Fenster links („Eigenschaften von Schaltfläche…“) den Button „Bild“ anklicken und wählt im Feld „Bildpfad normal“ die zur Verfügung gestellte Vorlage aus.
Abb. 3: Schaltflächen mit individuellen Bildern versehen
Gegebenenfalls kann nun die Größe der Schaltfläche angepasst werden (Im Arbeitsbereich die Schaltfläche auswählen und an den schwarzen Randpunkten mit gedrückter linker Maustaste ziehen)
Abb. 4: Mit dem Auswahlwerkzeug können Elemente auf der Arbeitsfläche justiert, verzerrt und (später) mit bestimmten Aktionen ausgestattet werden.
Die so erzeugte Schaltfläche muss in einem nächsten Schritt mit der ersten Seite verknüpft werden. Dazu genügt ein Klick im Kontextmenü (rechte Maustaste – Ereignisse), bei der per „Drag&Drop Aktionen miteinander verknüpft werden können. Dazu einfach im linken Bereich „Mausklick“ und im oberen Bereich „Seitenwechsel“ in das zunächst leere Feld ziehen und den passenden Seitennamen angeben.
Abb. 5 – 7: Schaltflächen mit bestimmten Ereignissen verbinden.
Auf diese Weise können nun nacheinander drei Schaltflächen angelegt werden, die zunächst alle auf die eine vorhandene Seite verweisen.
Textfelder für Überschriften und Textinhalte
Um die Prototyp-Startseite fertig zu stellen, werden Textfelder für die Überschrift und den Textinhalt benötigt. Dazu klickt man in der Werkzeugleiste auf den Button „Text“ und zieht bei gedrückter linker Maustaste im Arbeitsbereich ein entsprechendes Feld. Per Doppelklick lassen sich nun Schriftart- und Farbe auswählen. Die in den Vorlage-Dokumenten (Seite1.doc, Seite2.doc, Seite3.doc) bereits vorgehaltenen Inhalte lassen sich bequem per „Copy&Paste“ einfügen.
Abb. 8: Textfelder editieren
Titelbild einfügen
Fehlt noch das Titelbild, welches auf allen drei Seiten erscheinen und im Beispiel am unteren Bildschirmrand positioniert werden soll. Dazu in der Werkzeugleiste den Button „Bild“ auswählen und im Arbeitsbereich mit gedrückter linker Maustaste ziehen. Danach kann das Pixelmaterial (titel.gif) ausgewählt, positioniert und ausrichtet werden.
Abb. 9: Bilder einfügen
Neue Seiten anlegen, Inhalte ändern
Nachdem das Layout der ersten Seite steht, werden im Fenster links (Seiten) per Kontextmenü (rechte Maustaste – „Neu“) zwei weitere Seiten angelegt, da schließlich drei Stück („Technik“, „Content“ und „Organisation“) davon benötigt werden. Diese zunächst leeren Seiten werden nun mit den fertigen Elementen der ersten Seiten (In der Werkzeugleiste den Button „Auswahlwerkzeuge“ anklicken und im Arbeitsbereich bei gedrückter Strg-Taste und linker Maustaste alle Elemente markieren, anschließend im Menü unter „Bearbeiten“ –
„Kopieren“ wählen, auf die zweite Seite wechseln (linkes Fenster „Seiten“) und im Menü „Bearbeiten“ – „Einfügen“ klicken – fertig!
Abb. 10: Neue Seite anlegen
HTML produzieren
Nachdem alle drei Seiten erstellt, verlinkt und mit Inhalten gefüllt sind, soll im letzten Schritt das Mediator-Projekt in das HTML-Format exportiert werden. Dazu im Menü „Datei“ – „Runtime erzeugen“ – „Schnell“ wählen und als Ausgabeformat „HTML(Website)“ markieren. Der Ausgabeordner kann ggf. modifiziert und auf entsprechenden Webspace geladen werden.
Abb. 11-12: Projekt in HTML konvertieren
Finales HTML-Produkt:
Probleme:
Dynamische Navigationselemente mit Mausover-Effekt ließen sich im Mediator ebensowenig einbinden wie die gewünschte Druckfunktion.
Weiterführende Links:
Seminar "Elektronisches-Lernen-Technik" (SELT) 