Dreamweaver für Einsteiger

Die Dreamweaver Programmoberfläche
Texte und Bilder formatieren
Seitenlayout mit Tabellen
Bilder und Farben
Einführung in einfache Javascripte
HTML Quellcode
Veröffentlichen von Webprojekten
Gifanimationen, Hintergrundbilder und Imagemaps
Über die Grundlagen hinaus
Literaturhinweise und weiterführende Informationen

Zunächst arbeiten Sie mit Dreamweaver wie in einem normalen Textverarbeitungsprogramm, die Texte bearbeiten Sie direkt auf Ihrer Seite.
Die Bilder, die Sie in Ihrem Dokument verwenden wollen, müssen im GIF- oder JPEG-Format vorliegen.
In der folgenden Übung werden Sie Texte und Bilder formatieren und zwei Seiten miteinander verlinken.

Die Technik

So formatieren Sie Texte und Bilder

Wenn Sie ein Bild in Ihre HTML-Seite laden wollen, geht das NICHT etwa über Datei > Öffnen, sondern einfach über Einfügen > Bild.

Schrift und Bilder formatieren Sie über die Eigenschaftenpalette.

Da wir nicht wissen, welche Schriften auf dem Computer des Besuchers Ihrer Seiten installiert sind, müssen Sie sich zunächst auf Arial/Helvetica, Times und Courier beschränken. Diese Standardschriften stehen normalerweise auf jedem Computer zur Verfügung.
Klicken Sie in der Eigenschaftenpalette in das kleine Dreieck unten rechts, um weitere Optionen dieser Palette anzuzeigen bzw. auszublenden.

Aufgabe

Bauen Sie die Datei "einfach.html" nach, formatieren Sie Text, fügen Sie Bilder ein.

Schritt für Schritt

1. Erstellen Sie sich für diese Aufgabe einen neuen Ordner, nennen Sie den Ordner "Texte und Bilder".

2. Kopieren Sie die Bilder und Rohtexte von Ihrer Schulungs-CD aus dem Verzeichnis "dreamweaver1/texte_und_bilder/material" (oder vom sfk-Supportserver ) in Ihren soeben erstellten Ordner.

3. Erstellen Sie in Dreamweaver eine neue Datei (Menü Datei > Neu) und sichern Sie die Datei unter dem Namen "rat_und_hilfe1.html" in Ihren Ordner "Texte und Bilder".

4. Laden Sie das Bild "einguterrat.gif" mit dem Menüpunkt Einfügen > Bild in Ihre Datei. Die Ausrichtung des Bildes soll rechts am Rand sein. Hierfür klicken Sie neben (nicht auf!) das Bild und stellen in der Eigenschaftenpalette den Absatz auf "rechtsbündig".

5. Den Text kopieren Sie sich aus der Datei "Rohtext.html" mit Bearbeiten > Kopieren in die Zwischenablage und fügen ihn mit Bearbeiten > Einfügen in Ihre HTML-Datei "rat_und_hilfe1.html" ein. Alternativ könnten Sie sich den Text auch einfach aus der Vorlage mit Kopieren und Einfügen in Ihre Datei holen.

6. Formatieren Sie den Text mit der Eigenschaftenpalette. Für den gesamten Text die Schriftart "Arial, Helvetica". In Dreamweaver bis zur Version 4 formatieren Sie die Überschrift Größe "6", Fließtext Größe "3", Hyperlink Größe "2". In Dreamweaver ab Version MX wird der Schriftgrad standardmäßig mit CSS-Angaben definiert. Hier können Sie Größenangaben wie beispielsweise 12 Pixel oder 18 Punkt verwenden. Auf das Thema Schriftformatierung per CSS werden wir später genauer eingehen.

7. Erstellen Sie eine zweite Seite "rat_und_hilfe2.html", die Sie in Ihren Ordner "Texte und Bilder" sichern. Die beiden Seiten werden mit einem Hyperlink verbunden.

8. Erstellen Sie den Hyperlink auf der Seite "rat_und_hilfe1.html", indem Sie den Text "weiter zur nächsten Seite" markieren und in der Eigenschaftenpalette neben dem Eingabefeld "Hyperlink" in das kleine Ordnersymbol klicken. Dort wählen Sie "rat_und_hilfe2.html" aus. Der Link ist jetzt gesetzt. Genauso verfahren Sie mit der zweiten Seite. Schreiben Sie hier nur den Text "....und zurück" und verlinken ihn mit der ersten Seite.

9. Klicken Sie auf das Erdkugelsymbol oder drücken Sie F12, um Ihre Dreamweaverdatei im Browser zu betrachten und zwischen Ihren beiden Seiten hin und her zu springen.

Tipps

Wie Sie Bilder optimal für das Internet abspeichern, finden Sie im ImageReady Tutorial.
Setzen Sie sich ein Lesezeichen auf das Verzeichnis mit den Übungsmaterialien. Sie werden im Verlauf dieser Schulung öfter darauf zugreifen.
Das Copyright für die Texte und Bilder unserer Übungen liegt beim "Rat und Hilfe Verlag", Sonthofen.

Kontrollfragen und weitere Übungen

Welche Schriftarten stehen Ihnen beim Erstellen von Webseiten zur Verfügung?
Wie richten Sie einen Absatz rechtsbündig aus?
In der Eigenschaftenpalette finden Sie die wichtigsten Einstellungen zum Formatieren von Text. Schauen Sie auch, welche weiteren Formatierungsmöglichkeiten Sie im Menü Text finden.

Letzte Aktualisierung dieser Datei am: 24.1.2007
Autor: Stephan Franke · Impressum und Hinweise zu diesen Seiten · Suche
Diese Seiten wurden produziert von: sfk

Haben Sie Anregungen, Kritik oder Ideen zu dieser Seite? Sie können hier einen Kommentar schreiben.
Ihr Kommentar wird am Ende dieser Seite angefügt.

Bislang wurden zu dieser Seite keine Kommentare geschrieben