Kontakt aufnehmen

Textformatierung in Dreamweaver

Wenn auch Bilder mehr als tausend Worte sagen können, haben Texte eine tragende Rolle für jeden Web-Auftritt. Mit Dreamweaver ist es ein Kinderspiel, Texte professionell zu gestalten und zu pflegen. Formatierung, Textfarbe und Schriftarten sind mit wenigen Klicks festgelegt oder bei Bedarf zu einem späteren Zeitpunkt änderbar.

Importfunktion

Wenn Sie bereits Texte in Microsoft Word erstellt haben und diese für Ihr Web-Projekt verwenden möchten, brauchen Sie die Schreibarbeit weder doppelt ausführen, noch mit "Copy and Paste" in die Webseite einzufügen. Dreamweaver bietet eine bequeme Importfunktion für Word-Dokumente. Dazu wählen Sie unter "Datei - Importieren" die Option "Word-Dokument". Es öffnet sich ein Auswahlfenster, in dem Sie einfach die entsprechende Word-Datei auswählen und mit "Öffnen" in das innerhalb von Dreamweaver geöffnete HTML-Dokument laden können. Der große Vorteil eines solchen Importes ist die Erhaltung zahlreicher Formatierungen, die in Word bereits vorgenommen wurden. Auch Excel-Dokumente lassen sich genau so leicht in eine Webseite mittels Dreamweaver importieren. Nur wenn man den Import-Dialog über "Datei - Importieren" für den BODY - Bereich der HTML-Datei auswählt, ist die Option WORD und EXCEL verfügbar. Ansonsten können nur XML- und Tabellen-Daten eingelesen werden. Auch der Eigenschaftsinspektor für Textelemente ist nur aktiv, wenn der Cursor in der Code-Ansicht innerhalb des BODY - Bereiches steht.

Der Eigenschaftsinspektor für Textelemente
Darstellung: Der Eigenschaftsinspektor für Textelemente

Überschriften

Die für einen Text notwendigen Überschriften erstellt man in Dreamweaver, indem man den entsprechenden Textabschnitt mit Hilfe der Maus markiert und im Eigenschaftsinspektor unter "Format" die gewünschte Überschriftengröße auswählt. Entsprechend des HTML-Standards gibt es hier sechs Überschriften, die den HTML-Tags <H1> bis <H6> entsprechen. Das kann man auch sehr schön bei einem geteilten Dokumentenfenster in der oberen Code-Ansicht beobachten.

Absätze

Absätze lassen sich ebenfalls sehr einfach erzeugen. Man markiert wieder den Textabschnitt, der als Absatz formatiert werden soll. Dann wählt man unter "Format" im Eigenschaftsbedienfeld die Option "Absatz", und schon findet man den Textabschnitt in der oberen Codeansicht (oder durch Wechsel auf die Codeansicht in der Leiste oberhalb des Dokumentenfensters) die HTML-Tags <P> und </P> um den Textabschnitt gruppiert.

Schriftarten

Wählt man im Eigenschaftsinspektor für die Texte die Schriftart "Standard", so wird entweder die Standardschriftart des Browsers verwendet, der später zum Öffnen des Dokumentes verwendet wird, oder die Schriftart, die in einem CSS-Stylesheet entsprechend definiert wurde. Alternativ kann man hier einem Text(-abschnitt) auch eine spezielle Schriftart zuweisen, die jedoch zu den im Web gebräuchlichen gehören sollte. Ansonsten ist nicht sichergestellt, dass der spätere User die Schriftart auch so sehen wird, wie man es selbst plant.

Stil

Für den Schriftstil kann man fett (B) oder kursiv (I) verwenden, oder aber man nutzt die Möglichkeit, einen speziellen Stil, also ein CSS-Stylesheet, zu verwenden. Wählt man im Eigenschaftsinspektor unter "Stil" die Option "Stile verwalten", öffnet sich ein Fenster namens "Stylesheet bearbeiten". Mit der Schaltfläche "Neu" kann man die Erstellung eines eigenen Stylesheets starten. Wie das geht, wollen wir uns später ansehen. Für den Beginn greifen wir auf die Muster-Stile von Dreamweaver zurück. Dazu wählt man die Schaltfläche "Anfügen" und dort den Link "Muster - Stylesheets". Das entsprechende Fenster öffnet sich und erlaubt die Auswahl eines Stils aus über 20 Stilen. Die Auswahl wird erleichtert durch die automatische Vorschaufunktion. Wählt man einen Muster-Stil aus, so stehen danach die verschiedenen Formatierungsvorlagen unter Stil für jedes einzelne Textelement zur Verfügung.

Schriftgröße

Man kann aber zum Beispiel die Schriftgröße auch ohne Stil-Erstellung direkt auswählen, wenn auch die Verwendung von Stylesheets für einheitliche Webseiten dringend anzuraten ist. Als Schriftgröße kann man die Voreinstellung "Standard" belassen, so dass die Schriftgröße, die im Browser eingestellt ist, zur Anwendung kommt. Man kann aber auch von der Standard - Schriftgröße ausgehend eine kleinere oder größere Schrift festlegen oder bestimmte Schriftgrößen definieren.

Schriftfarben

Auch die Schriftfarbe sollte am besten über CSS definiert werden. Wer trotzdem die Farbe des Textes direkt einstellen möchte, kann dies für jedes einzelne Textelemente durchführen, indem man den jeweiligen Text markiert und im Eigenschaftsinspektor die Farbe aus einer Palette auswählt. Leider ist diese Option durch die Standardfarbe nur als unauffälliges Kästchen rechts neben der Schriftgröße untergebracht. Zu finden ist auch ein Eingabefeld für den RGB - Farbcode, falls man diesen kennt und genau festlegen will.

Listen und mehr

Ein nützliches Textfeature sind Listen, zum Beispiel um auf seinen Webseiten die Inhalte eines Angebotes aufzuzählen. Wie in HTML definiert stehen geordnete und ungeordnete Listen per Knopfdruck zur Verfügung. Weitere Symbole im Eigenschaftsbedienfeld stellen Funktionen für den Texteinzug, Negativeinzug sowie Blocksatz, rechtsbündiger und linksbündiger Text oder zentrierter Text zur Verfügung. Das ebenfalls vorgesehene Eingabefeld für Hyperlinks ist Gegenstand des nächsten Kapitels. Wie zuvor bereits beschrieben, ist der Eigenschaftsinspektor kontextsensitiv, sieht also zum Beispiel für Tabellen oder Grafiken ganz anders aus. Darauf gehen wir in den entsprechenden Kapitel noch näher ein.

Du arbeitest in einer Agentur oder als Freelancer?
Dann wirf doch mal einen Blick auf unsere Software FeatValue.

Weiterlesen: ⯈ Integration von Hyperlinks und Multimedia-Elementen

Über uns

Stefan Wienströer

Wir entwickeln Webanwendungen mit viel Leidenschaft. Unser Wissen geben wir dabei gerne weiter. Mehr über a coding project

Cookie-Einstellungen

Helfen Sie dabei, uns noch besser zu machen. Wir nutzen Cookies und ähnliche Technologien, um die Website auf Ihre Bedürfnisse anzupassen. Zur Datenschutzerklärung

Auswahl speichern