Im Menü „Datei“ befindet sich an erster Stelle „Neu“. Bei Anwahl mit der Maus öffnet sich ein neues Untermenü. Durch Auswahl des zweiten Menüpunktes „Web“ erscheint ein neues Fenster. Hier können Sie zwischen verschiedenen Web-Vorlagen wählen. Sobald eine Vorlage ausgewählt wird, erscheint deren Beschreibung auf der rechten Seite.

Zunächst soll ein einfaches „Standardweb“ mit einer Startseite erstellt werden. Als Adresse des neuen Webs geben Sie  zunächst die lokale Festplatte „d:\WEB“ an.

Das erscheinende Fenster ist in folgende Hauptbereiche eingeteilt:

1.Programmleiste -> hier erscheint der Programmname: „Microsoft Frontpage“ und der Webname: „d:\WEB“.

2.Menüleiste –> diese lehnt sich im Aufbau an die Office-Programme an.

3.Symbolleiste Standard –> hier befinden sich häufig verwendete Befehle in Form von Buttons. Die Ordnerliste ist aktiviert.

4.Symbolleiste Format –> in dieser Leiste sind die Formatierungsbefehle als Buttons verfügbar.

5.Ansichten-Fenster -> dieses Fenster ermöglicht den Wechsel zwischen den verschiedenen Ansichten – es lassen sich durch Umschalten die  Inhalte der beiden weissen Fenster verändern.

6.Ordnerliste -> gibt die im Web enthaltenen Ordner wieder

7.Editierfenster Normal -> In diesem Fenster wird der im Internet erscheinende Inhalt editiert. Wichtig sind die verschiedenen Registerkarten am unteren Rand des Fensters:
Normal -> Der WYSIWYG – What You See Is What You Get – „Was Sie sehen, bekommen Sie-Modus“.
HTML -> Der erzeugte und veränderbare HTML-Code.
Vorschau -> Was Sie wahrscheinlich im Browser angezeigt bekommen.
Das Wort „wahrscheinlich“ wird aufgrund der Tatsache verwendet, daß die verschiedenen Browser-Versionen Netscape 3.0, 4.0, 4.5, und Internet Explorer 3.0; 4.0; 5.0 die editierten Inhalte verschieden darstellen.

8.

Im Editierfenster können Sie folgenden einfachen Inhalt schreiben:

Hallo Internet

Durch Umschalten zwischen:  Normal – HTML – Vorschau können Sie das Ergebnis Ihrer Arbeit sehen.

HTML HyperText Markup Language ist eine Auszeichnungssprache. Die Befehle dieser „Internet-Sprache“ werden vom Browser interpretiert und die Information entsprechend der verwendeten Befehle dargestellt. Die Information erhält damit die gewünschte Darstellungsform – also Auszeichnung.

Der „Tag“ besteht aus dem Befehl und zwei spitzen Klammern. Fast alle Befehle bestehen aus einem Anfangs-Tag und einem Ende-Tag, also zwei Befehlen. Dazwischen liegt der Gültigkeitsbereich eines solchen Tags.

Der Kopfteil wird gekennzeichnet durch die beiden „head-Tags“. Alle Informationen die im Kopfteil stehen werden nicht dargestellt.

Informationen die im „body“ (Körper) stehen, werden im Browser normalerweise dargestellt.

Klicken Sie am unteren Rand des Editierfensters auf den Reiter „Vorschau“, so erscheint die Seite in der Art und Weise wie Sie wahrscheinlich im Browser dargestellt wird.

Sie können die Seite auch direkt im Browser anschauen. Hierzu betätigen Sie den Button „Vorschau in Browser“, welcher sich rechts vom Symbol „Drucken“ in der Standard-Symbolleiste befindet. Da Sie die Seite wahrscheinlich noch nicht gespeichert haben, werden Sie aufgefordert, die Seite zu speichern. Ein Vorschlag für den Datei-Namen erhalten Sie unmittelbar. Klicken Sie auf OK, öffnet sich der Browser und Ihre Seite erscheint.

Beachten Sie im Browser das Feld Adresse. An  D:\  erkennen Sie, dass es sich um eine lokale HTML-Datei auf Ihrem Rechner handelt. Damit diese Seite im Internet global verfügbar wird, muss diese Seite auf einem Internet-Server veröffentlicht werden.

Dieser Dienst wird von vielen Providern angeboten, Beispiele und Anleitungen sind unter folgenden Adressen zu finden;

T-Online: http://www.t-online.de/service/  im Punkt Web-Präsenz

Schlund und Partner: http://www.schlund.de

Für diesen Kurs können die Seiten bei folgenden Internet-Information-Servern veröffentlicht werden:

http://www.hit-karlsruhe.de/  -> linker Frame:  Webseitenerstellung

Oder

http://www.bbbank-Forum/FP2000/Name

Im Menü Datei befindet sich der Menüpunkt: „Web veröffentlichen“. Alternativ finden Sie  „Web veröffenlichen“ als Button in der Standardsymbolleiste – rechts vom Button „speichern“. Durch einen Klick auf diesen Button öffnet sich das Fenster „Web veröffentlichen“. Hier geben Sie die Adresse des Web-Servers gefolgt durch einen Namen mit zweistelliger Nummer ein: http://195.143.78.129/Name##. Danach betätigen Sie den Button veröffentlichen.

Damit nicht jede beliebige Person Ihr Web verändern kann, muss noch Ihr Name und ein Passwort eingegeben werden. Dieses Passwort erhalten Sie vom Provider oder Ihrem Rechenzentrum.

Jetzt wird Ihr diskbasiertes Web in ein serverbasiertes Web verwandelt und ist auf dem Web-Server zu erreichen. Ist dieser Vorgang beendet, erscheint ein Fenster mit der Möglichkeit das Web sofort unter dem Browser anzusehen.

Probieren Sie dies aus. Ihr Web ist jetzt unter der Adresse:

www.bbbank-forum.de/name## 

erreichbar.

Relative Links sind Querverweise, welche innerhalb Ihres eigenen Webs liegen. Diese Querverweise sind zu bevorzugen. Sie müssen Ihre Links nicht verändern, wenn Sie Ihr Web auf einem anderen Server veröffentlichen wollen. Außerdem bleiben die Benutzer innerhalb Ihres Webs.

Zur Erstellung rufen Sie die Seite: „index.htm“ auf. Hier editieren Sie wie im oberen Bild gezeigt:

Homepage von Name

 

Der erste Link zu „Hallo Internet“.

Aktivieren Sie den Teil „Hallo Internet“ und betätigen Sie den Button „Hyperlink einfügen“. Das Fenster „Hyperlink erstellen“ erscheint. Durch anwählen der Seite „hallo_internet.htm“ ändert sich die URL: Uniform Resource Locator = Adresse. Betätigen Sie OK – damit schließt das Fenster und der Teil „Hallo Internet“ wird farbig hinterlegt und unterstrichen.

Sie können diesen Link gleich testen, indem Sie die „STRG“-Taste betätigen und gleichzeitig mit der Maus auf den Hyperlink klicken. Wie kommen Sie nun wieder zurück?

Am einfachsten Sie erstellen gleich nochmal einen Link zurück auf die Seite „index.htm“.

Einen absoluten Link können Sie erstellen, indem Sie den Text:

Der erste absolute Link auf die Seiten der BBBank

auf der Webseite index.htm eingeben und dort BBBank aktivieren. Nach betätigen des Buttons „Hyperlink einfügen“ erscheint das „Hyperlink erstellen“-Fenster. Hier geben Sie als URL folgendes ein:

http://www.bbbank.de

Sobald Sie auf andere Seiten verweisen, empfiehlt es sich ein neues Fenster aufzurufen. Hierdurch bemerkt der Benutzer, dass er Ihre Seiten verlässt. Gleichzeitig bleibt Ihre Seite auf dem Bildschirm des Benutzers bestehen und der Benutzer kann wieder einfach auf Ihre Seiten gelangen.

Es gibt aber verschiedene Meinungen zu diesem Thema – manche Surfer beschweren sich über zuviel geöffnete Fenster!

Was ist nun richtig? Diese philosophische Frage kann letztendlich nur in der vollkommenen Abgeschiedenheit des Himalaya in 4500m Höhe beantwortet werden.

Die Wichtigkeit dieses Punktes wird meist unterschätzt! – und damit zu wenig Zeit und Geld in diese wichtigen Fragestellungen investiert. Auch in diesem Kurs ist dies der Fall.

Hierzu wird ein extra Kurs „Wissensmangement“ angeboten, in dem der Umgang mit dem Werkzeug „Mindmanager“ vermittelt wird.

Insbesondere in Firmen müssen diese Grundüberlegungen stattfinden.

Wie soll das Internet genutzt werden?

Hieraus ergeben sich dann die entsprechenden Inhalte.

Die Grundüberlegungen zu diesem Kurs sind in der erweiterten Mindmap aufgeführt.

Internet als elektronische Litasssäule:

Dies ist die einfachste Form – aber bereits hier sind wesentliche Inhalte zu berücksichtigen. Wichtige Inhalte sind hierbei:

Anschrift des Unternehmens, Ansprechpartner

Telefonnummern, E-Mail, evtl. FAX, 

Anfahrtsplan

Internet als interaktives Medium:
Der Benutzer gibt Daten ein – Evaluiert die Firma – ließt in FAQs – diskutiert in einem Forum – hält Videokonferenzen mit Ansprechpartnern in der Firma ab. Diskutiert in Shared Documents!

Internet als Datenerfassung:

Aufgrund der erfassten Fragen und der Zugriffe auf Seiten zu einem Programm findet eine gezielte Weiterentwicklung des Programmes fort. Stellen die Kunden beispielsweise immer wieder Fragen zu den Themen: Wie fülle ich eine Überweisung aus folgt daraus, dass das verwendete Programm an dieser Stelle verbessert werden muß.

Weiterhin gehört zu diesem Punkt die Analyse der Trampelpfade! – Websuccess – www.schlund.de

Internet als Datenerfassung und Ausgabe:

Koppelt man beispielsweise das Warenwirtschaftssystem einer Firma mit dem Internet, erzeugt der Kunde durch seine Eingaben bereits die Rechnung – Lieferschein – Versendung und die Abwicklung der Bezahlung.

Internet als zentrales Werkzeug zur Informationsverarbeitung!

Dies ist der Idealfall – Bundespräsident Herzog nannte den Umgang mit dem Internet eine fundamentale Kulturtechnik – Eröffnungsrede CEBIT 1999

Dieser Idealfall wird in spätestens 10 Jahren in hochentwickelten Ländern Standard sein! D.h. 67% der Bevölkerung können mit dem Internet umgehen!

Wir setzen nun den Kurs mit der Realisation WEB fort und studieren weitere Grundtechniken.

In der Folie „Webs erstellen – veröffentlichen – lesen“ wurde das Zusammenspiel zwischen den verschiedenen Komponenten: „Editor – Server – Browser“ – dem Internet Seitenerstellungsprogramm, dem Server des Providers und dem Browser des Benutzers aufgezeigt. Jedes Programm für sich erfährt eine sehr schnelle Weiterentwicklung, der jedoch nicht jeder Benutzer folgen kann. In diesem Kurs sollen die Möglichkeiten aufgezeigt werden, deshalb wird die in der Folie gewählte Einstellung gezeigt.

Wird beispielsweise auf die Kompatibilität zu Netscape geachtet, können verschiedene Menüpunkte innerhalb von Frontpage nicht aufgerufen werden. Ein Beispiel hierfür ist die Einbindung eines Videoclips.

Es ist ein sehr hoher Aufwand, eine Version für beide Browser herzustellen. Insbesondere die Seitenabstände werden in den Browsern unterschiedlich dargestellt.

Zuweisen eines Designs:

Hierdurch ergibt sich ein durchgängiges Erscheinungsbild für das gesamte Web. Die Schriftgrößen, die Farben, die Buttons, die Hyperlinks werden aufeinander abgestimmt dargestellt.

Betätigen Sie den Button ändern -> Nunmehr können Sie Farben, Grafiken und Text ändern. Wollen Sie beispielsweise den Text ändern können Sie die gewünschte Schriftart auswählen oder mit „Weitere Textvorlagen“ die Formatvorlagen für HTML ändern. Die Vielzahl der Möglichkeiten ist zum Einstieg ungeheuerlich. Detaillierte Beschreibungen über jeden Befehl finden Sie im Kompendium „Selfhtml von Stefan Müntz“ http://www.netzwelt.com/selfhtml.

Durch Wahl eines Designs in Frontpage gilt :

Sobald im Pull-Downmenü der Schriftauswahl-Zeichen und der Schriftgröße-Schriftgrad Standard steht, werden die  gewählten Formatvorlagen aktiv.

In der Seite index.htm können nun folgende Änderungen durchgeführt werden:

•Die Überschrift „Homepage von“ wird aktiviert und in der Formatvorlage der Menüpunkt „Überschrift1“ aktiviert.

•Zur Kontrasterhöhung kann der Hintergrund entfernt werden: Menü „Format“ – „Design“ – im Design-Fenster die Checkbox Hintergrund deaktivierten.

•

Im Menü „Format“ rufen Sie den Menüpunkt „Formatvorlage“ auf. Es erscheint das Fenster Formatvorlage. Scrollen Sie in den Formatvorlagen nach unten, bis Sie auf den Selektor h1 stoßen. Mit einem Doppelklick lösen Sie „Formatvorlage ändern“ aus. Jetzt können Sie beliebige Änderungen durchführen.

Übung:

In der Seite „hallo_internet.htm“ aktivieren Sie die Überschrift „Hallo Internet“. In der Formatleiste können Sie das gewünschte Format „Überschrift 1“ auswählen. Wenn Sie in das HTML-Fenster wechseln, erkennen Sie im HTML-Code ,dass der Selektor h1 eingesetzt wurde.

Auf der Homepage: „index.htm“ fügt man eine E-Mail ein, indem Sie beispielsweise „E-Mail“ als Text einfügen und diesen Text aktivieren. Durch anklicken des Buttons „Hyperlink“ erscheint das Fenster „Hyperlink erstellen“. Hier klicken Sie auf „Einen Hyperlink erstellen, der ein E-Mail sendet“. Hierdurch erscheint das Fenster E-Mail-Hyperlink erstellen. Tragen Sie in das Feld: „E-Mail Adresse“ Ihre E-Mail-Adresse ein. Bestätigen Sie in jedem Fenster mit „OK“.

Speichern und veröffentlichen Sie Ihre Seiten. Anschließend können Sie das Ergebnis sofort im Browser testen.

Klickt der Benutzer auf den Hyperlink Ihrer E-Mail-Adresse wird das jeweils auf dem Benutzerrechner installierte E-Mail-Programm aufgerufen. Inzwischen arbeiten viele Benutzer an allgemein zugänglichen Rechnern im Internet. Auf diesen Rechnern hat der Benutzer aber kein persönliches Postfach. Deshalb wird meist ein E-Mail-Dienst wir www.gmx.de oder web.de benutzt. Sinnvoll ist es daher, die vollständige E-Mail-Adresse anzugeben.

Ebenso ist es sehr zu empfehlen, die Telefonnummer und die Adresse anzugeben. Benutzer Ihrer Seite können dann sehr einfach die Adresse kopieren und in eigene Dokumente oder Adressprogramme übernehmen.

Frames - Rahmen

Neue Frameseiten werden erstellt, indem Sie in der linken Navigationsleiste auf die Seitenansicht klicken. Anschließend wählen Sie im Menü „Datei“ den Menüpunkt „Neu“ und im neuen Fenster den Menüpunkt „Seite“. Das Fenster „Neu“ wird durch diese Aktionen geöffnet. Hier können Sie bei den Registerkarten: Allgemein – Framesseiten – Stylesheets den Reiter „Framesseiten“ anklicken. Sehen Sie sich die verschiedenen Möglichkeiten durch Anklicken an.

Für den weiteren Aufbau Ihrer Homepage wählen Sie „Navigationsframe oben“ aus.

Natürlich können Sie später jede beliebige Framesseite auswählen. Für den weiteren Kursverlauf ist der vorgeschlagene Weg sinnvoll, da andere Übungen auf dieser Framesseite aufbauen.

Bestätigen Sie mit OK oder machen Sie einen Doppelklick auf das Frameset. Es erscheint eine neue Seite mit zwei Rahmen. Hier können Sie die Startseite festlegen – falls bereits eine vorhanden ist – oder jetzt zur Übung den Button „Neue Seite“ anwählen.

Erstellen Sie zwei neue Seiten für das Frameset – Rahmenkombination wie oben dargestellt. Speichern Sie diese Seiten mit den Namen:

fp2000_frame_oben.htm Dies ist die Seite im Inhaltsframe dargestellt

fp2000_Frame_hauptseite.htm  Dies ist die Seite im Hauptseitenframe dargestellt

fp2000_frameset.htm Dies ist der Frameset – die Rahmenkombination

Erstellen Sie auf der Startseite „index.htm“ einen Link zu dem Frameset.

Wechseln Sie jetzt einmal in die Ansicht Hyperlinks.

In der Ansicht: Hyperlinks sehen Sie sehr schön die Struktur und den Aufbau der Querverweise. Gleichzeitig wird angezeigt , ob ein Hyperlink unterbrochen ist, indem die Linie durch zwei senkrechte Striche unterbrochen ist. In diesem Fall wurde die Seite index.htm noch nicht gespeichert. Bei Speicherung der Seite wird die Linie verbunden.

Weiterhin erkennen Sie denn Querverweis von der Seite hallo_internet.htm auf die Seite index.htm. Klicken Sie auf der Ordneransicht auf die verschiedenen Seiten, so bekommen Sie die jeweiligen Querverweise angezeigt.

Sehr schnell wird die Betreuung von Webseiten unübersichtlich. Es ist deshalb sehr ratsam bedeutungsvolle Namen zu vergeben. In diesem Fall wurden alle Seiten, die sich mit der Thematik „Seitenerstellung befassen“ mit fp2000_ begonnen. Außerdem ist es auch sinnvoll, alle zu einem Projekt gehörigen Seiten in einen Ordner zu verschieben.

Klicken Sie mit der rechten Maustaste auf Ihren obersten Ordner im Laufwerk, so erscheint ein Menü in dem Sie im zweiten Menüpunkt einen neuen Ordner erstellen können.

Benennen Sie den Ordner mit „fp2000“. Die neue Struktur erhalten Sie, indem Sie mit der linken Maustaste die jeweils mit „fp2000“ beginnende Datei anklicken und durch Halten der linken Maustaste diese Datei in den neuen Ordner ziehen.

Beim Einfügen von Multimedia-Elementen wie Bilder oder Filme müssen Sie sehr darauf achten, dass die Bilder in der Größe vorliegen in der diese später eingebunden werden. Sie können zwar ein hochauflösendes Bild nehmen und dieses in Frontpage verkleinern – aber die Umrechnung findet erst im Browser des Betrachters statt. Die Ladezeiten solcher Bilder verlängern sich hierdurch enorm. Diese Sachverhalt besteht ebenso bei Videos oder Animationen.

Da Bilder sehr viel Informationen enthalten und meist sehr hochauflösend vorliegen, wird im Internet mit komprimierten Bildern gearbeitet. Standard sind die beiden Formate und der jeweilige Einsatzfall:

*.jpg  JPEG Joint Picture Expert Group – Einsatzfall: Photos.

*.gif  GIF Graphic Image Format  - Einsatzfall: Screenshots und Bilder mit gleichmässigem Hintergrund. Es besteht die Möglichkeit, eine Farbe als transparente Farbe festzulegen.

*.png PNG Picture Network Graphics – Vereint die Vorteile von GIF und JPG.

Bei Screenshots werden Sie meist das GIF-Format einsetzen. Bei allgemeinen Bildern und Photos meist das JPEG-Format.

Haben Sie beispielsweise eine Gruppenaufnahme von Ihren Kolleginnen und Kollegen können Sie jeweils die Köpfe markieren und einen Querverweis – Link auf deren Homepage schalten. Eine solche Markierung nennt man Hotspot – Heisser Punkt.

Möchten Sie nicht nur in Bild anzeigen, können Sie mit einer Bildreihenfolge arbeiten. Möchten Sie dynamische Vorgänge veranschaulichen empfiehlt sich das Daumenkino. Hierfür gibt es spezielle Programme, um solche Animated GIFs herzustellen.

Beim Einbinden von Sprache und Musik sollte man dem Betrachter der Seite überlassen, ob die Geräusche abgespielt werden. Es ist sehr störend, wenn solche Geräusche bei jedem Aufruf der Seite zu hören sind.

Werden Videos eingebunden, sollte der Betachter als auch Ihr Provider entsprechende Übertragungsgeschwindigkeiten ermöglichen. Hierbei ist bei TV-Qualität mindestens ein T-DSL-Anschluss mit 300KBit/s Voraussetzung. Da aber bereits 50% aller Telefonanschlüsse bereits mit dieser Technik ausgestattet werden könnten, ist der Einsatz nicht abzulehnen.

Für Illustrationen müssen spezielle Programme wie Macromedia Director oder Toolbook eingesetzt werden.  

1.Rufen Sie den Dialog „Speichern unter“ in Fronpage auf und betätigen Sie die Tastenkombination <ALT & Druck>. Hierdurch wird das aktive Fenster in die Zwischenablage kopiert.

2.Mit dem Button „Abbrechen“ können Sie das Fenster „Speichern unter“ schließen. Unter Frontpage finden Sie Im Menü „Bearbeiten“ den Menüpunkt „Einfügen“. Hierdurch  fügen Sie den Inhalt der Zwischenablage in Frontpage ein.

3.Speichern Sie zwischendurch Ihre Arbeit. Die Bilder werden voraussichtlich nur in dieser Rubrik benutzt und können deshalb in diesem Ordner gespeichert werden. An verschiedenen Orten benutzte Bilder, wie beispielsweise ein Logo speichert man sinnvoller weise im Ordner „images“.

1.Rufen Sie im Internet die Adresse: http://www.hit-karlsruhe.de/radio auf. In der Sendung hörbar finden Sie den Punkt „Börsen-Forum“. Klicken Sie diesen an, erscheinen zwei neue Fenster – ein Fenster „Windows Media Player“ und ein Fenster mit Bildern. Klicken Sie mit der rechten Maustaste auf das Bild „Blick auf Projektion“ und betätigen den Menüpunkt „kopieren“. Hierdurch wird das Bild wieder in die Zwischenablage kopiert. Wechseln Sie auf die Frontpageseite „einbinden_von_multimedia“ und fügen Sie dort durch die Tastenkombination <Strg & V> das Bild ein.

2.Klicken Sie auf das vorher eingebundene Bild, so erscheint im unteren Bildschirmbereich eine neue Leiste mit Bildbearbeitungsfunktionen:
01. Grafik aus Datei einfügen
02. Text
03. AutoMiniaturansicht
04. Absolut positionieren
05. In den Vordergrund
06. In den Hintergrund
07. Links herum rotieren
08. Rechts herum rotieren
09. Horizontal kippen
10. Vertikal kippen
11. Mehr Kontrast
12. Weniger Kontrast
13. Mehr Helligkeit
14. Weniger Helligkeit
15. Zuschneiden
16. Transparente Farbe festlegen
17. Schwarzweiss
18. Verwaschen
19. Abgeschrägter Rand
20. Erneut einlesen
21. Markieren
22. Rechteckiger Hotspot
23. Runder Hotspot
24. Polygonförmiger Hotspot
25. Hotspots markieren
26. Weitere Schaltflächen

1.Im Programm Frontpage aktivieren Sie bitte das eingefügte Bild.

2.Klicken Sie auf den Button „rechteckiger Hotspot“ und markieren einen beliebigen Notebook innerhalb des Bildes am Arbeitsplatz. Hierdurch öffnet sich das Fenster „Hyperlink erstellen“.

3.Um in der Dateistruktur Ordnung zu halten, ist es sinnvoll zuerst den Ordner „fp2000“ zu öffnen.

4.Danach wird eine „Neue Seite“ erstellt. Diese Seite beschreibt den Aufbau des einzelnen Arbeitsplatzes oder den Aufbau des Rechners.

5.Speichern und veröffentlichen Sie Ihre Arbeit und sehen Sie sich das Ergebnis im Browser an. Hier werden Sie bemerken, dass noch kein Link auf die Seite „einbinden_von_multimedia“ existiert

Da innerhalb eines Projektes mehrere Seiten anfallen, ist es sinnvoll eine allgemeine Navigationsstruktur zu entwickeln. Hierzu verwenden wir die QuickBar aus dem Standardwerk zur Seitenerstellung „selfhtml“ von Stefan Münz.

Um wechselnde Bilder zu erzeugen, müssen Sie zuerst einen Satz von farblich zusammenpassenden Bildern aussuchen. In diesem Fall verwenden wir folgende Bilder aus dem Internet oder von der Kurs-CD:

a)Blick auf Projektion.jpg

b)Blick auf Theke.jpg

c)Rechner-finger.jpg

1.Kopieren Sie die Bilder in die Frontpage2000-Datei: einbinden_von_multimedia.htm

2.Verwandeln Sie alle Bilder in die Größe „AutoMiniaturansicht“ – diesen Befehl finden Sie in der Bildbearbeitungsleiste.

3.Jetzt rufen Sie im Menü „Einfügen“ über das Untermenü „Komponente“ den „Anzeigenwechsler“ auf.

4.In dem erscheinenden Fenster „Anzeigenwechslereigenschaften“ können Sie die gewünschten Dateinamen, Übergangseffekte und einen „Link“ eintragen.

5.Mit OK schließen Sie den Vorgang ab und speichern das Ergebnis unter Frontpage. Bereits in der Vorschau können Sie das Ergebnis sehen.

6.Veröffentlichen Sie Ihr Ergebnis und sehen Sie sich Ihre Arbeit im Browser an.

7.

Um animierte Bilder – Daumenkinos zu erstellen, gibt es zahlreiche Programme und auch fertige animierte GIFs. Programme zum Erstellen der animierten Bilder finden Sie beispielsweise bei www.freeware.de, im Programm Paint Shop Pro sowie im Image Composer von Microsoft. Ein sehr gutes Programm gibt es von Ulead: www.ulead.de.

Um eine animiertes GIF einzubinden führen Sie folgende Schritte durch:

1.Wahl des GIFs

2.Klick mit rechter Maustaste auf das Bild

3.Einfügen in Frontpage an die gewünschte Stelle.

4.Speichern als eingebettete Datei

5.

Eine eingebettete Datei lässt sich nicht durch Bearbeitung des Bildes im ursprünglich verwendeten Programm ändern. Das Element ist fest in die Datei eingefügt. Bei einer Verknüpfung ändert sich das Bild, sobald es im ursprünglich verwendeten Programm geändert wird.

Sound ist ein sehr allgemeiner Begriff und wird für alle möglichen Arten von Geräuschen, Klängen, Musik und Sprache verwendet. Bei Verwendung solcher Dateien wird meist ein Komprimierungsverfahren angewendet oder die Dateien liegen bereits komprimiert vor. Häufig verwendete Verfahren sind:

*.mp3–Format  von der Fraunhofer Gesellschaft entwickeltes Format

*.asf-Format ASF Advanced Streaming Format – ein von Microsoft entwickeltes Format zur Verwendung im Internet und zur allgemeinen Speicherung auf Datenträgern.

Das am häufigsten verwendete Programm zum Abspielen von von *.mp3-Dateien ist der als Freeware erhältliche Player: Winamp

Der Media-Player von Microsoft spielt ebenfalls alle Sounddateien ab.

Bitte berücksichtigen Sie, dass Sound-Dateien trotz Komprimierung meist mehrere MB groß sind. Sie werden deshalb bei Ihrem Provider entsprechens viel Platz reservieren müssen.

Übung:

1.Kopieren Sie von der GO!-CD – Fun – Music-Teil den Teil mit den Titeln.

2.Fügen Sie diesen Teil in Ihre Seite: Enbinden_von_multimedia.htm ein. Sie erkennen hierbei, dass es sich um eine Tabelle handelt. Die Musikdateien haben Sie bisher noch nicht kopiert!

3.Erstellen Sie hierzu einen neuen Ordner im Ordner fp2000 mit dem Namen Multimedia-Dateien.

4.Erstellen Sie im Ordner Mulimedia-Dateien einen neuen Ordner: MP3

5.Wechseln Sie auf die GO!-CD und klicken Sie mit der rechten Maustaste auf die jeweiligen Liedtitel.

6.Kopieren Sie den Titel.

7.Fügen Sie die Datei in den Ordner: fp2000/MP3 ein

8.Wiederholen Sie Schritt 5-7 bis alle gewünschten Dateien vorhanden sind.

9.Erstellen Sie die notwendigen Hyperlinks und testen Sie Ihre Arbeit im Browser.

Mit Hilfe eines ActiveX-Steuerelementes können Sie sehr einfach ein Video inklusive den Bedienungstasten des Players einbinden. Wie diese Einbindung erfolgt, führe ich Ihnen am Beispiel des Filmes „Badday“ in einer sehr hohen Auflösung vor. Berücksichtigen Sie aber, dass die Dateigröße ca. 5 Mbyte beträgt.

Für die Anwendung im Internet können Sie das Video „Baddaysym.mpg“ einbinden. Dies ist für eine Übertragungsgeschwindigkeit von 56KBit/s optimiert.

Führen Sie hierzu folgende Übung durch.

1.Erstellen Sie in der Ordneransicht unter Frontpage einen neuen Ordner „Video“ im Ordner fp2000/Multimedia-Dateien

2.Kopieren Sie das Video „baddaysym.mpg“ in diesen Ordner.

3.In den Menüs „Einfügen – Bild – Video“ rufen Sie den Dialog Video auf.

4.Der Dateiname erscheint nicht im Fenster, rufen Sie deshalb „Datei“ auf.

5.Wählen Sie die Datei: „baddysym.mpg“ aus.

6.Mit Bildeigenschaften – bei einem Klick mit der rechten Maustaste erscheint das Kontextmenü – können Sie die Größe im Register „Erscheinungsbild“ auf 128x96 ändern.

7.Ändern Sie bitte bei den Bildeigenschaften noch den Start in „Wenn die Maus darauf zeigt“ ab.

8.

Die Navigation innerhalb der Seiten kann verschieden realisiert werden. Eine Möglichkeit ist die Navigation durch Textmarken innerhalb einer Seite. Hierzu können Sie ein „kleines Inhaltsverzeichnis“ erstellen. Anschließend setzen Sie Textmarken und über einen Hyperlink können Sie diese Textmarke anspringen.

1.Text für Textmarke aktivieren

2.Menü „Einfügen – Textmarke....“  aufrufen.

3.Textmarke benennen oder Vorschlag akzeptieren.

4.Mit „OK“ bestätigen.

5.Schritt 1 bis 4 wiederholen bis alle Textmarken gesetzt sind.

6.Text der auf die Textmarke verweisen soll aktivieren.

7.„Hyperlink erstellen“ aufrufen

8.Textmarke über Pull-Down-Menü aufrufen.

9.Mit „OK“ bestätigen.

10.Schritt 6 bis 9 wiederholen, bis alle Links eingefügt sind.

11.

11.

Eine weitere Möglichkeit der Navigation soll hier aufgezeigt werden. Die Navigation mit Pull-Down-Menüs auch Quickbar genannt. Das Programm zur Erzeugung dieser Auswahlmöglichkeit ist in Javascript geschrieben. Javascript ist eine Programmiersprache die vom Browser interpretiert und ausgeführt wird. Glücklicherweise gibt es bereits zahllose Programme, welche in den HTML-Code eingebaut werden können.

Übung:

Im Ordner FP 2000 befindet sich der Ordner „Q-Bar-Vorlage“. Kopieren Sie die drei darin enthaltenen Dateien in Ihren Web-Ordner „FP2000“. Erstellen Sie einen Link von der Startseite index.htm auf das Frameset „fp2000/fp2000_frameset.htm“ und folgend Sie diesem Link mit gedrückter „Strg-Taste“.

Vorsicht: Durch das Kopieren ändern sich die Links nicht. Sie müssen in den Frameeigenschaften die richtigen Verweise „ohne Ordnerverweis „q-bar-vorlage“ in jedem einzelnen Frame ändern!

Im oberen Frame erscheint jetzt die Quikbar. Im HTML-Code erscheint das in Javascript eingefügte Programm dunkelrot hinterlegt. Klicken Sie mit der rechten Maustaste in der Normalansicht auf die Quikbar und wählen Sie bitte den Menüpunkt „Formulareigenschaften“. Das Fenster „Dropdownmenüeigenschaften“ erscheint. Doppelklicken Sie mit der linken Maustaste auf den Punkt „Einbinden von Multimedia“ und es erscheint das Fenster „Auswahl ändern“. Hier können Sie den Text des Dropdownmenüs sehen und die Seite, welche mit diesem Menüpunkt aufgerufen wird.

Wollen Sie einen neuen Menüpunkt erstellen, klicken Sie auf „Hinzufügen“ und geben Sie den gewünschten Text und den dazugehörigen Link ein:

Auswahl: Web mit Unterweb

Link: unterweb.htm

Die Seite „unterweb.htm“ müssen Sie noch erstellen. Hierzu können Sie den Button „Neue Seite“ betätigen und beispielsweise den Hilfetext aus der Frontpage Hilfe in diese Seite einsetzen.

Testen Sie die Funktionsweise der Quickbar in der Vorschau aus. Leider funktioniert die Quickbar nicht in der Vorschau, sondern nur unter dem Browser. Sie können also das Web veröffentlichen und anschließend ansehen, oder das Web auf Ihrer Festplatte betrachten.

 

Nachteil bei der Verwendung der Quickbar:

Das Zusammenspiel der Links kann nicht mehr von Frontpage überwacht und verwaltet werden. Die in Javascript verwendeten Links müssen unbedingt korrekt sein. Das Ergebnis kann nicht mehr im Vorschau-Fenster angesehen werden.

Die Ansicht im Browser muß immer aktualisiert werden.

Ein Unterweb können Sie sehr einfach erstellen, indem Sie mit der rechten Maustaste auf den gewünschten Ordner klicken und den Menüpunkt „In Web konvertieren“ aufrufen. Es erscheint der oben dargestellte Hinweis.

Damit Ihre Seiten im Internet gefunden werden, sollten Sie unbedingt Zusatzinformationen in Ihre Webseiten einfügen. Hierzu gehören auch sogenannte Metainformationen wie Stichwörter unter denen die Suchmaschinen auf Ihre Seiten verweisen.

Übung:

Betätigen Sie im Editierfenster in einem freien Bereich die rechte Maustaste, so erscheint ein Fenster mit dem Menüpunkt Seiteneigenschaften. Durch Auswahl dieses Menüpunktes erscheint ein neues Fenster: