Mit einem Wysiwyg-Editor bauen Sie auch ohne HTML-Kenntnisse eine schicke, eigene Website. Nvu bietet dafür eine einsteigerfreundliche Oberfläche.
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
"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.
Bilder einfügen
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.
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
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.
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.
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.
Mehr Infos
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.
Keine Kommentare:
Kommentar veröffentlichen