Dreamweaver 8 und CSS
Stilvoll

CSS-basiertes Design

Dreamweaver 8 und CSS

Dreamweaver hat in den langen Jahren seines Bestehens eine große Fangemeinde um sich geschart ? entsprechend gespannt sind zahlreiche Webdesigner auf Neuentwicklungen. Neben neuen Layout-Funktionen wie Zoom, verbesserten Coding-Funktionalitäten oder der Unterstützung von XML/XSL sind CSS-Formatierungen ein zentrales Thema im neuen Editor. Beim Webdesign bilden gerade Cascading Stylesheets eine wichtige Grundlage ? einerseits helfen sie, das Design auf allen Seiten einheitlich zu halten, anderseits bieten sie eine rasche Veränderungsmöglichkeit der Site-weiten Darstellung, indem man, statt jede Seite öffnen und ändern zu müssen, nur einen Wert in einer zentralen Steuerungsdatei modifiziert.

Das CSS-basierte Design hat in der Regel längst das tabellenbasierte Design abgelöst. Tabellen verursachen zumeist komplexeren Code und können nicht vernünftig von Screenreadern gelesen werden, was die Benutzerfreundlichkeit der jeweiligen Site für im Sehvermögen eingeschränkte Anwender erheblich mindert. Kein Wunder also, dass Macromedia wie schon in der Vorgängerversion MX 2004 auch bei Dreamweaver 8 schwerpunktmäßig zahlreiche Funktionen zur Website-Gestaltung via CSS anbietet. Dies umfasst nicht nur die verbesserten Anzeigen, die für mehr Übersicht sorgen und schnellere Zugriffsmöglichkeiten bieten, sondern außerdem auch visuelle Hilfen, die CSS-Bestandteile der Webseite hervorheben.

Die Darstellung der mit CSS formatierten Bereiche wurde vom Hersteller optimiert und kommt jetzt näher an das Endergebnis heran ? allerdings sollten Sie die Umsetzung weiterhin mit den verschiedenen Browsern testen, auf die hin Sie optimieren möchten.

Flott: CSS-Bedienfeld

Dreamweaver 8 und CSS

Macromedia hat das generelle CSS-Handling modifiziert. Beispielsweise ist das aus der vorigen Version bekannte Bedienfeld CSS-Stile verschwunden ? stattdessen findet man nun alle relevanten Informationen sehr gut aufgegliedert im so genannten CSS-Bedienfeld, das als zentrale Schaltstation zur Auszeichnung fungiert. Unter anderem lassen sich darin beispielsweise Selektoren wie H1 oder p auswählen und die zugehörigen Attribute und Werte im darunter angezeigten Bereich per Direkteingabe modifizieren.

Zwei Reiter erhöhen zudem die Übersichtlichkeit: Sie erlauben den Zugriff entweder auf alle definierten Regeln oder aber auf die Regel, die zum jeweils in der Arbeitsfläche aktivierten Block (Designmodus) oder aber zum Codeblock (Programmiermodus) gehört. Gerade diese Option zeigt sich in der Anwendung sehr hilfreich, da man dort sehr schnell gewünschte Modifizierungen vornehmen kann, die sich sofort auf die jeweiligen Bereiche niederschlagen.

Visualisierungen

Dreamweaver 8 und CSS

Macromedia hat mehrere Anzeigemodi in Dreamweaver integriert, die es erlauben, verschieden definierte Bereiche voneinander abzugrenzen und auf einen Blick zu erkennen. Das entsprechende Anzeige-Icon findet sich in der Dokument-Symbolleiste und erlaubt den Zugriff auf CSS-Hintergründe, CSS-Box-Models sowie auf Outlines.

Insbesondere die Option CSS-Box-Models sollten Sie genauer in Augenschein nehmen ? haben Sie diese Einstellung aktiviert, können Sie Blockelemente aktivieren und erhalten daraufhin zahlreiche zusätzliche Informationen direkt als Tooltipps angezeigt, wenn Sie den Mauszeiger länger über dem Blockelement belassen. Beispielsweise zeigt Ihnen Dreamweaver 8 verwendete margins und paddings an sowie unter anderem Daten wie eine verwendete ID, um was für ein Tag es sich handelt oder aber, welche Breite das Element aufweist.

Sonderfunktionen

Dreamweaver 8 und CSS

Sonderfunktionalitäten bietet eine etwas versteckte Symbolleiste, die es Ihnen erlaubt, Simulationen unterschiedlicher CSS-konformer Medien vorzunehmen. Denn: CSS lässt sich eben nicht nur in Webbrowsern anwenden, sondern ebenso in anderen Ausgabemedien. Beispielsweise lassen sich getrennte Stylesheets für die Bildschirmdarstellung, für die Druckausgabe, für Handhelds oder aber für Videobeamer, Terminalfenster und TV-Geräte definieren. Vor diesem Hintergrund ist die Symbolleiste Style Rendering sinnvoll: Sie rufen sie in der englischen Version über View, Toolbars, Style Rendering auf ? Dreamweaver bietet Ihnen daraufhin die Möglichkeit, die jeweilige Darstellung Ihrer Seite auf den verschiedenen Medien zu testen. Ein nettes Feature, das allerdings momentan wahrscheinlich noch nicht viele Anwender gebrauchen können.

Mit Vorlagen arbeiten

Dreamweaver 8 und CSS

Ein gute Möglichkeit, sich die Funktionsweise der CSS-Optionen zu verdeutlichen, bieten die schon mitgelieferten vorgefertigten Designs, die Sie aufrufen können, wenn Sie eine neue Seite erstellen möchten. Wenn Sie File, New wählen, aktivieren Sie im erscheinenden Dialog ein CSS-basiertes Layout und klicken auf Create. Jetzt können Sie mit den oben genannten Optionen die verschiedenen Darstellungsmodi austesten.

Navigation abkupfern

Dreamweaver 8 und CSS

Gerade für Einsteiger interessant: Man kann sich so manches aus den mitgelieferten Vorlagen von Macromedia abgucken. Die in der Regel im so genannten Halo-Design gehaltenen Vorlagen bieten in der Analyse einige Umsetzungen, die man für eigene Sites gut gebrauchen kann.

Beispielsweise lassen sich Navigationsvorlagen abkupfern. Das folgende Menü finden Sie in der dreispaltigen CSS-Vorlage in Dreamweaver 8. Im Ergebnis erhalten Sie einen Navigationsbereich, der auf Mouseover reagiert und den Hintergrund farblich verändert. Die vollständigen Listings finden Sie auf der Heft-CD, hier sind die Beispiele gekürzt.

Die Definition des div-Containers erfolgt über die ID sectionLinks, die im CSS so aussieht:


#sectionLinks{
position: relative;
margin: 0px;
padding: 0px;
border-bottom: 1px solid #cccccc;
}
#sectionLinks a {
display: block;
border-top: 1px solid #cccccc;
padding: 2px 0px 2px 10px;
}
#sectionLinks a:hover{
background-color: #dddddd;
}


ID oder class?

Dreamweaver 8 und CSS

Im Navigationsbeispiel wurde von Macromedia eine ID zur Auszeichnung eingesetzt ? dies ist jedoch nur in Ausnahmefällen zu empfehlen. IDs lassen sich auf einer HTML-Seite nur einmalig als Auszeichnung anwenden ? eine weitere Navigation auf dieser Basis in derselben HTML-Seite ist also nicht möglich. Sie erkennen die Definitionen von IDs in der CSS-Datei an der vorangestellten Raute (#). Besser ist zumeist der Einsatz von class, welches Sie im Stylesheet am vorangestellten Punkt erkennen.

Sub-Definitionen

Dreamweaver 8 und CSS

Nicht selten benötigen Sie gesonderte Auszeichnungen für Standardelemente wie Tabellen, die
ab und zu auf der Site auftreten und die nicht der eigenen Standard-Definition für Tabellen entsprechen.

Hier hilft die Bestimmung einer gesonderten class weiter, in diesem Fall der Klasse admintable. Das Beispiel zeigt dabei eine wichtige Grundlage bei der Arbeit mit unterschiedlichen Standard-Tag-Definitionen für td, a und so weiter. Im Ergebnis haben diese Auszeichnungen auf Site-weite Definitionen für td oder a keinen Einfluss.


.admintable
{
background-color:white;
}
.admintable thead td
{
font-family : Verdana;
background-color:lightgrey;
font-weight:bold;
color:black;
}
.admintable td
{
background-color:#99CCCC;
font-family : Verdana;
color:black;
}


Für die Klasse admintable wurden gesonderte Definitionen für die Tabellenkopfzeile (thead) sowie für die darin vorkommende Tabellenzelle (td) vorgenommen.

Mehr Sub-Definitionen

Dreamweaver 8 und CSS

Interessanter wird es, wenn man noch eine Ebene tiefer geht und beispielsweise die Erscheinung von Links in Zellen der Klasse admintable definiert.


.admintable td a:link
{
font-size : 10px;
color:black;
}
admintable td a:visited
{
font-size : 10px;
color:red;
}


Die Anwendung der obigen CSS-Definitionen sieht im HTML-Code folgendermaßen aus.

Alle Dateien zum Workshop finden Sie auf der Heft-CD und im Bereich Listings auf der Website.