eine Seite zurück  ein Kapitel zurück  zur Inhaltsübersicht  ein Kapitel vor  eine Seite vor     

2.4 Tools zur Webseitenerstellung


Texteditor
Quelltext-Editoren
Graphische Editoren
Vergleich
Fazit
Links


Texteditor  Seitenanfang

HTML ist ein Klartextformat und kann daher in einem einfachen Texteditor erstellt werden. Da dieses Programm meist zur Standardausstattung eines Betriebssystems gehört, ist es für jeden problemlos nutzbar. Der Texteditor zählt zu den Quelltext-Editoren. Allerdings bietet er im Gegensatz dazu keine Zusatzfunktionen. Als Anwender erhält man also keine unterstützenden Hilfsmittel bei der Erstellung einer Webseite. Man ist stattdessen auf die eigenen HTML-Kenntnisse angewiesen. Auf den ersten Blick erscheint dies ziemlich umständlich, doch die direkte Eingabe wird neben der Verwendung von den eigentlichen Quelltext-Editoren von vielen bevorzugt.

Vorteile:

Nachteile:

HTML-Dokument und Textdokumnet - Ein bedeutender Unterschied im Format!

Bei der Arbeit mit dem Texteditor muss man auf das Dateiformat achten. Der Texteditor gibt immer das Textformat . txt als Standard vor. HTML-Dokumente können in diesem Format jedoch nicht vom Browser erkannt werden, daher muss man sie mit der Endung .htm oder .html im reinen HTML-Format abspeichern.

 

Quelltext-Editoren  Seitenanfang

Man arbeitet mit Quelltext-Editoren genauso wie mit dem Texteditor. Allerdings werden dem Anwender sinnvolle Zusatzfunktionen geboten, die die direkte Eingabe des Quellcodes schneller und einfacher machen. Dabei bleiben die Vorteile der direkten Eingabe erhalten. Die Kombination aus direkter Code-Eingabe und Zusatzfunktionen ist neben dem soliden Quellcode, den man damit erzeugen kann, mitunter der Grund, dass sich diese Programme großer Beliebtheit erfreuen.

Das Anwendungsfenster eines Quelltext-Editors ist grundlegend in zwei Teile gegliedert: in den Menübereich mit den Zusatzfunktionen und den HTML-Eingabebereich. Diese Aufteilung macht es dem Anwender äußerst leicht zwischen der Methode der direkten Code-Eingabe und der Formatierung mit Hilfe des Menüs hin und her zu schalten. Dabei dient vor allem letzteres der Definiton elementarer Strukturen einer Webseite. Wie auf dem nachfolgendem Bild zu erkennen ist, handelt es sich dabei um die Formatierung von Text, Tabellen und Listen, die entweder per Mausklick auf den entsprechenden Button oder per Tastatureingabe realisiert wird. Zudem bieten einige Quelltext-Editoren eine Hilfestellung bei der Einbindung von HTML-Erweiterungssprachen und bei der Eingabe des Farbcodes in Hexadezimalschreibweise.

Menüleiste des Quelltext-Editors HTML Editor Phase 5.

Außerdem bieten Quelltexteditore oft verschiedene Ansichten der Webseite an. Neben dem HTML-Eingabebereich mit dem Quellcode gibt es noch eine graphische (Vor-)Ansicht des Web-Dokuments im Browser. Dadurch kann der Anwender seinen gerade eingegebenen HTML-Code auf Funktionieren testen/kontrollieren.

Ansichtsmodi  Phase 5

Der HTML-Editor Phase 5 bietet zudem einen weiteren interessanten Menüpunkt. Hinter dem Button/Funktion Bildbetrachtung (auf obiger Grafik zu erkennen) steht die Möglichkeit, den exakten Farbwert jedes Bildpunktes eines Bildes, also den Hexadezimalcode, genau zu ermittlen und in das aktuelle HTML-Dokument, beispielsweise als Farbe des Texts oder des Hintergrunds, einzufügen.

Neben diesen Funktionen bieten Quelltext-Editoren oft eine komfortable Grundlagenausstattung. Dazu zählt z.B. die automatische Konvertierung von Sonderzeichen - eine Funktion die besonders für Übersetzer interessant ist - und das Syntaxhighlighting, das, wie auf nachfolgendem Screenshot zu erkennen, für die farbliche Hervorhebung der unterschiedlichen Teile des Quellcodes steht.

Syntaxhighlighting - Jede

Beispiele für kostenlos erhältliche Quellcode-Editoren:
Scribe!
 (Plattform: Windows)
HTML Editor Phase 5  (Plattform: Windows)
Arachnophilia
  (Plattform: Windows)
Bluefish  (Plattform: Linux)
1st Page 2000  (Plattform: Windows)
NoteTab Light
  (Plattform: Windows)
HTML-Kit  (Plattform: Windows)

 

Graphische Editoren - "What You See Is What You Get"  Seitenanfang

Graphische Editoren sind sogenannte WYSIWYG-Editoren (What You See Is What You Get). Ähnlich wie bei einem Textverarbeitungsprogramm (Microsoft Powerpoint oder Word) arbeitet der Anwender in einem graphischen Erstellungsmodus. Die Programmoberfläche sieht wie ein Browser aus, daher wird das Gefühl vermittelt, direkt in einer bereits durch den Browser visualisierten Webseite zu arbeiten. Die Formatierung und Strukturierung der Elemente erfolgt über eine Menüleiste per Mausklick. Dabei ist sogar die Funktion Drag&Drop zum Verschieben und Anordnen der Elemente verfügbar. Der Anwender erstellt die Webseite also ausschließlich an Hand einer graphischen Darstellung. Mit dem Quellcode hat er nichts zu tun. Dies erledigt allein das Programm für ihn. Es setzt die Anweisungen, die der Anwender per Mausklick auf einen Button gibt, in HTML-Code um.

Verheerend bei WYSIWYG-Editoren ist, dass man sich bei der Gestaltung der Seite und dabei besonders beim Anordnen der Elemente nach dem äußeren Layout richtet. Der Anwender achtet dann nur auf die Darstellung, die er gerade vor sich hat. Die eigentliche Funktion von HTML, Inhalt unter Berücksichtigung von Logik zu strukturieren, gerät dabei in Vergessenheit. Dem Nutzer vermitteln solche Programme das Gefühl, dass die erstellte Webseite im WWW genauso aussehen wird, wie im Editor (daher auch: What You See Is What You Get). Jedoch wäre dies nur unter den folgenden Voraussetzungen der Fall: Browsertyp und -konfiguration, Betriebssystem, Monitorgröße, Grafikkarte, Bildschirmauflösung, Größe des geöffneten Browserfenster, Rechnertyp, etc - all dies müsste vollkommen identisch sein. In der Realität trifft dies wohl kaum zu.

Viele dieser Programme bieten zudem nicht einmal die Möglichkeit, die Entwicklung der Webseite parallel zur Eingabe in der Layoutansicht in der Quelltextansicht zu verfolgen und bei Bedarf dort direkt Korrekturen vorzunehmen. Eine Ausnahme stellt z.B. das Programm Macromedia Dreamweaver dar, das dies durch einen geteilten Bildschirmmodus (Layout- und Quelltextansicht gleichzeitig) ermöglicht.

Weitere Probleme entstehen, wenn der Anwender neuentwickelten HTML-Code eingeben möchte, aber das Programm diese Standards nicht kennt, weil es sie zur Zeit der Entwicklung des Programms noch nicht gegeben hat. Dem Anwender bleibt dann nicht anderes übrig, als auf die neuen Standards zu verzichten oder diese nachträglich mit Hilfe des Texteditors einzutragen um zu verhindern, dass Fehlermeldungen angezeigt werden.

Viele WYSIWYG-Editoren bieten jedoch nicht die Möglichkeit, zwischen Layout- und Quelltextansicht umzuschalten. So ist es auch nicht möglich die Entwicklung der Seite direkt im Quelltext zu verfolgen und dort Korrekturen und Änderungen vorzunehmen.

Dazu kommt, dass WYSIWYG-Editoren den HTML-Code unnötig vergrößern und somit im Web längere Übertragungszeiten verursachen. Außerdem besteht das Problem, dass Editoren wie Microsoft FrontPage oder Netscape Composer Browser spezifischen HTML-Code entwickeln, der nur im jeweils hauseigenen Browser, also Microsoft Internet Explorer und Netscape Navigator, problemlos darstellbar ist.

Graphische Editoren sind aus diesen Gründen gar nicht oder nur bedingt geeignet. Bei ihrer Verwendung sind HTML-Kenntnisse unbedint erforderlich, um ein gutes Ergebnis zu erzielen. Einen Unterschied zu den gewöhnlichen WYSIWYG-Editoren stellen sogenannte Content Management Systeme, wie z.B. der Macromedia Dreamweaver, Adobe GoLive oder Netobjects Fusion, dar. Neben der eigentlichen Webseiten Erstellung konzentrieren diese Programme sich auf das Verwalten ganzer Websites. Automatische Linkkontrolle und die Erstellung von Vorlagen zählen ebenso zu ihren (Aufgaben) wie Verzeichnis- und Dateiverwaltung oder die professionelle Einbindung verschiedener Teilarbeiten in größeren Projekten. Dieser hohe Anspruch spiegelt sich auch auf unterster Ebene wider: Content Management Systeme liefern im Allgemeinen einen soliden und vor allem Browser-unabhängigen Quelltext und bieten dabei dem Anwender sowohl die Möglichkeit, den HTML-Code direkt in den Quellcode einzugeben als auch die optisch schönere Variante im graphischen Layoutmodus.

Beispiele für Graphische Editoren:
Macromedia Dreamweaver  (Plattform: Macintosh und Windows)
Microsoft FrontPage
 (Plattform: nur Windows)
Quanta 2.0.1  (Plattform: Linux)
AOL Press  (Plattform: Windows  --  Freeware)
StarOffice  (Plattform: Multi-Plattform  --  Freeware)
Netscape Composer  (Plattform: Windows, Macintosh und Linux)
Tarantula  (Plattform: nur Windows)
NetObjects Fusion
ADOBE GoLive  (Plattform: Windows und Macintosh)
Amaya (Plattform: Windows und Linux  --  Freeware)
Visual Studio.NET  (Plattform: Windows)

 

Direkter Vergleich der möglichen Methoden zur Erstellung von Webseiten  Seitenanfang

Merkmal
Texteditor
Quelltext-Editor
(Phase 5)
WYSIWYG-Editor
(AOL Press)
Direktes Verfolgen der Code-Eingabe möglich
Ja
Ja

Nein
(meist nicht, jedoch Ausnahmen vorhanden)

Code-Eingabe per Menü
Nein
Ja
Ja
Autom. Fehlerkorrektur
Nein
Ja
Ja
Autom. Konvertierung der Sonderzeichen
Nein
Ja
(meistens)
Ja
Einarbeitungszeit niedrig
Ja
Ja
Nein
Suchen/Ersetzen-Funktion
Nein
Ja
Ja
Akzeptanz neuer Standards
Ja
Ja
Nein
Unabhängig von Software
Ja
Nein
Nein
Kontrolle über Quellcode
Ja
Ja
Nein
Siteverwaltung
Nein
Nein
Nein
(Ausnahme: Dreamweaver)
Syntaxhighlighting
Nein
Ja
Nein
direkte Vorschau im Browser
Nein
Ja
Ja
Qualität des Quellcodes gut
Ja
(da beeinflussbar)
Ja
(da beeinflussbar)
Nein
(da meist nicht beeinflussbar)

 

Fazit  Seitenanfang

Betrachtet man sich obigen Vergleich, so kann man erkennen, dass die drei unterschiedlichen Methoden alle Vor- und Nachteile haben. Es gibt also kein Produkt, dass allen Anforderungen gleichzeitig gerecht wird. Letztendlich bleibt die Entscheidung für oder gegen ein Programm jedem selbst überlassen. Jeder Anwender wird bei der Auswahl eines HTML-Editors seine eigenen Vorlieben berücksichtigen. Eines ist jedoch sicher: Will man sich ernsthaft mit der Erstellung von Webseiten beschäftigen, so kommt man nicht darum herum, sich HTML-Kenntnisse anzueignen.

 

Links

Link-Verzeichnis HTML-Editoren von SELFHTML http://selfaktuell.teamone.de/links/html_editoren.htm

Liste kostenloser Editore http://www.bestfreeware.de/details/Windows/html-editoren.htm

Test einiger Graphischer Editoren http://www.tecchannel.de/internet/80/index.html

Vergleich zwischen Frontpage und Dreamweaver http://www.wintotal.de/tests/fp2002/fpdw.htm


    eine Seite zurück  ein Kapitel zurück  zur Inhaltsübersicht  ein Kapitel vor  eine Seite vor          Erstellt von Simone Fabian, Kristina Laub & Claudia dos Reis Santos, letzte Änderung im Oktober 2002.