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.
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.
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.
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.
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 Standarteinstellung. 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:
Fig1.2 Blaue Markierung umgibt die Formatierung Toolbar Reihe 1.
Fig1.3 Blaue Markierung umgibt die Formatierung Toolbar Reihe 1.
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.
In diesem Tutorial verwenden wir den Beispiel Text 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 Beispiel Textes wird am Ende jedes Kapitels in einem ähnlichen Kasten angezeigt. Wenn Sie den Lerntext lesen wollen, ist es leichter, den ganzen Beispiel Text 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.
Beispiel TextLorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc ac massa
non enim dictum vulputate. Vestibulum iaculis. Maecenas nisl magna,
suscipit quis, vulputate nec, egestas vel, enim. Ut venenatis blandit
elit. Aliquam erat volutpat. Nam eros. Morbi imperdiet, diam at lacinia
luctus, diam lacus porttitor quam, a posuere nulla sem vel diam.
Suspendisse quam felis, scelerisque vel, fringilla sit amet, commodo
quis, orci. Etiam at eros. Aenean facilisis adipiscing libero.
Phasellus malesuada sem ornare nulla. Sed sit amet elit.
Aenean vel turpis. Cum sociis natoque penatibus et magnis dis
parturient montes, nascetur ridiculus mus. Nulla rhoncus posuere
turpis. Phasellus id ante ac wisi hendrerit bibendum. Etiam a mi.
Vestibulum malesuada nisl. Vestibulum eget nulla non quam aliquet
mattis. Aliquam molestie lacus sit amet metus. Maecenas sit amet turpis
posuere purus cursus cursus. Morbi at sem. Quisque malesuada hendrerit
mauris. Cras tincidunt dignissim orci. Class aptent taciti sociosqu ad
litora torquent per conubia nostra, per inceptos hymenaeos. Quisque
magna urna, auctor consectetuer, tristique sit amet, porta sit amet,
dui.
Nvu ist ein WYSIWYG-Texteditor für Webseiten. Sie können den Text so eingeben wie ihn die Besucher Ihrer Webseite sehen sollen. Der Prozess, eine Webseite mit Nvu zu gestalten, ist ähnlich wie einen Brief/Artikel in Ihrem bevorzugten Textverarbeitungsprogramm zu schreiben und zu formatieren. Ein einfacher Text wirkt optisch nicht beeindruckend, wenn es an Entwurf und entsprechender Präsentation fehlt. Mit Nvu können Sie Ihren Text auf einfache Weise formatieren um ihn ansprechender zu gestalten. In diesem Kapitel erörtern wir verschiedene Arten, Text in einer Webseite mit Hilfe der Formatierungs-Symbolleiste zu formatieren. Ein anderer Weg, ansprechendere Webseiten zu gestalten ist Stilvorlagen zu verwenden. Eine Einführung wie Stilvorlagen diesem Tutorial hinzugefügt werden wird später behandelt.
Browser verwenden hauptsächlich zwei Arten um einen Teil des Texts
in einer Webseite darzustellen. Text kann in einem Blockebenen Element
eingeschlossen sein, z.B.: <h1>...</h1>, <h2>...</h2>,
<p>...</p>, etc.,
oder in einem Inline-Element, z.B.: <b>...</b>, <em>...<em>,
etc.
Allgemein enthalten Blocklevel Elemente andere Blocklevel Elemente und/oder Inline Elemente. Blockebene Elemente beginnen standardmäßig mit einer neuen Zeile im Gegensatz zu Inline-Elementen.
Standardmäßig können Inline-Elemente Daten und andere Inline-Elemente enthalten, aber keine Blocklevel Elemente. Inline-Formatierungsoptionen auf der Formatierungs Symbolleiste bestehen aus, Schrift und Hintergrundfarbe, Text hervorheben, Schriftgröße, Fett, Kursiv oder Unterstreichen einstellen. Wenn Sie eine Grafik, ein Blocklevel und Inline HTML Element haben, können Sie lernen, wie man sie in einem Web Dokument verwendet.
Überschriften in einem Web-Dokument können auf dieselbe Weise verwendet werden wie bei Büchern, Zeitungsartikeln, usw... Ihnen ist sicher aufgefallen, dass eine Überschrift aus ein paar formatierten Wörtern besteht , welche sich von dem Text der ihnen folgt hervorheben. Es ist ratsam, Überschrift Text kurz d.h. ein paar Wörter zu halten. HTML erlaubt 6 verschiedene Arten von Überschriften, h1, h2, ..., h6. HTML ermöglicht 6 verschiedene´Größen von Überschriften, h1, h2 ..., h6. Stufe h1 ist die Größte und Stufe h6 die kleinste Schriftart.
Sie können auch den Standardwiedergabestil eines HTML Elements durch Verwenden von CSS ändern.
Um einen Teil des Texts als Überschrift zu formatieren, wählen Sie den gewünschten Text aus und stellen dann mit Hilfe der Formatierungs Symbolleiste die gewünschte Überschrift ein. Der ausgewählte Text wird dann mit der ausgewählten Überschrift formatiert. Die Überschrift von diesem Abschnitt hat die Größe 3. Überschrift und der Name dieses Kapitels ist mit Größe 1 formatiert (Textfarbe für den Kapiteltitel wurde geändert). Es ist interessant die Tatsache festzustellen, dass die Überschrift im Tutorial in marineblauer und die Überschrift im Beispiel-Text in schwarzer Farbe dargestellt ist. Dies ist mit Hilfe von CSS ermöglicht worden. CSS kann verwendet werden, um den Standardstil eines Elements zu ändern. Verwenden von CSS, ist eine elegante Art, den Inhalt vom Entwurfsteil einer Webseite zu trennen. Eine Einführung darauf, wie man CSS verwenden kann, ist aus Gründen des Umfangs dieses Tutorials leider nicht möglich. Dies wird in einer späteren Version dieses Artikels behandelt werden. Sie können die Überschriftenstufe -1 in Aktion indem Sie hier klicken. Die Überschriftgrößen-Formatierung ist auf alle in diesem Kapitel gemachten Formatierungen am Ende dieser Seite abgestimmt worden.
So wie es Absätze in einem Text gibt, erlaubt HTML auch, Sätze in einen Absatz zu gruppieren. In <p> und </p> eingeschlossener Text wird in HTML als Absatz behandelt. Als Absatz notierter Text, ist ein Blockebenen Element und daher beginnt jeder Absatz mit einer neuen Zeile.
Um eine Anzahl Sätze in Ihrem Web Dokument als Absatz zu kennzeichnen, wählen Sie die Sätze mit der Maus aus und klicken im entsprechenden Menü der Formatierungs-Symbolleiste auf den Eintrag "Absatz". Sogar dieser Absatz des Texts ist durch <p> und </p> HTML Tags eingeschlossen. Unser Beispiel-Text hat die ersten zwei Gruppen des multilined Textes als Absatz Stil markiert.
Gehen Sie sparsam mit den Schaltflächen I, U und B um, um nicht zu sehr vom eigentlichen Text abzulenken.
Text kann Fett, Kursiv und/oder Unterstrichen durch Verwenden der entsprechenden Schaltflächen auf der Formatierungs Symbolleiste dargestellt werden. Sie können jeden Teil des Texts aus Ihrem Dokument auswählen, um ihn so Fett, Kursiv oder Unterstrichen darzustellen. Der ausgewählte Text kann auch ein Teil des Blocks sein, wie Inline-Elemente in blockebenen Elementen verschachtelt sein können. Der ausgewählte Text wird dann so wie in dieser Zeile dargestellt erscheinen. Für Kursiv und unterstrichenen Text, führen Sie die gleiche Prozedur mit den entsprechenden Schaltflächen aus.
Um die Schriftgröße eines Absatzes des Texts zu erhöhen, wählen Sie den Text aus und klicken auf die entsprechende Schalfläche der Formatierungs-Symbolleiste. Um die Schriftgröße zu verkleinern gehen Sie genauso vor, nur mit der anderen Schaltfläche. Die ersten Worte von jedem Absatz in unserem Beispiel Text sind mit größerer Schrift formatiert worden.
Sie können die Schriftart für den Text den Sie in Ihr Dokument eingeben auswählen. Um die Schriftart von einem Teil des Textes zu ändern, wählen Sie den Text aus und wählen die Schriftart welche Sie benötigen vom Drop Down Menü der Formatierungs-Symbolleiste aus. Diese Zeile ist mit der Schriftart "Arial" formatiert worden<.
Wenn Sie eine Schriftart auswählen, sollten Sie beachten, dass möglicherweise nicht jede Schriftart die Sie verwenden, auch auf dem Computer eines Besuchers Ihrer Webseite vorhanden ist. Wenn der Besucher Ihrer Webseite diesen Schrifttyp nicht auf seinem Computer hat, verwendet dessen Webbrowser den Standard-Schrifttyp, dies kann zur Folge haben, dass unter Umständen die gesammte Webseite völlig anders aussieht. In der Praxis ist eine generische Schrifttypenfamilie zu verwenden die beste Möglichkeit. Eine generische Schrifttypenfamilie veranlasst den Computer, die Standardschrifttype für diese besondere Schriftart zu verwenden, falls er den von Ihnen angegebenen Schrifttype nicht besitzt.
In unserem Beispiel-Text wurde die letzte Zeile jedes Absatzes als monospaced Text formatiert</font>.
Um die Schriftfarbe des Textes oder eines Teils davon zu ändern, klicken Sie auf die Schaltfläche für Schriftfarbe in der Formatierungs Symbolleiste. Um die Schaltfläche fur die Schriftfarben zu finden sehen Sie im Abschnitt "Formatierungs-Symbolleiste in Kapitel 1" nach.
Fig 2.1 Farbauswahl Dialog
Um die Farbe des Texts oder eines Teils davon in Ihrem Dokument zu ändern, wählen Sie den Text aus für welchen Sie die Farbe ändern wollen. Klicken Sie dann auf die Schaltfläche für die Auswahl der Textfarbe. Dies öffnet den Farbauswahl Dialog (Fig2.1). Wählen Sie die Farbe welche Sie benötigen durch klicken auf das entsprechende Farbfeld oder durch Eingabe des Hexadezimalen Farbcodes aus (Rot = #FF000). Dann klicken Sie auf ok, um die Änderung zu bestätigen. Dieser Vorgang wurde angewendet, um den Text des ersten Absatzes in unserem Beispiel-Text braun zu gestalten. Wählen Sie Textfarben welche gut zur Hintergrundfarbe passen damit Besucher Ihrer Webseite Sie besser lesen können (Kontrast).
Um Ihrem Dokument einen Stil hinzuzufügen, können Sie auch die Hintergrundfarbe für einen Block des Texts oder sogar das ganze Dokument ändern. Wählen Sie den Block des Texts, für den Sie die Hintergrundfarbe ändern wollen. Klicken Sie dann auf die Schaltfläche für die Hintergrundfarbe auf der Formatierungs Symbolleiste. Dies öffnet den Farbauswahl Dialog, wo Sie die Farbe für den Hintergrund auswählen können. Nach dem Wählen der Farbe, bestätigen Sie durch klicken auf OK die Änderungen.
Als Beispiel ist dem zweiten Absatz unseres Beispiel Texts ein farbiger Hintergrund gegeben worden. Um die Wirkung auf den formatierten Hintergrund des Beispiel-Textes in Ihrem Browser zu sehen, klicken Sie hier.
Das oben genannte Verfahren ändert die Hintergrundfarbe für den gewählten Hintergrund, wenn Sie einen Block des Texts zwischen einem Absatz wählen, ändert sich die Hintergrundfarbe des ganzen Absatzes. Mit anderen Worten ist die änderung der Hintergrundfarbe auf Blockebenen Elemente anwendbar. Um nur die Hintergrundfarbe für den ausgewählten Text zu ändern klicken Sie auf die Schaltfläche Farbe für Texthervorhebung auswählen siehe (Icon Fig1.3). This will open the color picker and after selecting the color you want for the highlighting, click on and save the document.
Ein nettes Beispiel für Texthervorhebung ist in unserem Beispiel Text gezeigt worden, wo der Text "Nummerierte Liste" in einem Schatten wasserblauer Farbe hervorgehoben wurde. Um die Wirkung dieses Stils in Ihrem Browser zu betrachten klicken Sie hier.
Erstellen von Listen
Es kommt oft vor, dass wir Dinge in Listenform darstellen müssen. Nvu stellt uns zwei Arten von Listen zur Verfügung, geordnete Liste und ungeordneter Liste. Die Art wie eine solche Liste erstellt wird ist immer die Gleiche, nur dass verschiedene Schaltflächen angeklickt werden müssen. Um die geordnete Liste zu erstellen, klicken Sie auf die Schaltfläche für geordnete Liste auf der Formatierungs-Symbolleiste (Fig1.2), und um eine ungeordnete Liste zu schaffen klicken Sie auf die Schaltfläche für ungeordnete Liste der Formatierungs-Symbolleiste.
For lists with an item and description, use definition lists.
Nach dem anklicken der Listenschaltflächen, fügt Nvu eine Liste ein, welche bei geordneten Listen mit (1, 2, 3) usw. und bei ungeordneten Listen mit einem dunklen Kreis beginnt. Wenn Sie die Eingabe einer Listenzeile beendet haben und die Taste [Enter] drücken, wird in der nächsten Zeile automatisch das nächste Listensymbol erzeugt. Jedes Drücken von "Enter" erstellt ein neues Listenelement. Um zur normalen Texteingabe zurückzukehren, drücken Sie 2 Mal hintereinander die Taste [Enter]. Dies beendet die Listeneingabe und bringt Sie wieder zur normalen Texteingabe zurück.
Unser Beispiel-Text liefert ein Beispiel für eine nummerierte Liste im Abschnitt "nummerierte Liste". Um zu sehen, dass die nummerierte Listenformatierung für unseren Beispiel-Text galt, klicken Sie hier.
Während wir Text schreiben wollen wir ihn mehrmals links, rechts und beidseitig ausrichten. Mit Nvu ist es leicht Text auszurichten. Es ist ratsam, Ihren Text Absatz für Absatz auszurichten, statt den gesammten Text im Dokument auszuwählen. Und zwar deshalb weil Sie durch auswählen des gesammten Dokumententextes auch Nicht-Absatzblöcke z.B. Listen, Tabellen, usw. beeinflussen.
Um einen Absatz auszurichten, wählen Sie den Text des Absatzes aus und klicken auf die entsprechende Schaltfläche der Formatierungs Symbolleiste (Reihe 1). Es gibt 4 Schaltflächen für jede Art von Ausrichtung, Links, Mitte, Rechts und Block. Im Beispiel-Text wurde der erste Absatz als Blocksatz (Links und Rechts) formatiert. Um die Wirkungen der Ausrichtung für den rohen Beispiel Text (erster Absatz Blocksatz, zweiter Absatz rechts) zu sehen klicken hier.
Hinweis: Standardmäßig ist jeder Text, den Sie schreiben, rechts ausgerichtet.
Emphasizing Text in einem Absatz oder einem Artikel hervorzuheben, ist eine der Arten, damit einige Wörter oder Phrasen auffallen. Nvu kann Text auf zwei Arten hervorheben. Die erste generiert (Kursiv) und die zweite (Fett) Text. Sie können beide Schaltflächen in der zweiten Reihe der Formatierungs Symbolleiste finden. Für normales Hervorheben ( ! ) und für starkes Hervorheben ( !! ).
Too much emphasizing beats its own purpose.
Um ein Wort oder eine Phrase hervorzuheben, wählen Sie den Text aus, und klicken dann auf die entsprechende Schaltfläche auf der Formatierungs Symbolleiste. Sie können die Wirkung der Hervorhebung im Beispiel-Text sehen, wo im ersten Absatz das erste Wort (normal) und im zweiten Absatz der erste Satz (stark) hervorgehoben ist. Um die Wirkung der Hervorhebungs Formatierung auf unseren Beispiel Text zu sehen, klicken Sie hier.
Unten steht der Beispiel Text. Der Text, der mit den oben erlernten Regeln formatiert wurde, erscheint in schwarzer Farbe.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc ac massa non enim dictum vulputate. Vestibulum iaculis. Maecenas nisl magna, suscipit quis, vulputate nec, egestas vel, enim. Ut venenatis blandit elit. Aliquam erat volutpat. Nam eros. Morbi imperdiet, diam at lacinia luctus, diam lacus porttitor quam, a posuere nulla sem vel diam. Suspendisse quam felis, scelerisque vel, fringilla sit amet, commodo quis, orci. Etiam at eros. Aenean facilisis adipiscing libero. Phasellus malesuada sem ornare nulla. Sed sit amet elit.
Aenean vel turpis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla rhoncus posuere turpis. Phasellus id ante ac wisi hendrerit bibendum. Etiam a mi. Vestibulum malesuada nisl. Vestibulum eget nulla non quam aliquet mattis. Aliquam molestie lacus sit amet metus. Maecenas sit amet turpis posuere purus cursus cursus. Morbi at sem. Quisque malesuada hendrerit mauris. Cras tincidunt dignissim orci. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Quisque magna urna, auctor consectetuer, tristique sit amet, porta sit amet, dui.
Die wichtigste Eigenschaft eines HTML Dokuments ist die Fähigkeit, es mit anderen HTML Dokumenten oder anderen Teilen desselben Dokuments zu verlinken. Mit verlinken ist gemeint, dass wir einen Hyperlink erstellen, welcher wenn wir in anklicken, uns mit einem anderem Dokument oder mit einer Stelle des gleichen Dokuments verbindet, welche dann im Browser angezeigt wird. Ein Web Dokument ohne Hyperlink ist wie eine Werbeanzeige ohne Adresse und Telefonnummer, wo man sich näher über ein Produkt informieren kann. Ohne Links müßten Benutzer die URL für jede einzelne Seite, mit der sie das WWW heimsuchen wollen von Hand eintippen und sich die entsprechende Adresse auch merken.
Ein Link hat zwei Enden, einen Anker und eine Richtung. Der Anfangsanker einer Verbindung wird "Quelle"-Anker genannt, der auf den "Ziel"-Anker zeigt. Der Zielanker kann einer der Web Ressourcen, nämlich eine Grafik, ein Audio-Clip, ein Video-Clip, ein HTML Dokument (eine innerhalb oder extern), oder sonstige Datei sein. Zum Beispiel ist der Text GNU am Ende dieses Satzes ein Link (Anfangsanker), der auf die Website www.gnu.org (Zielanker) ziehlt, GNU.
Interne Links sind Links zu Ressourcen, des Dokuments welches bearbeitet wird. Mit internen Links kann man leicht in einem Dokument hin und her navigieren. Interne Links sind sehr hilfreich in langen Dokumenten, wo es mehrere Abschnitte gibt. Ein Inhaltsverzeichnis am Anfang, hilft Benutzern, zum gewünschtem Abschnitt des Dokuments zu gelangen.
Um einen internen Link zu erstellen, müssen Sie zuerst den Zielanker definieren. Wir wollen den Zielanker als einen benannten Anker erstellen. Wählen Sie den Text, welcher der Zielort der Verbindung sein soll und klicken dann auf die Anker Schaltfläche auf der Bearbeitungs-Symbolleiste. Dies öffnet den Dialog für die Eigenschaften des Ankers. Nachdem Sie den Text ausgewählt haben welcher zum Anker werden soll, sehen Sie den Text im Eingabefeld des Anker Namen Eigenschafts Dialog. Sie können hier auch einen anderen Namen eintragen. Fig3.1 zeigt den Dialog der Ankernamen-Eigenschaften. Klicken Sie jetzt auf OK, um den ausgewählten Text als Ankernamen zu kennzeichnen.
<img alt="" src="namedAnchor.png">Fig3.1 Named Anchor Properties dialog box
Das einzige was wir jetzt noch tun müssen, um den internen Link zu erstellen ist den Quellenanker zu definieren. Wählen Sie den Text welcher als Link dienen soll aus und klicken dann auf die Schaltfläche "Link" in der Bearbeitungs-Symbolleiste. Dies öffnet den Link Eigenschafts-Dialog. Wählen Sie aus dem DropDown-Menü des Eingabefeldes den Anker aus, welchen wir gerade erstellt haben. Klicken Sie auf OK und speichern die Änderungen ab. Wenn Sie zum Beispiel das Wort 'Anfang' anklicken, kommen Sie an den Anfang dieses Kapitels zurück.
Aktive, mit der Maus überdeckte, und besuchte Link-Farben können mit Hilfe von CSS geändert werden.
Externe Links verbinden Ihre Webseiten mit anderen Web Resourcen z.B. eine andere Webseite, eine Grafik, ein Video-Clip usw. Um einen externen Link zu erstellen, wählen Sie den Text aus der als Link dienen soll und klicken dann auf die Schaltfläche "Link" in der Bearbeitungs-Symbolleiste. Dies öffnet den Link Eigenschafts-Dialog. Im Eingabefeld geben Sie die URL für die Webseite oder sonstige Web Resource ein. Die URL kann relativ sein (wenn sie zu Ihrer Website gehört) oder Absolute wenn Sie auf eine Webseite im WWW verweist. Klicken Sie auf OK, um die Änderungen wirksam zu machen und speichern dann das Dokument ab.
Links, die wir mit dem hier erlernten erstellt haben, sehen Sie in unserem Beispiel-Text. Wenn Sie auf die Links im Abschnitt "Interessante Links" des Beispiel Textes klicken, öffnen sie den "Zielanker" in Ihrem Standardbrowser.
Fig3.2 Link Eigenschafts Dialog
Relative Pfade zu verwenden, sollte bevorzugt werden gegenüber absoluten Pfade.
Jetzt haben wir Text in unserem HTML-Dokument verwendet und mit verschiedenen Formatierungswerkzeugen gearbeitet, um den Text für den Besucher Ihrer Webseite anziehend zu gestalten. Wir haben auch Links verwendet, um unsere Webseite mit anderen Webseiten zu verbinden. Nach Text sind Grafiken das zweithäufigste Element welches zum Gestalten von Webseiten verwendet wird. Grafiken oder Fotos bringen Ihre Webseite zum Leben, da es viel leichter ist, eine Grafik oder ein Foto von etwas zu zeigen, anstatt es mit Worten erklären zu müssen.
Fig.4.1 Grafik Eigenschafts Dialog
Um eine Grafik an der Position des Cursors einzufügen, klicken Sie auf die "Grafik"-Schaltfläche in der Bearbeitungs Symbolleiste. Dies öffnet den Grafik Eigenschafts Dialog.(siehe Fig 4.1). In diesem Dialog können Sie den Pfad zu der Grafik entweder von Hand eingeben, oder auswählen indem Sie auf die Schaltfläche Durchsuchen klicken. Sie sollten auch einen Text in das Feld Alternativtext eingeben. Der alternative Text wird angezeigt, falls die Grafik nicht vom Besucher Ihrer Webseite heruntergeladen werden kann. Dieser Text läßt den Besucher Wissen, was für eine Grafik dort sein sollte, und dass mit der verlinkten Grafik etwas nicht in Ordnung ist (hilfreich beim Berichten von Problemen mit der Webseite).
Die Größe einer Grafik in einem Bildbearbeitungsprogramm zu ändern ist besser als die Änderung durch den Browser
Sie können durch Wechseln der Tabs Anpassungen an der Grafik vornehmen. Im Tab "Größe 2“, können Sie die Größe der Grafik ändern, wenn sie in einem Browser angezeigt wird. Eine bessere Methode als die Größe der Grafik durch den Browser zu ändern, ist die Größe der Grafik in einem entsprechendem Bildbearbeitungsprogramm zu ändern, und zwar so dass sie die Größe hat, welche der Browser anzeigen soll. Das Redimensionieren der Grafik durch den Browser führt nämlich im Allgemeinen zu einer Verminderung der Qualität der Grafik, und es sollte daher vermieden werden, es sei denn, es ist notwendig. Im Tab "Erscheinungbild" können Sie Einstellungen für den Rand um die Grafik vornehmen. Es gibt eine Option, wie man die Abbildung in Bezug auf den Text, der sie umgibt einstellen kann. Der Tab "Link" erlaubt uns, die Abbildung, genau wie Text als Hyper Link zu verwenden.Wir haben Grafiken in unserem Beispiel-Text unten eingeführt. Die Grafiken befinden sich in Zellen einer Tabelle unter dem Produkt, welches sie repräsentieren. Um die Grafiken (ohne Tabelle und andere Formatierungen) zu sehen, klicken Sie hier, um den unformatierten Beispiel-Text in einem neuen Fenster zu betrachten. Er zeigt auch, wie alternativer Text ins Spiel kommt, (die zweite Grafik, das Mozilla Emblem, fehlt), wenn ein Grafik-Link tot ist oder die Grafik nicht heruntergeladen werden kann.
Da die in eine Webseite eingefügten Grafiken Links zu Dateien sind, vergessen Sie nicht, die Grafiken auf den Web-Server zu laden. Auch sollten Sie darauf achten, dieselbe Verzeichnisstruktur auf dem Web-Server zu haben, wie Sie sie für Ihre Webseiten und andere Dateien haben, die mit diesen Webseiten verbunden sind. Dies ist notwendig, weil sonst tote Links für Dateien oder Grafiken auf Ihrer Webseite entstehen wenn sie in einen Browser betrachtet wird.
Nach einer Einführung, Abbildungen in Ihre Webseite einzufügen, zeigen wir hier ein weiteres praktisches Element von HTML: Tabellen. Tabellen werden in HTML durch Verwenden des tabellarischen Umgebungss Tags <table> ... </table> erstellt. Zusätzlich zum eigentlichen Zweck von Tabellen für tabellarische Datenaufstellung können wir Tabellen auch verwenden, um Daten in unserer Webseite zu platzieren. Jedoch konzentrieren wir uns in diesem Abschnitt darauf, Tabellen nur für Text/Grafiken zu erstellen.
Um eine Tabelle an der Cursorposition einzufügen:
Fig4.2 Tabelle einfügen Dialog
Nach dem Erstellen der Tabelle können Sie den Tabellenzellen Text, Links, Grafiken usw. hinzufügen. Als Beispiel erstellten wir eine Tabelle mit 2 Reihen und 6 Spalten und kopierten die Links im Abschnitt "Interessante Links" unseres Beispiel-Textes. In die Zellen der zweiten Reihe wurden Grafiken eingefügt, die mit den Links in den Zellen in der ersten Reihe verbunden waren.
Eine andere Art, eine Tabelle zu erstellen, ist die Auswahl in eine Tabelle umzuwandeln. Bei dieser Methode wählen wir den Text, den wir in eine Tabelle einfügen wollen, aus und klicken auf die Schaltfläche "Tabelle" auf der Bearbeitungs-Symbolleiste (oder Menü Tabelle > Tabelle aus Auswahl erstellen). Dies öffnet den Dialog "In Tabelle umwandeln". Sie können das Zeichen auswählen, welches verwendet wird, um die Auswahl in Spalten zu trennen. Die Trennzeichen können Komma, Leerzeichen, oder benutzerdefiniert sein. Auf OK klicken, wandelt den gewählten Text in eine Tabelle um. Jede Zeile der Auswahl ist in eine Reihe der generierten Tabelle umgewandelt worden.
Der Abschnitt Status des Beispiel-Textes, wurde mit "Leertaste" als Trennzeichen zu einer Tabelle umgewandelt. Um nur den Beispiel-Text mit der Tabelle zu betrachten, klicken Sie hier.
Fig4.3 In Tabelle umwandeln Dialog
Nachdem wir die Gestaltung und Formatierung unserer Webseiten beendet haben, müssen wir unsere Webseiten (und die mit ihnen verlinkten Dateien auf unserer Festplatte), veröffentlichen. Mit Veröffentlichen der Webseiten ist gemeint, dass wir die Webseiten auf den Web-Server (im allgemeinen der des Internet Providers) herunterladen. Der Web-Server ist die Software, die Webseiten, Grafiken, Video Clips oder andere Dateien den Benutzern zeigt, wenn sie eine Webseite besuchen oder einen Link anklicken. Um Ihre Webseiten auf einen Web-Server herunterzuladen, müssen Sie ein Passwort bei Ihrem Internet Provider haben, der Ihnen seinen Server zur Verfügung stellt. Normalerweise stellt Ihnen Ihr Internet Provider Speicherplatz zur Verfügung, wenn Sie sich angemeldet haben. Die Login-Details werden Ihnen normalerweise von Ihren Internet Provider zugeschickt. Es gibt auch Provider, welche Speicherplatz gratis zur Verfügung stellen.
Die Nvu Seitenverwaltung ist der Teil von Nvu, der Ihre Webseites verwaltet. Sie müssen mindestens eine Webseite in der Seitenverwaltung erstellen, um in der Lage zu sein Ihre Webseiten zu veröffentlichen.
Um ein Konto in der Seitenverwaltung zu erstellen, müssen Sie die folgende Information haben:
Beispiel anhand unserer Webseite bei T-Online
Um ein Konto für das Veröffentlichen Ihrer Webseite in der Nvu Seitenverwaltung zu erstellen, gehen Sie ins Menü --> Bearbeiten --> Publizierungseinstellungen, dadurch wird der entsprechende Dialog geöffnet Fig 5.1. Füllen Sie die Information in den jeweiligen Feldern aus, wie in Fig 5.1 gezeigt. Der Seiten-Name hat keine Funktion, er dient nur der Unterscheidung von Ihren anderen Webseiten. Passen Sie beim Eingeben Ihres Passwortes gut auf, denn hier wird zwischen Groß/Kleinschreibung unterschieden (T5648R, ist nicht das Gleiche wie t5648r).
Fig 5.1 Publizierungseinstellungs-Dialog
Sobald Sie Webseiten erstellt haben, müssen Sie die Seiten zum Web-Server herunterladen. Wenn Sie dem Tutorial gefolgt sind, sollten Sie Ihre Veröffentlichungseinstellungen für Ihre Webseite, in der Seitenverwaltung einstellen. Wenn Sie dies bis jetzt noch nicht gemacht haben, gehen Sie zurück zum Abschnitt 'Nvu Seitenverwaltung' und erstellen ein Konto für Ihre Webseite.
Um die Seite zu veröffentlichen, die Sie in diesem Tutorial erstellt haben, klicken Sie auf die Schaltfläche Publizieren in der Bearbeitungs-Symbolleiste. Dies öffnet den Dialog für die Publizierungseinstellungen, Fig 5.2. Der Dialog verwendet das Default Veröffentlichungs-Konto, wenn Sie mehr als eines konfiguriert haben. Wählen Sie die Webseite, welche Sie veröffentlichen wollen aus dem Auswahlfeld aus. Sie können auch den Titel der Seite ändern, wenn Sie wollen, aber das ist im Allgemeinen nicht der Fall, da wir schon einen haben. Der Name der Seite welche Sie gerade bearbeiten und die veröffentlicht werden soll, wird automatisch angezeigt. Sie sollten auch das Unterverzeichnis wählen, in welches Sie Ihre Webseite herunterladen wollen. Wenn es in Ihrer Webseite keine Verzeichnisse gibt, werden auch keine angezeigt. Wenn kein Unterverzeichnis ausgewählt wird, wird die Seite im Wurzelnetzverzeichnis heruntergeladen.
Fig 5.2 Veröffentlichungs-Dialog
Wenn Sie andere Dateien in Ihrer Seite haben, zum Beispiel Grafiken, Video Clips, usw., sollten Sie sie auch zu Ihrer Webseite herunterladen. Dies erreichen Sie, indem Sie die Check Box für "Grafiken und andere Dateien einschließen" auswählen. Es ist ratsam, ein Standortunterverzeichnis zu verwenden, um Grafiken und andere Dateien zu veröffentlichen, dies macht macht Ihr Webseiteverzeichnis überschaubar.
Um die Seite zu veröffentlichen, klicken Sie auf den Reiter „Publizieren“. Er öffnet den Veröffentlichungsdialog Fig 5.3, und zeigt den Fortschritt der Veröffentlichung an. Sie sollten nicht auf „Abbrechen“ drücken, bevor die Übertragung der Dateien beendet ist. Nachdem die Seite veröffentlicht wurde, schließt der Veröffentlichungsdialog, und Sie können wieder fortfahren, Nvu zu verwenden.
Fig 5.3 Veröffentlichen Dialog