Kapitel 1: Der erste Start

Der Zweck dieses Kapitels ist, Dir eine kurze Einführung in die grundlegenden Funktionen zu geben, damit Du schnell beginnen kannst, mit Bluefish Deine Seiten zu designen. Unser Ziel ist es, dass Du mit der Umgebung und Benutzerführung von Bluefish vertraut wirst.

Dieses Kapitel zeigt nicht alle Funktionen von Bluesfish, sondern ist eine Einführung. Spätere Kapitel zeigen alles detailliert.

Starten des Programms

Nach der Installation, falls Du das Installationsverzeichnis nicht verändert hast, sollte sich die ausführbare Datei in /usr/local/bin/ befinden. Somit musst Du zum Starten nur

blashyrkh:~# bluefish

eingeben.

Bekommst Du daraufhin die Fehlermeldung "bluefish: file not found", bzw. "bluefish: Datei nicht gefunden", musst Du vermutlich Deine PATH-Umgebungsvariable anpassen. Wie das geht, liegt aber nicht mehr im Rahmen dieses Textes. Wenn Du Hilfe benötigst, um /usr/local/bin zu PATH hinzuzufügen, solltest Du Dich an die entspechende Mailingliste/Newsgroup oder Deine örtliche Usergroup wenden. Als zwischenzeitliche Lösung kannst Du den Pfad auch so angeben:
[todd@todd ~]$ /usr/local/bin/bluefish.

ACHTUNG: Aus Sicherheitsgründen kann der root-User Bluefish nicht benutzen. Falls Du root bist und bei der Eingabe von bluefish eine Fehlermeldung erscheint, musst Du bluefish -s eingeben um das Programm trotzdem starten zu können.

Das Logo von Bluefish erscheint kurz, und danach das Hauptfenster (siehe unten). Du kannst dieses Fenster natürlich in der Größe verändern, je nachdem welche Features Dein Windowmanager bietet (Die Screenshots wurden unter KDE aufgenommen).

Die Befehlszeilenoptionen können mit -h ausgegeben werden:

blashyrkh:~# bluefish -h
bluefish pre0.6 HTML editor
Usage: bluefish [options] [filename]

Derzeit zur Verfügung stehende Optionen:
-s           überspringe root Überprüfung
-v           derzeitige Version
-h           dieser Hilfebildschirm
-p dateiname Lade Projekt beim Start
TIPP: Falls Du alle PHP-Dokumente in einem Verzeichnis und seinen Unterverzeichnissen öffnen möchtest, kannst Du Bluefish so starten:
bluefish `find -name '*.php'`.
Oder alle html-Dateien auf einer Maschine? (Achtung, das sind über 1100 auf einer Standard-Debian-Maschine!) Benutze
bluefish `find / -name '*.html'`.
Lies man find und man bash für mehr Infos.

Main screen

Oberfläche

Wir erklären nun einiges Grundlegende zum Interface von Bluefish, und am einfachsten machen wir das anhand des Fensters das wir oben gesehen haben.

Das Menü

Oben ist das Menü, wo alle Funktionen von Bluefish aufgeführt sind. Funktionen sind nach ihrer Funktion gruppiert, so enthält das Menü Datei Funktionen, die Dateien betreffen; Bearbeiten betrifft die Haupteditierfunktionen (Ausschneiden, Kopieren, Einfügen usw..), usw. Falls Du auf ein Menü klickst, erscheinen seine Untermenüs. Jedes Untermenü hat links seinen Namen und rechts sein Tastaturkürzel stehen, was wir später erklären werden.

BEMERKUNG:Falls wir uns in diesem Handbuch auf einen Untermenübefehl beziehen, geben wir seinen Pfad folgenderweise an: Datei-->Neu bedeutet, dass Du im Dateimenü Neu auswählen musst.

Eine sehr nützliche Funktion von GTK+ sind tearoffs. Um zu sehen was das ist, wähle das Menü Datei und klicke auf die kleine gestrichelte Linie. Wie Du siehst, wird ein neues Fenster aufgemacht, das alle Untermenüs enthält. So kannst Du schneller auf diese Funktionen zugreifen, indem Du das Fenster einfach neben das Hauptfenster ziehst. Wenn Du wieder auf die gestrichelte Linie klickst oder das Fenster schließt, verschwindet es wieder. Das Menü ist währenddessen nicht nur über dieses Fenster, sondern auch immer noch über das Menü des Hauptfensters erreichbar.

Was diese Funktion also tatsächlich macht, ist, das Menü sozusagen "frei schwebend" auf den Bildschirm auszulagern. Leider kann man den Zustand nicht abspeichern, so dass bei einem Neustart die Menüs wieder nur im Hauptfenster vorhanden sind.

Tastenkürzel

Beim Blick auf die Menüs ist Dir sicher aufgefallen, dass bei einigen Einträgen rechts Tastenkombinationen stehen. Diese werden Tastenkürzel genannt und sind eine Tastenkombination die mit Strg oder Alt beginnt. Falls diese Tastenkombination gedrückt wird, wird die Funktion ausgeführt. Falls Du z.B. eine neue Datei öffnen möchtest, kannst Du statt im Menü Datei-->Neu anzuwählen einfach Strg zusammen mit 'N' drücken.

Sehr nützlich ist, dass Du Dir Deine eigenen Tastenkürzel definieren kannst. Dazu bewegst Du die Maus einfach über den Menüeintrag und drückst das Tastenkürzel das Du gerne zugeordnet haben möchtest. Wie Du siehst, wird das Tastenkürzel hingeschrieben und ist sofort neu zugeordnet. Falls dieses Kürzel bei einem anderen Menüpunkt schon existierte, wird es dort gelöscht.

Falls Du ein Tastenkürzel löschen möchtest, fahre einfach über den Menüpunkt und drücke Backspace.

TIPP: Ein Tastenkürzel kann auch die Kombination von Strg, Alt und Shift mit einer anderen Taste sein. Z.B. Strg-Shift-N. Nur die Shift-Taste alleine funktioniert nicht (die ist ja zur Groß-/Kleinschreibungsumschaltung).

Da Tastenkürzel sehr häufig verwendet werden, möchtest Du die Änderungen vielleicht speichern. Um das zu erreichen, wählst Du Optionen-->Shortcuts speichern. Dadurch werden auch alle Tastenkürzel gespeichert, die Du für das Benutzerdefinierte Menü (ab Bluefish 0.5) gesetzt hast. Beachte bitte, dass die Tastenkürzel NICHT automatisch gespeichert werden und Du sie deshalb jedesmal über dieses Untermenü speichern musst.

Beachte auch, dass einige Tastenkürzel für die Textbox reserviert sind und nicht benutzt werden können. Sie werden später aufgelistet.

Die Werkzeugleisten

Unterhalb des Menüs sind drei Werkzeugleisten (im oben gezeigten Fenster sind nur zwei davon zu sehen); die Hauptwerkzeugleiste, die HTML-Werkzeugleiste und die benutzerdefinierte Werkzeugleiste.

Floating Eine großartige Eigenschaft der Werkzeugleisten ist, dass auch diese als eigene Fenster "frei schweben" können. Wenn Du die linke Seite der Werkzeugleisten betrachtest, siehst Du etwas, das so aussieht, wie die Abbildung links. Gehe mit der Maus darauf, drücke die linke Maustaste, halte sie gedrückt und ziehe die Werkzeugleiste dahin, wo Du sie gerne haben möchtest und lasse dann die Maustaste wieder los. Auf diese Weise kannst Du auch die Werkzeugleiste frei schweben lassen.

Eine frei schwebende Werkzeugleiste erscheint nicht mehr im Hauptfenster, wodurch Du mehr Platz für die Textbox zur Verfügung hast.

Wenn Du die Werkzeugleiste zurück an ihren ursprünglichen Platz ziehst, wird sie wieder zu einem Bestandteil des Hauptfensters. Beachte, dass die Werkzeugleisten immer in der folgenden Reihenfolge platziert werden (von oben nach unten): Hauptwerkzeugleiste, HTML-Werkzeugleiste, benutzerdefinierte Werkzeugleiste. Bisher gibt es keine Möglichkeit, eine Werkzeugleiste über eine andere zu verschieben.

Eine kurze Beschreibung, was die einzelnen Buttons bewirken, erscheint, wenn Du den Mauszeiger ein paar Sekunden über den Buttons lässt (das sind die sogenannten tool-tips).

Genau wie bei den Menüs, kannst Du auch die Position der Werkzeugleisten nicht speichern, das heißt, wenn Bluefish neu gestartet wird, erscheinen sie wieder als Bestandteil des Hauptfensters an ihrer üblichen Position.

Der Bereich des Datei-Editors

Der größte Teil des Fensters wird vom Editorbereich eingenommen. Hier erscheint der Text der Dateien. In Bluefish hast Du die Möglichkeit, beliebig viele Dateien gleichzeitig geöffnet zu haben.

Das Karteireitermenü zeigt die geöffneten Dateien. Im Bild oben haben wir zwei Dateien: preface.html, eine Datei, die wir von der Festplatte geöffnet haben und Ohne Titel , eine neue, noch nicht gespeicherte Datei. Neue Dateien bekommen immer den Namen "Ohne Titel". "Ohne Titel" ist die gerade ausgewählte Datei. Mit den Karteireitern kannst Du zwischen den Dateien hin und her wechseln. Wenn Du einen Karteireiter anklickst, wechselst Du zu der Datei mit dem ausgewälten Dateinamen. Probiers doch einfach gleich mal aus: klicke zweimal auf Datei-->Neu und wechsle dann mit den Karteireitern zwischen den Dateien hin und her. Eine andere Möglickeit (falls Du die Tastenkürzel nicht geändert hast) ist, mit F1 zum nächsten Dokument zu wechseln und mit F2 zum vorherigen (diese Tastenkürzel befinden sich im Menü Ansicht).

Wie wir später sehen werden, kann das Aussehen des Editorbereiches unter Optionen-->Einstellungen geändert werden.

Statuszeile

Am unteren Rand des Fensters, schließlich, befindet sich die Statuszeile, die benutzt wird, um Meldungen über durchgeführte Aktionen anzuzeigen. Um ihre Verwendung zu verstehen, brauchst Du nur zu beobachten, was dort erscheint, nachdem Du z.B. verschiedene Buttons gedrückt hast.

Nun zu den wichtigeren Dingen

Nachdem wir die Grundlagen der Programmoberfläche erklärt haben, wollen wir Bluefish jetzt benutzen.

Ich glaube, die ersten grundlegenden Dinge, die wir erklären sollten, sind, wie Du neue Dokumente erstellst und auch wie Du Dateien öffnest und speicherst. Wir werden aber nicht nur diese Funktionen erklären, sondern Dir ein paar Fähigkeiten von Bluefish zeigen, mit deren Hilfe Du Deine Arbeit einfacher und schneller erledigen kannst (z.B. SchnellStart...).

Anlegen einer neuen Datei

Es gibt drei Möglichkeiten, eine neue unbenannte leere Datei anzulegen:

Wie Du siehst, erscheint im Editorbereich ein neuer Karteireiter und ein Textfenster, das noch völlig leer ist.

So leer sieht es aber nicht gut aus. Wäre es nicht klasse, wenn Du das HTML-Grundgerüst (z.B. die Tags für DTD, Titel, etc.) für Dich schreiben lassen könntest? Bluefish bietet die Möglichkeit, Dir dabei zu helfen, dieses Grundgerüst mit Leichtigkeit zu erstellen.

Im Fenster, das daraufhin erscheint, kannst Du nun die DTD auswählen und den Titel angeben.

Text bearbeiten

Im Editorbereich kannst Du offensichtlich die Datei bearbeiten. Beim Schreiben von Tags kann die HTML-Werkzeugleiste sehr nützlich sein, weil sie alle grundlegenden Tags enthält. Bei einigen Buttons öffnen sich (genau wie bei den Funktionen des Menüs Dialoge) Fenster, in denen Du die Tag-Parameter ganz leicht setzen kannst, was die ganze Sache beschleunigt. Falls Du wissen möchtest, was die Buttons der HTML-Werkzeugleiste bewirken, brauchst Du nur mit dem Mauszeiger darauf zu gehen und einen Moment zu warten, bis die Hinweise erscheinen.

Standardmäßig wird Wortumbruch verwendet (Du kannst das unter Optionen-->Einstellungen deaktivieren). Wenn eine Zeile umbrochen wurde, erscheint ein kleiner Pfeil am Ende der Zeile, der darauf hinweist. Sind solche Pfeile in mehreren aufeinanderfolgenden Zeilen, bedeutet das, dass eine Zeile mehrfach umbrochen wurde.

Ich glaube, jetzt ist ein guter Zeitpunkt, um mal das Menü Bearbeiten genauer unter die Lupe zu nehmen, zumal es ein paar sehr interessante Funktionen bietet.

TIPP: Reguläre Ausdrücke sind ein mächtiges Werkzeug. Angenommen, Du willst alle HTML-Tags in Kleinschreibung. Ohne reguläre Ausdrücke ist das mit einem einzigen Suchen und Ersetzen nicht möglich. Das Suchmuster <[^>]*> findet alles zwischen einem < und einem > in dem dazwischen kein > vorkommt. Nun brauchst Du nur noch Ersetze kleingeschrieben auszuwählen und es ist erledigt. Der Nachteil: dieses einfache Suchmuster ändert natürlich beispielsweise auch die Beschreibung alt eines Bildes in Kleinschreibung, und ist von daher nicht perfekt.
TIPP: Hast Du schon mal ein HTML-Dokument gesehen, das mit Frontpage erstellt wurde? Diese enthalten manchmal hunderte leerer Zeilen und Leerzeichen. Mit Bluefish ist es möglich, Zeilenumbrüche zu ersetzen. Du musst sie aber kopieren und ins Feld des Suchen-Dialogs einfügen. Dazu wählst Du zwei Zeilen aus, fügst die Auswahl ins Feld Suchen des Suchen-Dialogs, lässt sie durch eine einzelne Zeile ersetzen und wählst Überlappende Suche aus. Alle leeren Zeilen werden nun auf eine einzige leere Zeile reduziert.

Ein weiteres interessantes Feature ist das Pop up Menü, das erscheint, wenn Du auf die rechte Maustaste drückst. Das ist ein schneller Weg, um grundlegende Funktionen wie 'Ausschneiden' und 'Kopieren' zu verwenden. Die Funktionen haben hier genau die selbe Funktionsweise wie die entsprechenden Funktionen im Menü und in den Werkzeugleisten. Auf den letzten Punkt des Pop up Menüs, 'Tag bearbeiten', gehen wir später ein.

Eine Datei öffnen (von der Festplatte oder aus dem Web)

Um eine Datei von der Festplatte zu öffnen:

Es erscheint der Dialog 'Datei auswählen', in dem Du die Datei auswählen kannst, die Du öffnen willst. Ein sehr nützliches Feature ist, dass Du in dem Menü gleichzeitig mehrere Dateien zum Öffnen auswählen kannst (mit der Einschränkung, dass alle Dateien im selben Verzeichnis liegen müssen). Tatsächlich haben wir sogar mit Erfolg versucht, 1000 Dateien gleichzeitig zu öffnen!

Ein sehr nützliches Feature ist auch, dass Du Dateien direkt aus dem Web öffnen kannst. Um das zu tun, wählst Du Datei-->URL öffnen. In das Fenster, das dann erscheint, schreibst Du die komplette Adresse des Dokuments (z.B. 'http://jmk.simplenet.com/prod/download.htm'). Natürlich werden auch Adressen wie 'http://jmk.simplenet.com/' akzeptiert. Die Datei, die daraufhin geöffnet wird, ist dieselbe, die Du bekommst, wenn Du diese URL im Webbrowser angibst.

Schließlich solltest Du noch beachten, dass die unbenannte Datei, die direkt nach dem Programmstart vorhanden ist, beim Öffnen einer Datei verschwindet und durch diese ersetzt wird. Hast Du sie aber nur ein bisschen verändert, bleibt sie.

Dateien speichern

Wenn Du eine Datei speichern willst, musst Du im Datei-Editor zuerst den Karteireiter mit ihrem Namen auswählen (d.h. diese Datei muss im Hauptfenster erscheinen) und dann:

Wenn Du auf 'Speichern' drückst, wird die Datei gespeichert, die gerade im Hauptfenster sichtbar ist. Falls die Datei vorher noch nicht auf der Festplatte gespeichert wurde (d.h. wenn sie aus dem Web geöffnet wurde oder wenn es eine unbenannte Datei ist), verhält sich 'Speichern' wie 'Speichern unter'. Wenn Du auf 'Speichern unter' drückst, kannst Du die Datei unter einem anderen Namen speichern, als unter dem, den sie schon hat.

Wenn Du alle geöffneten Dateien speichern willst, wähle Datei-->Alle Speichern. Dadurch werden alle Dateien gespeichert und jede Datei daraufhin überprüft, ob sie unbenannt ist oder aus dem Web geöffnet wurde. Für diese Dateien erscheint dann der 'Speichern unter'-Dialog.

Eine Datei schließen

Um eine Datei zu schließen, musst Du sie zuerst auswählen, sodass sie im Editorbereich sichtbar ist, und dann:

Falls die Datei seit dem letzten Speichern verändert wurde, wirst Du gefragt, ob sie gespeichert werden soll, bevor Du sie schließt. Wird in diesem Dialog 'Schliessen' gewählt, wird die Datei ohne vorheriges Speichern geschlossen. Wenn Du 'Speichern' wählst, wird die Datei vorher gespeichert und wenn Du auf 'Abbrechen' drückst, wird die Datei überhaupt nicht geschlossen.

Wenn Du alle geöffneten Dateien schließen willst, wähle Datei-->Alle schließen. Für alle, die noch nicht gespeichert wurden, erscheint der eben genannte Dialog.

Bluefish beenden

Um Bluefish zu beenden, kannst Du entweder das Hauptfenster schließen oder den Menüeintrag Datei-->Beenden wählen, welcher das Tastenkürzel Strg-Q hat.

Falls es ungespeicherte Dateien gibt, erscheint ein Dialog, ähnlich dem oben erläuterten, bevor das Programm geschlossen wird.

Mit HTML arbeiten

Bisher haben wir gesehen, wie Du eine Datei anlegen, öffnen, bearbeiten und speichern kannst. Das ist zwar genug, um zu beginnen, mit Bluefish zu arbeiten, aber wir wollen ja nicht vergessen, dass es sich um einen HTML-Editor handelt und nicht einfach um einen Textedior. Das bedeutet, dass besondere Aufmerksamkeit auf der Verwendung von HTML liegt und von daher einige spezielle Werkzeuge (die Du in einem einfachen Texteditor nicht finden wirst) zur Verfügung stehen, die Dir helfen, mit Tags umzugehen und Deine Dokumente zu organisieren.

Tags und Dialoge

Dir sind vielleicht die beiden Menüs Tags und Dialoge aufgefallen. Die meisten Funktionen in diesen Menüs finden sich auch in der HTML-Werkzeugleiste wieder.

Das Menü Tags enthält eine Menge HTML-Tags, von denen die meisten keine Parameter haben. Zu diesen gehören Tags für die Textformatierung (Fett, Kursiv, Durchstreichen, etc.), Überschriften, Listen, etc. Beachte auch das Menü Tags-->Spezial, in dem sich eine Liste von Sonderzeichen befindet.

Drücken wir einfach mal auf ein Untermenü (stelle vorher sicher, daß kein Text markiert ist). Das genannte Tag erscheint und der Cursor wird zwischen Start- (<>) und Endtag (</>) gesetzt, damit Du direkt den Text schreiben kannst, der zwischen die Tags gehört.

Eine weitere interessante Möglichkeit bieten diese Menüs, wenn Du vorher Text markiert hast. Schreibe zum Beispiel 'Hallo Welt' und markiere es dann. Drücke Tags-->Überschriften-->H1 und der Text wird mit einem H1-Tag versehen. Diese Möglichkeit ist also sehr nützlich, weil Du die Formatierung (z.B. Fett oder Kursiv) von schon geschriebenem Text schnell ändern kannst.

Bearbeiten-->Ersetzen spezial-->ASCII Zeichen ersetzen ersetzt innerhalb des markierten Texts alle HTML-eigenen Zeichen wie <>&" durch ihre HTML-Maskierungen &lt;&gt;&amp;&quot;.

Das Menü Dialoge wird fast genauso benutzt wie das Menü Tags, aber statt einfach nur Text zu schreiben, öffnet sich ein Fenster, in dem Du Parameter für die Tags angeben kannst. Parameter, deren Felder Du leer lässt, erscheinen nicht im Text.

Tags bearbeiten

Erinnerst Du Dich daran, dass wir vorhin ein Pop up Menü erwähnten, das erscheint, wenn Du im Textfenster auf die rechte Maustaste drückst? Der letzte Punkt des Menüs war Tag bearbeiten. Jetzt ist es an der Zeit, zu erklären, was es damit auf sich hat.

Wie Du gesehen hast, kannst Du mit dem Menü Dialoge sehr einfach Tags mit Parametern einfügen. Wenn sie eingefügt sind, kannst Du sie von Hand bearbeiten, indem Du einfach den Text änderst. Aber wie Du ebenfalls gesehen hast, ist es einfacher, die Parameter eines Tags über Dialoge anzupassen, als Text zu schreiben. An dieser Stelle kommt 'Tag bearbeiten' ins Spiel.

Wähle ein Tag aus dem Menü Dialoge (z.B. Dialoge-->Tabelle-->Tabelle), passe die Parameter an und füge das Tag ein. Gehe dann mit dem Cursor über das Tag, drücke die rechte Maustaste und wähle 'Tag bearbeiten'. Du wirst sehen, dass das selbe Fenster erscheint, mit dem Du das Tag erstellt hast (diesmal sind aber nicht alle Felder leer, sondern stattdessen den Parametern des Tags entsprechend gesetzt). Mit diesem Menü kannst Du nun Tags viel einfacher bearbeiten.

Syntaxhighlighting

Dieses Feature wird im zweiten Kapitel ausführlich erklärt, aber hier ist schon mal eine Übersicht über dessen Verwendung.

Um Tags einfach zu erkennen und sie von normalem Text zu unterscheiden, können sie hervorgehoben (highlighted) werden (im Gegensatz zur üblichen Hervorhebung, bei der sich die Hintergrundfarbe ändert, wird der Text dabei wirklich in einer anderen Farbe dargestellt als normaler Text).

Damit dieses Feature aktiviert ist, muss die Checkbox neben Ansicht-->Syntaxhighlight gedrückt sein. Jedesmal, wenn Du das Syntaxhighlighting aktualisieren möchtest, musst Du entweder Ansicht-->Aktualisieren oder das Tastenkürzel F5 drücken, oder, wie Du im nächsten Kapitel sehen wirst, das Menü Einstellungen entsprechend anpassen, dass dies kontinuierlich gemacht wird.

Projekte

Projekte in Bluefish merken sich für Dich etwas Vorgeschichte. Wenn Du ein paar Dateien geöffnet hast, die zusammengehören, wählst Du Projekt-->Alle offenen Dokumente hinzufügen. Jetzt speicherst Du das Projekt (normalerweise liegt es in ~/.bluefish/projects/). Alle Farben, die Du verwendest, oder alle Ziele, URLs, etc. werden im Projekt aufgezeichnet und beim Speichern des Projekts ebenfalls gespeichert. Die Werte können mit Projekt->Bearbeiten... geändert werden. Der Dialog enthält die Menüs Dateien und Listen, über die Du auf den Inhalt des Projekts zugreifen kannst.

Beim Öffnen eines Projekts werden alle Dateien dieses Projekts geöffnet. Wenn Du Dir eine Datei aus einem Projekt im Browser anschaust, wird das Hauptverzeichnis vom Dateinamen entfernt und durch das Webverzeichnis ersetzt. Wenn Du willst, kann also /home/olivier/public_html/index.html durch http://localhost/~olivier/index.html ersetzt werden. Sehr nützlich ist das beim Programmieren dynamischer Websites (PHP, SSI, RXML) auf dem lokalen Server.