HTML-Editoren in einem Multimediakontext

HTML-Editoren
in einem Multimediakontext
Andreas G.Nie
WS 2001/2002
Contents
1
Einleitung
1.1 Die Programme . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
1.2 Die Site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
2
2
2
2
Frontpage
2.1 Materiale einbinden . .
2.1.1 Bilder . . . . .
2.1.2 Videos . . . .
2.1.3 Ton ab . . . . .
2.1.4 Flashanimation
2.1.5 Fazit . . . . . .
2.2 Navigation . . . . . . .
2.3 Fazit . . . . . . . . . .
3
4
5
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
3
4
4
4
4
5
5
6
6
Fusion MX
3.1 Materiale einbinden . . . . . .
3.1.1 Bilder . . . . . . . . .
3.1.2 Videos . . . . . . . .
3.1.3 Midihintergrundsound
3.1.4 Flashintro . . . . . . .
3.1.5 Fazit . . . . . . . . . .
3.2 Navigation . . . . . . . . . . .
3.3 Fazit . . . . . . . . . . . . . .
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
7
8
8
8
9
9
9
9
10
Dreamweaver
4.0.1 Templates . . . . .
4.1 Vorbereitungen . . . . . .
4.2 Materialien einbinden . . .
4.2.1 Bilder . . . . . . .
4.2.2 Videos . . . . . .
4.2.3 Hintergrundsound
4.2.4 Flash . . . . . . .
4.2.5 Fazit . . . . . . . .
4.3 Navigation . . . . . . . . .
4.4 Fazit . . . . . . . . . . . .
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
11
11
11
11
11
12
13
13
13
13
13
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Fazit
15
A Screenshots
A.1 Frontpage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
A.2 Fusion MX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
A.3 Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
1
16
16
16
17
1
Einleitung
War es vor nicht allzu langer Zeit noch was Besonderes, so drängt jetzt jeder kleine
Stammtisch ins Internet. Oftmals werden dann HTML-Editoren benutzt, die mit allerlei Assistenten und einem WYSIWYG-Konzept das Erstellen der ersten eigenen Homepage vereinfachen soll. Im Rahmen des Vortrages ”HTML-Editoren” habe ich mir
angeschaut, inwieweit es tatsächlich möglich ist, auf die Schnelle eine Website zu erstellen. Da in den weiteren Vorträgen u.a. Multimediakomponenten vorgestellt werden
sollen, habe ich weiterhin die Fähigkeiten der Programme getestet, Multimediainhalte
zu veröffentlichen.
1.1
Die Programme
Für den Vortrag standen mir drei Programme zur Verfügung. Frontpage 2000 aus dem
Office-Paket von Microsoft, Dreamweaver 4 von Macromedia und NetObjects Fusion
MX. Alle Programme wurden unter Win98SE betrieben und jeweils eine komplette
Site damit erstellt.
1.2
Die Site
Als Grundthema habe ich die neue Star Trek Serie ”Enterprise” gewählt. Als Dateien
standen Photos, Midi-Dateien, AVI-Filme und Real-Videodateien zur Verfügung. Diese
Dateien sind nicht von mir erstellt, sondern von diversen Sites (u.a. ) geliehen.
Die Verwendung soll nur Lehrzwecken dienen und soll keine Verletzung der Copyrights bedeuten. Falls sich dennoch jemand angegriffen fühlt dadurch, dass Material
hier erscheint, möge er oder sie mich bitte kontaktieren unter [email protected], damit ich
entsprechend reagieren kann.
2
2
Frontpage
Der Webeditor von Microsoft kommt, wie man es von Office-Programmen gewohnt ist,
mit einer Reihe von Assistenten und Vorlagen daher. Wenn man ein neues Dokument
anlegen will, kann man sich gleich ein ganzes Web generieren lassen. Das ist eine
Website mit anfänglich fünf Seiten, die über eine Menüstruktur miteinander verbunden
sind.
Figure 1: Neue Web erstellen
Frontpage kann einzelnen Seiten oder einer ganzen Site spezielle Design zuordnen, die man auch später ganz einfach wieder ändern kann. Es stehen über 60 Design
zur Verfügung, die in einer 800x600 grossen Ansicht dargestellt werden und die man
auch noch individuell anpassen kann, um z.B. die Linkfarben oder einzelne Grafiken
auszutauschen.Somit ist der Seite schnell ein neues Design verpasst: ich hab mich für
”Hightech” entschieden.
Figure 2: Design festlegen
3
2.1
2.1.1
Materiale einbinden
Bilder
Nachdem einige Texte für die Startseite eingefügt wurden, ist die Bebilderung an der
Reihe. Dazu habe ich mir einen Ordner mit den Materialien importiert. Die Bilder,
die sich in dem Dateienbrowser anbieten, können nun durch einfaches Drag&Drop auf
der Seite platziert werden. Somit ist auch die Photoseite schnell erstellt. Dabei kommt
ein hilfreiches Feature zum Zuge: mit Auto-Miniarisierung werden Bilder auf ein frei
festlegbares Format skaliert und das kleinere Bild als Link auf die grössere Grafik
eingebunden. Somit ist schnell eine Art Album hergestellt.
2.1.2
Videos
Ähnlich einfach wie das Einfügen von Bildern geht das Einbinden von AVI-Dateien.
Diese kann man auf die Seite ziehen und schon sind sie für alle im Netz verfügbar.
Allerdings ’alle’ nur aus Redmond’scher Sicht. Denn obwohl das Video im Internet
Explorer klaglos abspielt, weigert sich Netscape, etwas anzuzeigen. Schaut man sich
den Quelltext an, so zeigt sich, dass Microsoft an dieser Stelle wohl etwas geschummelt
hat: das Tag DYNSRC ist wohl eher propitärer Natur, was wohl erklärt, warum es
sich nur mit den Microsoftbrowser verträgt. Allerdings sieht die Ganze Sachen nach
dem Upload doch etwas ausgeglichener aus. Denn jetzt verweigert auch der IE das
Abspielen.
Figure 3: Video eingebunden
Bei den Real-Dateien verhält es sich ähnlich. Diese kann man nicht einfach per
Drag&Drop einbinden, sondern benutzt dafür die Möglichkeit, Dateien über Plug-Ins
einzubinden. Leider hat man keinen Einfluss auf die Parameter eines Plug-Ins, so dass
nur eine Steuerconsole des Players erscheint, das Video an sich aber nicht. Dafür kann
man es hören :)
2.1.3
Ton ab
Es steht noch eine Mididatei zur Verfügung. Diese soll auf der Startseite als Hintergrundsound abgespielt werden. Dazu kann man in den Seiteneigenschaften einfach
festlegen, was abgespielt werden soll. Wie aber schon bei den Videos werden NichtIE-Benutzer wieder ohne Sound auskommen müssen: Netscape bleibt stumm.
4
Figure 4: Hintergrundsound einstellen
2.1.4 Flashanimation
Die Flashanimation lässt sich wie die Real-Datei über das Einfügen von Plug-Ins in die
Seite einbinden. Das eingefügte Platzhalterobjekt kann man nun in der Grösse ändern.
Bei der Vorschau wird man positiv überrascht: sowohl IE als auch Netscape zeigen die
Animation wie gewollt an.
Figure 5: Plug-Ins einbinden
2.1.5
Fazit
Midi und Videos werden eher einseitig unterstützt. Die Einschränkung auf ide Parameter eines Plug-Ins zugreifen zu können machen es schwer, Real-Videos u.ä. einzubinden. Hier kommt man nicht um eine Nachbesserung im Quelltext herum. Flashanimationen allerdings werden anstandslos geschluckt und vernünftig angezeigt.
5
2.2
Navigation
Nachdem einige Seiten nun erstellt worden sind, muss die Navigation angepasst werden. Die Navigationsleiste auf den Seiten ist von Frontpage ’intelligent’ eingebunden. Die Schaltflächen beziehen ihre Bezeichnungen von den jeweils verlinken Seiten,
genauer von deren Überschriften. Eine kurze Änderung dieser Überschriften bewirkt,
dass sich die Navigation in den anderen Seiten entsprechend verändert. Was genau
verlinkt werden soll, kann in den Eigenschaften der Leiste eingestellt werden. Man
kann die Ebenen angeben, die in die Leiste aufgenommen werden sollen, sowie ob es
sich um Bild- oder Textlinks handeln soll und wie die Leiste angeordnet wird. Die
Eigenschaften werden dann global auf alle Seiten geändert.
Figure 6: Navigationsleiste bearbeiten
2.3
Fazit
Frontpage macht es einem Benutzer leicht, schnell eine Site zusammenzuklicken. Durch
die Designs kann leicht das Aussehen der Seiten gewählt und auch geändert werden.
Wenn es allerdings um multimedialen Inhalt geht, hat man es schwer. Entweder werden die Inhalte nur im Internet Explorer angezeigt oder gar nicht. Die unflexible Handhabe von Plug-Ins machen es erforderlich, dass man in den Quelltext herumarbeitet.
Flashanimationen stellen die erfreuliche Ausnahme dar.
6
3
Fusion MX
Im Gegensatz zu Frontpage kommt der Siteassistent von Fusion etwas dürftig daher.
Bei den einzelnen Schritten, die man durchläuft, wird schnell klar, dass sich das Produkt eher an Geschäftsleute richtet, die ihre kleinen und mittleren Betriebe im Netz
präsentieren wollen:
Dennoch ist auch hier schnell eine erste Grundstruktur erstellt. Ein Assistent hilft
dabei in drei Schritten eine Site aufzubauen. Bis zu neun Seiten können erstellt werden. Allerdings ist die Struktur stark eingeschränkt. Die bereits voreingestellten Sites
lassen erkennen, dass sich Fusion hauptsächlich an small business Kunden richtet. Das
eigene Geschäft im Internet präsentieren ist hier die Prämisse. Allerdings lassen sich
die Seiten natürlich auch mit privatem Inhalt füllen.
Figure 7: Sitestruktur erstellen
Nachdem die Struktur festgelegt ist, wird das Grunddesign gewählt. Hier ist die
Auswahl weitaus dürftiger als bei Frontpage. Lediglich sieben verschiedene Sitearten
gibt es, die allerdings noch farblich variieren können. Auch hier ist der Tenor eher sachlich ganz im Sinne der Zielgruppe. Zum Schluss kann man noch seine Geschäftsdaten
eingeben, mit denen dann die Site bereits inhaltlich gefüllt werden kann.
Figure 8: Aussehen festlegen
7
3.1
3.1.1
Materiale einbinden
Bilder
Nachdem die Texte eingegeben sind, kann die Site bebildert werden. Dazu wähle ich
das Bilderwerkzeug aus und ziehe an der Stelle, wo ich das Bild platzieren will, einen
Rahmen auf. Nun kann ich den Ort, wo das Bild liegt, angeben. Bei der Platzierung
der Bilder kann man nur zwischen rechts-, zentrierter und linksbündiger Ausrichtung
auswählen. Solange die Site lokal vorliegt, werden Bilder (und eingefügte Dateien im
Allgemeinen) an ihrem Ursprungsort belassen. Später werden sie allerdings in einen
Ordner ’assets’ gepackt, genauer, in Unterordner je nach Datentyp organisiert. Der
’asset’-Ordner sowie die Unterordner können nach Belieben umbenannt werden.
Figure 9: Assets
3.1.2
Videos
Um ein Video oder eine andere Plug-In-bedürftige Datei einzubinden, nehme ich das
Plug-In-Werkzeug. Es funktioniert ähnlich dem Bilderwerkzeug: ein Rahmen wird
aufgezogen und der Ort der Datei angegeben. Das Plug-IN-Objekt, dass nun auf
der Seite erscheint, kann man in der Grösse ändern und ausrichten. Zusätzlich ist es
möglich, über die Eigenschaften des Objekts zusätzliche Parameter einzugeben. So ist
es möglich, aus der Realplayer-Datei tatsächlich eine lauffähige Version hinzubekommen. Allerdings muss man dazu die nötigen Parameter kennen.
Figure 10: Plug-In-Parameter bearbeiten
8
3.1.3
Midihintergrundsound
Um die Mididatei als Hintergrundsound abspielen zu lassen, wählt man die Layouteigenschaften des Dokuments aus. Hier kann eine Klangdatei angegeben werden, die abgespielt werden soll. Im Quelltext taucht diese dann als embed-Tag auf. Somit spielt
sie auch brav ab, wenn man die Seite mit Netscape anschaut, bleibt allerdings stumm,
wenn der IE eingesetzt wird.
Figure 11: Hintergrundsound einstellen
3.1.4
Flashintro
Wie auch bei Frontpage stellt das Einbinden einer Flash-Datei die kleinsten Probleme
dar. Einfach einen neuen Plug-In-Rahmen aufziehen, Quelle auswählen, das war’s.
Ohne weiteres zutun läuft die Animation in beiden Browsern.
3.1.5 Fazit
Durch die Möglichkeit, einzelne Parameter für Plug-Ins angeben zu können, ist Fusion
schon sehr viel flexibler im Umgang mit multimedialen Dateien. Allerdings muss man
hier erst einmal die richtigen Parameter kennen.
3.2
Navigation
Die von Fusion erstellte Site enthält auch eine Navigation. Obwohl die Bezeichnungen
für die Kopfbanner der Seite und die Links in der Navigationsleiste auf den Dateinamen zurückgehen, kann man für jede Seite explizit festlegen, wie der Bannertext der
Seite und der Link zu ihr in der Navigationsleiste aussehen soll. Außerdem kann die
Verschachtelungsebene freier gestaltet werden. Es gibt zwar wie bei Frontpage fertige
Ebenen, die man auswählen kann, aber man kann auch eigene Strukturen aufbauen.
9
Figure 12: Navigation individuell organisieren
3.3
Fazit
Es scheint, als ob Fusion MX mehr Flexibilität an den Tag legt als Frontpage. Sowohl
bei den Plug-Ins als auch bei der Navigation bieten sich mehr Möglichkeiten. Auf der
anderen Seite ist das Programm nicht mit so vielen Designs ausgestattet. Die eingebauten Sitevorlagen kommen eher bieder daher (was nicht schlecht sein muss) Das liegt
aber sicherlich auch an der Zielgruppe, die wohl mehr auf seriöse Representation als
auf Pep setzten wird.
10
4
Dreamweaver
Macromedias Editor kommt als das scheinbar komplexeste Tool daher. Allerdings ist
der neue Anwender zu erste etwas allein gelassen. Einen Assistenten oder Vorlagen
zum Erstellen einer Seite oder gar einer Site sucht man vergebens. Dafür entdeckt man
nach etwas Stöbern einen Menüeintrag Templates, der hoffen lässt. Auf der Website
von Macromedia kann man sich kostenlos eine Reihe von solchen Templates herunterladen, mit denen man seine Site aufbauen kann.
4.0.1
Templates
Wenn ein Webmaster seine Site erstellt, kann er Templates erstellen. Hier werden
komplette Seiten aufgebaut, die dann in editierbare und nicht-editierbare Bereiche
aufgeteilt werden. Somit kann eine Grundstruktur der Seite erstellt werden, die dafür
sorgt, dass die darauf basierenden Webseiten nur da verändert werden können, wo eine
Veränderung erlaubt wird. Somit kann der Texter ruhig eine Seite bearbeiten ohne,
dass die Arbeit des Designers angegriffen werden kann.
Figure 13: Template für eine neue Datei auswählen
4.1
Vorbereitungen
Als Vorlage für die Enterprise-Site soll das Template X dienen. Allerdings ist das
Aussehen noch nicht ganz für meine Zwecke geeignet. Deshalb werden einige Elemente geändert. Zuvor muss ich aber den HTML-Text der benutzten Vorlage per
Notepad um die schützenden Kommentartag erleichtern. Denn um das Template zu
schützen, sind in der Seite Kommentare eingefügt, die Dreamweaver zeigen, was editiert werden darf und was nicht. Diese Kommentare kann ich auch nicht herauslöschen,
wenn ich in Dreamweaver arbeite, weshalb ich auf Altbewertes (Notepad) zurückgreifen
muss.
4.2
4.2.1
Materialien einbinden
Bilder
Nachdem eine neue Datei aus dem fertigen Template erstellt wurde, können die editierbaren Elemente bearbeitet werden. Das Einfügen von Bildern ähnelt dem Prozedere
11
Figure 14: Siteinformationen eingeben
von Fusion MX. Mit dem Cursor bewegt man sich an die Stelle, an die das Bild hin soll.
Dann klickt man auf das Bildeinfügewerkzeug, welches einem nach dem Speicherort
des Bildes fragt. Danach wird das Bild in der Abmessung 1:1 auf die Seite gelegt.
Eigenschaften wie Lage, Grösse, ImageMaps und Links können nun editiert werden.
Figure 15: Bilder einstellen
4.2.2 Videos
Auf der Webseite von Macromedia finden sich neben den Templates auch Multimediaextensions. Diese können nachträglich installiert werden und bieten dann eine leichtere Einbindung spezieller Dateien. Direkt für Real-Dateien hat die Firma Real eine
Extension herausgebracht, mit der man bequem Real-Dateien einbinden kann. Über
das Eigenschaftsmenü kann man alle Aspekte der Real-Datei kontrollieren. Zusätzlich
kann man auch direkt in das entsprechende HTML-Tag reinschauen.
12
Figure 16: Eigenschaften der Real-Videodatei
4.2.3 Hintergrundsound
Es gibt keinen Menüpunkt und keine Einstellungsmöglichkeit, um Hintergrundsounds
anzugeben. Das müsste man direkt über das Einfügen entsprechender embed-Tags
machen.
4.2.4
Flash
Da Flash aus dem selben Hause kommt wie Dreamweaver überrascht es nicht, dass das
Format stark unterstützt wird. Das Eigenschaftsmenü bietet reichhaltig Möglichkeiten,
um die Flash-Datei nach eigenen Wünschen einzustellen. Das Resultat lässt sich dann
in beiden Browsern anstandslos betrachten.
Figure 17: Flash-Eigenschaften
4.2.5
Fazit
Durch die Extensions lassen sich bequem Mediatypen einbinden. Aber auch ohne bietet Dreamweaver gute Möglichkeiten, um Dateien in die Seite einzufügen.
4.3
Navigation
In dem Template ist auch eine Navigationsleiste eingebaut. Die Grafiken stammen
aus dem Bildbearbeitungstool PhotoImpact von Ulead. Anders als bei Fusion gibt es
nur eine Navigationsleiste. Diese ist aber von Seite zu Seite individuell einstellbar.
Allerdings sind die Leisten innerhalb einer Site nicht verbunden. Eine Änderung auf
einer Seite muss erst in allen anderen Seiten nachgearbeitet werden.
4.4
Fazit
Dreamweaver konzentriert sich darauf, dem Benutzer beim Erstellen und Verwalten
der Seiten zu unterstützen, gibt dabei aber keine Designhilfen mit. Die Templates sind
13
Figure 18: Navigationsleiste
sehr mächtig und erleichtern das Arbeiten vor allem in einer Gruppe. Doch wenn mal
eben schnell eine Site zusammengeklickt werden soll, ist Dreamweaver nicht die erste
Wahl. Dafür besticht das Programm bei der Einbindung von Multimediaelementen, da
nicht zu letzt die Extensions das Arbeiten sehr erleichtern.
14
5
Fazit
Alle drei Programme haben ihre Stärken und Schwächen. In Punkto Schnelldesign ist
Frontpage ganz vorn, die Firmenpräsentation gelingt am schönsten mit Fusion MX und
Dreamweaver ist das vielseitigste Programm.
Dennoch bleibt festzuhalten, dass der Multimediaeinsatz auf der Homepage nicht
so schnell erledigt ist. Die Dateien verlangen oftmals nach Parametereinstellungen, die
von Hand eingetragen müssen. Simples Drag&Drop wie vielleicht bei Bildern bietet
kein Programm.
Allerdings muss man auch zu Gute halten, dass die Tools, mit denen man die Inhalte
erstellt, oftmals eine HTML-Exportkomponente mitliefern. Sowohl Flash als auch
der RealProduzer können eine fertige HTML-Seite mit dem entsprechenden Inhalt erstellen, der dann eingebunden werden kann. Dies ist wohl auch der zu bevorzugende
Weg, da somit eine (hoffentlich) sehr gute Unterstützung sicher gestellt werden kann.
15
A
A.1
Screenshots
Frontpage
Figure 19: Microsoft Frontpage
A.2
Fusion MX
Figure 20: NetObjects Fusion MX
16
A.3
Dreamweaver
Figure 21: Macromedia Dreamweaver
17