|
Nachfolgend, werden wir erläutern wie eine Homepage entsteht, von der Planung über das Designen bis zur Veröffentlichung. Als Beispiel dient unsere Homepage
www.projektarbeit-online.ch.vu. Um die Arbeit nicht noch komplizierter zu gestalten, werden all die Ideen und Versuche die nicht in die Site aufgenommen wurden nicht erwähnt.
2.2.1. Planung
Wie man später in dieser Arbeit sehen kann, ist eine Homepage ein komplexes Gebilde. Grund dafür sind vor allem die unzähligen Links und Hyperlinks die eine Seite braucht.
Also werden vorhandene Ideen zuerst skizziert und auf ein Blatt Papier gebracht.
Anhand dieser Skizze kann man schon mal ungefähr erkennen wie die Seite schlussendlich aufgebaut sein soll.
Wird keine Skizze erstellt, vergisst man eventuelle wichtige Links oder ganze Themen.
2.2.2. Layout
Nun beginnt man anhand dieser Skizze das Layout der Seite zu entwerfen. Dabei stellt sich eine wichtige Frage, verwendet man Frames oder nicht? Was bedeutet überhaupt Frames?
Dies bedeutet, dass die relativ speicheraufwendige Navigationsleiste nicht erneut geladen werden muss, was bei einer Homepage ohne Frames notwendig wäre.
Der Nachteil der Frames besteht darin, dass der ganze Aufbau der Seite wesentlich unübersichtlicher wird. Um beispielsweise die Oben abgebildete Seite zu veröffentlichen, müssen 5 verschiedene Dateien abgespeichert werden. Die blau markierten Teile der Seite bilden jeweils einen Frame. Dazu kommt eine Datei in welcher die Information abgespeichert wird wo welcher Frame stehen soll (genannt Frameset).
Würde man die gleiche Seite ohne Frames darstellen, müsste man zwar nur eine Datei abspeichern, allerdings wäre es nicht möglich ein Menü am unteren Rand des Bildes zu platzieren.
Wie man sieht haben wir uns für Frames entschieden. Insbesondere darum, weil wir die Navigationsleiste unbedingt am unteren Rand haben wollten. So unterscheidet sich unsere Homepage von den meisten anderen Homepages bei welchen sich die Navigationsleiste am linken Rand der Seite befindet.
Die Navigationsleiste entstand in Flash 5. Jede der drei Menüpunkte Kontakte, das Projekt und die Doku bildet eine eigene Flashdatei, die anschliessend in Dreamweaver eingefügt wurde.
Nun ging es darum sämtliche Frames zu erstellen. Als erstes erstellten wir den "Bottomframe" mit der Navigationsleiste. Auf Grund dieser Navigationsleiste erstellten wir anschliessend den Left- und den Topframe sowie den Frameset. Der Mainframe wird nicht separat abgespeichert, da hier später die verschiedenen Dateien abgespeichert werden sollen!
Hat man die Navigationsleiste erstellt und die Frames abgespeichert, ist die Layoutarbeit abgeschlossen. Wichtig ist nur noch, dass die "Inhaltsseiten" die später entstehen optisch in den gesamten Frameset passen.
2.2.3. Intro
Um die Homepage etwas aufzuwerten haben wir ein Intro erstellt das zum Ziel hat, die User etwas aufzuwecken damit der Inhalt der Homepage mehr Aufmerksamkeit erhält. Erstellt wird ein entsprechendes Intro ebenfalls in Flash 5.
Das erstellen einer solchen Datei ist wesentlicher simpler als es am Schluss den Anschein macht.
Unten sieht man die Originalansicht der Introdatei. Wichtigstes Hilfsmittel dabei sind die verschiedenen Ebenen die oben im Bild zu sehen sind.
In dieser Szene bildet jede Ebene ein Buchstabe bzw. den Ton dazu. D.h. die erste Ebene "w" betrifft nur den ersten Buchstaben des Intros. Die Rechtecke die in der Ebene nach rechts verlaufen stellen jedes 1 Sekunde der ganzen Datei dar.
Die schwarzen Punkte in den Rechtecken, bezeichnen jeweils einen fixen Zustand des Bildes. Dies bedeutet für die
Ebene w:
Sekunde Bild
1 Der Buchstabe ist ausgeblendet
2 Keine Information
3 Der Buchstabe ist eingeblendet
4 Keine Information
5 Der Buchstabe ist ausgeblendet
Das Programm erstellt nun automatisch die Bewegungen zwischen den Bildern in Sekunde 1, 3 und 5. Zuerst blendet es den Buchstaben ein, anschliessend wieder aus. Wir mussten aber ausschliesslich die fixen Punkte 1, 3 und 5 definieren.
Ab Ebene 9 ("sound1") definieren wir den Sound. Als Sound Hintergrund können sämtliche Musikdateien die auf dem PC gespeichert sind verwendet werden. Dies bedeutet, dass sowohl Windowsmedia Dateien (.wav), als auch MP3-Files verwendet werden können. Zusätzlich stellt Flash noch eine eigene Bibliothek mit Standard Musikdateien zur Verfügung (.fla)
Unsere Sounds sind allesamt aus der Standardbibliothek von Flash.
Um einen Soundeffekt in eine Flashdatei einzufügen, öffnet man als erstes die Soundbibliothek und zieht anschliessend das Icon hinter einer Sounddatei mit der Maus ins Bild. Der Effekt beginnt an der entsprechenden Stelle.
Damit das ganze übersichtlich bleibt haben wir für jede Bild Ebene eine eigene Soundebene erstellt. Während Ebene "w" grafisch abläuft hört man den Sound aus der Ebene "sound1"
Nun reiht man Buchstabe für Buchstabe hintereinander und fügt den entsprechenden Soundeffekt ein. Als letztes wird beim letzen Bild noch eine automatische Weiterleitung auf die eigentliche Homepage erstellt.
Fertig ist die komplette Flashanimation.
2.2.4. Veröffentlichung
Mittlerweile haben wir auch die Inhalte der Site erstellt. Die Homepage ist somit komplett und kann veröffentlich werden. Der Ordner der Homepage sieht jetzt wie folgt aus:
In den Ordnern: Bilder, Flash, Frame, Inhalt, Sounds und Templates befinden sich sämtliche Inhalte die auf der ganzen Homepage vorkommen. Z.B. Bilder, Flashanimationen oder die Soundfiles. Denn anders als im Word werden die Dateien die sich auf einer Seite der Homepage befinden nicht in der Datei der Seite abgespeichert.
Auf der Seite wird nur ein Platzhalter mit dem Link zum Ort der gespeicherten Datei erstellt. Dies bedeutet, dass wir sämtliche Dateien, Ordner und Unterordner die sich im Verzeichnis C:\\projektarbeit befinden eins zu eins auf den Server von Piranho übertragen mussten.
Mit diesem Filemanager werden die entsprechenden Dateien und Ordner auf dem Server gespeichert. Einziger Nachteil, jede Datei muss einzeln ausgewählt werden.
Und so sieht das ganze aus wenn sämtliche Dateien auf dem Server gespeichert wurden. Ab jetzt ist die Homepage aus der ganzen Welt erreichbar!
2.2.5. Pflege
Ist die Homepage einmal aufgeschaltet, fängt die Arbeit eigentlich erst an. Eine Homepage lebt von der Aktualität, und den News die es auf einer Page zu erfahren gibt. Das heisst es geht jetzt darum, die Inhalte so oft wie möglich zu aktualisieren. Dazu wird die entsprechende Seite in Dreamweaver verändert, auf der Festplatte abgespeichert und anschliessend nur noch diese eine Seite mit dem Filemanager auf dem Server gespeichert. Diese Arbeit erfordert zwar nicht allzu viel Zeit, muss allerdings bei jeder Gelegenheit ausgeführt werden, um die Homepage nicht langweilig werden zu lassen!
Da wir unsere Homepage nur für diese bestimmte Projektarbeit erstellt haben, erübrigen sich die Aktualisierungen für uns, da man keine Updates machen kann oder muss.
|
