Der erweiterbare HTML-Editor Bluegriffon basiert auf Mozillas bewährter Gecko-Engine, unterstützt bereits HTML5 und beherrscht WYSIWYG.

Die meisten HTML-Editoren unter Linux unterstützen den Anwender optimal beim klassischen Editieren mit HTML, CSS und anderen Web-Technologien. Dieses Feld ist also hart umkämpft und bietet dennoch Platz für einen weiteren Vertreter seiner Zunft, der mindestens einen Mehrwert bietet: WYSIWYG. Sie sehen also bereits beim Erstellen der Website das Resultat Ihrer Arbeit, ohne zusätzlich einen Browser öffnen zu müssen.

Der vom Entwickler Daniel Glazman seit 2008 betreute Bluegriffon [1] ist ein Nachfolger des Editors Nvu, der wiederum auf dem Mozilla Composer basiert. Der komplett neu programmierte Editor verwendet Mozillas HTML-Engine Gecko und wird seit seiner Erstveröffentlichung stetig weiterentwickelt. Bei der Anwendung selbst handelt es sich um Open-Source. Sie bietet die wesentlichen Grundfunktionen, die man zum Editieren von HTML braucht. Wichtige Zusatzfunktionen lassen sich durch allerdings größtenteils kostenpflichtige Addons ergänzen. Neben Linux unterstützt Bluegriffon Windows und Mac OS X, was ihn auch für Anwender interessant macht, die zwischen den Betriebsystemwelten hin und her pendeln.

Den HTML- und CSS-Quellcode erstellen Sie mit Bluegriffon W3C-konform, wobei die Anwendung neben XHTML 1.0 und HTML 4 auch das neue HTML5 und XHTML5 unterstützt. Auf der Seite der Cascading Stylesheets beherrscht Bluegriffon auch all jene Anteile von CSS3, die sich bereits in der Gecko-Engine finden. Daneben können Sie mit Bluegriffon auch SVG-Dateien bearbeiten. Diese Funktion übernimmt der in Bluegriffon integrierte SVG-Editor SVG-Edit. Wie Sie Bluegriffon installieren, zeigt der Kasten “Installation”.

$ chmod +x BlueGriffon-1.5.2-Ubuntu11.10-i686-Install
# ./BlueGriffon-1.5.2-Ubuntu11.10-i686-Install

Erste Schritte

Nachdem Sie Bluegriffon gestartet haben, begrüßt Sie eine aufgeräumte Oberfläche ohne viel Schnickschnack. Um mit der Arbeit zu beginnen, haben Sie mehrere Möglichkeiten. Mit [Strg]+[T] legen Sie ein leeres neues Dokument im selben Programmfenster an. Möchten Sie sich von der Anwendung ein paar Arbeitsschritte abnehmen lassen, dann klicken Sie in der Menüleiste auf Datei | Neu Assistent. Im sich nun öffnenden Assistenten legen Sie in wenigen Schritten den HTML-Typ fest, wie zum Beispiel HTML4 oder HTML5, und geben allgemeine Meta-Angaben zum Dokument ein, wie Titel, Autor und Beschreibung.

Darüber hinaus können Sie über diesen Assistenten bereits Grundlagen für das Layout der Webseite festlegen. So nehmen Sie beispielsweise Einstellungen für Farben und den Hintergrund vor und definieren ein CSS-Seitengrundlayout. Dazu finden Sie im letzten Dialog des Assistenten alle notwendigen Felder (Abbildung 1).

Abbildung 1: Der Assistent für neue HTML-Dokumente ermöglicht mit wenigen Klicks das Erstellen von dreispaltigen Layouts.

Nach Anhaken des Kontrollkästchens Vordefiniertes CSS-Layout anwenden legen Sie Über Breite und Seitenleiste fest, wie groß der Inhaltsbereich beziehungsweise die Seitenleiste ausfallen sollen. Über neue Zeile können Sie den Inhaltsbereich weiter aufteilen, indem Sie zum Beispiel dafür ein Zwei-Spalten-Layout vorsehen. Ein mögliches Ergebnis zeigt Abbildung 2. Mit Hilfe von Inhalt mit ‘lorem ipsum’ Platzhalter füllen erkennen Sie gleich nach Abschließen des Assistenten, was Bluegriffon aus Ihren Angaben zurechtgezaubert hat.

Abbildung 2: Dank des Assistenten ist ein solches HTML-CSS-Grundgerüst schnell erstellt.

Über die Symbolleiste und die Menüs erreichen Sie alle Funktionen, die Sie zum Erzeugen und Formatieren von Inhalten benötigen. Für das Einfügen von Tabellen und Links bietet die Software hilfreiche Unterstützung. Bei Tabellen geben Sie wie in einer Textverarbeitung mithilfe der Maus an, wie viele Spalten und Zeilen Sie gerne hätten. Für das Einfügen von Verknüpfungen steht ein Dialog zur Verfügung, in dem Sie alle erforderlichen Angaben wie Linktext, Ziel oder Zielfenster eingeben.

Die Arbeit im Wechsel zwischen der WYSIWYG- und der Quelltext-Ansicht geht flott von der Hand. Über die entsprechend bezeichneten Buttons unterhalb des Arbeitsbereichs springen zwischen diesen Ansichten hin und her. Sofern Sie mehrere Dokumente gleichzeitig geöffnet haben, können Sie diese über entsprechende Reiter unterhalb der Symbolleiste bequem in den Vordergrund holen und bearbeiten (Abbildung 3).

Abbildung 3: Wahlweise können Sie im Quelltext und in der WYSIWYG-Ansicht editieren.

Die WYSIWYG-Ansicht bietet den Vorteil, dass Sie gleich sehen, wie das Arbeitsergebnis aussieht, und gleichzeitig Inhalte editieren können. Dennoch sollten Sie zur Endkontrolle die Seite weiterhin in den Browsern Ihrer Wahl daraufhin überprüfen, ob die Darstellung tatsächlich so ausfällt wie gedacht.

Eine Brotkrumen-Darstellung unterhalb des Arbeitsbereichs informiert Sie laufend darüber, an welchem Knoten im HTML-Code Sie gerade arbeiten. Sofern Sie an der Grundstruktur der geöffneten Website schrauben möchten, empfiehlt es sich aber, in die Quelltext-Ansicht zu wechseln: Hier sehen Sie genau, was Sie tun, während es in der WYSIWYG-Ansicht schnell passiert, dass Sie etwas kaputt machen, was sich nicht so ohne Weiteres wieder reparieren lässt. Beim Wechsel in die jeweils andere Ansicht merkt sich Bluegriffon die Cursor-Position, sodass Sie bequem weiterarbeiten können, ohne die richtige Stelle suchen zu müssen.

Arbeiten mit HTML5 und Tabellen

Für die Arbeit mit HTML5 ist Bluegriffon schon gut vorbereitet. Im Menü Einfügen | HTML 5 Element finden Sie passende Elemente, die Sie über den WYSIWYG-Editor einbinden. Zwar wurde HTML5 noch nicht abschließend vom W3C verabschiedet, doch die bereits definierten Elemente sind hier verfügbar – darunter auch solche zum differenzierteren Strukturieren von Webseiten, wie <footer> oder <header>.

Auch Tabellen erstellen Sie mit Bluegriffon schnell. Positionieren Sie den Cursor an die Stelle, wo Sie eine Tabelle einfügen wollen, und klicken Sie in der Menüleiste auf Tabelle | Extras. Sobald Sie die Anzahl der Zeilen und Spalten festgelegt haben, fügt der Editor die Tabelle ein. Nun können Sie diese ausgiebig bearbeiten.

Über Tabelle | Einfügen | Tabellenlegende geben Sie eine Tabellenüberschrift an, die dem HTML-Element <caption> entspricht. Die wesentlichen Tabelleneigenschaften bearbeiten Sie unter Tabelle | Tabelleneigenschaften. Der sich über diesen Menü-Eintrag öffnende Dialog ermöglicht das Anpassen von Zeilen- und Spaltenanzahl, Rahmen, Abständen, Breiten und Zelleneigenschaften.

Cascading Stylesheets

Natürlich können Sie CSS-Code direkt in den Editor eingeben – doch das ist natürlich nicht der Sinn eines solchen Editors. Für das Bearbeiten von CSS definieren Sie mithilfe des Dialogs CSS-Eigenschaften Stile, IDs und Klassen (Abbildung 4).

Abbildung 4: Sie können bequem IDs und Klassen definieren und diese später bei Bedarf weiteren Elementen zuweisen.

Dazu positionieren Sie den Cursor an der gewünschte Position auf der Website und öffnen dann über den Button CSS Stil setzen die CSS Eigenschaften. Wählen Sie über die Auswahlliste Stile anwenden auf aus, ob Sie alle Elemente desselben Typs beziehungsweise alle Elemente einer bestimmten Klasse mit den CSS-Eigenschaften versehen wollen oder zusätzlich noch eine ID für das ausgewählte Element vergeben wollen. Nun tragen Sie in den darunter ausklappbaren Feldern die CSS-Eigenschaften ein.

Für fortgeschrittene Anwender, denen diese schon recht ordentlichen CSS-Funktionen nicht ausreichen, bietet das Bluegriffon-Projekt die Erweiterung CSS Pro Editor an, die derzeit 9,99 Euro kostet [3]. Sie erleichtert die Arbeit mit CSS und ermöglicht ein bessere Kontrolle über bestimmte CSS3-Features wie zum Beispiel Schatten.

Besondere Funktionen

Als standardkonformer HTML-Editor unterstützt Bluegriffon auch den XML-Standard für SVG-Vektorgrafiken. Allerdings verfügt er dazu nicht über eigene Funktionen, sondern bindet die Anwendung SVG-Edit ein (Abbildung 5). Sie starten SVG-Edit über das entsprechende Icon in der Symbolleiste, woraufhin die Anwendung ein eines Fenster öffnet. Über das Symbol in der Ecke oben links ändern Sie unter Document Properties die Anwendungssprache auf Deutsch. Unangenehmerweise geht diese Einstellung beim nächsten Start von SVG-Edit wieder verloren.

Abbildung 5: Mit dem integrierten SVG-Editor betten Sie auf Knopfdruck eigene Vektorzeichnungen in Bluegriffon ein.

Nun dürfen Sie zeichnen, was das Zeug hält. Auf der linken Fensterseite finden Sie verschiedene Werkzeuge für Linien, Formen und Text. SVG-Profis editieren nach einem Klick auf den Button mit dem Aufdruck SVG direkt im SVG-Quellcode. Die Größe des Gesamtbildes passen Sie über die bereits erwähnten Document Properties unter Dimension der Zeichenfläche an. Sofern Sie nicht den ganzen Arbeitsbereich ausnutzen, sollten Sie die Zeichenfläche entsprechend verkleinern, weil SVG-Edit anderenfalls auch den gesamten Weißraum mit in die Website übernimmt.

Sobald Sie die Zeichnung fertiggestellt haben, übernehmen Sie diese über den Menüpunkt Bild speichern direkt an die momentane Cursorposition auf der Website. Bluegriffon baut dann automatisch den notwendigen Quellcode ein – auch bei HTML4, wo sich SVG nur über Javascript integrieren lässt, während HTML5 das direkte Einbinden von SVG-Code erlaubt. Aus der WYSIWYG-Ansicht heraus können Sie die erstellte Grafik per Doppelklick erneut in SVG Edit bearbeiten.

Eine besondere Hilfestellung beim Editieren von HTML bietet der DOM-Explorer, mit dem Sie in der Elementstruktur der HTML-Datei navigieren und ebenfalls kleine Veränderungen vornehmen. Bei umfangreichen HTML-Dateien können Sie auf diese Weise im Dokument arbeiten, ohne den ganzen Code betrachten zu müssen. Über die rechte Maustaste entfernen oder ändern Sie Elemente. Sie rufen den DOM-Explorer über Konsolen | DOM Explorer auf.

Erweiterungen

Schon in der Grundausstattung lässt sich Bluegriffon sehr gut nutzen. Darüber hinaus erweitern Sie den HTML-Editor mit größtenteils kostenpflichtigen Addons wie den bereits erwähnten CSS Pro Editor. Eine eigene Website [3] bietet eine Übersicht aller erhältlichen Addons. Sie können diese einzeln erwerben oder nach dem Silver Offer [4] Ausschau halten: Dieses Addon-Paket kostet 35 Euro und enthält acht nützliche Erweiterungen.

In diesem Paket fehlen aber wichtige Zusatzfunktionen wie zum Beispiel der Project Manager, der Ihnen hilft, die Übersicht über die Projekte zu wahren und deren lokale Dateien mit dem Web-Server per FTP synchron hält. Ein weiteres interessantes Feature bietet der Mobile Viewer, der Sie bei der Entwicklung von Websites für mobile Endgeräte unterstützt.

Haben Sie sich für den Kauf von Addons entschieden, legen Sie wie von anderen Online-Shops gewohnt die Ware in einen Einkaufswagen. Zum Bezahlen benötigen Sie einen Paypal-Account, andere Zahlungsmöglichkeiten bietet der Shop nicht an.

Sieht man genau hin, finden sich aber auch kostenlose Ergänzungen für Bluegriffon im Angebot. Mit FireFTP erhalten Sie einen FTP-Client, der auf einfache Weise den Zugriff per FTP auf Ihren Webserver erlaubt. Außerdem finden Sie unter Dictionaries verschiedene Wörterbücher für die Rechtschreibkontrolle.

Fazit

Insgesamt präsentiert sich Bluegriffon als rundum zufriedenstellender HTML-Editor mit nützlichen CSS-Funktionen, der es ermöglicht, W3C-konformen HTML-Quellcode für Webseiten zu erstellen. Wer gewohnt ist, klassisch im Quellcode zu editieren, der muss sich ein wenig umgewöhnen. Einsteiger oder Anwender, die nur gelegentlich HTML-Seiten erstellen, empfinden die WYSIWYG-Arbeitsweise als Arbeitserleichterung. Bereits die Kernanwendung eignet sich bestens für das gelegentliche Arbeiten mit HTML.

Dagegen, dass sich das Projekt aus den Addon-Verkäufen finanzieren will, spricht grundsätzlich nichts. Für ernsthafte Anwender läppern sich die die Kosten für Addons aber schnell zu erklecklichen Beträgen. Wer klug ist, spart mit dem Angebot Silver Offer: Es enthält auch den CSS Pro Editor, der die ernsthafte Arbeit mit komplexem CSS-Code erst komfortabel macht.