Wir stellen Ihnen den HTML-Editor Bluefish in der Praxis vor

Viele Webentwickler nutzen für die Erstellung von einzelnen Seiten oder sogar von kompletten Websites kein CMS, sondern nur einen Editor. Wer die Grundstrukturen von HTML5, CSS3 und Javascript verinnerlicht hat, braucht nur einen leistungsfähigen Editoren für die schnelle und vereinfachte Eingabe des Programmcodes. Einer der erfolgreichen Vertreter ist der Open Source Editor Bluefish, der unter allen prominenten Linux-Distributionen wie Debian, Ubuntu/Mint, Fedora oder Gentoo in den Standard-Paketquellen zur Verfügung steht. Weitere ausführliche Anleitungen für die gängigsten Linux-Distributionen finden Sie im Download-Bereich von Bluefish.

Installation und Aufbau der Oberfläche von Bluefish

Unter Ubuntu oder Linux Mint ist die Installation denkbar einfach:

sudo apt-get install bluefish

Nachdem die entsprechenden Programmpakete heruntergeladen und installiert wurden, ist der Editor mit dem Fisch-Symbol sofort einsatzbereit. Nach dem Start sehen Sie die Benutzeroberfläche von Bluefish wie in der Abbildung oben gezeigt, die im Wesentlichen aus drei Bereichen besteht: einer Toolbar (1), einer Seitenleiste (2) und dem eigentlichen Eingabebereich (3). Hinzu kommt noch eine sehr umfangreiche Menüstruktur, über die Sie zusätzliche Funktionen aufrufen können.

Die Toolbar besteht aus zwei Bereichen. Zum einen sehen Sie am oberen Rand verschiedene Symbole zum Schnellzugriff auf Funktionen, wie etwa zum Anlegen einer neuen Datei oder zum Speichern des aktuellen Arbeitsstands. Darüber hinaus finden Sie einige Grundfunktionen zum Bearbeiten von Inhalten, wie etwa dem Einrücken eines Codeabschnitts oder auch der Vorschau im Standard-Browser.

Im unteren Bereich der Toolbar finden Sie verschiedene Register, wie etwa HTML5, CSS oder Tabellen. Hinter jeder dieser Registerkarten finden Sie zahlreiche Symbole zum Einfügen von Codesegmenten wie etwa der grundlegenden Struktur eines HTML-Headers oder einen Assistenten zum Erstellen einer Tabelle.

Die für Sie wichtigsten Symbole können Sie sich in der Schnellstartleiste auch individuell zusammenstellen. Dazu rufen Sie das Kontextmenü des entsprechenden Symbols auf und wählen den Punkt „Zu Schnellstartleiste hinzufügen“.

Auf der linken Seite innerhalb der Seitenleiste finden Sie insgesamt vier Registerkarten. Die erste bietet direkten Zugriff auf den Dateimanager. Über diese Ansicht können Sie schnell neue Ordner und Dateien anlegen, löschen oder umbenennen.

Die anderen Registerkarten bieten eine Suchfunktion innerhalb Ihres Projekts, einen Schnellzugriff auf die vorhandenen Codefragmente sowie eine Möglichkeit zum Einfügen von Symbolen auf Basis der vorhandenen Zeichensätze.

Die wichtigsten Bearbeitungsschritte des Webseiten-Edtiors Bluefish

Sie können mit Bluefish sowohl einzelne HTML-Dateien anlegen und bearbeiten als auch ein komplettes Projekt verwalten, also eine ganze Website. Dazu rufen Sie über das Menü „Projekt“ den Punkt „Neues Projekt“ auf. Sie haben die Möglichkeit, verschiedene Rahmenparameter zu setzen. Wenn Sie planen, eine eigene HTML-Webseite zu erstellen, nutzen Sie am besten das Template „HTML 5“. Sie können für die Webseiten des Projekts darüber hinaus noch wichtige Rahmenparameter setzen, die bei der Eingabe des Programmcodes zum Tragen kommen. Die Vorschlagswerte bieten eine gute Grundlage, können jedoch auch jederzeit über das Menü „Projekt -> Projekteinstellungen bearbeiten“ geändert werden.

Schnellzugriff auf Funktionen: Nachdem Sie sich Ihre Projektstruktur angelegt haben, können Sie mit der Entwicklung loslegen. Die HTML-Tags und anderen Codefragmente werden Sie zu Beginn sicherlich über die Menüs oder die Symbole der Toolbar einfügen. Effektiver geht es jedoch über die zahlreichen Tastenkürzel. Die meisten Tags und Codesegmente sind mit einer Tastenkombination zum Einfügen versehen. Sie finden diese innerhalb der Menüstruktur direkt hinter den Befehlen. Darüber finden Sie im Bluefish Wiki eine Übersicht über die Tastenkombinationen.

Eingabe von Programmcode: Bluefish unterstützt Sie auf verschiedene Art und Weise bei der Eingabe von Programmcode. Auch bei der direkten Eingabe von Tags in das Programmfenster bietet Bluefish weitere Unterstützung an. Sobald Sie mit der Eingabe von Programmcode beginnen, ver-sucht der Editor, Ihnen mit der „Auto Complete“-Funktion passende Vorschläge für die Tags oder Befehle zu unterbreiten. Zu den einzelnen Befehlen sehen Sie zusätzlich noch eine kurze Beschreibung, damit Sie diese auch in den richtigen Zusammenhang bringen. Durch Anklicken des entsprechenden Vorschlags werden die Codeteile automatisch in den Programm-code eingefügt.

Neben den reinen Tags bietet Ihnen Bluefish auch größere Codeblöcke an, die Sie in den Programmcode einfügen können. Die vollständige Übersicht finden Sie in der Menüstruktur am oberen Bildschirmrand. An dieser Stelle finden Sie beispielsweise das Menü „Dialoge“, in welchem Sie unter anderem Codefragmente zur Erstellung von Formularen finden. Im Untermenü haben Sie dann die Auswahl startend mit einem kompletten Formular bis hin zum Anlegen eines Optionsknopfes.

Überprüfung der Ergebnisse: Zur Kontrolle können Sie sich den aktuellen Stand direkt mit dem installierten Browser anzeigen lassen. Dafür steht Ihnen die „Vorschau im Browser“ in der Symbolleiste zur Verfügung. Standardmäßig ist hier der Mozilla Firefox aktiviert. Sie können dies in den Einstellungen jedoch problemlos auf jeden anderen Browser umstellen. Unter „Externe Befehle“ finden Sie bereits vorkonfigurierte Profile zu anderen Browsern wie Chromium, Opera oder Konquerer. Ist Ihr Browser hier nicht vorgesehen, können Sie über „Eintrag hinzufügen“ auch einen neuen zur Liste hinzufügen.

Download: HTML-Editor Bluefish

(PC-Welt/ad)