AA_zwei-greife_123rf-3508515_NataliaLukiyanova.jpg

© Natalia Lukiyanova, 123RF

Webseiten erstellen mit Bluegriffon

Blauer Greif

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".

Installation

Die notwendigen Pakete zu Bluegriffon erhalten Sie auf der Projekt-Website [4]. Dort finden Sie sowohl Pakete für Ubuntu als auch für Fedora. Lassen Sie sich von den angegebenen gültigen Distributionsversionen nicht davon abhalten, diese Pakete auch in neueren Versionen des jeweiligen Betriebssystems einzusetzen. Außerdem steht dem Einsatz unter verwandten Systemen wie zum Beispiel Linux Mint im Normalfall nichts im Weg.

Für jede der beiden Distributionen stehen zwei Versionen zur Verfügung: ein Installer und ein Tar-Archiv. Laden Sie der Einfachheit halber den Installer herunter und machen Sie die Datei ausführbar (Listing 1, Zeile 1). Nun können Sie (mit Root-Rechten) den Installer ausführen (Zeile 2). Er führt Sie durch die Installationsprozedur; in den angezeigten Dialogen müssen Sie nichts mehr ändern.

Listing 1

$ 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.

Diesen Artikel als PDF kaufen

Express-Kauf als PDF

Umfang: 4 Heftseiten

Preis € 0,99
(inkl. 19% MwSt.)

LinuxCommunity kaufen

Einzelne Ausgabe
 
Abonnements
 
TABLET & SMARTPHONE APPS
Bald erhältlich
Get it on Google Play

Deutschland

Ähnliche Artikel

Kommentare

Infos zur Publikation

LU 10/2017: Daten retten & sichern

Digitale Ausgabe: Preis € 8,50
(inkl. 19% MwSt.)

LinuxUser erscheint monatlich und kostet 5,95 Euro (mit DVD 8,50 Euro). Weitere Infos zum Heft finden Sie auf der Homepage.

Das Jahresabo kostet ab 86,70 Euro. Details dazu finden Sie im Computec-Shop. Im Probeabo erhalten Sie zudem drei Ausgaben zum reduzierten Preis.

Bei Google Play finden Sie digitale Ausgaben für Tablet & Smartphone.

HINWEIS ZU PAYPAL: Die Zahlung ist ohne eigenes Paypal-Konto ganz einfach per Kreditkarte oder Lastschrift möglich!

Stellenmarkt

Aktuelle Fragen

Lieber Linux oder Windows- Betriebssystem?
Sina Kaul, 13.10.2017 16:17, 2 Antworten
Hallo, bis jetzt hatte ich immer nur mit
IT-Kurse
Alice Trader, 26.09.2017 11:35, 2 Antworten
Hallo liebe Community, ich brauche Hilfe und bin sehr verzweifelt. Ih bin noch sehr neu in eure...
Backup mit KUP unter Suse 42.3
Horst Schwarz, 24.09.2017 13:16, 3 Antworten
Ich möchte auch wieder unter Suse 42.3 mit Kup meine Backup durchführen. Eine Installationsmöglic...
kein foto, etc. upload möglich, wo liegt mein fehler?
kerstin brums, 17.09.2017 22:08, 5 Antworten
moin, zum erstellen einer einfachen wordpress website kann ich keine fotos uploaden. vom rechne...
Arch Linux Netzwerkkonfigurationen
Franziska Schley, 15.09.2017 18:04, 0 Antworten
Moin liebe Linux community, ich habe momentan Probleme mit der Einstellung des Lan/Wlan in Arc...