claim.gif
Linux Magazin Linux User Easy Linux Ubuntu User International Linux Community
Erschienen in EasyLinux 05/2004   »   Ausgabe bestellen

Homepage gestalten mit Quanta Plus

Web-Designer

von Elisabeth Bauer


Die eigene Homepage gehört heute schon fast zur Grundausstattung. Der HTML-Editor Quanta erleichtert Anfängern den Einstieg in HTML, die Sprache des Webs, und bietet auch den Profis eine Masse nützlicher Features.

Grafischer HTML-Editor? Fehlanzeige. Wer unter Linux Websites gestalten will, stellt schnell fest, dass es so etwas wie die unter Windows verbreiteten Programme Frontpage oder Homesite schlicht nicht gibt. An guten Ratschlägen in Newsgroups, doch stattdessen einen einfachen Text-Editor zu verwenden, mangelt es nicht -- aber damit ist dem Anfänger, der sich in HTML einarbeiten will, wenig geholfen. Das KDE-Programm Quanta versucht hier einen Kompromiss: Zwar immer noch als Quelltext-Editor aufgebaut, bietet es eine mittlerweile recht brauchbare eingebaute Vorschau, und zahlreiche Assistenten und Werkzeugleisten helfen dem, der sich das Sammelsurium der Tags nicht auswendig merken kann.

Startvorbereitungen

Die Installation von Quanta gestaltet sich einfach: Unter SuSE Linux 8.2 wählen Sie im Work-Menü den Punkt Administration/Software nachinstallieren/Internet/WWW/Quanta Plus, geben Ihr Root-Passwort ein, legen die angeforderte CD ein und bestätigen die Meldungen mit OK -- fertig. Nach der Installation starten Sie Quanta übers K-Menü unter Internet/WWW.

Nutzer von SuSE Linux 9 starten über System im K-Menü YaST und wählen dort unter Software das Modul Software installieren oder löschen. Stellen Sie den Filter auf Suche und geben Sie Quanta ins Feld ein. Ein Klick auf den Such-Button fördert rechts den HTML-Editor zu Tage. Markieren Sie den Eintrag und klicken Sie auf Akzeptieren. Nachdem Sie die angeforderte CD eingelegt haben, installiert YaST das Tool und setzt einen Eintrag ins K-Menü unter Internet / Webseiten erstellen.

Red-Hat-Anwender installieren Quanta über K-Menü/Systemeinstellungen/Hinzufügen und Entfernen von Applikationen. Dort klicken Sie beim Punkt Grafisches Internet auf Details und setzen ein Häkchen bei Quanta. Schließen Sie das Fenster, klicken auf Aktualisierung und bestätigen Sie die weiteren Schritte mit OK. Anschließend findet sich Quanta unter Programmieren/Weitere Programmiertools/Quanta Plus

Mandrake Linux bringt Quanta schon mit. Sie starten den Editor über Netzwerk / WWW / Quanta Plus im K-Menü.

Rundumschau

Quantas Oberfläche ist in mehrere Bereiche aufgeteilt. In der linken Hälfte platziert Quanta mehrere Navigationsreiter: Im Dateibaum navigieren Sie durch Ihre Verzeichnisstruktur und können per Doppelklick HTML- und andere Textdokumente öffnen, die Sie in Quanta bearbeiten wollen. Über den Projektbaum greifen Sie auf die Seiten eines Projekts zu. Den Vorlagenbaum können Sie mit Musterseiten und Bildern, zum Beispiel Navigationselementen, füllen, die Sie oft brauchen. Der Strukturbaum ist eher für fortgeschrittene Anwender interessant: Er zeigt den hierarchischen Aufbau geöffneter Dokumente an. Im Dokumentationsbaum liegen die mitgelieferten HTML-, CSS-, Javascript- und PHP-Referenzen, das Quanta-Handbuch erreichen Sie hingegen über das Menü Hilfe / Handbuch zu Quanta.

Unter den Menüs finden Sie die allgemeine Werkzeugleiste mit Icons für Datei speichern und öffnen, Kopieren, Einfügen und Suche.

Rechts darunter über dem Textfenster liegt die in mehrere Reiter aufgeteilte dokumentspezifische Werkzeugleiste.

Das Textfenster ist der Arbeitsbereich, in dem Sie Ihre HTML-Seiten gestalten. Über Reiter navigieren Sie zwischen mehreren geöffneten Dokumenten hin und her.

Im Nachrichtenfenster darunter zeigt Quanta Statusmeldungen an. Nimmt Ihnen das Fenster zu viel Platz weg, schließen Sie es mit einem Klick auf das Hammer-Symbol in der Programm-Toolbar. Auf dieselbe Art blenden Sie es auch wieder ein.

Erste Seiten

Über das Schnellstart-Icon ganz links in der Werkzeugleiste definieren Sie die wichtigsten Voreinstellungen, wie Hintergrundfarbe und -bild, Text- und Linkfarben. Dazu suchen Sie entweder aus den Dropdown-Boxen rechts eine passende Farbe aus oder mischen über den Punkt benutzerdefiniert eine in der Farbpalette. Nach einem Klick auf OK trägt Quanta Ihre Angaben als HTML-Code ins neue Dokument ein. Damit steht das Grundgerüst.

Zwischen die öffnenden (<body>) und schließenden Body-Tags (</body>) kommt nun der Inhalt Ihrer Web-Seite.

Text formatieren

Eingegebenen Text können Sie über die Werkzeugleiste beliebig formatieren. Dazu markieren Sie den Text und klicken in der Toolbar auf das gewünschte Symbol. Mit B, I und U im Reiter Normal machen Sie Textabschnitte fett ("bold"), kursiv ("italic") bzw. unterstreichen ihn. Umbrüche und Leerzeilen im Text ignoriert HTML und hängt einfach alles hintereinander. Einen Umbruch müssen Sie deshalb explizit mit dem Zeilenvorschub-Symbol angeben, einen Absatz erzeugen Sie, indem Sie einen Abschnitt markieren und über das Symbol <P> das passende Tag einfügen. Genauso wenden Sie auch die Ausrichtungswerkzeuge ganz rechts im Reiter Normal an. Für Überschriften (Headline) in verschiedenen Größen nutzen Sie die Symbole H1 bis H6.

Mit einem Klick auf das Augen-Symbol in der Programm-Toolbar kontrollieren Sie das Ergebnis -- so finden Sie schnell heraus, welche Effekte die einzelnen Werkzeuge haben (Abbildung 1 und 2). Ein zweiter Klick auf das Vorschausymbol schaltet in den Editor-Modus zurück. Von der Vorschau sollte man sich jedoch nicht täuschen lassen -- je nach verwendetem Browser kann das Resultat völlig anders aussehen. Im Menü Ansicht bietet Quanta deshalb an, die Seite auch in externen Browsern aufzurufen.

Ganz zentral für die eigene Homepage sind natürlich Links -- zu weiteren, selbst gestalteten Seiten und ins große weite Netz. Quantas Link-Dialog, den Sie über das Ankersymbol unter Normal aufrufen, wirkt mit seinen drei Reitern und zahllosen Eingabefeldern auf den ersten Blick recht verwirrend. Doch keine Sorge, fürs Erste können Sie alle Felder außer HREF getrost ignorieren. Für einen externen Link geben Sie die komplette URL inklusive http:// an, zum Beispiel http://www.easylinux.de. Haben Sie vorher im Editor Text markiert, fügt Quanta die Tags für den Link um den Text herum ein. Andernfalls tragen Sie zwischen <a href="http://adresse"> und </a> noch den Namen des Links ein. Über den Button rechts neben dem HREF-Feld öffnen Sie einen Dateiauswahldialog, in dem Sie eine andere Seite Ihrer Homepage als Link-Ziel auswählen.

Interessant ist noch das Feld target. Wählen Sie dort im Dropdown-Menü _blank, öffnet sich beim Klick auf den Link ein neues Browser-Fenster.

Abb. 1: Mit zahlreichen Werkzeugen unterstützt Quanta den Anfänger beim Schreiben des HTML-Codes.

Abb. 2: Über die eingebaute Vorschau kontrollieren Sie, ob der Quelltext die gewünschten Ergebnisse liefert.

Bildhaft

Über das Icon rechts neben dem Anker fügen Sie Bilder in Ihr Dokument ein (Abbildung 3). Per Dateiauswahldialog wählen Sie das gewünschte Bild aus. HTML arbeitet mit relativen Pfadangaben -- am besten legen Sie die Bilder, die Sie verwenden wollen, daher in einen Unterordner des Verzeichnisses, in dem Sie die HTML-Dateien abspeichern. So besteht keine Gefahr, dass beim Verschieben oder Umbenennen von Ordnern im Dateisystem der Pfad zur Bilddatei plötzlich nicht mehr stimmt.

Breite und Höhe berechnet Quanta automatisch, sobald Sie ein Bild ausgewählt haben. Manchmal streikte Quanta allerdings hier im Test -- in diesem Fall lassen Sie die Angaben leer oder suchen sich die Werte aus einem Bildbetrachtungsprogramm. Mit Horiz. Abstand und Vert. Abstand geben Sie den Abstand in Pixeln zum umlaufenden Text an. Ein Wert von 10 beispielsweise sorgt für angemessene Distanz.

Abb. 3: Per Dialogbox bauen Sie Bilder in Ihre Seite ein.

Tabellen

Tabellen lassen sich in HTML für viele Zwecke verwenden. In der Tables-Toolbar bringt Quanta einen Assistenten mit, der Ihnen beim Erstellen hilft. Dazu sollten Sie jedoch schon wissen, wie viele Spalten und Reihen die Tabelle haben soll. Setzen Sie die Zähler für Spalten und Zeilen auf die gewünschten Werte und klicken Sie auf OK -- Quanta fügt nun das leeres Tabellengerüst an der Cursor-Position ein. Zwischen <td> und </td> tragen Sie die Tabelleninhalte ein (Abbildung 4).

Abb. 4: Quantas Tabellenassistent fügt das Rohgerüst einer Tabelle ein.

Um später eine Reihe oder eine einzelne Zelle zu ergänzen, gibt es zwei Möglichkeiten: Die grünen Icons rechts in der Werkzeugleiste setzen ohne Nachfrage einfache Tags ein. Die roten öffnen einen eigenen Dialog. Dort bestimmen Sie mit align und valign die horizontale bzw. vertikale Ausrichtung des Tabelleninhalts. Mit Bg color setzen Sie die Hintergrundfarbe der Zeile oder Zelle (Abbildung 5). Gerade für Anfänger ist dies eine einfache Methode, effektvolle Layouts zu entwerfen -- auch wenn Puristen das Layout mit Tabellen missbilligen und dafür den Gebrauch von Stylesheets (CSS) empfehlen.

Abb. 5: Über einen Dialog weisen Sie einzelnen Tabellenreihen oder Zellen Ausrichtung und eine eigene Hintergrundfarbe zu.

Projekt-Management

Haben Sie Größeres im Sinn als nur eine einzelne Seite zu gestalten, sollten Sie ein Neues Projekt erstellen. Quanta übernimmt dann auch gleich den Datei-Upload für Sie. Der Projektassistent führt Sie durch die nötigen Einstellungen. Im ersten Dialog bestimmen Sie den Namen des Projekts und wo es angelegt werden soll. Lassen Sie die Voreinstellung auf lokal, wenn Sie die Seiten erstmal auf dem heimischen Rechner gestalten wollen.

Im nächsten Dialog können Sie schon vorhandene Dateien ins Projekt einfügen. Im dritten Dialogschritt geben Sie, wenn gewünscht, Ihren Namen und die E-Mail-Adresse an, damit Quanta sie automatisch in Seiten einfügen kann. Zentral ist der Punkt Projekteinstellungen. Stellen Sie hier Standard-DTD und Neue Dateien als beide auf HTML 4.01 Transitional, die Standard-Kodierung auf ISO-8859-15. Mit Abschließen legen Sie das Projekt an. Aus dem Dateibaum links können Sie auch später jederzeit über den Punkt In Projekt einfügen im Kontextmenü eine Datei in Ihr Projekt einbauen. Über Projekt / Projekt hinaufladen transportieren Sie die gesammelten Projektseiten schließlich auf Ihre Homepage. (eba)

Abb. 6: Quanta bringt eine ausführliche englische HTML-Referenz mit -- hier die Seite zu Listen.
Schnell verlinken

Um schnell einen Link auf eine Datei in Ihr Dokument einzufügen, navigieren Sie im Dateibaum links zur gewünschten Datei und öffnen mit einem Rechtsklick das Kontextmenü: Der Befehl Tag einfügen erzeugt an der Cursorposition automatisch einen Link auf die Datei. Ist die Datei ein Bild, flickt Quanta es direkt mit einem IMG-Tag ein.

Syntax Highlighting

Wer sein erstes Dokument mit Quanta entwirft, merkt schnell, dass Quanta alle HTML-Schlüsselwörter einfärbt. Diese Technik, das so genannte Syntax Highlighting, beherrschen viele Text-Editoren. Damit lässt sich leicht kontrollieren, ob Tags richtig geschrieben sind oder ob doch einmal etwas nicht passendes in ein Tag gerutscht ist.

Wie Quanta Ihren Text einfärben soll, erkennt es automatisch an der Dateiendung. Stimmen einmal die Farben nicht, was in unserem Test gelegentlich vorkam, können Sie Quanta jedoch das Highlighting auch manuell angeben. Dazu wählen Sie unter Einstellungen / Hervorhebungsmodus den richtigen Modus aus: HTML verbirgt sich in der Sparte Formatierung.

HTML-Grundlagen

Wer bisher mit einem grafischen Editor HTML-Seiten gestaltet hat, dürfte vor dem "rohen" Quelltext mancher Seite erschrecken. Doch bei näherem Hinsehen ist HTML gar nicht so schwierig. HTML-Seiten sind in Prinzip normale Textdokumente mit der Dateiendung .html, in denen so genannte "Tags" für die Formatierung im Browser sorgen. Bis auf wenige Ausnahmen existieren alle Tags in einer öffnenden und schließenden Fassung. Mit den Tags <strong> und </strong> wird der dazwischen stehende Text beispielsweise fett ausgezeichnet. So genannte Attribute modifizieren ein Tag. Mit Gleichheitszeichen und in Anführungszeichen übergeben Sie einem Attribut einen Wert, zum Beispiel die URL, auf die ein Link zeigen soll, oder den Dateinamen eines Bilds, das dargestellt werden soll. Manche Tags sind ohne Attribute relativ sinnlos, wie etwa <a href="http://www.easylinux.de">. href steht für Hyper Reference und ist hier das Attribut, die URL der EasyLinux-Homepage der Wert.

Nutzt man die Werkzeuge von Quanta, prägen sich häufig gebrauchte Tags und Attribute schnell ins Gedächtnis ein, so dass selbst tippen bald schneller geht als der Griff zum Assistenten. Zum Nachschlagen bringt Quanta im Dokumentationsbaum links eine HTML-Referenz mit, allerdings leider auf Englisch (Abbildung 6). Ein exzellentes Lehrbuch in deutscher Sprache, das es frei zum Download im Internet gibt, ist Stefan Münz' SelfHTML [1].

Infos
[1] HTML-Lehrbuch von Stefan Münz: http://selfhtml.teamone.de/

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 | © 2017 COMPUTEC MEDIA GmbH | Last modified: 2007-01-25 17:12

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]