Websites ohne Code-Fummelei

Mit einem Wysiwyg-Editor bauen Sie auch ohne HTML-Kenntnisse eine schicke, eigene Website. Nvu bietet dafür eine einsteigerfreundliche Oberfläche.

Dank Wysiwyg ("What you see is what you get") gelingt auch Anwendern ohne HTML-Kenntnisse das Basteln eigener Websites. Web-Editoren, die nach diesem Prinzip arbeiten, stellen eine Oberfläche mit Buttons zur Verfügung, wie Sie sie etwa aus der Textverarbeitung kennen. Sie tippen Ihren Text und formatieren per Mausklick. Den HTML-Code erstellt der Editor im Hintergrund. Mit Nvu steht ein solcher einsteigerfreundlicher Web-Editor zur Verfügung noch dazu kostenlos. Nvu kann Ihre fertigen Web-Seiten auch gleich auf einen Webserver im Internet übertragen.

Fortgeschrittene Anwender werden sich über komfortable Formatierungsmöglichkeiten mit dem integrierten CSS-Editor freuen. Nvu ausgesprochen "envju" ist aus dem Mozilla Composer hervorgegangen und ist ebenso wie Thunderbird oder Firefox eine inzwischen ausgelagerte Komponente der Mozilla-Suite.

Vorbereitung
Genauso wie für Firefox oder Thunderbird gibt es auch für Nvu nützliche, leicht zu installierende Erweiterungen wie ein deutsches Wörterbuch für die Rechtschreibprüfung. Bevor Sie es herunterladen, sollten Sie allerdings erst einmal Nvu installieren.

Installation
Die offizielle Nvu-Website (www.nvu.com) bietet die englische Programmversion, die deutschsprachige Fassung von NVU finden Sie hier. Hier stehen neben dem Quellcode auch fertige Pakete für einzelne Distributionen zur Verfügung. Nvu gibt es außer für Linux auch für Windows und Mac-OS.

Für Suse Linux 10.1 etwa laden Sie sich die Datei für "GTK2 + XFT" etwa in Ihr Home-Verzeichnis herunter. Sie brauchen weder root-Rechte noch müssen Sie lange installieren. Öffnen Sie einfach ein Terminal-Fenster, und wechseln Sie mit "cd" in Ihr Home-Verzeichnis, in dem Sie das Archiv gespeichert haben.

Entpacken Sie es dann mit dem Befehl
tar xvzf nvu-1.0-pc-linux2. 6.10-gnu-de-DE.tar.gz
tar erstellt ein neues Verzeichnis-nvu-1.0- in das es alle Dateien entpackt.

Nun können Sie Nvu mit dem Konsolenbefehl
~/nvu-1.0/nvu &
starten.

Am besten legen Sie sich hierfür eine Desktop-Verknüpfung an, indem Sie einen Rechtsklick auf den Desktop ausführen und "Neu erstellen, Verknüpfung zu Programm" wählen. Hier tragen Sie in der Registerkarte "Allgemein" den Programmnamen "Nvu" ein, wählen ein beliebiges Symbol (passende Icons finden Sie im Unterordner "icons" des NvuProgrammordners) und tragen den obigen Befehl in der Registerkarte "Programme" neben "Befehl" ein. Übrigens lässt sich das Aussehen von Nvu durch die Installation von Themes verändern.

Das Nvu-Programmfenster

Das Programmfenster von Nvu zeigt sich übersichtlich: Rechts der Arbeitsbereich, links die Seitenverwaltung und die wichtigsten Werkzeuge in den Symbolleisten.

Das Programmfenster von Nvu zeigt im oberen Bereich unterhalb der Menüleiste drei Symbolleisten für den schnellen Zugriff auf häufig verwendete Funktionen. Das restliche Fenster ist zweigeteilt: Links ist der Bereich zur "Seitenverwaltung", hier sehen Sie die Dateien Ihres Web-Projekts. Der große Bereich rechts daneben ist der Arbeitsbereich, in dem Sie die Web-Seite zusammensetzen. Der untere Rand des Arbeitsbereichs zeigt vier Registerkarten für verschiedene Ansichten: "Normal", "HTML-Tags", "Quelltext" und "Vorschau". Ihre Web-Seiten erstellen Sie üblicherweise in der "Normal"-Ansicht.

"HTML-Tags" zeigt Ihnen einerseits die Elemente der Web-Seite wie Bilder, Texte und Tabellen, versieht sie zugleich aber mit dem Namen des HTML-Tags, so dass Sie sich einen raschen Überblick über die eingesetzten Elemente verschaffen können. Eine reine Quellcode-Ansicht der HTML-Tags bietet hingegen die Registerkarte "Quelltext".

Die "Vorschau" zeigt die Seite, wie sie später aussehen wird beispielsweise ohne Hilfslinien um Tabellen oder Formulare, die in der Ansicht "Normal" noch vorhanden sind. Hyperlinks und Scripts funktionieren jedoch in dieser "Vorschau" noch nicht. Um die Seite im Browser zu betrachten, wählen Sie den "Vorschau"-Button in der Symbolleiste.

Ganz unten in der Statuszeile sehen Sie in spitzen Klammern die verwendeten HTML-Elemente. Darüber können Sie einzelne Elemente gezielt ansteuern und per Mausklick auswählen. Wenn Sie die Bedeutung der HTML-Elemente kennen, können Sie auch deren Eigenschaften komfortabel über einen Rechtsklick ändern, etwa um CSS-Formate zuzuweisen oder Javascript-Events zuzuordnen.

Web-Seite bauen

Bevor Sie ein Projekt mit Nvu beginnen, sollten Sie in Ihrem Home-Verzeichnis einen neuen Ordner für sämtliche Dateien Ihres Projekts anlegen. Der Übersicht wegen sollten Sie für Bilder, die Sie in Ihre Website einbinden möchten, einen eigenen Unterordner anlegen.

Neue Seite anlegen

Eine neue Seite erstellen Sie über "Datei, Neu" im Menü. Daraufhin öffnet Nvu ein Dialogfenster, in dem Sie unter anderem festlegen können, ob Ihre Web-Seite auf klassischem HTML oder auf dem Nachfolger XHTML basieren soll. Wir empfehlen, hier HTML zu wählen. Außerdem können Sie an dieser Stelle bestimmen, ob Sie als Dokumenttyp Strict "Strict DTD" einsetzen möchten.

In diesem Fall benutzt Nvu keine veralteten HTML-Elemente wie , und die Formatierung erfolgt über Stylesheets. Da dies die modernere und übersichtlichere Art der Seitengestaltung ist, sollten Sie sich für diese Option entscheiden. Wenn Sie auf "Erstellen" klicken, legt Nvu die neue leere Seite an. Geben Sie ihr am besten gleich einen Titel, der später in der Titelzeile des Browsers erscheint.

Klicken Sie dazu im Menü "Format" auf "Seitentitel und einstellungen". Neben dem Titel können Sie in dem sich nun öffnenden Dialog auch noch eine Beschreibung für Ihre Website angeben und sich selbst als Autor eintragen. Bestätigen Sie die Einstellungen mit "OK". Das ist auch der richtige Zeitpunkt, die Text- und Hintergrundfarbe für Ihre Web-Seite festzulegen, indem Sie "Format, Seitenfarben" wählen.

Wenn Sie "Eigene Farben verwenden" anklicken, können Sie eine Farbe für den Text ("Normaler Text") sowie die Hintergrundfarbe ("Hintergrund") durch Klick auf den Farb-Button bestimmen. Bestätigen Sie auch diese Einstellungen mit "OK". Bevor Sie nun weitere Änderungen vornehmen und Ihre Seite mit Inhalt füllen, speichern Sie sie am besten in dem vorher angelegten Ordner. Wählen Sie einen Dateinamen ohne Sonder- und Leerzeichen.

Text eingeben

Im leeren Blatt können Sie nun wie gewohnt Ihre Texte eingeben. Normalerweise bestehen Web-Seiten aus Überschriften und Absätzen. Markieren Sie den Textteil für den Absatz, und wählen Sie dann im Dropdown-Menü der Formatleiste anstelle von "Normaler Text" den Punkt "Absatz". Benötigen Sie innerhalb eines Absatzes einen Zeilenumbruch, drücken Sie hierfür zusätzlich zur - auch die -Taste.

Genauso lassen sich auch Überschriften verschiedener Ebenen zuweisen: In HTML gibt es sechs Kategorien von Überschriften, die Sie alle über dasselbe Dropdown-Feld erreichen. Standardmäßig sind Überschriften fett und in größerer Schrift, diese Formatierungen können Sie jedoch problemlos ändern dazu gleich mehr.

In der Formatleiste finden Sie weitere Optionen: Über die zwei übereinander angeordneten farbigen Vierecke bestimmen Sie die Schrift und Hintergrundfarbe von Absätzen oder Überschriften, über den Markierstift rechts daneben können Sie auch einzelne Wörter mit einem andersfarbigen Hintergrund versehen.

Die beiden Buttons mit dem Buchstaben "A" bieten die Möglichkeit, die Schriftgröße zu ändern. Außerdem lassen sich einzelne Wörter fett ("B" = bold), kursiv ("i" = italic) oder unterstrichen ("u" = underline) formatieren. Darüber hinaus stehen Symbol-Schaltflächen für nummerierte und nichtnummerierte Aufzählungen, für die Textausrichtung und zum Einrücken von einzelnen Absätzen in der Symbolleiste zur Verfügung.

Die Dropdown-Liste zur Auswahl der Schrift zeigt Ihnen alle auf Ihrem System installierten Schriften. Sinnvoll ist jedoch nur der Einsatz von Schriften, bei denen Sie davon ausgehen können, dass sie auch auf dem Computer Ihrer Besucher vorhanden sind. Empfehlenswert sind deshalb vor allem die ersten acht Elemente der Liste, nämlich die generischer Schriftkategorien und weit verbreiteter Schriftarten.

Bilder einfügen

Bilder einfügen: In den "Grafik-Eigenschaften" wählen Sie das Bild aus und legen die Eigenschaften fest.

Kaum eine Web-Seite kommt heute ohne Bilder aus. Im Web üblich sind die Bildformate GIF, JPEG oder PNG. Bevor Sie Bilder in Ihre Seite einfügen, sollten Sie Ihre Web-Seite speichern und die Bilder in den Unterordner für Bilder innerhalb des Projektordners kopieren. Wenn Sie dann später den gesamten Projektordner auf Ihren Webserver übertragen, können Sie sicher sein, dass alle Bilder auch tatsächlich auf der Website erscheinen und es keine Probleme mit den angegebenen Pfaden gibt.

Um nun ein Bild einzufügen, klicken Sie die Stelle der Seite an, an der Sie das Bild einfügen möchten, und wählen "Einfügen, Grafik". Über den Button "Durchsuchen" können Sie nun das gewünschte Bild auswählen. Wenn Sie "URL relativ zur Seitenadresse" ausgewählt lassen, stellen Sie sicher, dass der Pfad zum Bild im Internet genauso wie in Ihrem lokalen Ordner funktioniert.

Sie sollten außerdem einen "Alternativtext" angeben, der erscheint, wenn jemand Bilder ausgeschaltet hat. Handelt es sich hingegen um ein rein dekoratives Bild, klicken Sie die Option "Keinen Alternativtext verwenden" an. Zusätzlich können Sie auch bei "Tooltip" einen Text eingeben, der dann auftaucht, wenn der Anwender mit dem Mauszeiger über das Bild fährt.

In der Registerkarte "Größe" können Sie zwar theoretisch die Bildgröße verändern, in der Praxis empfehlen wir Ihnen aber, das vorab in einem Bildbearbeitungsprogramm zu erledigen, da die Ergebnisse besser sind. Bei "Erscheinungsbild" bestimmen Sie, wie groß der Abstand des Bildes zum umgebenden Text sein soll, und legen die Ausrichtung im Verhältnis zum Text fest.

Die genaue Anordnung von Bildern zu Texten nehmen Sie aber über grundlegende Layouttechniken wie "Layer" oder "Tabellen" vor. Haben Sie alle Einstellungen vorgenommen, klicken Sie auf "OK". Das Bild erscheint nun auf Ihrer Web-Seite.

Links erstellen

Ein zentraler Bestandteil aller Web-Seiten sind Hyperlinks, die diese mit anderen Seiten verknüpfen. Links erzeugen Sie rasch über "Einfügen, Link". Bei "Link-Text" tragen Sie den für den Surfer später sichtbaren Text ein. Möchten Sie auf eine Internet-Adresse verlinken, so tippen Sie diese bei "Link-Adresse" vollständig ein, inklusive des vorangestellten Protokolls, üblicherweise "http://".

Möchten Sie hingegen auf eine Seite innerhalb Ihres eigenen Projekts verweisen, so wählen Sie die gewünschte Seite über den Button "Durchsuchen" aus. Damit die Verlinkung funktioniert, muss die HTML-Seite, auf die Sie verlinken, sich ebenfalls in Ihrem Projektordner befinden. Möchten Sie hingegen einen Link auf eine Mailadresse erstellen, aktivieren Sie die Option "Dies ist eine E-Mail-Adresse". Nvu ergänzt dann vor der Mail das notwendige Pseudoprotokoll "mailto:".

Formatierungen

Wie Sie einzelne Elemente auf Ihrer Web-Seite formatieren, haben Sie bereits erfahren. Es gibt jedoch einen eleganteren Weg, der alle Elemente auf einer Web-Seite gleich formatiert und dadurch ein einheitliches Erscheinungsbild erreicht. Nehmen wir als Beispiel an, Sie möchten alle Überschriften der Kategorie 1 "Überschrift 1" Ihrer Web-Seite formatieren.

Klicken Sie hierfür zuerst in eine der Überschriften. In der Statusleiste sehen Sie das HTML-Element, das für die Überschrift steht, in diesem Fall "

". Klicken Sie es mit der rechten Maustaste an. Im Kontextmenü wählen Sie nun den Punkt "Inline Styles" und anschließend "Texteigenschaften".

Im neuen Dialogfeld können Sie komfortabel Schriftart, Schriftgröße, -farbe und so weiter festlegen und Ihre Auswahl mit "OK" bestätigen. Soll die Überschrift einen Rahmen erhalten, so wählen Sie im Kontextmenü von den Punkt "Inline styles, Randeigenschaften" oder bestimmen eine eigene Hintergrundfarbe für die Überschrift über "Inline styles, Hintergrund-Eigenschaften".

Wenn Sie die gewünschten Formatierungen durchgeführt haben und möchten, dass diese für alle Überschriften auf der Seite gelten, wählen Sie dieses Mal im Kontextmenü von Punkt "Inline styles, Extrahieren und allgemeinen Style anlegen". Das nun erscheinende Dialogfenster ist leider nicht ins Deutsche übersetzt. Hier müssen Sie nur in den Radiobutton vor "all styles" klicken und Ihre Auswahl mit "OK" bestätigen. Jetzt sind alle Überschriften der Kategorie 1 auf dieselbe Art formatiert.

Tipp: Möchten Sie später etwas an der Formatierung ändern, wählen Sie "Extras, CSS-Editor", klicken bei "Internes Style sheet" auf das Element h1 und wählen die Registerkarte, bei der Sie Änderungen durchführen möchten.

Ab ins Internet

Web-Seiten ins Internet hochladen leicht gemacht: Nvu verfügt über ein integriertes FTP-Programm. In diesem Dialogfenster geben Sie Ihre Zugangsdaten ein.

Um Ihre Web-Seiten ins Internet zu übertragen, benötigen Sie einen FTP-Client. Nvu hat diesen bereits integriert. Zur Konfiguration der Übertragung klicken Sie auf "Publizieren". Im sich nun öffnenden Fenster vergeben Sie bei "Seiten-Namen" eine Bezeichnung für Ihre Website. Diesen Namen können Sie frei wählen, er dient zur Orientierung, wenn Sie an mehreren Projekten mit unterschiedlichen Zugangsdaten arbeiten. Darunter tragen Sie die "HTTP-Adresse" Ihrer Website ein, bei "Publizierungs-URL" die FTP-Adresse mit dem Unterverzeichnis und außerdem Ihren Benutzernamen und Ihr Passwort. All diese Angaben erfahren Sie von Ihrem Provider.

Ein Klick auf die Schaltfläche "Publizieren" und Nvu überträgt die Daten auf den Internet-Server. Die Dateien auf dem Remote-Server sehen Sie jetzt auch im linken Seitenverwaltungs-Fenster. Ändern Sie etwas an einer bestehenden Web-Seite, können Sie die geänderte Seite mit "Publizieren" automatisch auf den Server hochladen. Voraussetzung ist natürlich eine funktionierende Internet-Verbindung.

Tipp: Damit die Übertragung ins Internet funktioniert, müssen Sie die Firewall gegebenenfalls so konfigurieren, dass sie die Übertragung zulässt.

Weitere Techniken

Nvu bietet noch viele weitere interessante Funktionen. Ein paar besonders praktische Features stellen wir Ihnen im Folgenden vor.

Nvu konfigurieren

Welche Menüs das Programmfenster zeigt, legen Sie über "Ansicht, Anzeigen/verstecken" fest. Möchten Sie Ihren Arbeitsbereich vergrößern, können Sie die Seitenverwaltung rasch über ausblenden. Ein erneutes Betätigen der Taste blendet sie wieder ein.

Die Einstellungen von Nvu finden Sie unter "Extras, Einstellungen". Praktisch sind die Optionen bei "Seiteneinstellungen" und "Erweitert", die Ihnen erlauben, Standards für alle neuen Seiten vorzugeben. Möchten Sie bei einzelnen Seiten von diesen Standards abweichen, können Sie Letztere gesondert ändern. Bei "Seiteneinstellungen" geben Sie beispielsweise Standardfarben für Text und Hintergrund an, die dann für jede Seite gelten, die Sie neu anlegen.

Tipps und Tricks

Tabellen oder Layer: Viele Seitenlayouts basieren auch heute noch auf Tabellen. Nvu bietet Ihnen einen eigenen Menüpunkt zum Einfügen von Tabellen. Die Eigenschaften definieren Sie über "Tabelle, Tabelleneigenschaften". Wer nicht mit Tabellen arbeitet, positioniert die Seitenelemente meist über Cascading Stylesheets mit div-Containern, die häufig auch "Layer" genannt werden.

Die Container finden Sie in Nvu über das Dropdown-Menü zur Zuweisung von Überschriften und Absätzen unter der Bezeichnung "Generic Container (div)". Die Container können Sie dann mit der Maus per Drag & Drop an die gewünschte Position ziehen. In der untersten Formatleiste gibt es darüber hinaus auch einige eigene Symbole zum bequemeren Arbeiten mit Containern.

Formulare: Fast jede Website verfügt über ein Kontaktformular. Dafür gibt es in Nvu den Punkt "Formular" in der Symbolleiste. Wählen Sie zuerst "Formular definieren", und ergänzen Sie darauf die benötigten Felder über "Formularfeld". Der Feldtyp "Abschicken-Button" erzeugt hier die unbedingt notwendige Schaltfläche "Submit".

Säubern: Nutzen Sie die Option "Quelltext säubern" im Menü "Extras", bevor Sie Ihre Web-Seite publizieren. Damit entfernt Nvu automatisch unnötige HTML-Tags und die Datei wird schlanker sowie übersichtlicher.

Mehr Infos

Die offizielle englischsprachige Website des Nvu-Projekts ist www.nvu.com, die inoffizielle deutsche lautet www.nvu-composer.de. Deutschsprachige Erweiterungen für Nvu wie "ViewSourceWith", mit dem Sie etwa Grafiken mit der bevorzugten externen Anwendung anzeigen lassen können, finden Sie unter http://nvu.erweiterungen.de/.

Themes und zusätzliche Erweiterungen wie ein deutsches Wörterbuch für die Rechtschreibprüfung gibt es unter http://nvuext. mozdev.org/.

Infos zur Bedienung bietet das Nvu-Wiki: http://nvucomposer.de/wiki/. Suchen Sie hingegen Hilfe bei konkreten Fragestellungen, empfiehlt sich ein Besuch unter www. nvucomposer.de/forum/.

Eine Gratis-Beschreibung von Nvu auf knapp 100 Seiten finden Sie unter: www. vucomposer.de/doku/nvuanl101.pdf. Wenn Sie freie Vorlagen für die Gestaltung Ihrer Website suchen, surfen Sie doch einmal bei www.oswd.org vorbei.

Wichtige Begriffe

HTML steht für Hypertext Markup Language und ist die Auszeichnungssprache, in der Web-Seiten geschrieben sind. HTML-Elemente bestehen üblicherweise aus paarweisen Tags oder Befehlen, die dem, was dazwischensteht, eine Eigenschaft zuweisen. So erstellt man einen Absatz mit: "

ein Absatz

".
CSS steht für Cascading Stylesheets und dient dazu, HTML-Seiten zu formatieren.

Strict DTD: Beim Anlegen einer neuen Seite können Sie "Strict DTD" auswählen. In diesem Fall verwendet Nvu keine veralteten HTML-Elemente oder -Attribute und setzt für Formatierungen CSS ein. Dies ist die empfohlene Option. Je nachdem, ob Sie "Strict DTD" gewählt haben oder nicht, sehen einzelne Details von Menüs anders aus, da manche Optionen nur bei Strict DTD, andere gerade dort nicht zur Verfügung stehen.

XHTML: Mit Nvu können Sie auch XHTML-Seiten erstellen. XHTML steht für eXtensible Markup Language und ist der Nachfolger von HTML. Es zeichnet sich durch eine strengere Syntax aus.

Frames sind eine Technik zur Aufteilung des sichtbaren Fensters in mehrere Bereiche, die man separat scrollen und verändern kann. Frames sind inzwischen ziemlich verpönt - Nvu unterstützt Frames aus diesem Grund gar nicht erst.

Quelle: PC Welt.de