Dreamweaver für Fortgeschrittene

Einführung
Fortgeschrittene Tabellentechniken
Frames
CSS
Ebenen/apDivs
HTML-Quellcode in Dreamweaver bearbeiten
Formulare
Medien integrieren
Bilder
Layouthilfsmittel in Dreamweaver
Projektplanung
Siteverwaltung
Produktives Arbeiten
JavaScript und PHP-Integration
Datenbankanbindung mit MySQL
Dreamweaver einrichten und erweitern
Zum Schluss
Literaturhinweise und weiterführende Informationen
Übungen

Cascading Style Sheets, kurz CSS genannt, enthalten Angaben zur Formatierung und Darstellung der Inhalte einer HTML-Datei. CSS erleichtern uns die Trennung von Form und Inhalt eines Webprojektes.
Sie können in einem einzigen Stylesheet die Formatierung für ein gesamtes Webprojekt definieren. Das hat den Vorteil, dass eine Schrift- oder Formatierungsänderung in nur dieser einen Stylesheet-Datei vorgenommen wird und die komplette Website mit allen dazugehörigen Dateien sofort aktualisiert werden kann. CSS werden von allen aktuellen Browsern verstanden (MS Internet Explorer und Netscape ab Version 4 verstehen den größten Teil von CSS Version 1).

Ab der Version CSS 2 ist auch das Positionieren von Elementen möglich. In Dreamweaver werden absolut positionierte Elemente "Ebenen" genannt. Ebenen werden Sie im nächsten Abschnitt genauer kennen lernen.

Technik

Stylesheetangaben können zwar in eine HTML-Datei direkt eingebunden werden, besser ist es aber CSS-Angaben in eine externe Datei auszulagern. CSS-Stile können in Dreamweaver über Fenster > CSS-Stile angelegt und bearbeitet werden. Die externe Datei, die damit erzeugt wird können Sie beispielsweise mit einem Texteditor wie SimpleText oder Emacs bearbeiten. Oder Sie nehmen zum Bearbeiten einen CSS-Editor wie CSSEdit (MacOS X) oder Style Studio (Windows).

CSS-Angaben beginnen mit einem Selektor, dem Stilinformationen zugewiesen werden.
Im folgenden Beispiel ist h1 der Selektor, font-size die Eigenschaft und 18px der Wert, der dieser Eigenschaft zugewiesen wird:

h1 {font-size: 18 px;}

CSS-Definitionen in externen Programmen erstellen

Bei der Windows-Version von Dreamweaver MX 2004 wird das Programm TopStyle Lite mitgeliefert. Mit dieser Software können Sie Ihre CSS-Angaben komfortabel definieren. Die so erstellte externe CSS-Datei lässt sich dann einfach in Dreamweaver einbinden.

Für Mac OS X gibt es den CSS-Editor CSSEdit von MacRabbit (EUR 21,- für Version 1.6). Der hat zwar einen geringeren Funktionsumfang als TopStyle, kommt dafür aber Einsteigern entgegen.

Aufgabe 1

Bauen Sie in den head-Bereich einer HTML-Datei folgendes StyleSheet ein und formatieren Sie einen Absatz als heading 1 (Überschrift erster Ordnung).

Wie bereits erwähnt, sollten CSS-Angaben allerdings besser in eine externe Datei ausgelagert werden. Wie das geht, sehen Sie in der nächsten Aufgabe.

Aufgabe 2

Binden Sie das externe CSS "externes_Stylesheet.css" mit der folgenden Zeile im head-Bereich einer HTML-Seite ein:

<link href="externes_Stylesheet.css" rel="stylesheet" type="text/css">

Aufgabe 3

Im Folgenden üben Sie das anlegen von CSS-Definitionen mit Dreamweaver. Erstellen Sie in Dreamweaver eine externe Stylesheet-Datei mit Angabe der Schriftgröße in Punkt, Überschriftenformatierung, Laufweite des Textes, farbigen Links, Hintergrundbild ohne Kachelung und verschiedenen Listenformatierungen.

Schritt für Schritt

1. Kopieren Sie sich die Datei "css_vorlage.html" auf Ihren Rechner und öffnen Sie sie. Diese Datei enthält keine Formatierungen. Diese legen Sie jetzt in einer Stylesheet-Datei an. In der fertig formatierten Datei "css_vorlage_mit_stil.html" und deren eingebundener CSS-Datei "ratundhilfe_stil.css" sehen Sie, wie das Ergebnis aussehen soll.

Über die CSS-Stile-Palette haben Sie die Möglichkeit, eine bereits vorhandene CSS-Datei (ein so genanntes Stylesheet) Ihrer HTML-Seite anzufügen, eine neue CSS-Datei anzulegen oder ein bestehendes Stylesheet zu bearbeiten.

Klicken Sie auf die Schaltfläche "neue CSS-Datei anlegen".

Um einen Stil für Ihren Fließtext zu definieren, wählen Sie als Typ "HTML-Tag neu definieren" und das "p" im Feld "Tag" (Formatierungs-Markierung) aus.

Es gibt 3 verschiedene Typen von Stilen:
a. Benutzerdefinierter Stil: Sie können sich hier einen eigenen Stil mit eigenem Namen anlegen. Dieser erscheint direkt in der CSS-Stile-Palette und wird von dort aus angewendet. Ein benutzerdefinierter Stil hat immer einen Punkt (.) am Anfang seines Namens.
b. HTML-Tags sind vordefinierte Tags, wie z.B. "p" für "Absatz" oder "h1" für "Überschrift erster Ordnung".
c. Mit dem CSS-Selektor können Sie Formate für Links definieren.

Unter "Definieren" klicken Sie "neue Stylesheet-Datei" an (in der obigen Abbildung steht hier schon der Name der angelegten CSS-Datei "ratundhilfe_stil.css"). Es soll eine neue, externe Datei werden, die auch in andere HTML-Seiten eingebunden werden kann.
Wenn Sie jetzt auf "OK" klicken, öffnet sich das Fenster zum Speichern Ihrer Datei. Geben Sie der Datei einen Namen, z.B. "ratundhilfe_stil.css". Achten Sie am Mac darauf, dass die CSS-Datei die Endung ".css" hat. Unter Windows geschieht das automatisch.

Nach dem Speichern öffnet sich das Fenster für die Definition des eben angelegten Stils:

Geben Sie unter "Typ" (das englische Wort "type" hätte Macromedia auch mit "Schrift" übersetzen können) bitte Schriftart "Arial, Helvetica, sans-serif" ein, Größe "12 Punkt".

Klicken Sie "OK". Text, den Sie mit p (Absatz, engl. paragraph) formatiert haben, erscheint jetzt in der Arial oder einer serifenlosen Schrift.

Um Stile zu bearbeiten, zu löschen oder Ihre Dateien mit anderen externen CSS-Dateien zu verknüpfen, klicken Sie in der CSS-Stile-Palette auf das Icon "Stylesheet bearbeiten". Folgendes Fenster öffnet sich:

Sie sehen Ihre eingebundene CSS-Datei. Aktivieren Sie sie und klicken auf "Bearbeiten". Hier sehen Sie bereits angelegte Stile aufgelistet.

2. Als nächstes legen Sie verschiedene neue Stile an:

HTML-Tag "h1": Sie können verschiedene Überschriften formatieren (h1 bis h6). Wählen Sie "h1". Schriftart "Arial, Helvetica", Größe "18 Punkt", Farbe "990000". Markieren Sie den Text "Rat und Hilfe" in der Vorlage und wählen in der Eigenschaftenpalette unter "Format" den Punkt "Überschrift 1" aus.

HTML-Tag "h2": Schriftart "Arial, Helvetica", Größe "12 Punkt", Farbe "990000", Stärke "fett". Dieser Stil formatiert die drei Überschriften "Asthma, Diphtherie und Blutreinigung.

Benutzerdefinierter Stil ".wichtig": Sie sehen im Eingabefeld den Text ".unnamed". Benennen Sie den neuen Stil mit ".wichtig". Benutzerdefinierte Stile haben immer einen Punkt am Namensanfang. Schriftart soll "Arial, Helvetica" sein, Größe "12 Punkt", Stärke "fett". Der neue Stil taucht direkt in der CSS-Stilepalette auf. Markieren Sie in der Vorlage den Text "Hier finden...Themen" und klicken dann in der CSS-Stilepalette auf Stil "wichtig".

Benutzerdefinierter Stil ".laufweite": Typ: "Arial, Helvetica, 12 Punkt"; Klicken Sie dann auf Kategorie "Block" und geben als Wortabstand "8 mm" ein. Markieren Sie den Text "EIN BERATER UND...." und weisen ihm den Stil ".laufweite" zu.
Beachten Sie, dass der Wortabstand erst im Browser zu sehen ist.
Sie müssen sich gut überlegen, welche Stylesheeteigenschaften Sie verwenden wollen. Bei der Laufweitenänderung ist z.B. das Problem, dass die sie nur im Internet Explorer ab Version 6.0 auf dem PC und 5.0 auf dem Mac zu sehen ist.

HTML-Tag "a": Mit diesem Stil weisen Sie den Links eine Farbe zu. Geben Sie die gleichen Formatierungen wie die, des Fließtextes ein. Die Farbe des Links soll "000099" sein. Um den erstellten Stil zu testen, markieren Sie den Text "weiter zur nächsten Seite...." und geben in der Eigenschaftenpalette als Link eine beliebige html-Seite an.

HTML-Tag "body": Die Vorlage soll das Hintergrundbild "bg.gif" erhalten. Dies hatten wir bisher über die Seiteneigenschaften (Modifizieren > Seiteneigenschaften) gemacht. Hier jedoch binden wir ein Hintergrundbild mit Hilfe von Stylesheets ein. Das hat den Vorteil, das wir das Bild positionieren können, festlegen können, ob es nach rechts, unten oder gar nicht kacheln (sich wiederholen) soll und ob es beim Scrollen stehen bleibt oder mitläuft. Legen Sie also einen neuen Stil "body" an. Angaben zum "Typ" (zur Schriftart) brauchen Sie nicht, klicken Sie auf "Hintergrund".

Hintergrundfarbe: lassen Sie leer, die ist bereits mit den Seiteneigenschaften auf "weiß" eingestellt.
Hintergrundbild: bg.gif
Wiederholen: das Bild soll nach rechts kacheln, sich also auf der x-Achse wiederholen.
Anlage: rollen; das heißt, das Bild rollt beim Scrollen mit.
Horizontale Position: links; das Bild soll am linken Rand liegen.
Vertikale Position: oben; das Bild soll am oberen Rand liegen.

Achtung! Hier enthält Dreamweaver 4 einen Bug (Programmfehler). Wenn Sie sich die Datei "ratundhilfe_stil.css" in einem Texteditor ansehen, sehen Sie unter "Body" ganz am Ende folgendes:

background-position: left left

Das zweite "left" steht für die vertikale Ausrichtung und muss "top" lauten, wenn das Element oben ausgerichtet sein soll. Ändern Sie bitte das zweite "left" in "top" um (direkt "von Hand" in der CSS-Datei).

HTML-Tag "geordnete Liste (ol)": Die beiden Absätze des Themas "Diphtherie", ab "Die fleischigen Blätter...." sollen als Liste dargestellt werden. Legen Sie den Stil "ol" (ordered list) an. Kategorie Typ: Arial, Helvetica; 12 Punkt. Kategorie Liste: Typ "dezimal", Aufzählungsbild und Position bleiben leer. Markieren Sie die beiden Absätze und stellen unter Menü Text > Liste "geordnete Liste" ein.

HTML-Tag "ungeordnete Liste (ul)": Die 3 Absätze des Themas "Blutreinigung" ab "Ein weiteres ganz...." sollen als Liste mit eigener Grafik für die Listenpunkte dargestellt werden. Legen Sie den Stil "ul" an. Kategorie Typ: Arial, Helvetica; 12 Punkt. Kategorie Liste: Typ bleibt leer, Aufzählungsbild "listenpunkt.gif, Position leer. Markieren Sie die drei Absätze und stellen unter Menü Text > Liste "ungeordnete Liste" ein.

Ihre Datei ist fertig formatiert!

Wenn Sie jetzt weitere Seiten erstellen würden, könnten Sie über die CSS-Stile-Palette problemlos die erstellte CSS-Datei einbinden und somit alle Formatierungen übernehmen.

Wie Sie im Fenster für die Sitedefinition gesehen haben, gibt es viele weitere Möglichkeiten, eine Website zu formatieren. Probieren Sie verschiedene Stile aus!

Tipps

Nicht alle Browser unterstützen alle Eigenschaften der CSS-Spezifikation. Ein empfehlenswertes Nachschlagewerk zu Kompatibilität ist auch hier wieder selfhtml von Stefan Münz.
Testen Sie ihre CSS Angaben in allen relevanten Browsern.
Produzieren Sie plattformunabhängig, Ihre Webseiten müssen in allen aktuellen Browser funktionieren.

Wenn Sie eigene Stile definieren, können Sie Klassen oder IDs verwenden. Klassen (class) werden für wiederkehrende Elemente, IDs für einmal vorkommende Elemente genommen.

Eine manuelle Formatierung im HTML-Quelltext wie z. B. eine Schriftartangabe setzt die Formatierungsangaben des Stylesheets in den meisten Browsern außer Kraft. Achten Sie daher darauf, Text und andere Objekte nur noch mit Stylesheets zu formatieren. Entfernen Sie alle überflüssigen manuellen Formatierungen aus Ihrem Quellcode.

Probieren Sie weitere CSS-Techniken aus. Farben lassen sich beispielsweise auch prozentual (color: rgb(60%,90%,75%);) oder in RGB-Werten definieren. Die Eigenschaft float verschiebt Absätze an den rechten oder linken Rand des Browsers.
Hier noch einige ausgewählte CSS-Spezialitäten, die allerdings zum Teil nicht in allen Browsern funktionieren:
Erzeugen Sie einen Einzug mit "indent".
"cursor:help" stellt den Fragezeichencursor auf dem Monitor da.
Einen Rahmen mit gepunkteter Linie bekommen Sie über: "border-style:dotted"
media="print" legt fest, dass die hier definierten Angaben nur im Ausdruck angewendet werden.

Es gab in Dreamweaver 4 die Möglichkeit, mit sogenannten "HTML-Stilen" (Fenster > HTML-Stile) zu arbeiten. Mit einem HTML-Stil formatierter Text ändert sich allerdings nicht nachträglich, wenn Sie den HTML-Stil in der Palette verändern. In Dreamweaver MX 2004 gibt es diese HTML-Stile nicht mehr.

Netscape 4.x "vergisst" leider die CSS-Formatierung bei einer Größenänderung des Browserfensters. Dreamweaver bietet dafür ein JavaScript - den "Netscape-Resize Fix" an, den Sie unter Menü Befehle > Netscape Resize-Fix hinzufügen in Ihre Seite einbinden können.
Netscape 4.x stellt CSS nur mit aktiviertem JavaScript dar.

Ein weiteres Problem ergibt sich in Netscape 4.x, wenn Sie einem Hintergrundbild die Eigenschaft "fixed" zuweisen. Eigentlich sollte fixed das Scrollen des Hintergrundbildes verhindern. In Netscape 4 klappt das jedoch nicht. Das Hintergrundbild wandert mit, wenn im Browserfenster gescrollt wird.

Um die zahlreichen Probleme mit Netscape 4.x und CSS zu umgehen, können Sie die problematischen CSS-Angaben in eine eigene externe Datei auslagern. Wenn Sie diese Datei mit @import url(Pfad_zur_CSS-Datei); in eine HTML-Seite einbinden, werden diese CSS-Angaben von Netscape 4 ignoriert. Haben Sie einen PHP-fähigen Webserver, so können Sie auch per PHP-Skript abfragen, mit welchem Browser der Anwender Ihre Webseiten betrachtet und das zum Browser passende StyleSheet in den head-Bereich der HTML-Seite einsetzen.

Verwenden Sie bei flexiblen Weblayouts möglichst relative Größenangaben, statt absoluter. Wenn Sie Schriftgrößen für die Druckversion eines Stylesheets definieren, können Sie die Schriftgröße in Punkt angeben, für die Bildschirmausgabe aber ist bei pixelgenauen Layouts eine Größenangabe in Pixel sinnvoll. Der Internet Explorer 6 kann allerdings eine so definierte Schrift nicht skalieren, was für Benutzer mit Sehbehinderung zu einem Problem werden kann. Bei flexiblen Layouts sind relative Größen wie em oder Prozent vorzuziehen.

In den vorangegangenen Aufgaben hatten Sie gesehen, wie man Stylesheet -Angaben mit Hilfe von Dreamweaver erstellen kann. Bei komplexeren CSS-Angaben, wie z.B. beim Positionieren von Seitenobjekten und dem Erstellen eines kompletten Seitenlayouts per CSS reicht das aber nicht aus und die CSS-Angaben sollten von Hand geschrieben werden. Denn die aktuellen Browser interpretieren gerade beim Positionieren von Seitenelementen die CSS-Angaben zum Teil noch sehr unterschiedlich, so dass Sie wissen müssen, wie sich bestimmte CSS-Eigenschaften in den wichtigsten Browsern auswirken. Dreamweaver MX 2004 liefert für solche Aufgaben zwar Vorlagen, Sie müssen die CSS-Anweisungen aber verstehen, um die Vorlagen den eigenen Wünschen anzupassen. Sie sollten also spätestens jetzt einen Editor starten und Ihre Stylesheets von Hand erstellen.

Wie bereits erwähnt, gibt es in einer CSS-Datei Selektoren, denen Eigenschaften zugewiesen werden. Im folgenden Beispiel ist h1 der Selektor, font-size die Eigenschaft und 18px der Wert, der der Eigenschaft zugewiesen wird:

h1 {font-size: 18 px; }

Es ist möglich, mehrere Selektoren auf einmal zu formatieren:

p, h1, h2 {color: red; }

Oder einem Selektor mehrere Stil-Anweisungen zuzuweisen:

p {color: red; font-size: 18 px; }

Die externe CSS-Datei wird jetzt in eine HTML-Seite eingebunden :

<link href="pfadZurCSS-Datei.css" rel="stylesheet" type="text/css">

Als Selektoren hatten wir in den vorangegangenen Übungen HTML-Tags wie p oder h1 verwendet. Sie können aber auch eigene Klassen definieren, die dann im HTML-Code einem Abschnitt über <div> und <span>-Tags zugewiesen werden können. Eine solche selbst definierte Klasse kann folgendermaßen erstellt werden:

.meineKlasse { color: #cc3366; }

Im HTML-Code wird diese Klasse wie folgt eingebunden:

<p>
In diesem Text sind <span class="meineKlasse"> einige Buchstaben</span> farbig.
</p>

Klassendefinitionen beginnen mit einem Punkt. Neben den Klassen gibt es die sogenannten IDs. Klassen können in einem HTML-Dokument an mehreren Stellen verwendet werden, eine ID ist dokumentenweit einzigartig und darf nur einmal vorkommen. Eine ID-Definition im Stylesheet beginnt mit einer Raute (Doppelkreuz) # . Als dritte Möglichkeit gibt es die Pseudoklassen. Diese werden vom Ausgabegerät nur unter bestimmten Bedingungen angezeigt. Ein Beispiel dafür ist a:visited. Hier werden einem bereits besuchten Hyperlink CSS-Angaben zugewiesen. Pseudoklassen beginnen mit einem Doppelpunkt.

Falls es für ein Element mehrere Stil-Anweisungen gibt, werden die Anweisungen nach bestimmten Regeln abgearbeitet. Als wichtig (!important) markierte Anweisungen überschreiben andere Regeln. Spezifische Regeln werden vor allgemeinen bevorzugt. Später definierte Anweisungen überschreiben vorangegangene Formatierungen.

Kontrollfragen und Übungen

Worin liegt der Unterschied zwischen dem Umdefinieren eines bestehenden HTML-Tags und dem Erstellen einer eigenen Klasse?

Erstellen Sie eine HTML-Datei, in der ein Teil des Inhalts nur am Monitor gezeigt, aber nicht gedruckt wird (Dafür benutzen Sie den CSS-Befehl media="screen"). Und ein anderer Teil des Inhalts nur gedruckt, nicht aber am Monitor angezeigt wird.

Weiterführende Hinweise

CSS von Hand erstellen: http://sfk-online.com/support/internet/css.php
Tricks mit Stylesheets: http://www.drweb.de/csspraxis/
CSS-Referenz zum Nachschlagen: http://de.selfhtml.org/navigation/css.htm
CSS-Unterstützung einzelner Browser (englisch): http://www.westciv.com/style_master/academy/browser_support/index.html
CSS Kompatibilität (deutsch): http://www.css4you.de/browsercomp.html
CSS Kurzreferenz: http://www.ilovejackdaniels.com/css_cheat_sheet.png
Beispiele für Seitenlayout mit CSS: http://www.csszengarden.com
CSS-Praxis, Kai Laborenz , Gallileo Press, ISBN 3-89842-577-0

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