aus NvuWiki, der freien Wissensdatenbank

zrück zu Tutorial:Einführung

Inhaltsverzeichnis 1 Formatierter Text 1.1 Überschriften 1.2 Absatz 1.3 Fett, Kursiv und unterstrichener Text 1.4 Schriftart auswählen 1.5 Schriftfarbe 1.6 Hintergrundfarbe und Text Stil 1.7 Text ausrichten 1.8 Text hervorheben 1.9 Beispiel Text 1.10 Beispiel Text 1.11 Status 1.12 Eine nummerierte Liste 1.13 Interessante Links 1.14 Weiter

Formatierter Text

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

Ü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.

Absatz

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.

Fett, Kursiv und unterstrichener Text

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.

Schriftart auswählen

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>.

Schriftfarbe

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).

Hintergrundfarbe und Text Stil

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 OK 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.

Text ausrichten

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.

Text hervorheben

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.

Beispiel Text

Unten steht der Beispiel Text. Der Text, der mit den oben erlernten Regeln formatiert wurde, erscheint in schwarzer Farbe.

Weiter

Im nächsten Kapitel erfahren wir, wie Hyperlinks erstellt werden. Hyperlinks werden verwendet, um entweder innerhalb des Dokuments oder zu einer anderen Webseite zu navigieren. Hyperlinks können als Hinweise von einer Webseite zu einer anderen Webseite oder von einer Dokumentenposition auf eine andere Position innerhalb desselben Dokuments betrachtet werden. Durch das Erstellen von Hyperlinks in einem Dokument können Sie die Seiten auf Ihrer Website oder externe Seiten aus dem WWW aufrufen.

weiter zu Tutorial:Kapitel3

©2004-2005 KDS Sahambi/R.Richter