Anhang C: Foto-Story fürs WWW aufbereiten mit Netscape Composer Wenn auf Ihrem PC der Netscape Navigator installiert ist, ist meist auch der Composer dabei. Wenn nicht: Das Komplettpaket gibt s zum Download über www.netscape.com/computing/download, der Link zur hier genutzten Version 7.1 auf Deutsch heißt: www.netscape.de/netscapeprodukte/netscape71/download.html. Vorbereitung Im Aktionsordner auf dem aktuell genutzten PC wird ein Unterordner namens web für die Internetseiten angelegt. Alle fürs Internet kleingerechneten Bilder sowie die Buttons vorwaerts.gif und zurueck.gif werden da reinkopiert. Dann wird der Composer gestartet am einfachsten ist es, wenn man den Navigator startet und dann über den Menüpunkt Fenster => Composer geht. Meine erste Website Der Composer startet i.d.r. mit einer leeren Seite. Als allererstes klicke ich jetzt auf Speichern. Ich werde zur Eingabe eines Seitennamens aufgefordert das ist der Name, der nachher in der Browser-Titelleiste erscheint. Dann erst erscheint das eigentliche Speichern als- Fenster; hier übernehme ich nicht den vorgeschlagenen Namen, sondern trage index.html ein. Speichern! Nun kann eine Hintergrundfarbe ausgewählt werden (1). Als nächstes klicke ich auf Tabelle (2) und gebe im Tabelle einfügen - Fenster ein: Zeilen: 2, Spalten: 2, Breite: 100% des Fensters, Rand: 0 Pixel. Das Einfügen einer Tabelle ist im HTML- Universum die einfachste Möglichkeit, Dinge zu positionieren. Das Composer-Menü und die beiden Symbolleisten sparsam, aber brauchbar! In der nun entstandenen 2 x 2 Tabelle klicke ich ins obere linke Feld und gehe auf den Menüpunkt Tabelle => Mit der Zelle rechts verbinden. Als nächstes klicke ich auf Grafik (3) und füge mit Datei wählen ein Foto aus meinem web -Ordner ein, anschließend zentrieren (4). Der Webseitenentwurf sollte jetzt so aussehen: 1
Nun klicke ich ins unteren linke Felder der Tabelle und füge nach dem gleichen Prinzip meinen zurueck.gif-button ein, anschließend rechts ausrichten. Ins rechte untere Feld kommt der vorwaerts.gif-button der sollte automatisch links ausgerichtet sein, wenn nicht: links ausrichten. Nun klicke ich aufs Vorschau- Symbol, speichere meine Datei auf Aufforderung dann sollte sich ein Browser- Fenster öffnen, das mir ungefähr so eine Website zeigt: 2
Verlinkungen Sie werden schon festgestellt haben: Hübsche Vor- und Zurück-Buttons haben wir gebaut, aber funktionieren tun die noch nicht. Wohin soll der Zurück-Button auf unserer ersten Seite überhaupt führen? Naja, am besten auf die Homepage, von der aus man nachher im Internet zu unserer Fotostory kommen soll. In unserem Beispiel nehmen wir www.netzprojekt.de als Heimathafen-Homepage. Los geht s Ich schließe zunächst das Browser-Vorschaufenster (1) und gehe zurück ins Composerfenster (2). Dort doppelklicke ich auf meinen Zurück-Button; es öffnet sich das Bildeigenschaften-Fenster, ich wähle die Karteikarte Verknüpfung. 3
Da kann ich nun meinen Homepage-Link eintragen. Links zu bereits bestehenden Websites gibt man hier stets mit vorangestelltem http:// ein, und das Kästchen URL ist relativ zur Seitenadresse darf dabei kein Häkchen haben. Was ist nun mit meinem Vorwärts-Button? Dafür bräuchte ich ja erstmal eine zweite Seite. Ich benutze meine erste Seite als Grundlage, doppelklicke auf das Foto und wähle ein anderes Foto aus meinem web -Ordner. Schon habe ich eine neue Seite. Dann: Doppelklick auf den zurück -Button, Karteikarte Verknüpfung, mit Datei wählen einen Link zurück zu meiner ersten Seite index.html setzen (das Kästchen URL ist relativ zur Seitenadresse sollte jetzt ein Häkchen haben). Achtung: jetzt nicht auf speichern klicken, sonst überschreibt meine neue Datei die erste Seite! Stattdessen übers Menü Datei => speichern unter gehen und einen neuen Dateinamen wählen z.b. seite2.html. Nun öffne ich noch mal meine erste Seite (index.html). Dort fehlt noch der Vorwärts- Link, also: Doppelklick auf meinen Vorwärts-Button, Karteikarte Verknüpfung, mit Datei wählen einen Link zu seite2.html setzen. Speichern und Vorschau! Nun sollte man zwischen den ersten beiden Seiten hin- und herspringen können und von der ersten Seite zusätzlich zurück zur gewählten Homepage kommen. Nur der Link von Seite 2 vorwärts fehlt noch, aber Seite 3 existiert ja auch noch nicht. Links funktionieren immer nur in der Browser-Vorschau! Im Composer ist klicken zwecklos :-) 4
So kann nun Seite für Seite die ganze Geschichte erstellt werden. Dabei gibt es zwei verschiedene Verlinkungsstrategien man sollte sich für die entscheiden, die einem eher liegt: o Man erzeugt erst alle Seiten, die man für die Story braucht noch ganz ohne Links. Dann geht man in einem zweiten Durchgang noch mal alle Seiten durch und setzt mit Verknüpfung und Datei wählen die Links. o Man überlegt sich vorher, wie alle Seiten heißen werden (z.b. index.html seite2.html seite3.html ). Nun trägt man direkt wenn man eine Seite erstellt den Link zur jeweils vorangehenden und folgenden Seite von Hand ein (nutzt also nicht Datei wählen ). Nachteil: Ein etwas weniger intuitiver Zugang, da man zu Seiten linkt, die noch gar nicht existieren. Was habe ich eigentlich getan? Soeben haben Sie zwei Webseiten gebaut wahrscheinlich Ihre ersten. Im WWW ist HTML die gängigste Sprache; auch die beiden Fotostory-Seiten sind HTML-Seiten. Allerdings brauchen Sie selbst dafür kaum HTML-Kenntnisse der Netscape Composer setzt Ihre Eingaben automatisch in HTML-Code um. Wie dieser Code für Ihre Seiten aussieht, können Sie sehen, wenn Sie unten auf den <HTML>Quelle- Karteireiter klicken. Nun haben wir eine fertige WWW-Foto-Story. Die muss jetzt freilich noch ins Netz gestellt werden. Dafür braucht man Speicherplatz auf einem Internet-Server (Webspace). Auf Themen wie Hochladen und FTP einzugehen würde hier den Rahmen sprengen nur soviel: man lädt den ganzen Ordner web hoch und 5
benennt ihn dann am besten um. Wenn ich z.b. den Ordner love2004 auf die oberste Ebene der Website www.netzprojekt.de hochgeladen hätte, hieße der Direktlink zu meiner Story www.netzprojekt.de/love2004 und der würde weltweit funktionieren. Ausblick Eine spannende Variante wären interaktive Foto-Stories also solche, bei denen der Leser an verschiedenen Stellen in der Geschichte zwischen zwei oder mehr Wegen wählen kann, wie die Handlung weitergehen soll. Dafür braucht man allerdings mehr Zeit und ein großes Plakat, um das Storyboard mit all seinen Verzweigungen aufzuzeichnen. Die Verlinkung wird dadurch undurchschaubarer, aber grundsätzlich bleibt es bei den hier beschriebenen Arbeitsschritten. Natürlich kann man im Composer nicht nur Bilder einfügen, sondern kann auch einfach schreiben und Text formatieren fast wie in Word oder ähnlichen Textverarbeitungsprogrammen. Probiert mal Tabellen mit anderen Zeilen- /Spaltenzahlen aus, fügt Texte ein auch hier gilt: Experimentieren ist alles! 6