Modul 5.2: Tipps zur Nutzung kommerzieller Webeditoren für Newbies

Wenn Sie nun bereits kräftig html-Seiten mit einem reinen Texteditor (z.B. WordPad für Windows, SimpleText für MacOS 8 bzw. 9, oder TextEdit für MacOS-X) bzw. mit dem kostenlosen Netscape Composer erstellen, werden Sie schon bald Bedürfnis nach Unterstützung in der Seitenerstellung verspüren. Tatsächlich gibt es eine (nicht mehr allzugroße) Fülle kommerzieller Webseiten-Editoren und Website-Manager.

Wir werden in unserem 2. Kursteil näher darauf eingehen und auch die weiteren Layout- und Site-Verwaltungsmöglichkeiten erläutern. Wenn Sie bereits jetzt damit arbeiten wollen, beachten Sie bitte nachstehende Tipps, sonst können Sie ggf.Seiten produzieren, die je nach Browsers des Nutzers sehr komische Layouts produzieren bzw. sogar erschreckende Fehlermeldungen hervorrufen können.

• Leider sind die einfacheren und kostengünstigeren kommerziellen Produkte ziemlich vom Markt verschwunden. Falls Sie derartige Programme noch finden, wären z.B. Claris Homepage (für Mac) oder Adobe PageMill (nur noch für PC?) geeignete Produkte. Hier können Sie "normalen" html-code sehr leicht generieren, können im Unterschied zu Netscape Composer auch Frames direkt im Editor erstellen, haben z.T. eine einfache Seitenverwaltung dabei (die Ihnen Links auch beim Verschieben Ihrer Seiten in andere Ordner automatisch anpasst) und können ggf. auch einfachere "fortgeschrittene" Features (einfache JavaScripts, Formulare etc., siehe Kursteil B) einbauen.
  
  

• Die besten, aber auch teuersten html-Editoren sind GoLive (nun von Adobe) und Dreamweaver (von Macromedia), beide sind für Mac und PC erhältlich. Im zweiten Kursteil werden wir immer wieder GoLive zur Erläuterung fortgeschrittener Features (Style Sheets, Dynamic html, includes, Formularen etc.) verwenden. GoLive wird auch im Kurs der Paläontologie an der LMU verwendet.
  
  

• Sie sollten aber bei Ihrem jetzigen Wissensstand (sofern Sie als Neuling begonnen haben und jetzt bei Modul 5 angekommen sind), nur die Grundfeatures derartiger Programme nutzen, also v.a. diejenigen Format- und Layoutoptionen, die wir bislang kennen. Warten Sie mit den fortgeschrittenen Möglichkeiten noch ab, bis wir diese im entsprechenden Kursteil behandelt haben. Sehr schnell haben Sie sonst Seiten generiert, die unter Netscape laufen, unter Internet-Explorer aber nicht, oder bei denen Sie viel zu viel Quellcode produzieren und damit zu lange Ladezeiten verursachen. Verwenden Sie am besten auch die Optionen für Schriftarten noch nicht (wir werden in Kursteil B erläutern, wie Sie sich hierbei mit sog. Cascading Style Sheets - CSS - viel Arbeit ersparen können) und gehen Sie sparsam mit Farbe um (auch dies funktioniert über CSS besser). Sinnvoll ist es insbesondere, solche Editoren zu benutzen, wenn Sie mit Frames arbeiten wollen. Hierbei gibt es aber beim Layouten ebenfalls noch viele Fallstricke zu umgehen, die wir in Kursteil B behandeln.
  
  

• Persönliche Meinung: Microsofts Front Page ist nach meiner Einschätzung für Anfänger und Fortgeschrittene problematisch. Einerseits ist die Menüführung und Benutzung ähnlich wie das vielen vertraute Microsoft Word, was das Arbeiten erleichtert. Andererseits ist meines Erachtens schlechter als bei vielen anderen Webeditoren trennbar, welche Features Microsoft-eigen sind und deshalb nur mit Microsofts Internet Explorer richtig angezeigt werden und welche dem html-Standard entsprechen. Auch hier gilt erst einmal: Verwenden Sie nur die Grundmöglichkeiten, bevor Sie mehr Einblick in die fortgeschrittenen Features erhalten haben.
  Insgesamt ist die durch Front Page vorgenommene Verquickung von html-code, wünschenswerten standardisierten Erweiterungen (CSS, dhtml, JavaScript) und Microsoft-eigenen Features (z.B. unterschiedliche JScript-Implementierung, SmartTags, inkonsequente und z.T. proprietäre CSS-Umsetzung) allerdings gerade für Anfänger oft nicht trennbar. Sie generieren damit u.U. gegen Ihren Willen Seiten mit komplexem, inkompatiblen Code und wundern sich dann, dass diese nicht auf allen Plattformen und mit allen Browsern laufen.
  
  

• (Nur der Vollständigkeit halber sei erwähnt: Auch Microsoft Word oder Microsoft Exel kann ja html-Code direkt abspeichern. Was hier generiert wird, eignet sich vielleicht für einfache Textseiten, bei allem anderen wird aber ziemlich unkorrekter Quellcode generiert, der bei der Weiterverarbeitung mit anderen Webeditoren z.B. Probleme hervorrufen kann. Auch wenn Sie PageMaker oder andere Layout-Programme zum direkten Erstellen von Webseiten-html, verwenden, sollten Sie vorsichtig sein. Sie sollten verstehen und beurteilen können, welchen html-Code das Programm Ihnen dort automatisch generiert. Die Pfade für Links und Bildeinbau müssen Sie in den allermeisten Fällen von Hand kontrollieren bzw. editieren). Auch die automatische Umwandlung von Powerpoint-Präsentationen in html-Sites ergibt in aller Regel unschöne Ergebnisse, viel zu hohe Ladezeiten sowie überaus häufig Inkompatibilitäten mit Browsern (näheres hierzu erfahren Sie in Modul 8.10.1).

Heißer Tipp: Sehen Sie mal in die Linkliste von SELFhtml zu html-Editoren (htttp://selfaktuell.teamone.de/links/html_editoren.htm). S. Münz führt dort immer aktuell die wichtigsten kommerziellen, shareware und freeware-Webeditoren (v.a. für PCs) auf. Nur GoLive ist dort nicht vertreten :-(

Auch unter http://www.tripod.de werden Sie in Sachen weiterer Tutorials, Bildressourcen, sowie shareware-Programmen zur Bildbearbeitung und zur Webseitenerstellung fündig.

Hier nun einige wenige Beispiele zum Prinzip professioneller Web- und Siteeditoren

Die grundlegenden Menubefehle und Formatier-Icons sind sich in den meisten Programmen sehr ähnlich. Sie können viele Formatieroptionen sowohl über Klappmenus als auch über Formaticons erreichen. Außerdem stehen für viele Optionen (Einbau bzw. Änderung von Links, Bildern, Tabellen, Textattributen) Eigenschaften-Inspektoren bereit; meist in Form von flottierenden Fenstern. Außerdem können Sie jederzeit vom Layout-Modus ("what you see is what you get"-Modus) zum Quellcode-Modus umschalten.

Unten sehen Sie ein Beispiel von GoLive. Sehen Sie die Icon-Liste durch, sie ist überwiegend selbst erklärend.Außerdem sehen Sie das Schriftgrößenmenu aufgeklappt, sowie den Inspektor (kontextsensitiv, hier also Linkinspektor, da ein Link markiert ist) geöffnet. In der Reiterleiste sehen Sie, wie sie vom Layout-Modus zu Quellcode-Modus und Vorschau-Modus (versteckt hinter Schriftgrößenmenu) zu sehen ist.

Unten nun dasselbe Beispiel wie oben, geöffnet im html-Editor Claris Homepage: Die Icon-Leiste von links nach rechts bedeutet:

Layout-Modus | Vorschau | Quellcode-Modus | Objekt-Inspektor | Link-Inspektor | Seiteninspektor | Anker einfügen | Grafik einf. | Linie einf. | Tab. einfügen |

Die restlichen drei Icons dienen zum Websitemanagement. In der Reihe darunter erklären sich die Icons von selbst. Der Linkeditor ist ebenfalls geöffnet.

Alle derartigen Programme sind mehr oder weniger in diesem Stil gemacht.

Insbesondere erleichtern sie die Arbeit mit Frames. Allerdings muss man auch hier über die Frames-Grundlagen Bescheid wissen, um nicht vor plötzlichen Problemen zu stehen. Hier nochmals zwei Beispiele, wie die beiden obigen Programme Frames-Erstellung erlauben.

Frames mit Claris-Homepage:

A: Aufrufen einer neuen Seite im Menu Datei. Hierbei Auswahl einer Rahmenseite:

B: hierbei erscheint dann folgendes Fenster. Sie sollten wenigstens eine vorhande Seite laden und angeben, ob die Grundeinteilung Ihrer Frames horizontal oder vertikal ist.

Danach erscheint eine Seite mit zwei vertikalen Frames im Layout-Fenster, außerdem haben sich die Icon-Menus geändert. Mit diesen Menus können Sie die Frames weiter unterteilen. Im unten stehenden Beispiel haben Sie nun drei Frames definiert, wobei erst eine Seite geladen ist. Für die beiden anderen Frames müssen Sie die Seiten erst noch erstellen und zuweisen. Der Frame links unten wurde aktiviert (Mausklick), im Rahmen-Inspektor könnte nun Rahmenname und Pfad eingetragen werden.

Nun noch die Erstellung von Frames mit GoLive im Überblick:

Go-Live besitzt einen extra Layout-Modus für Frames (der entsprechende Reiter ist unten im Vordergrund, roter Kreis). GoLive verfügt über eine Objekte-Palette, aus der vielfältige Objekte auf die Layout-Fläche gezogen werden und dann via Inspektoren mit Attributen und Parametern versehen werden. Unten sind die Frame-Objekte geöffnet (Pfeil), eines der Frame-Objekte wurde einfach auf die Layout-Fläche gezogen, was dann die gezeigten Frames ergibt. Größen können mit der Maus eingestellt werden, alles andere geht dann über den sog. Inspektor. Genügt dies für den Moment? Eine nähere Beschreibung des Vorgehens finden Sie in unserem GoLive Tutorial in Modul 6.1.

Auch wenn im Detail große Unterschiede bestehen, sind doch alle entsprechenden Programme vergleichbar. html-Seiten müssen erstellt werden, dann wird eine Seite mit den Framesets erstellt, wobei die einzelnen html-Seiten dann über Inspektoren zugeordnet werden.

Tipp: Wenn Sie bereits weiter z.B. mit GoLive arbeiten wollen, folgende Empfehlungen:

Laden Sie sich eine voll funktionsfähige, jedoch nur 30 Tage lauffähige Demo-Version von GoLive bei http://www.adobe.com herunter.

Dort gibt es auch ein pdf-Kurztutorial sowie jede Menge streaming-videos als Tutorial (verwenden Sie dabei v.a. die Videotutorials zu GoLive4. Die Funktionen sind identisch. Die speziellen GoLive5-Filmchen zeigen nur spezielle Funktionen der Version 5.

Ein umfassendes GoLive-Tutorial mit vielen Tipps gibt es in Kursmodul 6 (Beginn des Kursteils B)

Die aktuelle GoLive-Version ist derzeit 6.0.1 (Stand März 03). GoLive läuft nun auch unter MacOS-X. Inhaltlich gibt jedoch kaum Änderungen.

Alles weitere zur Benutzung von Go-Live erfahren Sie im Kursteil B in unserem GoLive-Tutorial.