BlueGriffon im Netz.de Test

BlueGriffon nimmt seinen Nutzern Programmierarbeit ab: Website-Elemente lassen sich per Klick einfügen und konfigurieren, Standards wie HTML5 und CSS3 werden unterstützt. Code-Grundkenntnisse erleichtern den Einstieg.

  • WYSIWYG-Modus: Webseiten direkt in der grafischen Ausgabe bearbeiten und anpassen
  • Editor inklusive: In den Quelltext springen und Justierungen vornehmen, Syntax-Parser und Multi-Cursor steigern Effizienz
  • Nicht alle Features kostenlos: Handbuch und erweiterte Funktionen müssen bezahlt werden
Die Benutzeroberfläche von BlueGriffon

Die Benutzeroberfläche erinnert an Textverarbeitungsprogramme: In der Mitte wird das Dokument dargestellt, über die Buttons links und oben lassen sich grundlegende Funktionen nutzen. Eine Leiste hilft bei der Orientierung im Code (1), ein Wechsel zwischen den Ansichten ist jederzeit möglich (2). Rechts sind die zuschaltbaren Konsolen eingeblendet (3).

CSS-Definitionen bearbeiten in BlueGriffon

BlueGriffon ermöglicht die Konfiguration von CSS-Eigenschaften in einer grafischen Oberfläche. Die Definitionen sind in Themenbereiche untergliedert.

Mit BlueGriffon erzeugte Beispiel-Seite

Der CSS-Editor von BlueGriffon lädt zum Ausprobieren ein.

Der Layout-Wizard von BlueGriffon

BlueGriffon erzeugt über einen Wizard vorgefertigte Layouts, kleine Anpassungen sind möglich.

Mit dem Layout-Wizard in BlueGriffon erzeugte Beispiel-Seite

Der Wizard generiert einfache Layouts, die sich individuell anpassen lassen. Einsteiger könnten mit der Bearbeitung jedoch Schwierigkeiten haben, denn der grundlegende Aufbau wird nicht erläutert.

Externe CSS-Dateien über BlueGriffon bearbeiten

Der Code von externen CSS-Dateien lässt sich in BlueGriffon nur umständlich bearbeiten. Nach jedem Speichern schließt sich das Fenster und muss über den rot markierten Button neu aufgerufen werden.

Videos in Webseiten einbinden mit BlueGriffon

Videos lassen sich mit wenigen Klicks anpassen und in Webseiten einfügen.

Das in BlueGriffon integrierte SVG-Edit

Über SVG-Edit erzeugen Anwender in BlueGriffon Vektorgrafiken, die als Datei gespeichert oder in Code-Form exportiert werden können. Online ist eine aktuellere Version zu finden.

Unsere Gesamtwertung
7,2 / 10
  • Funktion:
    7.5
  • Bedienung:
    6.0
  • Performance:
    8.0

BlueGriffon downloaden

Hersteller:  Disruptive Innovations SAS
Vorteile
  • Unterstützt aktuelle Standards wie HTML5 und CSS3
  • Nützliche Editor-Funktionen: Syntax-Parser, Multi-Cursor, Drag-and-Drop
  • WYSIWYG-Ansicht
  • HTML und CSS auf Knopfdruck erzeugen und anpassen
  • Grundversion kostenlos
Nachteile
  • Bearbeitung der CSS-Definitionen z.T. umständlich
  • Handbuch und nützliche Add-ons kostenpflichtig

BlueGriffon – Baukasten für HTML und CSS

Besonders HTML-Neulinge schätzen bei der Website-Programmierung das WYSIWYG-Prinzip ("What you see is what you get"): In einer grafischen Oberfläche werden Layout-Elemente, Text und Bilder zusammengefügt, die Software übernimmt im Hintergrund automatisch die Code-Arbeit. Der kostenlose WYSIWYG-Editor BlueGriffon beherrscht dabei HTML5, CSS3 und noch mehr – wer seine eigenen Ideen genau umsetzen möchte, wird am Code allerdings nicht vorbeikommen.

Dank HTML5-Support lassen sich Video- und Audio-Files, aber auch Tabellen, Grafiken oder Formulare mit wenigen Klicks einfügen. Die Konfiguration von CSS-Styles erfolgt über ein umfangreiches Werkzeug – der Sprung zwischen WYSIWYG-Ansicht und Quelltext ist jederzeit möglich, verschiedene Hilfsmittel erleichtern die Orientierung. Farbige Syntaxhervorhebungen und andere Funktionen unterstützen darüber hinaus beim Programmieren.

Einsteiger sollten sich jedoch auf eine gewisse Einarbeitungszeit vorbereiten. BlueGriffon fügt viele Elemente zwar auf Knopfdruck ein, die Funktion der verschiedenen Befehle und Attribute erklärt es jedoch nicht. Grundlegende Kenntnisse von HTML und CSS sind bei den ersten Schritten daher von großer Hilfe. Nützliche Add-ons sind leider kostenpflichtig. Besonders ärgerlich: Selbst das Handbuch lässt sich nur gegen Bezahlung downloaden. In diesem Testbericht befassen wir uns mit BlueGriffon in seiner kostenlosen Grundfassung.

Einfache Webseiten unkompliziert erstellen

Wer eine simple Informationsseite für das Internet erstellen möchte, erzielt mit BlueGriffon zügig Ergebnisse. Die Benutzeroberfläche in der WYSIWIG-Ansicht erinnert an Textverarbeitungsprogramme: In der Mitte wird das Dokument dargestellt, Toolbars am linken und oberen Bildschirmrand erlauben den schnellen Zugriff auf grundlegende Funktionen. Textpassagen lassen sich markieren und über eindeutige Buttons formatieren, Bilder, Videos und Listen werden auf Knopfdruck eingefügt.

HTML-Elemente lassen sich mit CSS-Definitionen optisch individuell anpassen – Vorkenntnisse helfen dabei, dieses Zusammenspiel in BlueGriffon zu koordinieren.

In wenigen Schritten entstehen so sehr einfache Webseiten, untergliedert in Absätze und verschiedene Überschriften – BlueGriffon erzeugt den entsprechenden Code im Hintergrund. Die Navigationsleiste am unteren Bildschirmrand macht dabei deutlich, in welchem Bereich der HTML-Struktur der User sich aktuell befindet. Auf Wunsch wechselt die Ansicht in den Quelltext-Modus, eine Split-View-Funktion fehlt leider.

BlueGriffons Editor bietet nützliche Features: Farbliche Syntaxstrukturierung durch Parser (verschiedene Farbschemata sind in den Einstellungen wählbar), Multi-Cursor für gleichzeitige Eingaben an mehreren Stellen, verschiedene Markieroptionen und Code-Verschiebung durch Drag-and-Drop. Offene Tags oder ungültige CSS-Befehle werden hervorgehoben. Auf Vervollständigungsvorschläge oder automatische Tag-Schließungen müssen Anwender allerdings verzichten – andere Editoren können in dieser Hinsicht ein wenig mehr.

Komplexere Layouts in BlueGriffon nur mit Vorkenntnissen

Wer erwartet, wie in einem Grafikprogramm Boxen oder Formen zeichnen, gestalten und zu einem Layout arrangieren zu können, wird an dieser Stelle enttäuscht. BlueGriffon ermöglicht stattdessen die Konfiguration von CSS-Definitionen über eine grafische Oberfläche – das HTML-Gerüst müssen Nutzer selbst anlegen. Ohne grundlegende Kenntnisse in der Webprogrammierung stoßen Einsteiger bei individuellen Gestaltungswünschen daher schnell an Grenzen.

Die CSS-Definitionen lassen sich bequem über die "Stil-Eigenschaften" konfigurieren (ggf. zuschaltbar über den Menüreiter "Konsolen"). Werte wie Schriftgröße, Ausrichtung und Hintergrundfarbe sind zwar selbsterklärend, die Funktionsweise anderer Befehle erschließt sich hingegen nicht von selbst. Viele Einstellmöglichkeiten sind daher mit einem passenden Link zur CSS-Dokumentation von Mozilla versehen, die die jeweiligen Befehle erläutert. Das Werkzeug eignet sich gut dazu, die verschiedenen Definitionen und ihre Wirkungen auszuprobieren.

Verwirrung vermeiden

In der deutschen Version sind die CSS-Eigenschaften und -Befehle übersetzt worden. Wer sich im Englischen sicher fühlt, sollte besser die Originalfassung nutzen: Hier werden dieselben Bezeichnungen wie im Code selbst verwendet. Gesuchte Elemente sind so einfacher zu identifizieren.

Damit CSS-Styles ihre gewünschte Aufgabe erfüllen, müssen sie gezielt HTML-Elemente ansprechen. Auswählen lassen sich diese Elemente über die Navigationsleiste am unteren Bildschirmrand, unpraktischerweise nicht über den Quelltext. Der zuschaltbare "DOM-Explorer" oder die Ansicht "Alle Tags" (zu finden im Menüreiter "Ansicht") helfen außerdem bei der Orientierung im HTML-Code. Class- oder id-Werte werden bei Bedarf über die Funktionsleiste im oberen Bereich festgelegt. Anfangs geht die Auswahl des gewünschten Elements etwas stockend von der Hand, nach einer gewissen Einarbeitungszeit bereitet sie aber keine Probleme mehr.

BlueGriffon zeigt hier leider auch Schwächen: Wird versehentlich eine Hintergrundfarbe festgelegt, obwohl eigentlich keine gewünscht war, muss diese per Hand aus dem Code entfernt werden – eine entsprechende Option fehlt in der Oberfläche (trifft auf mehrere Werte zu). Das Programm verwendet keine sogenannten "shorthand properties" (Kurzformen zur Code-Rreduzierung), auch Regelgruppen sind nicht möglich. Externe CSS-Dateien lassen sich über BlueGriffon darüber hinaus nur umständlich manuell bearbeiten.

Layout-Wizard, SVG und mehr

Auf Wunsch generiert BlueGriffon einfache Layouts über einen Wizard automatisch (zu finden im Menüreiter "Datei" unter "Neu Assistent"). Anwender konfigurieren das Farbschema, wählen die Platzierung der Navigationsleiste und bestimmen die Aufteilung des Content-Bereichs. Die Funktion scheint optimal für Anfänger geeignet, birgt aber Tücken: Das Programm legt verschiedene class- und id-Werte fest, ohne sie zu erläutern. Außerdem nimmt es eine unnötig große Menge an CSS-Definitionen vor. Gerade Einsteiger dürften Schwierigkeiten haben, den erzeugten Code zu durchdringen und anzupassen.

Nützlich ist die Integration von SVG-Edit: Mit der Software lassen sich Vektorgrafiken erstellen und anschließend als Datei speichern oder in Code-Form exportieren. Das webbasierte, kostenlose Tool liegt online allerdings in einer aktuelleren Version vor.

Funktionen zur Projektverwaltung fehlen leider ganz. Wer umfangreiche Websites umsetzen möchte, muss auf andere Hilfsmittel zurückgreifen. Der "Markup Aufräumer" untersucht darüber hinaus nur HTML-Elemente, eine vergleichbare Funktion für CSS-Definitionen wäre wünschenswert gewesen.

Interessante Features – nicht ohne Schwächen

BlueGriffon bietet bequeme Funktionen: HTML-Elemente werden per Klick eingefügt und CSS lässt sich in einer grafischen Oberfläche konfigurieren, kleinere Schwächen trüben dabei den Gesamteindruck. Das Programm kann grundlegende Kenntnisse in der Webprogrammierung allerdings nicht ersetzen. Ohne sie sind die Möglichkeiten deutlich limitiert.

WYSIWYG-Programme haben einen Haken: Sie sind ein Umweg zum Code, es kann zu Übertragungsschwierigkeiten kommen – bei der Arbeit direkt am Programmtext gibt es diese Hürde nicht. Ob BlueGriffon die eigene Effizienz steigert, finden Interessierte ohne Risiko selbst heraus: Die Grundversion ist dauerhaft kostenlos. Für das reine Coding sind Sublime Text oder Atom besser geeignet; Dreamweaver ist eine professionelle, aber teure WYSIWYG-Alternative.

Sag uns deine Meinung!

Um einen Kommentar zu verfassen, melde Dich an oder registriere Dich jetzt auf Netz.de!

Die Benutzeroberfläche von BlueGriffon

Die Benutzeroberfläche erinnert an Textverarbeitungsprogramme: In der Mitte wird das Dokument dargestellt, über die Buttons links und oben lassen sich grundlegende Funktionen nutzen. Eine Leiste hilft bei der Orientierung im Code (1), ein Wechsel zwischen den Ansichten ist jederzeit möglich (2). Rechts sind die zuschaltbaren Konsolen eingeblendet (3).

CSS-Definitionen bearbeiten in BlueGriffon

BlueGriffon ermöglicht die Konfiguration von CSS-Eigenschaften in einer grafischen Oberfläche. Die Definitionen sind in Themenbereiche untergliedert.

Mit BlueGriffon erzeugte Beispiel-Seite

Der CSS-Editor von BlueGriffon lädt zum Ausprobieren ein.

Der Layout-Wizard von BlueGriffon

BlueGriffon erzeugt über einen Wizard vorgefertigte Layouts, kleine Anpassungen sind möglich.

Mit dem Layout-Wizard in BlueGriffon erzeugte Beispiel-Seite

Der Wizard generiert einfache Layouts, die sich individuell anpassen lassen. Einsteiger könnten mit der Bearbeitung jedoch Schwierigkeiten haben, denn der grundlegende Aufbau wird nicht erläutert.

Externe CSS-Dateien über BlueGriffon bearbeiten

Der Code von externen CSS-Dateien lässt sich in BlueGriffon nur umständlich bearbeiten. Nach jedem Speichern schließt sich das Fenster und muss über den rot markierten Button neu aufgerufen werden.

Videos in Webseiten einbinden mit BlueGriffon

Videos lassen sich mit wenigen Klicks anpassen und in Webseiten einfügen.

Das in BlueGriffon integrierte SVG-Edit

Über SVG-Edit erzeugen Anwender in BlueGriffon Vektorgrafiken, die als Datei gespeichert oder in Code-Form exportiert werden können. Online ist eine aktuellere Version zu finden.