NVU

Für das Er­stellen von HTML-Seiten langt im Prin­zip ein ein­facher Texteditor, wie WordPad un­ter Windows bzw. KWrite unter Linux. Wichtig ist immer nur, dass der Quell­text als unfor­ma­tierter Text gespei­chert wird. Da WordPad kein besonders mächtiger Editor ist greifen viele HTML-Autoren zu spe­zielleren Werkzeugen. Dabei gibt es eine breite Palette von kommerziellen Werk­zeugen, die oft aber eine enorme Einarbeitung erfordern.

Sehr einfach ist der Umgang mit Werkzeugen wie dem kostenlosen Programm NVU Composer (sprich: nview), welches unter http://www.nvu-composer.de/ für alle Betriebssysteme zur Verfügung steht (knapp 10 MByte). NVU gehört in das Mozilla-Umfeld, wie auch der Browser Firefox.

1. Installation

Auf der Website http://www.nvu-composer.de/ steht die deutschsprachige Version für die wichtigsten Betriebssysteme zur Verfügung, in der Regel als betriebssystemspezifische Archivdatei.

Sollte die Download-Seite http://downloads.mozdev.org/nvude/ nicht verfügbar sein, so steht unter http://johnhaller.com/jh/mozilla/mozdev_mirrors/ eine Liste mit weiteren Servern zur Verfügung. Dort findet sich dann als alternative Adresse z.B. http://mirror.meisterwerk.net/rmozdev/nvude/ .

Der Einsatz von NVU ist auch auf abgesicherten Rechnern ohne administrative Rechte möglich, da eine Installation nicht notwendig ist. Man muss nur das geladene Archiv entpacken und kann das darin befindliche Programm NVU dann starten. Zur Not kann man NVU auch einfach auf einen USB-Stick entpacken und von dort aus benutzen.

Für Windows-Nutzer steht auch eine Version mit einem Installationsprogramm zur Verfügung, hier muss dann nur das Installationsprogramm ausgeführt werden, welches die Dateien dann selbständig entpackt.

1.1. Deutsches Wörterbuch

Für die eingebaute Rechtschreibüberprüfung werden leider nur englischsprachige Wörterbücher mitgeliefert, auch in der deutschen NVU-Version. Glücklicherweise ist es nicht besonders aufwändig weitere Wörterbücher zu installieren, da NVU über die gleiche Erweiterungsschnittstelle verfügt, wie die anderen Programme der Mozilla-Familie auch.

Man ist noch nicht einmal auf spezielle Wörterbücher aus dem NVU-Projekt angewiesen, sondern kann diese z.B. vom Thunderbird-Projekt übernehmen. Diese Wörterbücher findet man unter der URL http://www.thunderbird-mail.de/hilfe/dokumentation1.5/allg_rechtschreibung.php. Die dort angebotene Datei woerterbuch_deDE_neu_2.0.2.xpi lädt man in ein temporäres Verzeichnis auf dem eigenen Rechner.

Für die eigentliche Installation benötigt man leider administrative Rechte auf dem Rechner, muss sich also als Administrator anmelden und NVU starten. Innerhalb von NVU geht man dann auf Extras -> Erweiterungen. In dem nun auftauchenden, ziemlich leeren Fenster, klickt man auf Installieren. Daraufhin öffnet sich ein Dateiauswahldialog, in dem man die zuvor gespeicherte Wörterbuch-Datei auswählt.

Es erscheint nach kurzer Zeit das nebenstehende Fenster, in dem man über Jetzt installieren die Installation endgültig auslöst.

Danach steht das Wörterbuch allen Benutzern zur Verfügung.

1.2. Einstellungen

Unter dem Menüpunkt Extras -> Einstellungen finden sich einige zentrale Konfigurationsmöglichkeiten für NVU. Im Abschnitt Allgemein ist hier vor allem die Einstellung Cascading Style Sheet Bearbeitung wichtig. Wenn hier der Haken im nachfolgenden Kästchen gesetzt ist, dann nutzt NVU an vielen Stellen Styles statt Tags. Das betrifft u.a. Auszeichnungen wie Fett und Unterstrichen.

Im Bereich Schriftarten wird man in der Regel nicht viel verändern wollen. Bei den Seiteneinstellungen kann man die Sprache und den Zeichensatz für die zu erstellenden Seiten vorgeben.

Im Bereich Erweitert finden sich die Proxy-Einstellungen, die immer dann wichtig werden, wann man keinen direkten Zugriff auf das Internet hat. Hier finden sich auch viele weitere Einstellungen, die die Arbeit mit NVU beeinflussen. Man kann hier z.B. entscheiden, ob man Code für HTML4 oder XHTML erzeugen möchte. Auch die Kodierung der speziellen Zeichen lässt sich hier beeinflussen. In der Regel wird man es erst einmal bei den Voreinstellungen belassen.

2. Die Oberfläche von NVU

Die Oberfläche von NVU verfügt über einige Komponenten, die man von jeder modernen Anwendung her kennt, wie z.B. die Menüleiste. Einige der Komponenten sind aber für NVU spezifisch.

2.1. Menüleiste

Die Elemente der Menüleiste entsprechen den gewohnten Bild einer grafischen Anwendung. Es finden sich dort die Menüpunkte:

• Datei für die Dateioperationen wie Laden und Speichern, auch der Punkt Beenden ist hier zu finden.
• Bearbeiten, u.a. mit den Menüpunkten Kopieren und Einfügen
• Ansicht, zur Auswahl der Fensterelemente und zur Auswahl des Editiermodus
• Einfügen, zum Einfügen von Grafiken, Links, ...
• Format, mit den üblichen Formatierungsfunktionen
• Tabelle, alles was mit dem Erstellen und Bearbeiten von Tabellen zu tun hat
• Extras, hier findet man u.a. den CSS-Editor und unter Einstellungen auch einige Konfigurationsmöglichkeiten.
• Hilfe, beinhaltet eine Reihe von Hilfetexten und auch Verweise auf externe Webseiten.

Viele der Menüfunktionen werden in den folgenden Abschnitten angesprochen werden.

2.2. Bearbeitungsleiste

In der Bearbeitungsleiste findet sich eine Reihe von Icons, hinter denen oft benötigte Funktionen stecken:

• Neu..., öffnet eine neue leere Seite nach Wahl in einem neuen Tab oder einem neuen Fenster.
• Öffnen lädt eine Datei aus dem lokalen Dateisystem des Rechners.
• Speichern ermöglicht das Sichern der aktuellen Datei im Dateisystem des Rechners.
• Publizieren dient dazu die aktuelle Datei auf einem Webserver abzulegen, über einen FTP-Zugriff.
• Vorschau lädt die aktuelle Seite im Standard-Browser des Rechners. Im eigenen Vorschau-Modus von NVU sind manche Funktionen, wie z.B. Links deaktiviert.
• Ziel dient dazu an der aktuellen Cursor-Position einen Anker einzufügen.
• Link fügt an der Cursor-Position einen Link ein, dazu sollte ein Wort oder ein Textteil markiert sein.
• Grafik dient dazu eine Abbildung einzufügen. Es können alle notwendigen Parameter, wie Dateiname, Größe und Alternativ-Text eingegeben werden.
• Tabelle dient, je nach Position des Cursors, zum Einfügen oder Ändern einer Tabelle.
• Formular dient zum Erstellen von HTML-Formularen und ihren Elementen.
• Rechtschreibung ist eine auch für Webseiten sehr nützliche Funktion, sie dient zur Kontrolle eben der Rechtschreibung. Es müssen aber die passenden Wörterbücher installiert sein.
• Drucken ermöglicht einen Ausdruck der aktuellen Seite.

Das NVU-Icon am rechten Rand der Leiste besitzt keine weiteren Funktionen.

2.3. Formatierleisten

Die Aufteilung der beiden Formatierleisten kann je nach NVU-Version leicht unterschiedlich sein. Im Prinzip finden sich hier Funktionen, wie man sie von der Formatierleiste der Textverarbeitung her gewohnt ist.

In der oberen Formatierleiste tauchen nacheinander folgende Elemente auf

• Absatzformat, hier finden sich die Auwahlmöglichkeiten
  • Normaler Text
  • Absatz
  • Überschrift1
  • ..
  • Überschrift6
  • Adresse
  • Vorformatiert
  • Generic Container (div)

• Textfarbe, dieser und die beiden folgenden Punkte öffnen jeweils den nebenstehenden Dialog zur Farbauswahl.
• Hintergrundfarbe
• Farbe für Hervorhebungen
• Kleinere Schriftgröße, umgibt den markierten Text mit dem Tag <small>
• Größere Schriftgröße, umgibt den markierten Text mit dem Tag <big>
• Bold, hebt den Text fett hervor. umgibt dazu den markierten Text mit dem Tag <b> bzw. dem entsprechenden Style. Ob Tag oder Style gwählt wird hängt von den Konfigurationseinstellungen unter Extras -> Einstellungen -> Allgemein ab.
• Italic, entsprechend für Kursiv
• Underline, entsprechend für Unterstrichen
• Nummerierte Liste dient zum Erzeugen einer Aufzählungsliste
• Unsortierte Liste dient zum Einfügen einer Liste mit Aufzählungspunkten
• Links ausrichten und die folgenden drei Funktionen dienen der Ausrichtung der Zeilen.
• Zentrieren
• Rechts ausrichten
• Blocksatz
• Texteinzug vergrößern erhöht den linken Abstand des Textes vom Rand
• Texteinzug verringern verkleinert einen eventuellen linken Abstand des Textes.

Auch die Funktionen in der zweiten Zeile der Formatierleiste ähneln denen einer normalen Textverarbeitung.

• Zuweisen einer Klasse zur Auswahl. Wenn im Stylesheet eigene Klassen definiert wurden, so kann man die hier auswählen und dem markierten Text zuordnen.
• Schriftart wählen. Hier kann man zwischen allgemeinen Schriftbeschreibungen wie Feste Breite, Schriftfamilien wie Courier und den lokal auf dem Rechner installierten Schriften wie Arial wählen.
• Layer umgibt den ausgewählten Text mit einem div-Tag und ermöglicht die absolute Positionierung mit Hilfe der Maus. Auch die Größe der Kastens kann mit der Maus bequem eingestellt werden.
• Nach vorne bringen erhöht den z-Index von absolut positionierten Elementen.
• Nach hinten stellen verringert den z-Index.
• Hervorgehoben umgibt den ausgewählten Text mit dem <em> Tag.
• Stark Hervorgehoben umgibt den ausgewählten Text mit dem <strong> Tag.
• Definitionsausdruck und
• Definitionsbeschreibung dienen dazu Definitionslisten zu erzeugen. Der Definitionsausdruck wird mit dem <dt> Tag eingerahmt, die Definitionsbeschreibung mit dem <dd> Tag. Um beide Komponenten herum kommt dann noch der Tag <dl>.
• Am linken Rand anheften,
• Zentriert anheften,
• Am rechten Rand anheften,
• Oben anheften,
• In der Mitte anheften und
• Unten anheften dienen dazu absolut positionierte Elemente entsprechend an den Seitenrändern auszurichten.

2.4. Seitentab

Vom Browser Firefox her ist das Tabbed-Browsing bekannt, bei dem man nicht für jede Webseite ein neues Fenster öffnet, sondern mit kleinen Reitern, den Tabs, zwischen den einzelnen Seiten wechseln kann. Auch NVU arbeitet mit Tabs.

Mit dem roten Kreuz schließt man das aktuelle Tab.

Bei nicht gespeicherten Änderungen setzt NVU ein rotes Diskettensymbol vor den Dateinamen im Tab.

2.5. Seitenverwaltung

Für größere Projekte ist sehr hilfreich, wenn man alle benötigten Dateien im Blick behalten kann. Genau hierfür dient der Dateimanager bzw. die NVU Seitenverwaltung.

Alle Dateien, die zum aktuellen Projekt gehören lassen sich hier übersichtlich zusammenstellen. Über den Reiter Ansicht lässt sich auswählen, ob Alle Dateien, nur HTML-Dokumente oder nur Bilddateien angezeigt werden sollen.

Vor der ersten Nutzung muss einmal das Verzeichnis zugeordnet werden. Dazu klickt man auf Seiten bearbeiten. Im folgenden Dialog nimmt man dann die notwendigen Einstellungen vor. Für das Arbeiten im lokalen Dateisystem muss eigentlich nur das richtige Arbeitsverzeichnis ausgewählt sein.

Sehr praktisch ist die Möglichkeit hier auch gleich einen FTP-Zugang einzutragen und dann übers Netz direkt auf dem Webserver arbeiten zu können.

Auch wenn es komisch aussehen mag, nach dem Rechnernamen sind eventuell zwei Slashes notwendig, damit der FTP-Client von NVU Verzeichnisse außerhalb des Home-Verzeichnisses erreichen kann.

Dateien lassen sich dann mit einem Doppelklick aus dem Verzeichnis laden, mit Speichern aus der Bearbeitungsleiste werden sie dann im lokalen Dateisystem gespeichert und mit Publizieren auf dem Server.

2.6. Arbeitsbereich

Im Arbeitsbereich erfolgen die eigentlichen Eingaben für die Erstellung der Webseite. Dabei hängt es vom Editiermodus ab, welche Möglichkeiten zur Verfügung stehen. Man kann sowohl im Vorschaumodus, als auch im Quelltext-Modus arbeiten, je nach den jeweiligen Anforderungen.

Am Rand des Arbeitsbereiches wird angezeigt, wie breit und wie hoch das jeweilige Element ist.

2.7. Editiermodus

Eine Besonderheit ist die Möglichkeit sowohl im Quelltext, als auch in der Vorschau editieren zu können. Mit den kleinen Reitern im unteren Bereich der Seite kann man zwischen den Betriebsarten umschalten.

• im Modus Normal kann man in etwa so arbeiten, wie man es von einer Textverarbeitung her gewohnt ist.

• im Modus Quelltext arbeitet man ähnlich wie in einem einfachen Texteditor direkt im HTML-Quelltext.

Neben diesen beiden wichtigsten Modi gibt es noch

• HTML-Tags, dies entspricht etwa dem Normal Modus, nur dass alle Tags besonders hervorgehoben werden.

• im Modus Vorschau wäre für das gewählte Beispiel kein Unterschied zum Normal-Modus sichtbar. Unterschiede treten nur auf, wenn z.B. unsichtbare Tabellen in die Seite eingebunden werden. Im Normal-Modus zeigt NVU die Tabelle dann trotzdem mit feinen Linien an, im Vorschau-Modus nicht.

2.8. Statusleiste

In der Statusleiste am untersten Bildschirmrand zeigt NVU üblicherweise die Tags an, die an der Cursoposition gültig sind. In der letzten Abbildung aus dem vorherigen Abschnitt befindet sich der Cursor im Bereich der Überschrift, daher stehen in der Statusleiste die Tags

• <body> und
• <h1>.

3. Seitenerstellung mit NVU

NVU kümmert sich darum, dass der HTML-Code immer korrekt ist. Umlaute werden z.B. automatisch durch den HTML-Code ersetzt. Auch die Zeile

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 

fügt NVU selber ein. Tippt man im Vorschau-Modus fehlerhaften Code ein, so korrigiert oder entfernt NVU die fehlerhaften Teile.

Wenn man mit HTML-Werkzeugen arbeitet muss man generell drauf achten, dass diese nicht absolute Links aus dem lokalen Dateisystem eintragen. Ein Link wie

<a href="file://a:\projekt\filmmuseum\filmmuseum1.html">Das Filmmuseum</a>

wird nicht funktionieren. Derartige Fehler kann man vermeiden, indem man die aktuelle Seite einmal speichert, bevor man Links und Grafiken einbindet.

3.1. Links

In NVU richtet man einen Link ein, indem man den beschreibenden Text markiert und dann auf Link in der Bearbeitungsleiste klickt. In dem Fenster Linkeigenschaften kann man entweder eine Adresse eingeben, oder mit Durchsuchen eine lokale Adresse auswählen. Bei lokalen Adressen ist es wichtig, dass sie relativ angegeben werden, also lokale Pfade keine Rolle spielen.

Klickt man auf Mehr Eigenschaften, so erweitern sich die Einstellmöglichkeiten. In der Regel sollte aber die vereinfachte Form des Dialoges ausreichen.

Gelegentlich benötigt man Verweise innerhalb einer Seite. Das könnte z.B. innerhalb ei­ner Literaturliste geschehen, wenn man direkt auf andere Literaturangaben verweisen möchte, oder in einem Gesetzestext, wenn man von einem Paragraphen auf einen ande­ren Paragraphen verlinken möchte.

Hierzu muss man an der jeweiligen Zielstelle einen „Anker” setzen:

<a name=”Seitenanfang”> 

definiert einen Anker, auf den dann innerhalb des Dokumentes mittels:

<a href=”#Seitenanfang”>Zum Anfang der Seite</a>

verwiesen werden kann.

In NVU kann man Anker über den Punkt Ziel in der Bearbeitungsleiste einrichten.

3.2. Grafiken

In NVU fügt man Grafiken über die Funktion Grafik ein. Der zugehörige Dialog erlaubt im Reiter Adresse die Auswahl der Grafikdatei und zeigt an­schließend auch eine Vorschau und die Größe an.

Leider übernimmt NVU den Dateinamen absolut, also beginnend mit "file://home/...", wenn man die Seite noch nicht gespeichert hatte. Den Teil vor dem eigentlichen Dateinamen, hier im Beispiel foto.png, muss man unbedingt wieder entfernen, damit die Adresse relativ bleibt.

Alternativtext liefert einen Ersatztext, falls die Abbildung nicht, oder noch nicht geladen wurde. Wichtig ist diese Angabe für behinderte Menschen, die sich die Seite von speziellen Programmen vorlesen lassen.

Im Reiter Größe kann die Breite und Höhe des Bildes explizit angegeben werden. Die Größenangaben dienen nur zur Information des Browsers, sie sollten auf keinen Fall zur Skalierung benutzt werden. Die Skalierung sollte man immer vorher mit einem Grafikprogramm vornehmen und die Grafik dann in der passenden Größe einbinden. Damit vermeidet man unnötigen Datenverkehr und die damit verbundenen Wartezeiten.

Im Reiter Erscheinungsbild werden die Ränder und die Ausrichtung des Bildes festgelegt. Hier gibt es die Möglichkeiten

• Oben,
• Mitte,
• Unter,
• Links umbrechen und
• Rechts umbrechen.

Im Reiter Link hat man zusätzlich noch die Möglichkeit das Bild anklickbar zu machen.

3.3. Tabellen

Auch Tabellen lassen sich mit NVU sehr leicht erstellen. Dazu dient das Icon Tabelle. Wenn sich beim Anklicken dieser Funktion der Cursor nicht in einer Tabelle befindet, dann erscheint der Dialog zum Einfügen einer Tabelle. Hier werden im ersten Schritt die Abmessungen festge­legt. Im Reiter Schnell zieht man die Größe der Tabelle mit der Maus auf, im Reiter Präzise über die Eingabe von Zahlen.

Befindet sich der Cursor beim Aufruf der Funktion Tabel­le bereits in einer Tabelle, so erscheint der Dialog zum Ändern. Hier muss man entscheiden, ob sich die Änderungen auf die gesamte Tabelle oder nur auf die Zelle, bzw. die Spal­te oder die Zeile beziehen soll.

Weitere Funktionen finden sich auch im Menü Tabelle. Hier hat man auch die Möglichkeit einzelne Zellen miteinander zu verbinden und damit recht komplizierte Konstruktionen zu schaffen.

3.4. Listen

Der Aufbau von Listen so geregelt, wie man es auch der Textverarbeitung kennt. Man markiert einfach die entsprechenden Zeilen und klickt auf das Icon für "unsortierte Liste":

4. Style Sheet Editor

NVU verfügt über einen eingebauten CSS-Editor, der das Bearbeiten auch der externen CSS-Dateien deutlich vereinfacht. Der Editor ist im Menü unter Extras -> CSS-Editor zu finden.

Hinweis: Bevor der Editor benutzt wird, muss unbedingt die HTML-Seite gespeichert sein, da ansonsten der Editor die Styles nicht richtig zuordnen kann. Auch vor dem Einbinden von anderen externen Elementen, wie Grafiken, sollte man immer speichern.

Noch ein Hinweis: Den CSS-Editor sollte man immer aus dem Modus Normal heraus aufru­fen, nicht aus dem Modus Quelltext. Ansonsten werden die Änderungen nicht in das Listing der Seite übernommen.

Wenn die aktuelle HTML-Seite bisher über keine Stylesheets verfügt, also z.B. neu angelegt wurde, dann ist das Editor-Fenster recht leer.

Mit dem Editor kann man sowohl interne Stylesheets erstellen, über den Button Style-Ele­ment, als auch externe Stylesheets, über den Button Linkelement.

Mit einem Klick auf Style-Element beginnt das Erstellen eines internen Stylesheets.

Die beiden Eingabezeilen kann man ignorieren und gleich auf Stylesheet erstellen klicken, dann arbeitet NVU mit den Vorgaben. Das Fenster verändert sich etwas und die bisher ausge­blendeten Knöpfe werden aktiviert.

Wichtig ist erst einmal der Knopf Regel, über den neue Regeln innerhalb des Stylesheets er­stellt werden.

Hier muss man eine Entscheidungen treffen. Über den ersten Auswahlpunkt Benanntes Style.. erstellt der Editor eine neue Klasse, den Namen gibt man in der Eingabezeile an. Will man ein vorhandenes Element wie z.B. body verändern, so wählt man den zweiten Punkt Sty­le allen Elementen ... Auch hier gibt man den Namen des Elementes in der Eingabezeile an. Anschließend klickt man jeweils auf Style-Regel erstellen.

Man bekommt nun eine Zusammenfassung mit den Einstellungen für das gewählte Element zu sehen. Bisher sind noch keine Veränderungen vorhanden, das lässt sich ändern. Über die relativ sprechenden bezeichneten Reiter Text, Hintergrund, Begrenzungen, ... kann man nun die Einstellungen für das Style-Element vornehmen.

Alle Veränderungen sollten sich sofort in der Vorschau bemerkbar machen.

Leider übernimmt NVU Änderung aus dem CSS-Editor nicht immer zuverlässig in den Quelltext. Dies scheint mit externen Stylesheets besser zu klappen.

Daher legt man entweder gleich über Linkelement ein externes Stylesheet an, oder man ex­portiert das vorhandene Stylesheet.

Bei einem Klick auf Stylesheet exportieren und ... fragt NVU den Namen für die Datei ab. Es bietet sich an den Namen auf .css enden zu lassen, also z.B. style.css.

Hinweis: Den Dialog zum Speichern des CSS sollte man besser nicht abbrechen, weil NVU das Style sonst unter dem Namen der HTML-Seite speichert, die dann überschrieben ist.

5. Weitere Informationen

Wie die anderen Programme der Mozilla-Familie so lässt sich auch NVU durch Plugins erweitern. Eine Liste findet sich unter http://nvu.erweiterungen.de/ und http://nvuext.mozdev.org/installation.html .

Die Dokumentation zu NVU ist bisher recht dünn, trotzdem kommt man in der Regel sehr schnell mit dem Programm zurecht. Ansätze von Beschreibungen finden sich unter: http://www.nvu-composer.de/doku/nvuanl101.pdf

http://www.user-archiv.de/nvu-composer.html

http://www.thesitewizard.com/gettingstarted/nvu1.shtml (es folgen weitere Kapitel)

Hilfreiche Seiten für HTML:

http://jendryschik.de/wsdev/einfuehrung/