Homepages erstellen mit dem Mozilla Composer

Das World Wide Web mitgestalten

Carsten Schnober

---

Günstige Server-Angebote für die eigene Homepage gibt es zu Hauf. Aber ohne tiefere HTML-Kenntnisse wird das Basteln der Seite schnell zur Qual. Einfacher macht es Mozilla-Composer.

---

Web-Seiten gestaltet man mit Hilfe der Hypertext Markup Language (HTML). Durch Steuerungsbefehle, so genannte HTML-Tags, verrät sie dem Web-Browser, was er dem Betrachter zeigen soll.

Wer vor dem Start zur eigenen Internet-Präsenz nicht erst HTML-Lehrbücher wälzen möchte, bekommt Hilfe von grafischen Editoren. Ein solcher ist Teil der Mozilla-Suite, neben Web-Browser und Mail-Programm enthält sie den Composer. Er nimmt dem Benutzer durch grafische Darstellungen so viele Aufgaben wie möglich ab und setzt via Maus und Dialogfenster geäußerte Wünsche in HTML-Code um.

Änderungen werden auf dem Bildschirm direkt sichtbar. Dieses Prinzip nennt man WYSIWYG, die Abkürzung für "What you see is what you get".

Voraussetzungen

Installieren Sie, wenn noch nicht geschehen, das Paket Mozilla mit Ihrem Paket-Manager nach; unter SuSE Linux brauchen Sie zudem das Paket mozilla-deat für eine deutschprachige Umgebung.

Bei der SuSE Linux Personal Edition fehlt die Mozilla-Suite auf der CD. Zum Herunterladen der Software starten Sie Konqueror und tragen Sie in die Adresszeile den Link von [1] ein. Daraufhin fragt YaST nach Ihrem root-Passwort und installiert das Mozilla-Paket. Für die deutschsprachige Umgebung zu erhalten, verfahren Sie genauso mit [2].

Ansichten

Starten Sie nun den Mozilla-Browser. Über den Menüpunkt Datei / Neu / Composer-Seite öffnen Sie den HTML-Editor mit einer neuen, leeren Datei. Das weiße Fenster lässt kaum erahnen, dass daraus später eine ansprechende Homepage entstehen wird.

Sie befinden sich zunächst in der Standardansicht (Normal). Am unteren Fensterrand gibt es vier Reiter, über die Sie in die anderen Modi wechseln: HTML Tags ergänzt die normale Ansicht um die Namen der verwendeten HTML-Steuerungsbefehle. In der Ansicht Quelle sehen Sie den reinen HTML-Code, hier können Sie direkt Anpassungen am vom Composer erstellten Code vornehmen, entsprechende HTML-Kenntnisse vorausgesetzt. In der Vorschau schließlich sehen Sie, wie die angelegte Seite im Web-Browser eines Besuchers aussieht.

Tabellen

Zurück in der Ansicht Normal beginnen Sie mit der kreativen Arbeit. Beliebt sind Tabellen, um eine Homepage grundlegend zu strukturieren. Mit einem Klick auf das mit Tabelle beschriftete Symbol oder über den Menüpunkt Tabelle / Einfügen / Tabelle ... öffnen Sie ein Dialogfenster, das die gewünschten Eckdaten abfragt (Abbildung 1). Neben der Anzahl der Zeilen und Spalten geben Sie unter Breite an, wie viel Platz auf dem Bildschirm die neue Tabelle beanspruchen soll: In der nebenstehenden Ausklappliste schalten Sie auf Wunsch von der Voreinstellung % des Fensters zur Einheit Pixel um.

Abb. 1: Eine Tabelle erstellt Mozilla Composer ganz nach Wunsch des Benutzers.

Belassen Sie es bei der Vorgabe von 100% füllt die Tabelle den ganzen Bildschirm aus, unabhängig von der Konfiguration des Betrachters. Stellen Sie eine Pixel-Zahl ein, müssen die Bildschirmeinstellungen des Benutzers passen: Bauen Sie beispielsweise eine Tabelle mit einer Breite von 800 Pixel, sehen Web-Surfer mit einer Bildschirmbreite von 600 Pixel nicht die ganze Tabelle auf einmal.

Schließlich definieren Sie im Feld Rand den Abstand zwischen Tabelle und den sie umgebenenden Elementen.

Diese Einstellungen lassen sich auch nachträglich mit einem Klick auf das Tabellen-Symbol ändern, so dass Sie problemlos experimentieren können. Gerade die Einheit "Pixel" ist für den Menschen schwer vorstellbar, so dass Sie durch Ausprobieren Ihr Gefühl dafür verbessern.

Feinabstimmung

Möchten Sie Tabelleneinstellungen nachträglich ändern, öffnen Sie über den Menüpunkt Tabelle / Tabelleneigenschaften... das entsprechende Dialogfenster (Abbildung 2). Es bietet einige Optionen mehr als der Dialog zum Erstellen: Hier ändern Sie bei Bedarf den Abstand zwischen den einzelnen Zellen im Feld Außenabstand (cellspacing) sowie den zwischen Zellenrand und -inhalt unter Innenabstand (cellpadding).

Abb. 2: Tabelleneigenschaften lassen sich jedezeit ändern und präzisieren.

In den Tabelleneigenschaften bestimmen Sie zudem die Ausrichtung des Textes in den Zellen sowie eine Hintergrundfarbe und reservieren Platz für einen Tabellentitel.

Die Eigenschaften einzelner Zellen, oder ganzer Zeilen und Spalten ändern Sie im Reiter Zelle. Analog zur Gesamttabelle lassen sich hier Größe, Hintergrundfarbe und Textausrichtung im Detail ändern.

Nach Eingabe aller Tabellendaten verschieben Sie mit gehaltener linker Maustaste die Trennlinien an den Eckpunktung in senkrechter Richtung, um Zellenhöhe zu verändern. Bezüglich der Breite ist das nicht ganz so einfach, hier hilft nur der Weg über die Tabellen- oder Zelleneigenschaften.

Nebeneinanderliegende Zellen lassen sich über das eingekreiste Kreuzsymbol zu einer vereinigen, die Pfeilsymbole daneben legen in Pfeilrichtung eine neue Spalte oder Zeile an.

Texte und Links

Eine Homepage besteht nicht nur aus Tabellen. Auch Texte unterschiedlicher Art lassen sich mit dem Composer leicht einfügen: Dazu klicken Sie auf den gewünschten Zielpunkt und schreiben wie in einer Textverarbeitung. Dabei stehen Ihnen auch aus Textprogrammen bekannte Funktionen zur Verfügung, wie bündig ausgerichtete oder fette, kursive und unterstrichene Schrift.

Bezüglich der Schriftgröße hat man die Auswahl zwischen Normaler Text, Absatz und sechs verschiedenen Überschriftentypen. Zudem gibt es die Option, Internet-Adressen durch eine spezielle Schriftart zu kennzeichnen; das entspricht dem HTML-Code <address>. Vorformatierter Text verwendet das HTML-Tag <pre> und sorgt für abgesetzten Text, häufig verwenden Web-Designer dies, um beispielsweise Programm-Code zu illustrieren.

Um aus bereits geschriebenem Text einen Link zu machen, markieren Sie den betreffenden Abschnitt und klicken Sie auf das Symbol Link. Im erscheinenden Dialogfenster geben Sie im Feld Link-Adresse das Ziel an, das kann eine andere HTML-Datei auf dem gleichen Rechner oder eine entfernte Internet-Adresse sein. Klicken Sie auf Link ohne zuvor einen Text zu markieren, haben Sie im Dialog die Möglichkeit, unter Link-Text etwas einzugeben.

Bilder

Ein Bild bauen Sie mit Hilfe des Grafik-Symbols ein. Damit öffnen Sie ein Dialogfenster (Abbildung 3), in dem Sie den Dateinamen des Bildes ins oberste Feld eintragen. Unter Tooltip geben Sie einen Text ein, der erscheint, wenn ein Betrachter mit dem Mauszeiger über das Bild fährt. Unter Alternativtext schreiben Sie einen Text, den Benutzer sehen, deren Browser das Bild nicht anzeigen können.

Abb. 3: Bilder bauen Sie per Mausklick ein.

Wollen Sie dem Bild eine feste Größe zuordnen, unabhängig vom Original, legen Sie diese im Reiter Dimensionen fest. Das Unterfenster Erscheinungsbild definiert im Feld Außenbereich die Abstände zu nebenstehenden Elementen. Mit durchgezogener Rand erhalten Sie einen Rahmen in der Breite der eingetragenen Pixel-Anzahl um die Grafik herum.

Über die Ausklappliste Text an Grafik ausrichten legen Sie fest, an welcher Stelle um das Bild herum Text platziert wird: Am oberen oder unteren Rand oder in mittlerer Höhe. Unter Link schließlich machen Sie aus einer Grafik einen Web-Link, der bei einem Klick auf das Bild zu einer anderen Seite führt.

Gesamtkunstwerk

Mit den beschriebenen Methoden füllen Sie eine Homepage nach und nach mit einzelnen Text- und Bildelementen, mit Hilfe von Tabellen bauen Sie eine Struktur auf. Zu kurz gekommen ist dabei bisher die Optik.

Über den Menüeintrag Format / Seitenfarben- und hintergrund... legen Sie die Basisgestaltung fest: Belassen Sie es bei der Vorauswahl Standardfarben des Lesers (Keine Farben in Seite setzen), überlassen Sie dem Web-Browser des Betrachters die Farbauswahl der Texte. Wenn Sie Eigene Farben verwenden: aktivieren, können Sie für die verschiedenen Texttypen selbst Farben definieren.

Normaler Text beschreibt gewöhnlichen Text ohne spezielle Markierungen. Link-Text bestimmt die Farbe, die ein bisher ungenutzter Link hat. Nachdem ein Besucher einen Link angeklickt hat, sieht er ihn in der Farbe von Besuchter Link-Text. Aktiver Link-Text schließlich beschreibt die Farbe, die ein Link während dem Klick eines Besuchers annimmt.

Im Feld Hintergrundbild tragen Sie eine beliebige Bilddatei ein, der Knopf Durchsuchen... assistiert dabei durch einen Datei-Browser. Die angegebene Datei erscheint anschließend als Hintergrund der gesamten Homepage.

Hintergrundinformationen

Der Punkt Format / Seitentitel- und einstellungen... ermöglicht im erscheinenden Dialogfenster, den Titel der Homepage, den Autor und eine Kurzbeschreibung anzugeben. Diese so genannten Meta-Informationen erscheinen beim Betrachten nicht auf der Seite.

Der Titel steht bei den meisten Browsern im Kopf des Fensters. Die beiden anderen Einträge bekommen gewöhnliche Betrachter nicht zu Gesicht, aber beispielsweise Suchmaschinen werten sie aus.

Anpassungen

Wer HTML beherrscht, kennt eine Vielzahl weiterer Tags und Parameter, die der Composer nicht alle anbietet oder vollständig ausnutzt. Doch es gibt an vielen Stellen die Gelegenheit, die Vorgaben anzupassen.

Im Reiter Quelle des Hauptfensters haben Sie die Möglichkeit, direkt im Quelltext eigene Änderungen vorzunehmen. Zudem zeigt die Normal-Ansicht am unteren Fensterrand die HTML-Tags an, die die gerade markierten Elemente beschreiben, in hierarchischer Gliederung. So sehen Sie wenn sich der Cursor in einer Tabellenzelle befindet die Einträge <body><table><tbody><tr><td>. Das <body>-Tag gilt für das gesamte Dokument, <table> beschreibt die ganze Tabelle, <tbody> den Tabellenhauptteil ohne Überschriften, <tr> die aktive Zeile und <td> schließlich die markierte Zelle.

Klicken Sie auf einen Eintrag mit der rechten Maustaste, erscheint ein Kontextmenü. Darin wählen Sie Erweiterte Eigenschaften, dann erscheint ein Dialogfenster, das die für das betreffende HTML-Tag möglichen Attribute anzeigt. In den dazugehörigen Feldern tragen Sie eigene Werte ein.

Nicht nur klassische HTML-Tags passen Sie hiermit an, auch CSS-Eigenschaften (Cascading Style Sheets) und Befehle für die Web-Programmiersprache JavaScript können erfahrenere Web-Entwickler in den weiteren Reitern einstellen.

Ready to go

Entspricht die Seite schließlich Ihren Ansprüchen, ist es Zeit, sie ihrem eigentlich Zweck zuzuführen: der Präsentation im Internet. Den nötigen Upload übernimmt auf Wunsch ebenfalls der Composer selbst. Wählen Sie dazu den Menüpunkt Bearbeiten / Publizierungssite-Einstellungen... (Abbildung 4). Unter Site-Name vergeben Sie einen eindeutigen Namen, damit Sie den Server jederzeit wiederfinden und erkennen.

Abb. 4: Composer übernimmt den Upload auf Ihren Internet-Server.

Am weitesten verbreitet ist der Upload über FTP, das Protkoll zur Dateiübertragung per Internet. Geben Sie unter Publizierungs-URL den Server-Namen und gegebenfalls das Unterverzeichnis an. Im Feld HTTP-Adresse Ihrer Homepage geben Sie die Adresse an, unter der Ihre Homepage später übers Internet abrufbar ist. Benutzername und Passwort erfahren Sie genau wie die anderen Angaben von Ihrem Web-Provider.

Anschließend öffnet ein Klick auf das Publizieren-Symbol ein Dialogfenster, in dem Sie einen zuvor konfigurierten Ziel-Server auswählen. Das Feld Seitentitel füllt Composer mit Ihren Angaben in den Seiteneinstellungen, unter Dateiname tragen Sie einen anderen Namen ein, wenn er sich auf dem Server vom lokalen Dateinamen unterscheiden soll, beispielsweise index.html.

Des Weiteren geben Sie hier bei Bedarf ein zu verwendendes Unterverzeichnis auf dem Server an. Aktivieren Sie den Punkt Grafiken und andere Dateien inkludieren, lädt Composer automatisch auch von Ihrer HTML-Seite verwendete Bilddateien hoch.

Hilfe, aber keine Lösung

Zusammenfassend bleibt auch bei Mozillas Composer das Problem aller WYSIWYG-Editoren bestehen: HTML ist eine Sprache mit vielen Facetten, es ist für ein Programm kaum möglich, alle Wünsche des Benutzers perfekt umzusetzen. Deshalb sollten Sie beim Erstellen von Web-Seiten im Auge behalten, dass ein sehr aufwändiges Layout nicht ganz ohne eigene HTML-Kenntnisse entstehen kann. Einfachere Seiten wie in Abbildung 5 entstehen aber schon durch wenige Mausklicks und können auch HTML-Kennern mühsame Handarbeit abnehmen.

Abb. 5: Einfache HTML-Seiten erstellt der Composer mit wenigen Handgriffen.

Der Composer eignet sich dadurch sehr gut, um Basisarbeiten zu übernehmen. Auch wer HTML gründlich lernen will erhält durch die verschiedenen Ansichten einen Überblick über die Struktur dieser Sprache. (csc)

Infos

[1] SuSE Linux Mozilla-Paket: ftp://ftp.suse.com/pub/suse/i386/9.1/suse/i586/mozilla-1.6-72.i586.rpm [2] SuSE Linux deutsches Mozilla-Sprachpaket: ftp://ftp.suse.com/pub/suse/i386/9.1/suse/i586/mozilla-deat-1.6-64.i586.rpm [3] Mozilla: http://www.mozilla.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.