aus NvuWiki, der freien Wissensdatenbank

Inhaltsverzeichnis 1 Einführung 1.1 User Interface 1.1.1 Bearbeitungs-Symbolleiste 1.1.2 Formatierung-Symbolleiste 1.1.2.1 Formatierungs-Symbolleiste Reihe 1 1.1.2.2 Formatierungs-Symbolleiste Reihe 2 1.1.3 Tab Interface 1.2 Beispieltext 1.3 Weiter

Einführung

Nvu (gesprochen: "n view") ist ein komplettes Open-Source-, Cross-Plattform-, Standalone-WYSIWYG-Web-Authoring-System. Es basiert auf der neuesten Gecko-Rendering-Engine (GRE). GRE ist der Kern von auf Mozilla basierten Anwendungen wie Firefox, Thunderbird, Sunbird usw... Er ist ein sehr leicht zu bedienender WYSIWYG-Editor und besonders für Anfänger geeignet. WYSIWYG ist die Abkürzung für den englischen Satz: What You See Is What You Get.

User Interface

Nvu's Interface besteht aus leicht zugänglichen Schaltflächen für alle Funktionen, die ein Benutzer benötigt, während er eine Webseite gestaltet. Mit der modernen Gecko-Technik, auf der Nvu basiert, bietet Nvu seinen Benutzern gute Features wie Tab-Schnittstelle, Erweiterungsmanager, Themenmanager, JavaScript, Konsole, usw... Mit der Fähigkeit, mehrere Tabs gleichzeitig zu öffnen, können Sie mehrere Dateien in Nvu gleichzeitig bearbeiten, ohne wertvollen Speicher zu verbrauchen. Die Statusbar zeigt die Befehle und die aktuelle Position des Cursors in Echtzeit an. Fortgeschrittene Benutzer können das HTML-Dokument im WYSIWYG-, HTML-Tag- oder Quellcode-Modus bearbeiten. Die folgenden Abschnitte stellen uns die Nvu-Basisschnittstelle vor.

Bearbeitungs-Symbolleiste

Die Bearbeitungs-Symbolleiste besteht aus mehreren Schaltflächen, die verwendet werden, um größere Aufgaben zu erledigen, während Sie eine Webseite bearbeiten. Fig 1.1 unten zeigt die (von einem blauen Rechteck eingeschlossene) Bearbeitungs-Symbolleiste in ihrem Standardzustand. Eine entsprechende Liste unten beschreibt kurz die Funktion jeder Schaltfläche.

• Neu: Öffnet ein leeres Dokument zum Bearbeiten. Wenn Sie den Pfeil der Schaltfläche Neu anklicken, können Sie auswählen, wie das neue Dokument geöffnet werden soll, entweder in einem neuen Fenster oder in einem neuen Tab. Bei Erweitert können Sie auswählen, ob das neue Dokument aus einer Vorlage bestehen oder als Vorlage dienen soll.
• öffnen: Öffnet eine Dialogbox, in welcher Sie eine Datei zum Bearbeiten auswählen können.
• Speichern: Speichert das aktuelle Dokument. Wenn das Dokument das erste Mal gespeichert wird, werden Sie in einer Dialogbox gefragt, wo und unter welchem Namen das Dokument gespeichert werden soll.
• Publizieren: Öffnet die Seitenverwaltung, um das Dokument auf dem Server zu speichern, der Ihre Webseiten präsentiert.
• Vorschau: Öffnet das aktuelle Dokument in Ihrem Standardbrowser. Auf diese Weise bekommen Sie ein Gefühl für das Aussehen Ihrer Webseite, wenn andere Benutzer Ihre Website besuchen. Wenn die Seite zuvor nicht gespeichert wurde, fordert Nvu Sie auf, die Datei zuerst zu sichern, und öffnet sie dann im Browser.
• Ziel: Öffnet eine Dialogbox, um ein neues Ziel zu erstellen. Ziele sind Stellen, die normalerweise verwendet werden, um von einer Stelle zu einer anderen in derselben Seite zu springen. Zum Beispiel kann ein Dokument mit einem kurzen Inhaltsverzeichnis (TOC) Ziele verwenden, damit der Benutzer zu jedem Abschnitt springen kann.
• Link: Öffnet eine Dialogbox, um einen neuen Hyperlink zu erstellen. Sie können die URL einer lokalen Datei, einer Datei im Internet oder eines benannten Ziels als Link verwenden. Sie können auch andere Eigenschaften des Links wie Titeltext, XFN-Informationen etc. mit dem Eigenschaftseditor bearbeiten. Sehen Sie im Anhang 1 wegen Details über den Eigenschaftseditor nach.
• Grafik: Öffnet eine Dialogbox, um ein Bild auszuwählen, welches an der aktuellen Cursorposition eingefügt wird. Für Einstellungen des eingefügten Bildes siehe Anhang 2.
• Tabelle: Öffnet eine Dialogbox, um die Größe der Tabelle auszuwählen, welche an der aktuellen Cursorposition eingefügt wird. Für Details über Einfügen und Verwenden von Tabellen in Ihrem Dokument siehe Kapitel xx.
• Formular: Öffnet eine Dialogbox, in welcher der Benutzer die Eigenschaften eines Formulars einzugeben hat, das an der aktuellen Cursorposition eingefügt wird. Für Details über das Verwenden von Formularen in Ihrem Dokument siehe Kapitel xx.
• Rechtschreibung: Startet die Rechtschreibprüfung, um den eingegebenen Text auf Fehler zu überprüfen. Die Rechtschreibprüfung verwendet das Wörterbuch, das Sie verwenden wollen. Standardmäßig ist amerikanisches Englisch eingestellt.
• Drucken: Öffnet den Druckdialog, um den Drucker und die Druckeinstellungen vor dem Drucken Ihres Dokuments auszuwählen.

Fig. 1.1 Blaue Markierung umgibt die Aufbau Toolbar.

Benutzer können die Symbolleiste entsprechend ihrem Geschmack anpassen. Um das Anpassungsfenster für die Bearbeitungs Symbolleiste zu öffnen, klicken Sie mit der rechten Maustaste auf die Leiste und wählen Symbolleiste anpassen. Sie können jetzt Schaltflächen, ein Trennzeichen, einen flexiblen oder festen Zwischenraum zur Bearbeitungs Symbolleiste ziehen und ablegen, um ihr Schaltflächen hinzuzufügen. Oder ziehen Sie Schaltflächen von der Bearbeitungs Symbolleiste in das Anpassungsfenster, um Elemente zu entfernen. Sie können auch auswählen ob nur Icons, Icons mit Text oder nur Text angezeigt werden soll.

Formatierung-Symbolleiste

Die Formatierungs-Symbolleiste befindet sich unterhalb der Bearbeitungs-Symbolleiste. Sie besteht aus zwei Reihen mit Schaltflächen. Fig 1.2 und Fig 1.3 zeigen die Formatierungs-Symbolleiste in der Standardeinstellung. Benutzer können sie auch durch Rechtsklick auf die Formatierungs-Symbolleiste und durch Wählen von Symbolleiste anpassen "Anpassen". Die Formatierungs-Symbolleiste gibt Ihnen schnellen Zugriff auf die am häufigsten gebrauchten Textformatierungsfunktionen, Text fett, kursiv, Text unterstreichen, Schrifttyp oder Listen erstellen usw... Eine detailiertere Beschreibung jeder Schalfläche folgt unten:

Formatierungs-Symbolleiste Reihe 1

Fig1.2 Blaue Markierung umgibt die Formatierung Toolbar Reihe 1.

• Wählen des Absatzformats: Wählen Sie den Absatzstil des ausgewählten Texts. Verfügbare Optionen beinhalten:
  • Normaler Text: Der ausgewählte Text wird unformatiert ausgegeben.
  • Absatz: Markiert den ausgewählten Textblock als Absatz.
  • Überschrift 1-6: Markiert den ausgewählten Text als Überschrift mit der Größe 1-6.
  • Adresse: Markiert den ausgewählten Text als Adressformat. Adressformat ist in Wirklichkeit kursiv geschriebener Text, Sie müssen Zeilenumbrüche selbst hinzufügen.
  • Vorformatiert: Markiert den ausgewählten Text als vorformatiert. Vorformatierter Text wird im Internetbrowser so dargestellt wie er erstellt wurde. Zum Beispiel betrachten Browser mehrfache Leerräume als einzelnen Leerraum, aber in vorformatiert wird Textleerraum so wiedergegeben wie er tatsächlich ist. Vorformatierter Text wird im Allgemeinen verwendet, um Codebeispiele anzuzeigen.
• Schriftart: Hier können Sie die Schriftart für den selektierten Text einstellen. Die Liste zeigt nur die auf Ihrem System installierten Fonts an. Es ist ratsam, dass Sie generische Schrifttypen verwenden, weil es sein kann, dass die auf Ihrem System installierten Schrifttypen auf anderen Systemen nicht installiert sind.
• Textfarbe auswählen: öffnet die Farbpalette damit Sie die Schriftfarbe auswählen können.
• Hintergrundfarbe auswählen: öffnet die Farbpalette um die Hintergrundfarbe für den selektierten Textblock auszuwählen.
• Texthervorhebung: öffnet die Farbpalette um die Farbe für die Texthervorhebung auszuwählen.
• Kleinere Schriftgröße: Verkleinert die Größe des ausgewählten Textes.
• Größere Schriftgröße: Vergrößert die Größe des ausgewählten Textes.
• Fett: Ausgewählter Text wird fett dargestellt.
• Kursiv: Ausgewählter Text wird kursiv dargestellt.
• Unterstrichen: Ausgewählter Text wird unterstrichen.
• Nummerierte Liste: Beginnt eine Nummerierte Liste.
• Unsortierte Liste: Beginnt eine unsortierte Liste.
• Links ausrichten: Der selektierte Textblock wird auf der linken Seite ausgerichtet.
• Zentrieren: Der selektierte Textblock wird in der Mitte ausgerichtet.
• Rechts ausrichten: Der selektierte Textblock wird auf der rechten Seite ausgerichtet.
• Blocksatz: Der selektierte Textblock wird auf beiden Seiten ausgerichtet.
• Texteinzug vergrößern: Der aktive Textblock wird nach rechts eingerückt.
• Texteinzug verkleinern: Der bereits eingerückte Text wird nach links gerückt.

Formatierungs-Symbolleiste Reihe 2

Fig1.3 Blaue Markierung umgibt die Formatierung Toolbar Reihe 1.

• Zuweisen einer Klasse: Wendet eine der verfügbaren Klassen auf den ausgewählten Text an. Hinweis: Nur verfügbar, wenn Sie Ihrem Dokument (intern oder extern) eine Stilvorlage zugeordnet haben..
• Layer: Fügt den ausgewählten Text als Ebene ein.
• Nach vorne bringen: Bringt die aktive Ebene vor die anderen Ebenen.
• Nach hinten stellen: Bringt die aktive Ebene hinter die anderen Ebenen.
• Hervorgehoben: Hebt den selektierten Text hervor. (kursiv)
• Stark hervorgehoben: Hebt den selektierten Text stark hervor. (Fett)
• Definitionsausdruck: Konvertiert den ausgewählten Text in einen Definitionsausdruck.
• Definitionsbeschreibung: Konvertiert den ausgewählten Text in eine Definitionsbeschreibung.
• Am linken Rand anheften: Definiert den linken Rand (Absolute) für eine Ebene.
• Zentriert anheften: Definiert linke und rechte Ränder (Absolutes), um die Ebene in der Mitte des Fensters zu halten.
• Am rechten Rand anheften: Definiert den linken Rand (Absolute) für eine Ebene.
• Oben anheften: Definiert den oberen Rand (Absolute) für eine Ebene.
• In der Mitte anheften: Definiert den oberen und unteren Rand (Absolute) für eine Ebene.
• Unten anheften: Definiert den unteren Rand (Absolute) für eine Ebene.

Tab Interface

Nvu verwendet wie Firefox, der auf GRE basiert, eine Tab Schnittstelle. Mehrere Tabs erlauben es dem Benutzer, mehr als ein HTML Dokument im gleichen Fenster zu bearbeiten. Jedes Tab hat seine eigene Liste um Arbeitsschritte wieder rückgängig zu machen.

Fig1.4 Register mit gespeicherten und ungespeicherten Dokumenten

Fig1.4, ist ein typisches ScreenShot von mehreren in Tabs geöffneten Dokumenten. Jedes Tab zeigt den Zustand des Dokuments an, das gerade in ihm bearbeitet wird. Ein verändertes oder neues Dokument, welches noch nicht gespeichert wurde, wird durch ein rotes Disketten-Symbol gekennzeichnet Fig1.4. Sie können jedes Tab schließen, indem Sie einen Rechtsklick ausführen und Tab schließen auswählen.

Beispieltext

In diesem Tutorial verwenden wir den Beispieltext im Kasten unten. Es ist ein einfacher Text. Wir werden lernen, wie der Text mit Hilfe von verschiedenen Eigenschaften von Nvu verändert wird. Für jede Art von Veränderung gibt es am Ende des Abschnitts einen Link, der das Dokument in Ihrem Standardbrowser mit nur dieser Veränderung öffnet. Die Veränderung dieses Beispieltextes wird am Ende jedes Kapitels in einem ähnlichen Kasten angezeigt. Wenn Sie den Lerntext lesen wollen, ist es leichter, den ganzen Beispieltext am Ende des Kapitels mit all den verwendeten Veränderungen zu betrachten. Formatierter Text, wird um ihn hervorzuheben in einer anderen Farbe als Grau dargestellt.

Weiter

Im nächsten Kapitel, werden wir die Formatierungs-Symbolleiste verwenden, um den Beispieltext zu formatieren. Obwohl uns die Formatierungs-Symbolleiste bei den meisten Formatierungsoptionen hilft, werden wir einige neue Optionen mit Hilfe des Menüpunktes "Format" einführen. Das Menü "Format" stellt alle Funktionen zur Formatierung von Webseiten zur Verfügung.

weiter zu Tutorial:Kapitel2