CSS-Formate mit Dreamweaver MX definieren
Modernes Webdesign
Inhalt und Layout
CSS-Formate mit Dreamweaver MX definieren
HTML-Dokumenten mit Cascading Styleheets (CSS) ein ansprechendes Layout zu verpassen ist State of the Art eines modernen Webdesigns. Nur so lassen sich Inhalte und Formate klar trennen. Auch die Lesbarkeit eines HTML-Dokuments können Sie damit erheblich verbessern. Der größte Vorteil ergibt sich jedoch für die Wartung und Pflege eines Web-Auftritts.
Die CSS-Formatdefinitionen stehen entweder im Head-Bereich eines Dokuments oder in einer externen CSS-Datei. Sollen im Rahmen eines Redesigns zum Beispiel neue Schriften oder Farben definiert werden, bringt diese Methode entscheidende Vorteile. Die Änderungen müssen nur an einer Stelle vorgenommen werden.
Wenn Sie solche wartungsfreundlichen Seiten produzieren wollen, stellt Ihnen Dreamweaver MX die geeignete Werkzeugkiste zur Verfügung. Über das Text-Menü haben Sie Zugriff auf die CSS-Optionen von Dreamweaver. Dabei können Sie zwischen verschiedenen Vorgehensweisen wählen. Als Profi werden Sie wahrscheinlich eine externe CSS-Datei vorziehen, die Sie dann in die verschiedenen HTML-Seiten Ihres Web-Auftritts einbinden.
Externe CSS-Dateien anlegen
CSS-Formate mit Dreamweaver MX definieren
Über das Menü Datei und die Option Neu legen Sie dazu eine CSS-Datei an. Dann können Sie loslegen. Ist Ihnen die CSS-Syntax geläufig, geben Sie einfach die verschiedenen Formatdefinitionen, die Sie für Ihr Design ausgedacht haben, ein. Auch versierte Webdesigner sind in den meisten Fällen kein wandelndes CSS-Lexikon. Daher dürfte es in den meisten Fällen rationeller sein, den interaktiven Assistenten zur Definition neuer Stile zu nutzen. Der Assistent unterstützt Sie bei der Erstellung von drei Style-Typen: Sie können benutzerdefinierte Stile (Klassen) festlegen, HTML-Tags neu definieren oder CSS-Selektoren verwenden.
Ferner legen Sie im ersten Assistenten-Fenster fest, ob der Stil in das aktuelle Dokument eingebaut oder in eine externe CSS-Datei geschrieben werden soll. Die Auswahl erfolgt dabei über Radio-Buttons. Wenn Sie sich für eine externe Datei entschieden haben, müssen Sie via Windows-Datei-Dialog diese zuerst anlegen.
Externe CSS-Dateien einbinden
CSS-Formate mit Dreamweaver MX definieren
Externe CSS-Dateien müssen Sie in das HTML-Dokument, für das sie gelten sollen, einbinden. Auch dafür stellt Dreamweaver einen Befehl bereit, der Ihnen die lästige Codierung abnimmt. Wählen Sie dazu unter Text und CSS-Stile die Option Stylesheet anfügen. Die einzufügende Stylesheet-Datei wählen Sie dann über den Datei-Dialog aus. Bekanntlich gibt es zwei Varianten für das Einbinden, die CSS- oder die HTML-Syntax. Die gewünschte Variante wählen Sie über Radio-Buttons aus. Es ist nicht notwendig, vorher den Cursor im Head-Bereich des HTML-Dokuments zu platzieren. Dreamweaver stellt den Code für die Einbindung der externen CSS-Datei automatisch an die richtige Position. Das Ergebnis sieht dann für die HTML-Variante folgendermaßen aus:
Für die CSS-Syntax lautet der Eintrag:
Zum Werkzeugsortiment von Dreamweaver für die CSS-Bearbeitung gehö-
ren nicht nur Menüs und Befehle. Auf Wunsch können Sie sich alle Stil-Definitionen in einem so genannten Schwebfenster anzeigen lassen. Sie aktivieren dieses Fenster über den Menüpunkt Fenster und die Option CSS-Stile.
Über Radio-Buttons im oberen Fensterbereich legen Sie den Bearbeitungsmodus fest. Gemeint ist damit, welche Aktion ein Doppelklick auf eine Stil-Definition auslöst. Haben Sie den Anwendungs-Modus gewählt, bauen Sie per Doppelklick den Stil in Ihr Dokument ein. Im anderen Fall öffnet er den Bearbeitungsassistenten, mit dem Sie die diversen Parameter eines Stils modifizieren können.
Stile exportieren
CSS-Formate mit Dreamweaver MX definieren
Eine weitere Arbeitserleichterung beim Anlegen einer externen CSS-Datei bietet Dreamweaver mit einer Export-Funktion. Der Design-Prozess kann dann so ablaufen: Sie entwerfen eine Musterseite, in der Sie alle Stile im Head-Bereich des Dokuments definieren.
Über die Entwurfsansicht oder die integrierte Browser-Anzeige haben Sie stets einen aktuellen Überblick über die Auswirkungen der von Ihnen definierten Stile. Wollen Sie diese Stile anschließend für alle weiteren Seiten, die Sie für Ihren Web-Auftritt produzieren, übernehmen, wählen Sie einfach im CSS-Stile-Menü die Option CSS-Stile exportieren.
Dreamweaver erstellt nun aus den Definitionen im Head-Bereich dieser Seite eine externe Stylesheet-Datei, die Sie in alle weiteren Seiten einbinden können. Allerdings werden die für die Musterseite definierten Stile nicht automatisch gelöscht. Das heißt, an dieser Stelle ist auf der Originalseite noch einige Handarbeit notwendig.
Entwurfszeit-Stylesheets
CSS-Formate mit Dreamweaver MX definieren
Ein weiteres Instrument für eine komfortable CSS-Bearbeitung mit Dreamweaver sind die Entwurfszeit-Stylesheets. Damit können Sie während des Arbeitens an einem Dreamweaver-Dokument verschiedene Stile ein- oder ausblenden. Auf diese Weise können Sie zum Beispiel beim Entwerfen einer Seite die Auswirkung eines Stylesheets ein- oder ausblenden, das nur für Macintosh-Systeme oder nur für Windows gilt.
Entwurfszeit-Stylesheets wirken sich nur während der Entwurfsphase eines Dreamweaver-Dokuments aus. Wenn die Seite in einem Browserfenster angezeigt wird, werden nur diejenigen Stile dargestellt, die tatsächlich mit dem Dokument verknüpft beziehungsweise in dieses eingebettet sind.
So blenden Sie ein CSS-Stylesheet in der Entwurfsphase ein oder aus:
Klicken Sie mit der rechten Maustaste in das Bedienfeld des CSS-Stile-Schwebfensters. Dann wählen Sie im Kontextmenü die Option Entwurfszeit-Stylesheet. Alternativ können Sie die Option auch über das Menü Text und CSS-Stile aktivieren. Legen Sie dann im Dialogfeld fest, ob ein Stylesheet ein- oder ausgeblendet werden soll.
Um in der Entwurfsphase ein CSS-Stylesheet einzublenden, klicken Sie auf die Plus-Schaltfläche über Nur während Entwurfszeit anzeigen. Wählen Sie dann im Dialogfeld Stylesheet auswählen das anzuzeigende CSS-Stylesheet aus.
Um ein CSS-Stylesheet auszublenden, klicken Sie auf die Plus-Schaltfläche über Während Entwurfszeit ausblenden. Wählen Sie dann im Dialogfeld Stylesheet auswählen das auszublendende CSS-
Stylesheet aus. Wenn Sie ein Stylesheet aus beiden Listen entfernen möchten, klicken Sie zunächst auf das betreffende Stylesheet und anschließend auf die entsprechende Minus-Schaltfläche.
Im Bedienfeld CSS-Stile wird der Name des ausgewählten Stylesheets aktualisiert und mit der Statuskennung Versteckt oder Entwurf versehen.
Extensions verwenden
CSS-Formate mit Dreamweaver MX definieren
Sollten Ihnen die von Dreamweaver angebotenen Funktionen für die Arbeit mit CSS noch nicht genügen, können Sie das Programm mit Hilfe von Extensions beliebig aufrüsten.
Der Exchange-Service von Macromedia stellt ein umfangreiches Repertoire an Erweiterungen in Sachen CSS zur Verfügung. Sie können diesen Service über das Hilfe-Menü und die Option Dreamweaver Exchange jederzeit aus dem laufenden Programm heraus starten. Wählen Sie auf der angezeigten Webseite den Punkt Dreamweaver und dann die Kategorie Style/Format.
Die Installation der ausgewählten Erweiterungen erfolgt mit Hilfe des Extension-Managers (Menü Hilfe und Erweiterungen verwalten) weitgehend automatisch. Bevor Sie den angebotenen Fundus nutzen können, müssen Sie sich allerdings beim Exchange-Service von Macromedia kostenlos registrieren.
Zahlreiche Erweiterungen, die Sie im Exchange-Angebot finden und mit denen Sie Dreamweaver aufrüsten können, sind Freeware und stehen damit kostenlos zur Verfügung. Allerdings werden im Rahmen des Exchange-Service auch kommerzielle Produkte gegen Bezahlung angeboten.