Homepagegestaltung mit WebMaker

Aus LinuxUser 05/2000

Homepagegestaltung mit WebMaker

Seite für Seite

Nicht jeder Homepage-Autor möchte seine Webseiten mit WYSIWYG-Programmen wie dem Netscape Composer oder StarOffice zusammen zimmern, zumal diese oft unsinnig großen Quelltext produzieren. Ein HTML-Quelltexteditor muss also her. WebMaker ist eine gelungene Alternative für diejenigen, denen der Emacs zu unübersichtlich ist.

HTML zu lernen ist zwar nicht besonders schwer [1], aber für ein wenig Unterstützung sind die meisten Freizeit- (und berufsmäßigen) Webdesigner doch recht dankbar. Wem es nicht reicht, dass auch “normale” Texteditoren wie der Emacs oder die vi-Versionen elVIs und Vim mit Syntaxhighlighting aufwarten, findet im WebMaker eine gute, KDE-unterstützte Alternative.

Das Programm wird von Alexei Dets entwickelt und ist zur Zeit in der Version 0.8.5 verfügbar [2]. Als Vorbild fungiert HomeSite für Windows, an das sich WebMaker in Aussehen und Bedienung stark anlehnt. WebMaker ist ein reiner Quelltexteditor und bietet daher keine Vorschau für die geschriebenen Seiten. Zur Vorschaudarstellung nutzt WebMaker einen installierten Browser. Die HTML-Tags werden farbig markiert, so dass eine vergessene Klammer oder ein ausgelassenes Anführungszeichen schnell auffallen.

WebMaker unterstützt den HTML-4-Standard. Wer Seiten erstellen will, die ausschließlich Elemente aus HTML 2.0 oder 3.2 verwenden, muss jedoch selbst wissen (oder unter [1] nachschlagen), welche Tags jeweils erlaubt sind.

Download und Installation

Auf der WebMaker-Homepage [2] gibt es WebMaker als fertig gepacktes rpm-Paket für Red Hat Linux 5.2 und 6.0. Sie laden die Datei WebMaker-0.8.5-4.i386.rpm herunter und installieren das Programm als root mit dem Kommando rpm -i WebMaker-0.8.5.rpm. Für Besitzer von Rechnern mit i686-Prozessoren gibt es ein eigenes rpm: WebMaker-0.8.5-4.i686.rpm.

Wenn Sie WebMaker lieber selbst übersetzen wollen oder müssen, können Sie das natürlich auch tun. Neben KDE in einer Version ab 1.1 und Qt 1.42 oder 1.44 benötigen Sie dazu das Paket WebMaker-0.8.5.tar.gz, das Sie ebenfalls auf der WebMaker-Homepage finden. Entpackt wird das Archiv mit dem Kommando tar xvfz WebMaker-0.8.5.tar.gz.

Dank autoconf und automake sind Übersetzung und Einrichtung schnell erledigt. Sie geben dazu an der Konsole nacheinander die Befehle

./configure
make

und als root

make install

ein.

Ab sofort können Sie WebMaker durch Eingabe von webmaker & in einer Konsole oder aus dem KDE-Menü im Unterordner Anwendungen starten.

Oberflächliches

WebMaker begrüßt Sie nach dem Start mit einem zweigeteilten Programmfenster (Abbildung 1).

Abbildung 1: Das WebMaker-Hauptfenster

Abbildung 1: Das WebMaker-Hauptfenster

Links sehen Sie einen Verzeichnisbaum, rechts die geöffneten Dateien, die Sie über die Karteireiter am oberen Rand des Arbeitsbereichs erreichen. Sie können beliebig viele Dateien gleichzeitig geöffnet halten und über die Reiter zwischen den Dateien hin und her schalten.

Bevor Sie mit der Arbeit beginnen, müssen Sie WebMaker noch konfigurieren, damit das Programm den zur Vorschaudarstellung nötigen Browser finden kann. Sie wählen Einstellungen–>Allgemein aus dem Menü und dann die Karteikarte Pfade (Abbildung 2). Ins Feld Pfad zum externen Browser geben Sie den vollständigen Pfad zu Netscape ein. Leider ist es nicht möglich, kfm, den Dateimanager von KDE, zur Vorschaudarstellung zu verwenden.

Abbildung 2: Suchpfade setzen

Abbildung 2: Suchpfade setzen

Bei Pfad zu HTML-Vorlagen tragen Sie das Verzeichnis ein, in dem Sie vorgefertigte HTML-Seiten abgelegt haben, die Sie als Schablonen verwenden wollen. Wenn Sie aus dem Menü Datei–>Neu von Vorlage… wählen, landen Sie dann genau dort. Bei Wurzel des Verzeichnisbaums können Sie den Namen des Verzeichnisses angeben, das die oberste Ebene des Verzeichnisbaums im Programm-Hauptfenster bilden soll, zum Beispiel Ihr Homeverzeichnis.

Auf den anderen Seiten des Konfigurationsdialogs, die Sie über die Karteireiter am oberen Fensterrand erreichen, passen Sie WebMaker weiter an Ihre Bedürfnisse an. So legen Sie auf der Seite Farben fest, welche Farben WebMaker für welche HTML-Elemente verwenden soll (Abbildung 3).

Unter Verzeichnis-Filter stellen Sie schließlich ein, welche Dateitypen WebMaker im Verzeichnisbaum des Hauptfensters als Dokumente und Grafiken anzeigen soll (Abbildung 4). Dateien der angegebenen Dateitypen können Sie später bequem aus dem Verzeichnisbaum heraus öffnen oder als Verweis in den Quelltext einfügen.

Abbildung 3: Editorfarben nach Wunsch

Abbildung 3: Editorfarben nach Wunsch

Abbildung 4: Dateifilter einstellen

Abbildung 4: Dateifilter einstellen

Richtig bedient

WebMaker lässt sich komplett mit der Maus, aber auch weitgehend über Tastenkürzel und Funktionstasten bedienen. In seinen Funktionsleisten bietet das Programm alle gebräuchlichen Tags auf Mausklick an (Abbildung 5). Zusätzlich können Sie auch eigene Werkzeugleisten zum Erstellen von Tabellen, Listen und zur Schriftenformatierung einblenden. Diese “Toolbars” sind unter Ausnahme der Hauptwerkzeugleiste durch Bearbeiten der Konfigurationsdatei von WebMaker veränderbar.

Abbildung 5: Die Werkzeugleisten

Abbildung 5: Die Werkzeugleisten

Eine zusätzliche Hilfe zur Auswahl von HTML-Tags ist der FormatWähler (Abbildung 6). Hier finden Sie alle HTML-Tags nach Gruppen geordnet. Um ein Tag in den Quelltext einzufügen, wählen Sie auf der linken Seite eine Gruppe aus (z.B. Text structure) und doppelklicken dann in der rechten Liste auf das gewünschte Tag, z.B. BLOCKQUOTE. WebMaker fügt an der Cursorposition die passende Auszeichnung (im Beispiel <blockquote></blockquote>) ein und setzt den Cursor zwischen das einführende und abschließende Tag, so dass Sie den Text im gewünschten Format gleich eingeben können.

Abbildung 6: Formate, ausgewählt

Abbildung 6: Formate, ausgewählt

Wenn Sie WebMaker lieber über die Tastatur bedienen möchten, zeigt Ihnen Tabelle 1 die wichtigsten Tastenkürzel und die Belegung der Funktionstasten.

Tabelle 1: Wichtige Tastenkürzel

Aktion Tastenkürzel Entsprechendes HTML-Tag
Datei öffnen [Strg]+[O]
Datei schließen [Strg]+[W]
Datei speichern [Strg]+[S]
Datei unter anderem Namen speichern [Strg]+[Umschalt]+[S]
Ersetzen [Strg]+[R]
Format bearbeiten [F4]
Formatwähler öffnen [Strg]+[E]
Gehe zu Zeile [Strg]+[G]
Suchen [Strg]+[F]
Letzte Aktion rückgängig machen [Strg]+[Z]
Absatz einfügen [Strg]+[Umschalt]+[P] <p> </p>
Absatz zentriert ausrichten [Strg]+[Umschalt]+[C] <div align="justify"> </div>
Festes Leerzeichen [Umschalt]+[Leertaste]  
Fett [Strg]+[Umschalt]+[B] <<\b>> </b>
Kursiv [Strg]+[Umschalt]+[I] <<\i>> </i>
Horizontale Linie einfügen [Strg]+[Umschalt]+[H] <hr>
Schriftgröße eine Einheit verkleinern [Strg]+[-] <font size="-1"> </font>
Überschrift erster Ordnung [Strg]+[1] <h1> </h1>
Überschrift zweiter Ordnung [Strg]+[2] <h2> </h2>
Überschrift dritter Ordnung [Strg]+[3] <h3> </h3>
Unterstreichen [Strg]+[Umschalt]+[U] <<\u>> </u>
Zeilenumbruch [Umschalt]+[Return] <br>
Zitat (“Quote”) [Strg]+[Umschalt]+[Q] <q> </q>

Alte Bekannte

Selbstverständlich kann es auch dieser HTML-Editor nicht allen recht machen, doch wer wie der Autor vor Urzeiten unter Windows mit HomeSite gearbeitet hat, wird sich mit ihm sofort vertraut fühlen. Das Programm läuft sehr stabil, alle notwendige Funktionalität ist vorhanden. Das einzige, was ich mir noch wünsche, ist eine programmgesteuerte Ersetzung von Umlauten und anderen Sonderzeichen.

Glossar

WYSIWYG

Dieses Wortungetüm steht für “What You See Is What You Get” und bedeutet für HTML-Editoren, dass die Bildschirmdarstellung bei der Entwicklung der Seite möglichst dem entsprechen soll, was die Websurfer zu sehen bekommen. Da die HTML-Darstellung jedoch in den verschiedenen Browsern unterschiedlich ausfallen kann (und darf), ist es schwierig, hier den ultimativen Weg zu finden.

Syntaxhighlighting

Das automatische farbige Markieren von Befehlen und Auszeichnungen (im Gegensatz zu normalem Text).

Tags

Markierungen. HTML ist eine Auszeichnungssprache, die nur die Struktur, nicht aber die genaue Formatierung eines Dokuments beschreibt (wobei hier dank verschiedener, oft proprietärer Erweiterungen nicht selten der Wunsch Vater des Gedankens ist). Tags im HTML-Quelltext weisen den Browser an, eine bestimmte Formatierung vorzunehmen.

rpm

Der “Red Hat Packet Manager” ist ein Programm zum Installieren und Deinstallieren von Programmen, das Abhängigkeiten zwischen verschiedener Software beachtet.

autoconf und automake

Programme, die aus einer Vorlage die zur Programmkompilierung auf einem bestimmten Betriebssystem notwendigen Makefiles erzeugen. Ausführlichere Informationen finden Sie dazu in den Linux-User-Ausgaben aus Heft 03 und 04/2000.

Pfad

Der Weg zu einer Datei im Dateibaum, also eine Auflistung aller Verzeichnisse, über die man gehen muss, um zur Datei zu kommen.

Session-Management

Die Fähigkeit einer grafischen Oberfläche, den Zustand einer passenden Anwendung beim Beenden zu speichern und beim erneuten Hochfahren wieder herzustellen.

Infos

[1] SelfHTML ist ein sehr guter Kurs zum Erlernen von HTML: http://www.teamone.de/selfhtml/

[2] Die WebMaker-Homepage: http://www.services.ru/linux/webmaker/

Der Autor

Frank Wieduwilt studierte Geschichte und verdient sich seine Brötchen zur Zeit unter anderem durch Computernachhilfe. Mit WebMaker macht er so allerhand, unter anderem schreibt er damit Artikel für das Linux-Magazin. Er lebt zusammen mit seiner Frau Sabine in Berlin.

LinuxUser 05/2000 KAUFEN
EINZELNE AUSGABE
ABONNEMENTS
TABLET & SMARTPHONE APPS
E-Mail Benachrichtigung
Benachrichtige mich zu:

Hinweis: Dieser Artikel ist älter als ein Jahr, enthaltene Informationen sind möglicherweise veraltet.

0 Kommentare
Älteste
Neuste Beste Bewertung
Inline Feedbacks
Alle Kommentare anzeigen
Nach oben