Hannes Birnbacher, Windhagen/Ww.

HTML-Editoren

Kostenlos oder bis 20 Euro

Vorgeschichte

Meine Websites habe ich jahrelang mit reinen Quelltext-Editoren wie Homesite, Phase5 oder Bluefish erstellt, wobei sogenannte Includes, Textbausteine wie für Seitenkopf oder Menü, mit dem Macroprozessor M4 und Gnu Make eingesetzt und bei jeder Änderung auf allen Seiten aktualisiert wurden.
Mit der Zeit wuchsen die Anforderungen an eine schnelle und damit kostengünstige Erstellung von HTML-Seiten. Dies versprechen What-you-see-is-what-you-get (WYSWYG)-Editoren, in denen man die Inhalte einfach reinschreibt und sich das Layout mit der Maus zusammenklickt.
Bedauerlicherweise erlaubten die frühen Editoren dieser Klasse keine Kontrolle über den Quelltext. Sie konnten fett, klein, groß, eingerückt schreiben, aber produzierten Code, der nach der Festlegung des W3C Konsortiums, das die einheitliche Norm für Internetseiten festlegt und fortentwickelt, überholt ("deprecated") ist, und kamen mit der Entwicklung von Style Sheets überhaupt nicht zurecht. Die frühen Vertreter dieser Klasse wie der in Netscape enthaltene Editor oder Frontpage bzw. Frontpage Express waren unverzichtbar, um den Text von Artikeln zu erfassen oder eine Tabelle mit Daten zu füllen, konnten aber nicht wirklich eine technisch einwandfreie, neuzeitliche Website erschaffen.
Bildschirmabdruck Dreamweaver
Später ging ich wegen der ausgefeilten Site-Verwaltung zu einer älteren Version von Dreamweaver, dem langjährigen Marktführer, über. Sonder-Editionen des Webhosters Loomes waren neu samt gedrucktem Handbuch bei Pearl oder Ebay-Verkäufern für ein paar Euro zu bekommen. Auch diese Uraltversion konnte die heutigen Anforderungen an einen WYSWYG-Editor mit CSS nicht wirklich erfüllen. Dreamweaver hat aber immerhin in den älteren Versionen den Vorteil, daß es mit Wine/Crossover auch direkt unter Linux betrieben werden kann.
Beispiel: in einem modernen Code wird für eine Einrückung ein Block ("div") benannt und ihm ein linker Rand zugewiesen (etwa margin-left:20px). Dreamweaver MX aus dem Jahre 2002 produziert für eine zweifache Einrückung stattdessen einen dreifach geschachtelten Absatz mit zweifachem "blockquote", einer Anweisung aus dem letzten Jahrtausend für Einrückungen. Hier ein Bildschirmabdruck mit der Vorschau unten, dem Code oben.
Dreamweaver MX Vorschau
Vorschau derselben Kundenwebsite
Margarethenkreuz - Bild
Original einer Kundenwebsite

Bei dieser Uraltversion aus dem Jahre 2002 ist natürlich auch die Vorschau fehlerhaft und damit die einfache Eingabe nach dem WYSWYG-Editor für Websites mit modernen Style Sheets nicht möglich. Kommentar zu nachstehenden Beispielen ist wohl überflüssig.

Ich brauchte einen Editor, der genau das in den Quelltext schrieb, was ich mir vorstellte, und mir dabei die Tipp-Arbeit ersparte. Also war ich offen für etwas Neues.

Die Alternativen

Die neuesten Versionen von Dreamweaver (CS3 = Version 9) und Microsoft (Expression Web) sind als Spitzenprodukte ziemlich teuer, erfordern eine Produktaktivierung bzw. bei Computerwechsel eine vorherige Deaktivierung und benötigen darüber hinaus die neueste Windows-Version. Alles Nachteile, die ich als Linux-User, der nur die unverzichtbaren Windowsprogramme in einer Virtuellen Box unter Linux betreibt, nicht in Kauf nehmen wollte.
Nachdem ich sehr schnell feststellte, daß die Linux-Alternativen Amaya und Quanta ebenfalls nicht nach meinem Geschmack sind, untersuchte ich die nachstehenden Programme. Normale Funktionen ("wie mache ich einen Text fett und schräg / wie färbe ich den Seitenhintergrund ein / wie füge ich ein Foto unter meinem Text ein") sind bei allen WYSWYG-HTML-Editoren gelöst, also konzentrierte ich mich auf zwei wichtige Bereiche, CSS und Website/Modulverwaltung. Die Fragen waren:
  • CSS
    • Wie erstelle ich einen Inline-Style
    • Wie erstelle ich einen internen Stil
    • Wie erstelle ich ein externes Stylesheet
    • Wie exportiere ich die Inline-Styles (die auf der ganzen Seite verstreut sind und nur auf dieser) in den internen Stilbereich (der, für die ganze Seite gültig, platzsparend im Seitenkopf gespeichert ist)
    • Wie exportiere ich den internen Stilbereich aus dem Kopf einer einzigen Seite in ein Style Sheet, das für alle Seiten einer Website herangezogen werden kann. Kann ich also an einem Element auf einer Seite einen Stil entwickeln und ihn später zwecks Anwendung auf die gesamte Website zentral abspeichern.
  • Site-Verwaltung
    • Wie kann ich einmal eine Seitenvorlage ("Template") z.B. mit Menü, Logo oben, Adresse im Fuß verfassen, die bei jeder neuen Seite wiederverwendet wird
    • Wie kann ich die evtl. beträchtliche Anzahl längst fertiger Seiten anpassen, wenn sich z.B. in der Adresse etwas ändert oder ein Menüpunkt hinzukommt
    • Wie kann ich meine ganz individuellen Code- Ausschnitte in späteren Projekten wiederverwenden
    • Wie kann ich solche wiederverwendeten Code-Ausschnitte in allen Seiten erneuern, wenn sie sich ändern, z.B. wenn ich mein Firmenlogo modernisiert habe
    • Wie kann ich sicherstellen, daß alle Änderungen, die z.B. auch gemäß vorstehenden Mechanismen automatisch auf den einzelnen Seiten vorgenommen wurden, lückenlos in's Internet hochgeladen werden
    • Welche Hilfen gibt es sonst

Exkurs

Was soll an Styles (CSS) so wichtig sein, fragt sich der Nachwuchs-Webdesigner. Nagut, statt "font color="red"" kann ich jetzt schreiben: "style="color:red;"", was soll's.
Die neue Schreibweise mit Styles hat aber den Vorteil, daß sie sinnreich an eine Stelle gesetzt werden kann und dann gezielt für alle ähnlichen Elemente dient.
Beispiel Menütechnik:

Ausschnitt aus der Webseite



Ausschnitt aus dem Sourcecode
Häufig hat man für Menüs eine Tabelle gemacht, die Zellen einzeln mit Breite, Ausrichtung usw. gekennzeichnet und die Links zu den Seiten hineingeschrieben - auf jeder Seite, für jede Tabellenzelle einzeln. Nebenan ein einfaches textbasiertes Menü, bei aufwendigeren Seiten plaziert man teuer erstellte Grafikbuttons in rahmenlose und damit unsichtbare Tabellenzellen. Bei globalen Änderungen z.B. an der Hintergrundfarbe etc. ist es eine unübersehbare und fehleranfällige Arbeit, diese Änderungen dann auf dem kompletten Internetauftritt sicherzustellen. Darüberhinaus sind die herkömmlichen Gestaltungselemente viel eingeschränkter als bei Verwendung von Styles.



Ausschnitt aus einem Menü mit CSS


Zugehöriger Sourcecode
Statt die Navigation wie vorstehend in Tabellen zu legen, schreibt man sie einfach als Liste - hat aber festgelegt: wenn solche eine Liste in einem Bereich, den man "Navigation" genannt hatte, vorkommt, werden die einzelnen Zeilen nicht untereinander, eingerückt und mit einem Punkt davor plaziert (wie weiter oben im Text auf dieser Seite), sondern nebeneinander, mit einem Rahmen und einem Hintergrund, wobei sich die Schrift und der Hintergrund verändern sollen, wenn der Mauszeiger darüber steht. Die Gestaltung wird also zentral und leicht änderbar an einer einzigen Stelle vorgenommen, und im Code der einzelnen Seiten wird einfach losgeschrieben.

In einem Stylesheet (CSS) ist es ein Leichtes, an einer Stelle Eigenschaften des gesamten Internetauftrittes festzulegen, z.B. zuerst diejenigen für die gesamte Seite, dann die besonderen für jeweils festgelegte und benannte Bereiche wie "kopf", "navigation", "inhalt" und "fuss", dann weitere evtl. benötigte für Elemente, je nachdem, wo diese Elemente integriert sind. Grafikdateien ("img") in "kopf" könnten sich z.B. nahtlos zu einem Banner aneinanderfügen, Grafikdateien in "inhalt", etwa eine Bildergalerie, ein graues Rähmchen und einen festgelegten Abstand voneinander bekommen, ohne dass das auf der betreffenden Seite berücksichtigt wird - es gelten die Festlegungen des Stylesheets für den gesamten Internetauftritt.

NVU/KompoZer

Schon Netscape kam mit einem kostenlosen HTML-Editor. Er nervte damit, daß er den HTML-Code bisweilen nach seinem Gusto änderte, um vermeintliche Fehler auszubügeln (was er mit dem ebenfalls kostenlosen Frontpage Express von Microsoft gemeinsam hatte). Der Editor von Netscape namens Composer wurde mal mit runden Ecken versehen, die Buttons kriegten hübsche Schattierungen und dann hieß er NVU. Besser war er damit nicht geworden, bis ein Entwickler sich anschickte, die zahlreichen Bugs auszubügeln und das Programm an die Bearbeitung neuzeitlicher Styles (CSS) anzupassen. Das Ergebnis kann sich sehen lassen: KompoZer für Windows und Linux, für den es von Charles Cooke ein hervorragendes (aber wegen der Kompliziertheit der Materie und den vielen intelligenten Features auch unverzichtbares) Tutorial/Handbuch in der neuesten Version auf englisch gibt, eingedeutscht hier als PDF von 3.2 MB zu finden.
Nicht anders als GoLive CS2 kann NVU/KompoZer Styles komfortabel und fehlerfrei inline, intern und per externem Stylesheet erfassen und speichern, oft sogar intuitiver und anwenderfreundlich implementiert:
Für inline-Stilanweisungen klickt man mit der rechten Maustaste auf den "tag" in der Fußzeile des Editorfensters und wählt den vorletzten Menüpunkt "inline styles", die anderen beiden Methoden sind über Markieren und Anklicken des CSS-Editor-Icons selbsterklärend anwendbar. "Höhertauschen", also der Export von einem Element zur internen Datei im Seitenkopf und von dort in ein zentrales Stylesheet ist leicht möglich. Im Gegensatz z.B.zu Dreamweaver MX 2004 löscht NVU/KompoZer dabei auch die Zeilen der internen Styles und fügt in den Seitenkopf eine Referenz zu dem externen Stylesheet.


Einfacher geht's nicht. Hier wurde der Bildschirmabdruck in der Vorschau (rechts) markiert, sodaß der "img" Tag in der Fußlinie angezeigt wird. Rechtsklick hierauf, "Inline Styles" angewählt und ein Editorfenster für die verschiedenen Eigenschaften wie Background, Borders usw. erscheint.


Hier wird mit Rechtsklick auf den "img" Tag ( im Bild links unten teils verdeckt) ein Aufklappmenü hervorgerufen. Im Bild ist gezeigt, wie ein "ID" aus den sechs im Stylesheet vorhandenen zugewiesen wird. So etwas schafft nicht einmal Adobe GoLive CS2; dort findet man im Helptext den Hinweis, für die Zuweisung einer eindeutigen Klasse den HTML-Sourcecode händisch zu editieren.

Die intuitive Schöpfung, gar das Schachteln, von schwebenden DIVs in der Entwurfsansicht mit der Maus ist mir allerdings nicht gelungen, zumal der dafür eingerichtete Button für Layer nur absolut positionierte DIVs schafft. Hier muß man mit dem Quelltext arbeiten.

Seitenvorlagen sind vorgesehen, auf die dann bei der Erstellung zusätzlicher Seiten zurückgegriffen wird. Für die Windowsversion gibt es sogar ein gesondertes Programm, mit dem bereits erstellte Seiten auf eine geänderte Vorlage aktualisiert werden können: http://thefoolonthehill.net/NVU_Template_Updater.htm.
Codeschnipsel, gar die Aktualisierung von solchen, sind nicht vorgesehen.
Die eingebaute Hochladefunktion ("Publishing") wird von der Szene mit Mißtrauen gesehen, da nicht an die zwei verschiedenen, anzutreffenden Methoden anzupassen (aktiv oder passiv). Dies schlägt sich in Berichten nieder, daß die Funktion "manchmal" geht und je nach Website ausprobiert werden muß.
Ich habe nie die eingebaute Publishing-Funktion der HTML-Editoren verwendet, sondern unter MS-Windows den "FTP-Uploader" (kostenpflichtig) und unter Linux "Sitecopy". In beiden Programmen werden mehr oder weniger komfortabel Zugangsdaten, lokales Verzeichnis usw. eingegeben, dann der derzeitige Status erfasst und ab dann genau die Dateien in das Internet hochgeladen, die seit dem letztenmal Hochladen geändert wurden. Dies ist natürlich komfortabler, sicherer und schneller als die Verwendung eines eingebauten oder externen FTP-Clienten, bei dem entweder (nur) das hochgeladen wird, was angeklickt worden ist, oder jedes Mal bei vielleicht tausenden Seiten und Fotos erst der Datumsstand auf der Internetseite mit dem auf der lokalen Festplatte verglichen wird, um dann gezielt die erneuerten Dateien hochzuladen.
NVU/KompoZer stellt (wie jeder moderne HTML-Editor) noch zahlreiche weitere, charmante und arbeitssparende Funktionen bereit. So braucht man nur einen Dateinamen aus dem Sitefenster in das Editorfenster zu ziehen und hat schon einen lokalen Link dastehen, und NVU/KompoZer kann sogar mit einem Mausklick automatisch ein Inhaltsverzeichnis einer Seite aus den darin vorhandenen Überschriften erstellen.
Suchen/Ersetzen über alle Seiten eines Internetauftrittes (was nützlich ist, wenn sich etwa eine Telefonnummer oder eine Bilddatei ändert, die mehrfach vorkommt), wie dies bei vielen HTML-Editoren wie auch den alten Dreamweaver-Versionen, Bluefish oder GoLive vorgesehen ist, gibt es in NVU/KompoZer jedoch nicht.
Fazit: In vielen Aspekten steht NVU/KompoZer, was die Funktion und Bedienung anbetrifft, den kommerziellen Produkten keineswegs nach. Die Seite, die Sie gerade hier lesen, entstand mit KompoZer und war "eigentlich" die Antwort auf die Erkundigung eines Freundes: "Für welchen Editor hast Du Dich nun entschieden", brauchte in diesem Rahmen keinen größeren Anforderungen an die Siteverwaltung zu genügen. Die Geister scheiden sich bei höheren Ansprüchen an die Baustein- und Websiteverwaltung, zudem hat NVU/KompoZer noch Anklänge an den früheren Composer von Netscape, vorhandenen Code ohne Rückfrage zu ändern bzw. bereits vorhandene Style Sheets nicht anzuerkennen. Höchst bedauerlich ist, daß beim Springen vom Entwurfsmodus zum Source-Editor, was mit den Tabs so praktisch aussieht, jedesmal der Cursor an den Anfang der Seite springt.
Für Anfänger oder für Sparsame ein guter Einstieg - zumal das PDF-Handbuch zu GoLive 697 statt 50 Seiten wie bei NVU umfasst und man für GoLive gleich einen hochauflösenden Bildschirm für die vielen Fensterchen und Werkzeugleisten mit einplanen sollte.
Freilich habe ich Kompozer zwischenzeitlich de-installiert, da es die Vorlagenverwaltung von Dreamweaver MX durch Einfügen unsichtbarer Steuerzeichen im Hintergrund zuverlässig außer Kraft setzt. Überdies lässt die Alpha der nächsten Version erkennen, daß hier kein Umschalten auf den Quelltext-Editor mehr möglich ist und damit hat das Programm für Fachleute m.E. keine Zukunft mehr. Ein Test von Quantaplus 3.5 verlief ebenfalls - für diesen Zweck - negativ; unter Ubuntu 9.04 läuft der visuelle Editor im Fließtext nicht ordentlich, Paste geht nicht, der Fokus liegt nicht da, wo man den Cursor hinstellt, es sei denn, man macht vor jeder Schreib-, Backspace- oder Lösch-Aktion ein "Enter" usw.

Adobe GoLive CS2

Adobe GoLive ("GL") wurde von einem der größten Webhoster als Beigabe zu den höherpreisigen Webspace-Verträgen geliefert und ist deswegen recht verbreitet. Kunden, die den Vertragspassus über die rein leihweise Überlassung während der Vertragszeit nicht gelesen haben oder denen das Risiko einer Rückforderung egal ist, haben wohl auch bisweilen ihre Version weiterverkauft, sodaß man an diese sehr moderne und hochwertige Software schon mal unter 10-20 Euro herankam. In die sinkende Marktbewertung spielt vermutlich auch hinein, daß Adobe die Software des Marktführers, Dreamweaver, aufgekauft hat und Anwender befürchten, daß nur noch Dreamweaver fortentwickelt werden wird.
Wie erwähnt setzt GL die Styles ebenfalls komfortabel und korrekt in allen Erscheinungsformen um. Die seltenste Alternative, nämlich den Stil inline zu erstellen, ist etwas umständlicher: das Element in der Fußzeile markieren wie bei NVU/Kompozer, den CSS-Editor öffnen, auf das Icon "erstellt neue CSS-Anweisungen" klicken, es erscheint unter "Stilattribut" das markierte Element (etwa eine "div" Anweisung), und dieses kann nunmehr in seinen verschiedenen Eigenschaften festgelegt werden. Auch ein "ID" Attribut kann, im Gegensatz zu NVU/CompoZer, nicht im normalen Modus einfach zugewiesen werden, sondern muß händisch in den Sourcecode hineingeschrieben werden.
Auch bei GL gibt es keine  Schwierigkeiten, eine Stil-Anweisung in ein internes oder externes Stylesheet zu exportieren, um zentral darauf zugreifen zu können.
GoLive CS2 stammt von 2005 und wie zu erwarten, klappt die Vorschau auch für Seiten mit modernen CSS problemlos.
CSS heisst "Cascading Style Sheets". Wie weiter oben im Exkurs angedeutet, können durch das kaskadierende Prinzip sowohl allgemeine als auch speziellere Stil-Anweisungen auf ein Element wirken - und zwar Anweisungen, die an drei verschiedenen Stellen (bei dem HTML-"tag", im Seitenkopf und in einem separaten Stylesheet) gespeichert sind. Ein wichtiger Vorzug von GL ist, daß für ein markiertes HTML-Element alle Styles angezeigt werden, die aus den genannten Quellen darauf wirken.


Anfänger und Profis werden die sieben Grundstrukturen mit CSS für neue Seiten schätzen, die etwas versteckt in der "Objects Palette" im Tag "CSS" liegen. In obigem Bildbeispiel wurde erst der Seitenaufbau "Zwei Spalten: Feste Größe links" in das Hauptfenster gezogen, dann in die linke Spalte die Navigationszeilen bereit zum Ausfüllen mit den Menülinks.




Mit GoLive CS2 kann man nicht nur Site-Diagramme zeichnen, sondern auch die Seiten automatisch erstellen lassen. Die Funktion ist m.E. allerdings zu anfällig für Fehlbedienungen, um Zeit zu sparen.

Mit GL sind sowohl Seitenvorlagen ("Templates") als auch Einzelelemente ("Snippets") möglich, die bei Änderung automatisch in allen bereits erstellten Seiten aktualisiert werden. Ferner hat GL eine "Publishing"-Funktion zum Hochladen eingebaut, die darauf konfiguriert werden kann, die seit dem letzten Hochladen geänderten Seiten und Dateien hochzuladen. In beiden Punkten wird hier - ohne Zusatzprogramme - professionellen Erfordernissen entsprochen. Adobe stellt zum freien Download das Programm "Co-Author" bereit, mit dem ein Kunde oder Sachbearbeiter selber auf die Webseiten zugreifen kann - aber nur auf bestimmte, mit dem Hauptprogramm freigegebene Bereiche. Dies könnte z.B. der regelmäßigen Aktualisierung von Nachrichten oder Angeboten dienen.

Update: Da ich sowieso meistens im Quelltext arbeite und die gehobeneren Editoren nur für die Siteverwaltung benötige, bin ich allerdings selbst wieder auf Dreamweaver MX zurückgekommen. Es läuft im Gegensatz zu Adobe GoLive CS2 auch unter Linux (mit Crossover), sodaß keine virtuelle Maschine mit Windows extra dafür hochgefahren werden muß (die Schwierigkeiten beim Stromsparmodus verursacht), zum Hochladen ist mir Linux-"sitecopy" immer noch lieber, und Dreamweaver MX, obwohl drei Jahre älter als GoLive CS2, hat durch die "bedingten Bereiche" auch noch eine ausgefeiltere Template-Verwaltung.

URL dieser Webseite: http://www.hannes-birnbacher.de/html-editoren.html
Kurz-URL: http://tinyurl.com/5wjlzb

Nach oben
zurück zu "Computer"

Stand: 14. November 2010