Arbeiten mit Text in Dreamweaver
Der Font-Tag und seine Attribute
%

Texte schreiben in Dreamweaver: Eine normale HTML-Seite wird von links nach rechts, von oben nach unten beschrieben. Der Text fließt also zur rechten Rand des Fensters. Was nicht mehr in die Zeile passt, wird in die nächste Zeile umbrochen, denn die Browser über keine Trennungsprogramme verfügen. Infolge dessen entstehen Löcher im Text, schnell werden die Abschlussränder "unschön", es entsteht der sg. "Treppeneffekt", was auch die Lesbarkeit des Textes schwer beeinflusst.

Eigenheiten bei den Texten auf  Webseiten:

  • Auswahl und Größe der Schriften ist begrenzt
  • die Blockausrichtung entfällt
  • der "harte" Zeilenumbruch ist unüblich
  • Sie, als Autor haben wenig Einfluss darauf, wie Ihre Seite im Browser dargestellt wird, denn das ist davon abhängig, welchen Browser, Betriebsystem, Monitorauflösungen der Benutzer verwendet und welche Schriftgrößen er eingestellt hat.
Wie Sie jedoch Ihren Text mit Hilfe der Basisstile formatieren können ist in den nachfolgend aufgelisteten Abschnitten beschrieben. Das Kennen des Font-Tags und seiner Attribute (hier als Überschriften zu den einzelnen Abschnitte angeführt), ist Voraussetzung für die Textformatierung in Website-Design.

%
%eventuell Bildlegende zum Screenshot
Schriftgröße
Schriftgröße: <font sizes>
Die Größe des Textes wird immer von der Standardgröße des benutzten Browsers ausgehend dargestellt. Wenn Sie die Standardgröße verändern, werden alle davon abhängigen Schriftgrößen des Font-Tags kleiner oder größer. Dreamweaver unterstützt im Schriftmenü die absoluten Größen (1-7) sowie die relativen Größen Vergrößern (+1 bis+7) und verkleinern (-1-7)
<font sizes="+7 "></font> diese Anweisung bezieht sich auf die Schriftgröße. Das Attribut size"+7" bedeutet, dass der Text siebenmal größer ist als die Standard-Textgröße. Die Angabe size"-1" würde die Schrift von der Standardgröße aus um eine Stufe verkleinern.


%
%eventuell Bildlegende zum Screenshot
Headline (Überschrift)
Headline: <H>
Sie können einem beliebigen Textabschnitt die Eigenschaft Headline zuweisen, mit dem <H>-Tag.
Insgesamt gibt es in HTML sechs Abstufungen: von <H1> bis <H6>. Sie können einem beliebigen Textabschnitt die Eigenschaft Headline zuweisen. Die Zeile wird automatisch umbrochen, weil H-Tags Blockelemente sind. Aus dem gleichen Grund können auch nicht mehrere verschiedene H-Tags in der selben Zeile stehen. Wenn Sie mit verschiedenen Schriftgrößen in einem Absatz oder in einer Zeile arbeiten wollen, benutzen Sie hierfür das Font-Tag

Praktische Durchführung in Dreamweaver: in der Eigenschaftspalette bei angewählter Text


%
%eventuell Bildlegende zum Screenshot
Schriftfarbe

Schritfarbe: <color>
wird durch das Attribut <color="#33FF00">angegeben

Praktische Durchführung in Dreamweaver: in der Eigenschaftspalette bei angewählter Text


%
%eventuell Bildlegende zum Screenshot
Text zentrieren (ausrichten)
Text zentrieren: <center>
wird durch das <center></center> Tag definiert, das den Text samt der Font-Anweisung umklammert.
Bsp.:<center><font size="+7"color="#33FF00">hier kommt der Text</font></center>.

Praktische Durchführung in Dreamweaver: in der Eigenschaftspalette bei angewählter Text


%
%eventuell Bildlegende zum Screenshot
Absatz (Textabschnitt)
Absatz: <p>
<p> für neuer Paragraph (Leerzeile). Dieses ELement definiert Textabschnitte (Absätze).
Quellcode: <p>hier kommt der Text.</p>

Praktische Durchführung in Dreamweaver: Text mit einer Zeilenschaltung (Return-Taste) abschließen oder in der Objektpalette "Absatz" einfügen..




Das P-Tag wird unten in der Statusleiste im Tag_Selektor als <p> angzeigt. Es erweist sich schwierig, mit diesem automatisch impliziertem P-Tag umzugehen. Wenn sie das Tag aus bestimmten Gründen einmal löschen wollen - z.B. um es durch ein anderes zu erstetzen - tun Sie dies am einfachsten im Eigenschaftsinspektor: Sie klicken in den Text und wählen unter Format statt Absatz - Keine.
%eventuell Bildlegende zum Screenshot
Texteinzug
Einzüge <BLOCKQUOTE>
Der Einzug spielt beim Erstellen verschachtelter Listen eine Rolle.
Sie finden dieses Tag im Menü Text: Einzug (Negativeinzug), im Kontextmenü Liste: Einzug oder im Eigenschaftsinpektor rechts unten.

Praktische Durchführung in Dreamweaver: in der Eigenschaftspalette bei angewählter Text


%
%eventuell Bildlegende zum Screenshot
Listen und Aufzählungen

Listen und Aufzählungen: <li>, <ul>, <ol>
Es gibt zwei verschiedene Listenformen: Listen mit numerierter Aufzählung, die sogenannten Ordered Lists und die Listen mit punktueller Aufzählung, die sogenannten Unordered Lists. Auch innerhalb einer Liste funktionieren die normalen Tags zur Formatierung des Textes wie <p> oder <b></b>.


Quellcode für Unordered List <ul>:

Bei den ungeordneten Listen <ul> sind die Aufzählungszeichen Symbole (Kreis, Quadrat).
<ul> zeigt, dass eien Unordered List kommt
  <li> zeigt, dass ein Aufzählungspunkt folgt <li>
    <li> ein weiterer <li>-Tag markiert den nächsten Aufzählungspunkt <li>
</ul> beendet die Liste


Quellcode für Ordered List <ul>:
Bei den nummerierten Liesten <ol> sind die Aufzählungszeichen Zahlen und Buchstaben (1, i, l, A etc).
<ol> zeigt, dass ein Orderd List kommt
 <li> zeigt, dass ein Aufzählungspunkt folgt
   <li> ein weiterer <li> -Tag markiert den nächsten Aufzählungspunkt <li>
</ol> beendet die Ordered Liste

Praktische Durchführung in Dreamweaver: in der Eigenschaftspalette bei angewählter Text
Beide Arten können kombiniert werden. Um eine Liste zu erstellen, gehen Sie folgendermaßen vor:

  • Schreiben Sie jeden Listenpunkt auf
  • Trennen Sie die einzelnen Listenpunkte durch Absätze
  • Markieren Sie alle Listenpunkte
  • Wählen Sie Text: Liste: UNgeordnete Liste (Kontextmeü) oder klicken Sie auf das Symbol im Eigenschafteninspektor. Sie erhalten eine Liste mit Listenpunkten (bulletpoints).Um diese Liste in eine geordnete Liste umzuwandeln, wählen Sie Text: Liste: Geordnete Liste. Sie erhalten eine durchnummerierte Liste mit Zahlen.

Im Fenster "Listeneigenschaften" (in der Eigenschaftpalette, Listenelement-Schalter) bestimmen Sie das Aussehen der Aufzählungspunkte. Diese Funktion ist nur dann zu wählen, wenn der Listenbereich in der Entwurfansicht ausgewählt wird. Ein Klicken auf der <L>-Tag hilft meistens nicht.



%
%eventuell Bildlegende zum Screenshot
Inline-Elemente
Inline-Elemente:
Durch Inline Elemente formatierte Textabschnitte werden in Dreamweaver als Auswahlbereiche bezeichnet und durch Auswahlstile definiert: Normal, Fett, Kursiv und Fett Kursiv (Text: Stil).

Praktische Durchführung in Dreamweaver: in der Eigenschaftspalette, bei angewählter Text oder in der Texteinfügen-Kartei in der Objektpalette




%
%eventuell Bildlegende zum Screenshot
Sonderzeichen
Sonderzeichen: &auml, &uuml, &ouml, &szlig
Die nicht im international festgelegten Standardzeichensatz vorkommenden Zeichen werden mittels einer Zeichenfolge definiert.

Praktische Durchführung in Dreamweaver:
In der Objektpalette Zeichen finden Sie die gebräuchlichsten Zeichen. Wenn Sie auf den rechten Knopf drücken, erhalten Sie eine Tabelle mit weiteren Zeichen.
Besonderheiten gibt es bei den deutschen Sonderzeichen ä, ü, ö, ß. Sie werden durch spezielle Zeichen ersetzt, damit der Browser sie versteht.
Quellcode für Sonderzeichen:
ä wird zum &auml;
ü zu &uuml;
ö zu &ouml und
ß zu &szlig.


%
%eventuell Bildlegende zum Screenshot
Zeilenumbruch
Zeilenumbruch <br>
Praktische Durchführung in Dreamweaver:
(BR-Tag) erreichen Sie mit Schift (Umschalt) + Enter oder in der Objektpalette mit dem Zeilenumbruch einfügen - Zeichen.



%eventuell Bildlegende zum Screenshot
Leerzeichen
Leerzeichen: &nbs
Praktische Durchführung in Dreamweaver:
("&nbs") können Sie mit Hilfe der Strg + Alt + Leerzeichen eingeben.


%eventuell Bildlegende zum Screenshot
Geschützte Leerzeichen

Geschützte Leerzeichen: &nbsp (non-breaking space)
Leerzeichen, dass den Text davor und danach zusammenhält.
Die Verwendung nicht trennenden oder geschützten Leerzeichen ist dort notwendig, wo Texte nicht ausseinandergerissen werde darf. Bsp.: mehrstellige, gruppierte Zahlen (Telefonnummern, Kontonmmer), Namen und Nachnamen, Eigennamen oder Produktnamen.

Codebeispiel für "Indesign 1.5.2"
InDesign &nbsp 1.5.2

Praktische Durchführung in Dreamweaver:


%eventuell Bildlegende zum Screenshot
Verhindern den Umbruch eines Textes

Umbruchverbot <nobr>
können Sie auf Ihrer Seite mit dem <nobr>-Tag (no break) erstellen. Alle zwischen dieser Tag stehenden Worte werden in einer Zeile dargestellt. Das <wbr>-Tag (wordbreak) hingegen funktioniert wie ein "weiches" Trennzeichen in einer Textverarbeitung. Das Wort wird an einer definierten Stelle getrennt, wenn der Platz in der Zeile nicht ausreicht. Das macht besonders bei langen Kuppelwörtern, um große Weißräume im Satz zu vermeiden, die durch umbrechende Wörter entstehen. (Ursache: HTML hat keinen Silbentrennungsprogramm integriert, daher lange Wörter, wenn nicht mehr in einer Zeile passen, werden umgebrochen)

Praktische Durchführung in Dreamweaver:
Da Dreamweaver diese Elemente nicht unterstützt, müssen Sie sie im Quellcode eingeben. Der Text,der nicht umgebrochen werden soll, soll zwischen <nobr> und </nobr>-Tag stehen.

Codebeispiel:
<nobr> Das ist der Text, der nicht umgebrochen werden soll </nobr>


%eventuell Bildlegende zum Screenshot