claim.gif
Linux Magazin Linux User Easy Linux Ubuntu User International Linux Community
Erschienen in EasyLinux 10/2005

Web-Seiten gestalten mit dem Bluefish-Editor

Schneller Fisch

von Max Werner


Bluefish ist ein sehr mächtiges Linux-Programm, mit dem Sie Web-Seiten komfortabel und mit wenig Aufwand gestalten. Dieser Artikel zeigt, wie Sie in wenigen Schritten eine ansprechende Seite erstellen und auch größere Projekte verwalten.

Programme, mit denen Anwender Web-Seiten entwerfen, gibt es wie Sand am Meer. Diese Masse teilt sich dabei jedoch in zwei grundverschiedene Lager: Auf der einen Seite gibt es die WYSIWYG-Editoren (What you see is what you get, deutsch: Sie sehen, was Sie bekommen) und auf der anderen die nach dem WYSIWYN-Prinzip arbeitenden Programme (What you see is what you need, deutsch: Sie sehen, was Sie brauchen).

Das WYSIWYG-Prinzip hat Sie den Vorteil, dass Sie Ihre Web-Seite durch Herumschieben von Elementen wie Grafiken, Tabellen und Text direkt zusammenbauen. Dreamweaver und Frontpage sind die bekanntesten Vertreter dieser Gattung aus der Windows-Welt. Sie haben bei der Vorgehensweise jedoch kaum Einfluss auf den erzeugten HTML- oder CSS-Code. WYSIWYN gibt Ihnen die Kontrolle zurück. Das Programm Bluefish arbeitet nach diesem Verfahren und bietet dabei eine große Anzahl an Funktionen.

Sie sehen im Arbeitsfenster (Abbildung 1) von Bluefish immer den reinen HTML-Code Ihrer Web-Seite. Sie haben also stets die volle Kontrolle und können Ihre Seite etwa darauf optimieren, dass alle Browser den Code gleich interpretieren (siehe Kasten "Browser-Probleme").

Abb. 1: Der Editor Bluefish mit einem geöffneten HTML-Dokument. Statt mit einer Website-Vorschau wie beim WYSIWYG-Prinzip arbeiten Sie in Bluefish direkt mit den Code. Dadurch erstellen Sie effizientere und kompatiblere Web-Seiten.
Browser-Probleme

Ursprünglich sollte HTML dazu dienen, Texte mit Attributen zu versehen, um sie zu strukturieren und damit lesbarer zu gestalten. Mit den stets wachsenden Ansprüchen der Web-Anwender hat sich die Sprache mehr und mehr verkompliziert. Mittlerweile gibt es im Web aufwendige Multimedia-Präsentationen und komplexe, anspruchsvolle Seiten.

Damit hat sich auch der Anspruch an die Browser erhöht, die die Seiten darstellen. Obwohl Web-Sprachen wie HTML und CSS standardisiert sind, zeigt fast jeder Browser eine Seite anders an. Daher sollten Sie Ihren Web-Auftritt mit möglichst vielen Browsern testen, um keine bösen Überraschungen zu erleben. Die wichtigsten Kandidaten sind: Firefox, Mozilla, Opera, Epiphany und der Internet Explorer.

Das SELFHTML-Projekt [2] dient seit einiger Zeit als Standardreferenz für Web-Entwickler und solche, die es werden wollen. Um Inkompatibilitäten zu vermeiden, zeigt diese Referenz zu allen Tags und Attributen an, welcher Browser diese unterstützt. So lassen sich Browser-Probleme meistens vermeiden.

Bluefish kennenlernen

Auf der Heft-CD finden Sie eine Installationsanleitung für Bluefish. Nach der Installation starten Sie das Programm über das KDE-Menü. Um nun Ihre erste Seite zu entwerfen, klicken Sie auf den Reiter Standardschaltflächen und dort auf das erste Symbol von links (Schnellstart). Alternativ öffnen Sie den Schnellstartdialog über das Menü Dialoge / Allgemein / Schnellstart oder per Druck auf [Umschalt-Alt-Q].

Dieser Dialog hilft Ihnen dabei, ein Grundgerüst zu entwerfen, in das Sie später Ihre Inhalte einbetten:

  1. Wählen Sie aus, an welchem Standard Sie sich orientieren wollen. Die Voreinstellung HTML 4.01 Strict erfordert ein sehr penibles Einhalten der Richtlinien. Alle folgenden Beispiele beziehen sich auf HTML 4.01 Transitional, eine etwas weniger strikte Variante des aktuellen HTML 4.01.
  1. Unter Titel wählen Sie einen Namen für die Seite aus, die der Browser dann in der Fenstertitelleiste anzeigt und bei Bookmarks verwendet. Er sollte möglichst kurz und prägnant sein, damit sich die Surfer schnell zurechtfinden.
  1. Die Header-Daten dienen vor allem Web Browsern, -Servern und Suchmaschinen. Hier hinterlegen Sie etwa den Namen des Autors, Stichworte, die Suchmaschinen bei der Indizierung benutzen, oder Befehle an den Browser (zum Beispiel, um den Benutzer automatisch auf eine andere Seite weiterzuleiten). Die meisten Daten brauchen Sie für den Anfang nicht. Sie entfernen sie per Auswahl der entsprechenden Zeile und Klick auf Entfernen. Den Content-Type sollten Sie allerdings in jedem Fall behalten.
  1. Ein Klick auf OK fügt den Code in das Dokument ein.

Die einzelnen Tags sind schnell erklärt: Mit <html> leiten Sie ein HTML-Dokument ein. Im <head> stehen die Metaangaben wie Titel, Autor und Kodierung des Inhalts. Darauf folgt der <body>, der die eigentlichen Inhalte enthält.

Der Cursor befindet sich bereits zwischen dem öffnenden und schließenden Body-Tag. Als Nächstes verleihen Sie der Seite einen weniger langweiligen Hintergrund. Klicken Sie dazu einmal in das öffnende Body-Tag hinein und drücken Sie die Taste [F3]. Hier haben Sie die Möglichkeit, sämtliche Attribute des Rumpfes zu ändern.

Unter Alte Optionen finden Sie Attribute wie Hintergrundbild, -farbe und Textfarbe. Hier zeigt sich ein Beispiel für den Unterschied zwischen HTML Strict und HTML Transitional: Würden Sie die strikte Variante benutzen, dürften Sie diese Attribute gar nicht einsetzen, weil sie der Standard nicht mehr enthält. In Transitional dürfen Sie diese noch benutzen.

Das hilft den Designern von Web-Seiten, sich an einen neuen Standard zu gewöhnen, und gewährleistet einen flüssigen Übergang. Obwohl sich alle Beispiele in diesem Artikel auf die Transitional-Variante beziehen, sollten Sie es möglichst vermeiden, die alten Optionen einzusetzen.

Stilfragen

Klicken Sie also auf den Reiter Optionen und dann auf die Schaltfläche Stil. Die Version 4 des HTML-Standards stützt sich intensiv auf die Verwendung so genannter Cascading Style Sheets (CSS). Sie helfen, die Struktur einer HTML-Datei von ihrer Darstellung zu trennen. (Nähere Informationen zu CSS finden Sie unter [2].)

Um den Hintergrund Ihrer Web-Seite mit einer Farbe zu versehen, wählen Sie als Eigenschaft das Attribut background-color aus. Die Farbe selber legen Sie dann entweder über das Drop-down-Menü fest, in dem bereits einige Farben stehen, oder mit einem Klick auf den Button Farbe. Daraufhin öffnet sich ein Dialog, in dem Sie sehr genau Ihre Lieblingsfarbe auswählen.

Danach klicken Sie auf Hinzufügen und dann auf OK. In Ihrem Dokument ist das Rumpf-Tag nun um das Attribut style ergänzt:

<body style="background-color:\
 #C7CAE6; ">

Im Untermenü Extern / Browser wählen Sie einen Browser aus, den Bluefish mit dem aktuellen Dokument startet. Falls Ihnen die Farbe nicht gefällt, klicken Sie wieder in das Tag hinein und drücken [F3]. Wählen Sie die Schaltfläche Stil aus und klicken Sie auf das Attribut in der Liste, das sie ändern wollen. Haben Sie eine Farbe gewählt, vergessen Sie nicht, mit Aktualisieren die Änderungen zu speichern.

Überschriften

Mit Überschriften helfen Sie den Besuchern Ihrer Seite, sich schneller zurechtzufinden. Im Reiter Standardschaltflächen gibt es dafür die Schaltfläche Überschrift, gekennzeichnet mit einem großen H. Klicken Sie darauf, öffnet sich eine Liste mit Elementen von H1 bis H6.

Das Tag H1 stellt die Schrift am größten dar, H6 am kleinsten. Probieren Sie einfach aus, welche Größe Ihnen am liebsten ist. Achten Sie auch darauf, dass jeder Browser die Größenangaben unterschiedlich interpretiert. Sie sollten auf jeden Fall mit den wichtigsten Browsern Ihre Seite ansehen (siehe Kasten "Browser-Probleme").

Als Nächstes folgt ein Absatz mit Text. Mit einem Klick auf das fünfte Symbol von links in den Standardschaltflächen fügen Sie dazu ein P-Tag ein. Auch dieses formatieren Sie -- genau wie den Rumpf -- über einen Druck auf [F3]. Vor allem die Ausrichtung ist hier wichtig, damit der Text und eventuell vorhandene Grafiken sich nicht in die Quere kommen.

Schöne Bilder

Um eine Homepage grafisch aufzupäppeln, benötigt sie Bilder. In Bluefish fügen Sie ein Bild über Dialoge / Allgemein / Bild einfügen ein. Klicken Sie im Dialogfenster auf Browsen und wählen Sie das passende Bild aus. Achten Sie darauf, dass das Bild möglichst im selben Verzeichnis wie die HTML-Datei oder in einem Unterverzeichnis liegt. Denn wenn Sie Ihr Projekt später auf Ihren Web-Server hochladen, muss er die Datei an genau derselben Stelle wiederfinden.

Bluefish zeigt Ihnen eine Vorschau des Bildes an, das sie ausgewählt haben. Über Breite und Höhe legen Sie fest, wie hoch und breit der Browser die Datei später anzeigt. Aber Achtung: Wenn die Datei beispielsweise 1600 mal 1200 Pixel hat, Sie aber als Anzeigegröße 120 mal 160 auswählen, muss der Browser trotzdem die große Datei laden (also eventuell mehrere MBytes). Er skaliert sie dann lediglich bei der Anzeige. Daher sollten Sie bereits vorher das Bild etwa im Gimp auf die gewünschte Größe anpassen.

Wählen Sie unbedingt einen alternativen Text aus. In der strikten HTML-Variante darf dieses Attribut nicht leer sein. Es hilft nicht nur blinden Besuchern Ihrer Web-Seite, sich zurechtzufinden (etwa, wenn sie ein Braille-Terminal oder einen Sprach-Browser benutzen, der den Inhalt akustisch ausgibt), sondern auch Suchmaschinen und Benutzern, die standardmäßig keine Bilder vom Browser laden lassen.

Tabellen

Wollen Sie Ihre Inhalte in Tabellenform anzeigen, nimmt Bluefish Ihnen sehr viel Arbeit ab:

  1. Klicken Sie auf den Reiter Tabellen im Hauptfenster.
  1. Klicken Sie die linke Schaltfläche Tabellenassistent an.
  1. Geben Sie die Anzahl der Zeilen und Spalten Ihrer Tabelle ein und klicken Sie auf Rücke Tabellencode ein. So behalten sie leichter die Übersicht.
  1. Ein Klick auf OK fügt den Rumpf Ihrer Tabelle in das Dokument ein.

Tabellen in HTML sind relativ simpel. Mit TR beginnen Sie eine neue Zeile (table row), TD leitet innerhalb dieser Zeile eine Spalte ein (table data). Jedes TD-Tag steht also für eine Tabellenzelle innerhalb einer Zeile. Mit den weiteren Knöpfen in diesem Reiter fügen Sie einen Tabellenkopf, weitere Zeilen und Zellen ein.

Standardmäßig besitzen Tabellen keine Ränder. Zu Testzwecken ist es hilfreich, sich die Ränder trotzdem anzeigen zu lassen. Klicken Sie dazu in das öffnende table-Tag und wählen Sie einen Rand der Größe 1 aus. In der Anzeige Ihres Browsers sehen Sie jetzt genau die Dimensionen der Tabelle. Vor allem, wenn Sie eine feste Breite wünschen, hilft ein Rand zur Orientierung.

Eines der wichtigsten Elemente einer Web-Seite sind Verweise (englisch: Links). Auch für diese gibt es in Bluefish einen Assistenten:

  1. Klicken Sie in den Standardschaltflächen auf das Ankersymbol (Abbildung 2).
  1. Geben Sie im Feld HREF das Ziel des Verweises an (etwa http://www.easylinux.de) und klicken Sie auf OK.
  1. Tippen Sie nun zwischen den A-Tags den Text ein, der als Verweis erscheinen soll.

Abb. 2: Mit seinen zahlreichen Assistenten hilft Bluefish, schnell eine Web-Seite zu erstellen. Hier sehen Sie den Ankerassistenten, mit dem Sie Links einfügen und sämtliche Attribute bearbeiten.

Falls Sie Ihren Verweisen bestimmte Stilvorgaben (etwa Textfarbe oder Schriftart) mitgeben, achten Sie darauf, dass die Links sich klar als solche zu erkennen geben. Viele Gestalter kümmern sich nicht darum, und Benutzer ärgern sich, wenn sich gewöhnlicher unterstrichener Text nicht von einem Link unterscheiden lässt.

Tipps und Tricks

Mit diesen wenigen Schritten gestalten Sie bereits eine passable Seite (Abbildung 3). Doch Bluefish hilft nicht nur beim Einfügen und Formatieren von Tags. Das Programm besitzt zum Beispiel eine komplette Projektverwaltung, mit der Sie Web-Auftritte verwalten, die aus mehr als einer HTML-Seite bestehen:

Abb. 3: Diese Web-Seite benötigt nicht einmal 50 Zeilen Quellcode. WYSIWYG-Editoren wie Dreamweaver werfen für die gleiche Darstellung etwa 70 bis 80 Zeilen Code aus.
  1. Öffnen Sie alle Dokumente, die zu Ihrem Auftritt gehören.
  1. Wählen Sie den Menüpunkt Projekt / Neu aus.
  1. Wählen Sie im folgenden Fenster Erzeuge Projekt mit aktuell geöffneten Dokumenten aus und klicken Sie auf OK.
  1. Geben Sie dem Projekt einen Namen und ein Basisverzeichnis, in dem alle Ihre HTML-Dateien und Grafiken liegen. Klicken Sie auf OK.
  1. Wählen Sie nun einen Dateinamen, in dem Bluefish alle wichtigen Metadaten zu Ihrem Projekt speichert, und klicken Sie abermals auf OK.

Wenn Sie jetzt Bluefish beenden und wieder starten, klicken Sie auf Projekt / Öffnen und wählen die Datei aus, die Sie in Schritt 5 angegeben haben. Bluefish zeigt nun auf der linken Seite das Basisverzeichnis sowie seinen Inhalt an und öffnet alle Dateien des Projekts.

Falls Sie während der Gestaltung Ihrer Seiten mal nicht mehr wissen, welches HTML-Tag welchen Zweck erfüllt, klicken Sie einmal im unteren Teil der linken Leiste auf das mittlere Buchsymbol. In dem Reiter finden Sie komplette Referenzen zu HTML, PHP, CSS und sogar der Programmiersprache Python. Mit einem Rechtsklick auf das Element und einem weiteren Klick auf Dialog öffnet sich für jedes Tag ein Dialog, in dem Sie alle Attribute anpassen und das Tag einfügen.

Das Register Schnellzugriff, das sich beim ersten Start von Bluefish noch etwas karg zeigt, speichert für Sie Ihre wichtigsten Schaltflächen. Klicken Sie einfach mit der rechten Maustaste auf eine Schaltfläche, die Sie oft benötigen, und wählen Sie Zum Schnellzugriff aus.

Alles richtig?

Auch der versierteste HTML-Guru kennt nicht alle Standards auswendig. Daher sollten Sie Ihre erstellten Seiten stets auf Konformität prüfen, um Probleme mit Browsern zu vermeiden. Bluefish integriert dazu mehrere Programme, die helfen, sauberen Code zu schreiben.

Die Programme Tidy und Weblint liegen jeder aktuellen Distribution bei. Sind sie bereits installiert, klicken Sie in Bluefish einfach auf Extern / Ausgabebox und wählen das passende Programm aus. Damit stellen Sie sicher, dass Ihr Code stets standardkonform und übersichtlich ist.

Ab und zu verschluckt sich Bluefish in der aktuellen Version 1.0.2 an neu eingefügtem Code und färbt die Tags nicht ordnungsgemäß ein. Dem schaffen Sie mit einem Druck auf [F5] Abhilfe. Sie aktualisiert das Highlighting (die farbige Hervorhebung von Code) im kompletten Dokument. (mwe)

Infos
[1] Bluefish-Homepage: http://bluefish.openoffice.nl
[2] SELFHTML: http://de.selfhtml.org

Dieser Online-Artikel kann Links enthalten, die auf nicht mehr vorhandene Seiten verweisen. Wir ändern solche "broken links" nur in wenigen Ausnahmefällen. Der Online-Artikel soll möglichst unverändert der gedruckten Fassung entsprechen.

Druckerfreundliche Version | Feedback zu dieser Seite | Datenschutz | © 2018 COMPUTEC MEDIA GmbH | Last modified: 2007-04-05 11:10

Nutzungsbasierte Onlinewerbung

[Linux-Magazin] [LinuxUser] [Linux-Community] [Admin-Magazin] [Ubuntu User] [Smart Developer] [Linux Events] [Linux Magazine] [Ubuntu User] [Admin Magazine] [Smart Developer] [Linux Magazine Poland] [Linux Community Poland] [Linux Magazine Brasil] [Linux Magazine Spain] [Linux Technical Review]