Eine Webseite mit Krefelder Computer Club erstellen.

Es empfehlt sich, erst das Standard-Projekt (das Wasser-Projekt) durcharbeiten, bevor Sie mit dem Web-Projekt beginnen, da nicht alle Schritte nochmals ausführlich beschrieben werden.

Die Version 6 bietet Ihnen die Möglichkeit, Ihr komplettes Projekt als DHTML abzuspeichern und als Webseite ins Internet zu stellen.

DHTML bedeutet dynamisches HTML, d. h. es werden nicht nur stati­sche, sondern auch Webseiten mit Effekten, Animationen und mehr dar­gestellt.

Wenn Sie ein neues Mediator-Projekt erzeugen, ist es vorteilhaft im Web-Modus zu arbeiten, falls das Projekt für das Internet bestimmt ist. Im Web-Modus werden die meisten Funktionen und Werkzeuge ausgeblendet, die nicht in HTML übersetzbar sind.

Tipp: Die normalen Hotspots (Hotspots sind transparente Flächen, die z. B. auf Mausklicks reagieren) können nicht ins HTML übersetzt werden. In diesem Fall verwendet man normale Rechtecke, die man transparent darstellt.

Aufgabe: Das Thema für unsere Webseite wird „Eine Klassenfahrt nach Paris“ sein.

¨      Legen Sie eine neue Datei an (Datei | Neu). Wählen Sie Schnell und Web.

¨      Wählen Sie Ganzer Bildschirm mit Rand. Ändern Sie die Randfarbe von Schwarz auf Weiß, indem Sie die schwarze Schaltfläche anklicken und die Farbe Weiß wählen.

¨      Als Fenstergröße stellen Sie 640 x 480 Pixel ein. Kli­cken Sie auf Fertig stellen.

¨      Speichern Sie das noch leere Projekt auf Ihrer Festplatte ab.

Tipp: Denken Sie immer daran, während der Arbeit zu speichern.

Aufgabe: Auf die Titelseite möchten wir ein Foto und einen Begrüßungs­text einfügen.

¨      Wählen Sie zunächst das Bildwerkzeug . Ziehen Sie einen Rah­men für das Bild über die komplette Seite. Wählen Sie das Bild Pa­ris1. Sie finden das Bild im Ordner Images:

¨      Wenn Sie gefragt werden, ob Mediator Ihren Rahmen an die Bildgröße anpassen soll, entfernen Sie das Häkchen und bestätigen mit OK.

Das Bild überdeckt jetzt die komplette Seite. Falls nicht, stellen Sie die Größe nachträglich ein.

¨      Erstellen Sie einen Überschrift Paris 2002.

Tipp: Beim Übersetzen in DHTML kann es vorkommen, dass Texte besser dargestellt werden, wenn sie als normale Textobjekte eingefügt wurden anstatt als Überschrift-Objekt . Fügen Sie also den Text Paris 2002 als Textobjekt ein. Stellen Sie anschließend die Schriftgröße auf 40.

¨      Erstellen Sie eine neue Seite mit der Bezeichnung Triumphbogen.

Die vorgegebene Seite1 ist wenig aussagekräftig. Benennen Sie diese Seite in Eiffelturm um, indem Sie den Eintrag Seite1 mit der rechten Maustaste anklicken und Umbenennen auswählen.

Tipp: Im Multimedia-Katalog finden Sie unter Web mehr als 200 fertige Webseiten-Vorlagen, die Sie für Ihre Projekte frei verwenden können.

¨      Wählen Sie die Seite Triumphbogen mit einem Mausklick in die Seiten­liste aus und fügen Sie das Bild  Paris2 hinzu. Das Bild muss die ganze Seite füllen. Dies erreichen Sie, wenn Sie mit ge­drückter linker Maustaste den Bildrahmen von oben links nach rechts unten ziehen. Wenn der Rahmen die Seite ausfüllt, lassen Sie die Maustaste los.

Als nächstes werden wir die beiden Seiten miteinander verknüpfen.

¨      Wählen Sie die Seite Eiffelturm in der Seitenliste und öffnen den Multi­media-Katalog . Klicken Sie oben auf den Kartei-Reiter Schalt­flächen und ziehen Sie mit gedrückter Maustaste die blaue Schaltfläche Normal in die rechte, untere Ecke der Seite.

So sollte die Seite aussehen.

¨      Ändern Sie den Text auf Weiter (siehe Standard-Projekt, Schritt 5, Erstellen einer Schaltfläche).

¨      Um den Seitenwechsel zu „programmieren“ klicken Sie die Schaltflä­che mit der rechten Maustaste an und wählen Sie Ereignisse. Verbin­den Sie per Drag & Drop Mausklick mit Seitenwechsel auf die Seite Triumphbogen (siehe Standardprojekt).

¨      Schließen Sie den Dialog und prüfen Sie, ob die Schaltfläche funktio­niert, indem Sie in den Testmodus schalten  und anschließend auf die Schaltfläche klicken. Mit der ESC-Taste beenden Sie den Testmo­dus.

¨      Auf der Seite Triumphbogen erstellen Sie eine neue Schaltfläche, die zurück auf Seite Eiffelturm schaltet.

Ihre Seiten sind jetzt miteinander verknüpft.

Interaktivität auf den Seiten bringen

Die Stärke des Mediators liegt darin, dass den Objekten (Schaltflächen, Bildern, Texten, Seiten, etc.) ein Ereignis zugeordnet werden kann.

Aufgabe: Wenn man mit der Maus über den Eiffelturm fährt, wird ein Er­klärungstext eingeblendet.

Hinweis: Dieses Beispiel können Sie auch für ein Klassenfoto verwenden. Wenn Sie über die einzelnen Schüler mit der Maus fahren, werden die hinterlegten Schülernamen angezeigt.

¨      Klicken Sie in der Seitenliste auf Eiffelturm, das Bild vom Eiffelturm er­scheint rechts auf der Seite. Wählen Sie aus der Werkzeugleiste das Rechteck  aus und ziehen Sie mit gedrückter Maustaste ein Recht­eck über den Eiffelturm. Wie Sie sehen, ist dies keine perfekte Lösung, da der Eiffelturm nicht rechteckig ist. Für das Internet ist dies jedoch die einzige Möglichkeit einen Hotspot zu setzen.

Hinweis: Wenn Ihr Projekt als CD-ROM-Projekt veröffentlicht werden soll, können Sie den Eiffelturm mit dem Vieleck-Werkzeug noch ge­nauer markieren. Für Webseiten werden allerdings nur Rechtecke un­terstützt.

¨      Stellen Sie das Rechteck transparent, indem Sie es mit der rechten Maustaste anklicken und im Kontextmenü die Eigenschaften öffnen.

Aufgabe: Es soll ein Text eingeblendet werden, wenn man mit dem Maus­zeiger über den Eiffelturm fährt.

¨      Schreiben Sie in Schriftgröße 20 den Text, der eingeblendet werden soll, links neben das Rechteck. Verwenden Sie dazu das Textwerkzeug . Geben Sie den text ein (siehe Bild unten).

Der Text soll erst in dem Moment angezeigt werden, wenn der Bet­rachter mit der Maus über den Eiffelturm fährt. Deswegen muss der Text zunächst „versteckt“ werden.

¨      Klicken Sie das Text-Objekt mit der rechten Maustaste an und entfer­nen Sie das Häkchen bei Objekt zeigen. Der Text wird nur ausgeblen­det, aber nicht gelöscht.

¨      Jetzt verknüpfen wir das Ereignis Maus über Eiffelturm mit Zeige den Erklärungstext. Öffnen Sie den Ereignisdialog des Rechtecks mit ei­nem Klick der rechten Maustaste auf das Rechteck und wählen Sie im Kontextmenü Ereignisse aus.

¨      Verknüpfen Sie das Ereignis Maus herein mit der Aktion Zeigen. Wenn Mediator fragt, was Sie beim Maus hereinfahren zeigen möch­ten, wählen Sie Text. Nach Bestätigung können Sie einen Effekt aus­suchen. Bestätigen Sie mit OK.

Hinweis: Im Web-Modus stehen relativ wenige Effekte zur Verfügung, da die Browser dies nicht unterstützen, z. B. „Zoom mittig“.

¨      Damit der Text wieder ausgeblendet wird, wenn der Mauszeiger sich nicht mehr auf dem Eiffelturm befin­det, verknüpfen wir das Ereignis Maus heraus mit der Aktion Ausblenden. Wie beim Zeigen wählen Sie Text wenn Sie danach gefragt wer­den, welches Objekt ausgeblendet werden soll.

¨      Schließen Sie den Ereignisdialog und testen Sie die Seite, indem Sie auf den Schalter  in der Symbolleiste klicken. Wenn Sie jetzt mit der Maus über den Eiffelturm fahren, wird der Erklärungstext eingeblendet.

Nun sind Sie in der Lage interaktive Flächen auf Bildern zu platzieren und diese mit Aktionen zu verknüpfen.

Aufgabe: Auf die Seite Triumphbogen bauen wir jetzt eine Animation (Bewegung eines Objekts) ein.

¨      Klicken Sie auf die Seite Triumphbogen in der Seitenliste und öffnen Sie anschließend den Multimedia-Katalog. Klicken Sie auf den Kartei­reiter Objekte und ziehen Sie das Objekt sun auf die Seite. Platzieren Sie es über dem Triumphbogen.

Der nächste Schritt besteht jetzt darin, die Sonne über die Seite zu bewe­gen, wenn Sie diese Seite aufgerufen. Mit dem Animationspfad-Werkzeug erstellen Sie den Weg, auf dem sich die Sonne bewegen soll.

¨      Klicken Sie auf das Animationspfad-Werkzeug , die Seite wird dunkler.

¨      Klicken Sie mit der linken Maustaste auf die Sonne, Punkt 1 wird ge­setzt. Solange das Plus­zeichen  aktiv ist, werden weitere Punkte gesetzt, wenn Sie auf die Seite kli­cken. Setzen Sie Punkt 2 etwa drei Zentimeter rechts neben der Seite und kli­cken Sie auf das Aus­wahlwerkzeug.

¨      Um eine Kurve zu bekommen, klicken Sie auf das Tangentenwerkzeug . An den grünen Endpunkten können Sie jetzt die Kurve bestimmen, indem Sie mit gedrückter Maustaste die Tangenten ziehen. Falls die Tangenten verschwinden, können Sie diese wiederherstellen, wenn Sie Punkt 1 oder 2 anklicken.

Tipp: Zum Thema Animationen finden Sie ausführliche Informationen im Handbuch.

¨      Schließen Sie den Animationspfad-Dialog .

Aufgabe: Die Sonne soll sich automatisch bewegen, wenn die Seite be­sucht wird. Wir brauchen ein Ereignis, das nicht durch Maus-Aktivität aus­gelöst wird. Das Ereignis heißt Wenn Seite bereit und befindet sich unter Seite | Ereignis.

¨      Ziehen Sie das Ereignis Wenn Seite bereit ins aktive Fenster und ver­binden Sie es mit der Aktion Animieren. Der Animations-Dialog öffnet sich:

¨      Klicken Sie in die kleine Schaltfläche links neben dem Text  Zu animie­rendes Objekt an und wählen Sie die Sonne (Objektname sun). Än­dern Sie die Zeit für die Animation von 1000 Millisekunden auf 8000 Millisekunden. Zum Schluss wählen Sie Vom Objekt aus und bestäti­gen mit OK.

¨      Testen Sie Ihre Seite. Die Sonne bewegt sich über die Seite und ver­schwindet.

Aufgabe: Auf der nächsten Seite soll ein Video gezeigt werden. Als ge­eignetes Datei-Format für das Internet hat sich das wmv-Dateiformat er­wiesen. Die Dateien sind extrem stark komprimiert und lassen sich als Streaming Video abspielen, d. h. das Abspielen des Videos kann angefan­gen werden, ohne dass der Film komplett heruntergeladen werden muss.

¨      Erstellen Sie eine neue Seite mit der Bezeichnung Video.

¨      Ziehen Sie mit dem Media Player Objekt  einen Rahmen für das Video.

¨      Stellen Sie im Dateiauswahl-Dialog den Dateityp auf Alle Dateien, falls Louvre nicht in die Liste erscheint (die Datei „Louvre.wmv wurde Ihnen in der zip-Datei mitgeliefert)“.

¨      Wählen Sie die Datei Louvre und bestätigen Sie mit OK.

¨      Testen Sie Ihre Seite. Falls Ihr Media Player keine wmv-Dateien abspie­len kann, können Sie die benötigten Video-Kodierungen direkt installieren.

¨      Setzen Sie jetzt einen Link von der Video-Seite auf die Seite Triumph­bogen,

bzw. von der Seite Triumphbogen auf die Video-Seite. Programmie­ren Sie die beiden Schaltflächen, dass Sie per Mausklick von einer Seite auf die andere wechseln können.

Speichern als Webseite

Aufgabe. Unser Projekt ist jetzt bereit, als Webseite exportiert zu werden.

¨      Klicken Sie auf Datei | Runtime erzeugen. Verwenden Sie den DHTML- Export. Im Dialog wählen Sie Frames und Ausrichtung mit­tig und bestätigen Sie mit OK. Mediator erstellt einen Ordner namens HTML. Der Inhalt dieses Ordners muss auf einem Web-Server hoch­geladen werden

Sie können Ihre Arbeit betrachten und kontrollieren, wenn Sie auf Vor­schau klicken.

Über Webpost können Sie Ihre neue Webseite hoch laden. Falls Sie keine Webpost installiert haben oder es lieber per FTP machen möchten, brau­chen Sie nur den Inhalt des HTML-Ordners hoch laden.

Ein FTP-Programm ist ein Programm, mit dem Sie Dateien von Ihrem Rechner ins Internet kopieren können. Es gibt viele freie FTP-Programme, die Sie downloaden können. Sie brauchen jetzt nur verfügbaren Web-Space und Ihre Multimedia-Präsentation ist online!