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

Im World Wide Web wird bei Bildern in erster Linie mit zwei Speicherformaten gearbeitet: JPEG und GIF. Wenn Sie versuchen, ein FreeHand-Dokument oder eine TIFF-Datei direkt in eine HTML-Seite zu importieren, wird das nicht funktionieren - Sie müssen solche Dateien erst in das JPEG- oder GIF-Format exportieren.
Programme wie z.B. Fireworks, Photoshop oder ImageReady eignen sich gut für die Erstellung von Webgrafiken. Diese Programme speichern die Bilder in bestmöglicher Qualität bei möglichst kleiner Dateigröße ab. Außerdem können Sie in diesen Programmen Gifanimationen erstellen, große Bilder in Tabellen zerschneiden oder mit den sogenannten "websicheren Farben" arbeiten.

Die Technik:

Nehmen Sie das JPEG-Format, wenn Sie ein Motiv mit vielen Farben z.B. eine Wiese mit Frühlingsblumen haben. Das GIF-Format ist für Grafiken mit wenig Farben gedacht, z.B. ein Firmen-Logo. Verwenden Sie keine zu großen Bilder, in Ihren Webseiten. Eine 50 KB große Datei braucht ca. 20 Sekunden um mit einem durchschnittlichen Modem übertragen zu werden - wer hat schon Lust, 20 Sekunden lang untätig vor seinem Bildschirm auf das Laden eines Bildes zu warten?
In HTML werden Farben entweder mit Hexadezimalwerten (z. B. #ff0000) oder als Farbnamen (z. B. red) bezeichnet. Die Hexadezimalwerte geben die Anteile von Rot, Grün und Blau an.

Aufgabe

Bauen Sie die Datei "Bilder_und_Farben_Vorlage.html" nach.

Schritt für Schritt

1. Erstellen Sie eine Tabelle: Zeilen = 2, Spalten = 3, Breite = 700px, Zellauffüllung = 15px (Pixel). Die linke Spalte erhält eine Breite von 70px, die rechte Spalte 269px, die mittlere Spalte bekommt keine Größenangabe.

2. Ihre Seite soll die Hintergrundfarbe "990000" (das ist ein freundliches Rostbraun) erhalten. Gehen Sie über das Menü Modifizieren > Seiteneigenschaften in das Eingabefeld für die Hintergrundfarbe und geben dort die genannte Farbe ein.

3. Laden Sie die Grafik "einberater.gif" aus dem Materialordner in die Zelle rechts oben. Die Hintergrundfarbe dieser Grafik ist "cc9966". Diese Farbe weisen Sie jetzt auch der oberen Zeile Ihrer Tabelle zu. Aktivieren Sie die komplette obere Zeile und geben in der Eigenschaftenpalette die Hintergrundfarbe (HgF) ein.

4. In die untere rechte Zelle kopieren Sie den Text aus der Datei "Rohtext.html" hinein. Der Text soll die Farbe "ffffff" erhalten, Schriftart soll "Arial/Helvetica" und "fett" sein. Ausrichtung: vertikal = oben.

5. Als nächstes fügen Sie eine Tabelle in eine bestehende Tabellenzelle ein. Dies kann manchmal sehr hilfreich sein, um Objekte oder Texte genauer zu positionieren. In unserem Fall handelt es sich um eine mit dem Programm "ImageReady" erstellte Tabelle, die 8 GIFs enthält. Diese GIFs liegen nicht im Ordner "Material", sondern im Ordner "vorlage/images". Damit wird gewährleistet, dass der Pfad zu Ihrem HTML-Dokument stimmt. Kopieren Sie sich also zuerst den Ordner "images" dorthin, wo auch Ihr Dokument "bilder_und_farben.html" liegt. Nun kopieren Sie sich die gesamte Tabelle aus dem Dokument "slices.html" (auch im Ordner "vorlage") und setzen sie in die untere mittlere Zelle ein. Sie sehen, dass diese Tabelle aus 8 Zellen besteht. Jede Zelle enthält eine Grafik.

6. Ihre Seite ist fertig. Schauen Sie sich Ihr Werk zum Schluss im MS Internet Explorer und im Netscape Navigator an. Es empfiehlt sich übrigens, auch zwischen den einzelnen Arbeitsschritten die Seite im Browser zu testen.

Tipps

1. Neben dem GIF und JPEG-Format gibt es im WWW auch das PNG-Format. Dieses Format wird aber von älteren Browsern wie z.B. Netscape 3 nicht unterstützt. Weitere Formate wie SVG und Flash bieten sich für Vektorgrafiken an. Diese Bilder werden aber nur bei installiertem Plug-In angezeigt.
2. Es gibt die Möglichkeit, ein Bild als Hintergrund in eine Tabellenzelle zu legen. Vorteil: Sie können über dieses Hintergrundbild zusätzlich Text oder andere Bilder in die Zelle laden. Nachteil daran ist, dass sich das Bild "kachelt", das heißt, es wiederholt sich in der Zelle horizontal und vertikal. Probieren Sie es einfach aus. Klicken Sie in eine Tabellenzelle und dann im Eigenschaftenfenster neben "Hg" in den kleinen Ordner. Wählen Sie wieder die Grafik "einberater.gif" aus. Sie sehen, dass die Grafik die Zelle durch den Kacheleffekt ausfüllt.
Sie entfernen Sie dieses Hintergrundbild wieder, indem Sie einfach den Text in der Zeile "Hg" in der Eigenschaftenpalette löschen.
3. Wenn Sie ein Hintergrundbild in eine ganze Tabelle legen, haben Sie ein Problem mit Netscape 4. Der Browser zeichnet das Hintergrundbild in jeder Zelle neu. Legen Sie stattdessen Hintergrundbilder nur in einzelne Tabellenzellen und verwenden Sie besser keine Hintergrundbilder für die ganze Tabelle, wenn Ihr Zielpublikum noch mit Netscape 4.x arbeitet.
4. Dreamweaver bietet uns in seiner Farbpalette beim Einfärben von Objekten die sogenannten "websicheren Farben" an. Diese 216 Farben können im Netscape Navigator und Microsoft Internet Explorer auf Windows- und Macintosh-Systemen auch auf älteren, weniger leistungsfähigen Monitoren problemlos dargestellt werden.

Kontrollfragen und Übungen

Was sind websichere Farben?
Wie können Sie eine FreeHand-Datei im Web veröffentlichen?
Speichern Sie aus Photoshop, ImageReady oder Fireworks die Datei "Qualitaetstest.tif" als GIF sowie als JPEG ab, vergleichen Sie Qualität und Dateigrößen.
Bauen Sie die Datei "Bilder_und_Farben.html" mit einem eigenen Screendesign.

Literaturhinweise und Links

Websichere Farben

Letzte Aktualisierung dieser Datei am: 09.6.2005
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