Der Blaufisch Code-Editor ist eine Anwendung zum Entwickeln von Webseiten und Skripten. Es ist kein WYSIWYG-Editor. Bluefish ist ein Tool zum Bearbeiten des Codes, aus dem eine Webseite oder ein Skript erstellt wird. Es ist für Programmierer gedacht, die Kenntnisse im Schreiben von HTML haben und CSS Code und verfügt über Modi, um mit den gängigsten Skriptsprachen wie PHP und Javascript sowie vielen anderen zu arbeiten. Der Hauptzweck des Bluefish-Editors besteht darin, die Codierung zu vereinfachen und Fehler zu reduzieren. Bluefish ist kostenlos und Quelloffene Software und Versionen sind für Windows, Mac OSX, Linux und verschiedene andere Unix-ähnliche Plattformen verfügbar. Die Version, die ich in diesem Tutorial verwende, ist Bluefish unter Windows 7.
01
von 04
Die Bluefish-Schnittstelle
Screenshot mit freundlicher Genehmigung von Jon Morin
Die Bluefish-Benutzeroberfläche ist in mehrere Abschnitte unterteilt. Der größte Abschnitt ist der Bearbeitungsbereich, in dem Sie Ihren Code direkt bearbeiten können. Auf der linken Seite des Bearbeitungsbereichs befindet sich der Seitenbereich, der die gleichen Funktionen wie ein Dateimanager ausführt und Ihnen ermöglicht, die Dateien auszuwählen, die Sie bearbeiten möchten, und Dateien umzubenennen oder zu löschen.
Der Kopfbereich oben in den Bluefish-Fenstern enthält mehrere Symbolleisten, die über das Menü Ansicht ein- oder ausgeblendet werden können.
Die Symbolleisten sind die Hauptsymbolleiste, die Schaltflächen zum Ausführen allgemeiner Funktionen wie Speichern, Kopieren und Einfügen, Suchen und Ersetzen sowie einige Optionen zum Einrücken von Code enthält. Sie werden feststellen, dass es keine Formatierungsschaltflächen wie Fett oder Unterstrichen gibt.
Das liegt daran, dass Bluefish keinen Code formatiert, sondern nur ein Editor ist. Unterhalb der Hauptsymbolleiste befindet sich das HTML Symbolleiste und das Snippet-Menü. Diese Menüs enthalten Schaltflächen und Untermenüs, mit denen Sie automatisch Code für die meisten Sprachelemente und Funktionen einfügen können.
02
von 04
Verwenden der HTML-Symbolleiste in Bluefish
Screenshot mit freundlicher Genehmigung von Jon Morin
Die HTML-Symbolleiste in Bluefish ist in Registerkarten angeordnet, die die Tools nach Kategorien trennen. Die Registerkarten sind:
- Schnellleiste - Sie können andere Tools für häufig verwendete Elemente an diese Registerkarte anheften.
- HTML5 - gibt Ihnen Zugriff auf allgemeine Tags und Elemente in HTML 5.
- Standard - Auf dieser Registerkarte greifen Sie auf allgemeine HTML-Formatierungsoptionen zu.
- Formatierung - Hier finden Sie weniger gängige Formatierungsoptionen.
- Tabellen - verschiedene Tabellenerstellungsfunktionen, einschließlich eines Tabellenassistenten.
- Aufführen - Werkzeuge zum Generieren von geordneten, ungeordneten und Definitionslisten.
- CSS - Stylesheets können von dieser Registerkarte sowie Layoutcode erstellt werden.
- Formen - Die gängigsten Formularelemente können von dieser Registerkarte aus eingefügt werden.
- Schriftarten - Diese Registerkarte enthält Verknüpfungen zum Arbeiten mit Schriftarten in HTML und CSS.
- Rahmen - die gebräuchlichsten Funktionen für die Arbeit mit Formularen.
Wenn Sie auf die einzelnen Registerkarten klicken, werden in der Symbolleiste unter den Registerkarten Schaltflächen angezeigt, die sich auf die jeweilige Kategorie beziehen.
03
von 04
Verwenden des Snippets-Menüs in Bluefish
Screenshot mit freundlicher Genehmigung von Jon Morin
Unterhalb der HTML-Symbolleiste befindet sich ein Menü namens Snippets-Leiste. Diese Menüleiste enthält Untermenüs zu verschiedenen Programmiersprachen. Jedes Element im Menü fügt häufig verwendeten Code ein, wie beispielsweise HTML-Dokumenttypen und Metainformationen.
Einige der Menüpunkte sind flexibel und generieren Code abhängig von dem Tag, den Sie verwenden möchten. Wenn Sie beispielsweise einer Webseite einen vorformatierten Textblock hinzufügen möchten, können Sie auf das HTML-Menü in der Snippets-Leiste klicken und den Menüpunkt „Beliebiges gepaartes Tag“ auswählen.
Wenn Sie auf dieses Element klicken, wird ein Dialogfeld geöffnet, in dem Sie zur Eingabe des gewünschten Tags aufgefordert werden. Sie können „pre“ eingeben (ohne die spitzen Klammern) und Bluefish fügt ein öffnendes und schließendes „pre“-Tag in das Dokument ein:
.
04
von 04
Andere Eigenschaften von Bluefish
Screenshot mit freundlicher Genehmigung von Jon Morin
Während Bluefish nicht a WYSIWYG-Editor, hat es die Möglichkeit, eine Vorschau Ihres Codes in jedem Browser anzuzeigen, den Sie auf Ihrem Computer installiert haben. Es unterstützt auch die automatische Codevervollständigung, Syntaxhervorhebung, Debugging-Tools, ein Skriptausgabefeld, Plugins und Vorlagen, die Ihnen einen schnellen Start beim Erstellen von Dokumenten geben, an denen Sie häufig arbeiten mit.