Rheinwerk Design < openbook > Rheinwerk Design - Know-how für Kreative.
Know-how für Kreative

Inhaltsverzeichnis
1 Einleitung
2 Projektablauf für die Buchwebsite
3 Programmgrundlagen
4 Dreamweaver erweitern
5 Eine Site erstellen
6 Grundlegende Dokumenteinstellungen
7 Tabellen in Dreamweaver
8 Bilder im Web
9 Framesets
10 Aktionen
11 Die Zeitleiste
12 CSS in Dreamweaver
13 Ebenen
14 Hyperlinks
15 Vorlagen und Bibliotheken
16 Formulare
17 Quelltext de Luxe
18 Dreamweaver und Flash
19 Office-Daten einfügen
20 Dynamische Websites – eine Einführung
21 Einführung in PHP
22 Lokalen Webserver installieren
23 Dynamische Sites in Dreamweaver einrichten
24 MySQL-Grundlagen
25 Datenbanken mit Dreamweaver anbinden
26 PHP und Dreamweaver
27 Datenbanken abfragen
28 Daten einfügen und dynamische Formulare
29 Datensätze bearbeiten
30 Benutzer authentifizieren und Zugriffsrechte festlegen
31 Fortgeschrittene Techniken
32 Dreamweaver 8 und XML
33 Menüs für dynamische Verhalten
Stichwort
Ihre Meinung?

Spacer
 <<   zurück
Dreamweaver 8 von Richard Beer, Susann Gailus
Webseiten entwickeln mit HTML, CSS, XML, PHP und MySQL
Buch: Dreamweaver 8

Dreamweaver 8
mit CD
639 S., 39,90 Euro
Rheinwerk Design
ISBN 978-3-89842-739-5
gp 12 CSS in Dreamweaver
  gp 12.1 Ein wenig Theorie zum Einstieg
  gp 12.2 CSS-Voreinstellungen
  gp 12.3 Neue CSS-Werkzeuge auf einen Blick
    gp 12.3.1 Medientypen
    gp 12.3.2 Layout-Hilfsmittel
  gp 12.4 Vorgehensweise und Regeln
  gp 12.5 Arten von CSS-Stilen
    gp 12.5.1 Interne CSS-Stile
    gp 12.5.2 Externe CSS-Stile
    gp 12.5.3 CSS-Syntax
  gp 12.6 Selektor-Typen
    gp 12.6.1 Klassen-Selektoren
    gp 12.6.2 Tag-Selektoren
    gp 12.6.3 Kontext-Selektoren
    gp 12.6.4 ID-Selektoren
  gp 12.7 Erstellen und Bearbeiten von CSS–Stilen
    gp 12.7.1 Das CSS-Bedienfeld
    gp 12.7.2 Neue CSS-Regeln erstellen
    gp 12.7.3 CSS-Regeln bearbeiten
    gp 12.7.4 CSS-Regel für Texte
    gp 12.7.5 Zuweisen von CSS im Eigenschafteninspektor
    gp 12.7.6 Verknüpfen externer CSS-Dateien
    gp 12.7.7 CSS-Regeln für unterschiedliche Ausgabemedien
  gp 12.8 CSS-P-Layout ohne Tabellen
    gp 12.8.1 CSS-P für barrierefreies Webdesign
    gp 12.8.2 Das CSS-Boxmodell
    gp 12.8.3 CSS-Stile und Div-Elemente
  gp 12.9 Besondere CSS-Anwendungen
    gp 12.9.1 Browserleisten mit CSS-Stilen verändern
    gp 12.9.2 Verschiedene CSS-Stile anbieten


Rheinwerk Computing

12.7 Erstellen und Bearbeiten von CSS–Stilen  downtop

Es gibt mehrere Möglichkeiten, CSS-Stile in Dreamweaver 8 zu erstellen und zu bearbeiten. Das Ganze kann anfangs ziemlich verwirren.


Rheinwerk Computing

12.7.1 Das CSS-Bedienfeld  downtop

Das CSS-Bedienfeld ist die zentrale Verwaltung aller Stile, sowohl derjenigen, die sich in verknüpften CSS-Dateien befinden, als auch der direkt im Dokument vorhandenen.

Abbildung 12.6 Das CSS-Bedienfeld

Sie können auswählen , ob Sie nur die relevanten CSS-Stile des aktuell im Dokumentfenster ausgewählten Elements oder Alle vorhandenen CSS-Stile anzeigen möchten.

Unter der Anzeige aller Eigenschaften der gewählten CSS-Regel können Sie auswählen, ob Ihnen in der Informationsleiste die Informationen über den Tag , dem die Regel zugewiesen wurde, oder die Regel selber angezeigt werden soll.

Eigenschaften anzeigen und hinzufügen | Bereits vorhandene Eigenschaftswerte werden im Auswahlfeld eingestellt. Klicken Sie einfach auf den Wert einer Eigenschaft, und Sie können entweder aus einem kleinen Popup-Menü zur Verfügung stehende Parameter auswählen oder selber welche per Hand eintragen. Weitere Eigenschaften können Sie hinzufügen, indem Sie auf den Link Eigenschaft hinz… klicken.

Anzeige im Bedienfeld | In welcher Weise die bereitstehenden Eigenschaften angezeigt werden, legen Sie mit den Icons unten links fest. Sie können zwischen einer Auflistung in Kategorien , einer rein alphabetischen Auflistung und der Anzeige der aktuell bereits vorhandenen Eigenschaften auswählen.

CSS-Regeln bearbeiten | Auf der rechten Seite des Bedienfeldes sind die verschiedenen Aktionen untergebracht, um CSS-Dateien zu verknüpfen , eine neue CSS-Regel zu definieren , vorhandene CSS-Regeln in einer weiter unten beschriebenen Dialogbox zu bearbeiten oder eine CSS-Regel vollständig zu löschen .


Rheinwerk Computing

12.7.2 Neue CSS-Regeln erstellen  downtop

Welche Methode Sie zum Erstellen auch wählen, immer gelangen Sie zur in Abbildung 12.8 gezeigten Dialogbox Neue CSS-Regel.

Abbildung 12.7 Dialogbox Neue CSS-regel

Mit dieser Dialogbox können Sie auswählen, mit welchem Selektor-Typ Sie arbeiten möchten. Dreamweaver 8 bietet bei den Kontext-Selektoren leider nur Verlinkungen an.

Es gibt jedoch eine ganze Menge mehr. Diese müssen Sie gegebenenfalls von Hand eintragen.

Wenn Sie einen ID-Selektor anlegen möchten, müssen Sie das Zeichen # von Hand eintragen.

Um eine externe CSS-Datei anzulegen, wählen Sie in der Dialogbox Neue Stylesheet-Datei aus und vergeben dieser in der dann folgenden, weiteren Dialogbox einen Namen mit der Dateiendung .css.

CSS-Stil-Definition | Wenn Sie einen Selektor ausgewählt haben, erscheint das Menüfenster CSS-Regel-Definition, in dem Sie den CSS-Stil für den ausgewählten Selektor definieren. Klicken Sie abschließend auf OK.

Abbildung 12.8 Dialogbox CSS-Stil-Definition


Rheinwerk Computing

12.7.3 CSS-Regeln bearbeiten  downtop

Wählen Sie ein beliebiges, mit CSS-Regeln formatiertes Element im Dokumentfenster aus. Sie können daraufhin alle Eigenschaften direkt im Bedienfeld CSS-Stile einstellen und neue hinzufügen.

Wählen Sie im Bedienfeld alle aus und doppelklicken Sie auf den gewünschten Stil. Dreamweaver 8 führt dann die von Ihnen in den Voreinstellungen festgelegte Aktion zum Bearbeiten der CSS-Regel aus.

Abbildung 12.9 Vorhandene CSS-Regeln bearbeiten

CSS-Bearbeitung voreinstellen | In den Voreinstellungen für die Bearbeitung vorhandener CSS-Regeln können Sie im Menüpunkt CSS-Stile festlegen, wie Dreamweaver die CSS-Bearbeitung als Standard vornehmen soll.

Abbildung 12.10 Bearbeitungsmodus festlegen


CSS-Referenz einsetzen
Der Nachteil des Bedienfelds CSS-Stile ist, dass auch Attribute angezeigt werden, die nicht in allen Browsern verfügbar sind. Ziehen Sie also im Zweifelsfall die Referenz zu Rate und testen Sie Ihre Einstellungen in allen relevanten Browsern. Die in Dreamweaver 8 integrierte Referenz ist sehr gut. Sie ist in der Bedienfeldgruppe Code zu finden.


Rheinwerk Computing

12.7.4 CSS-Regel für Texte  downtop

Die häufigste Anwendung von CSS-Regeln dürften Textformatierungen sein.

Beachten Sie, dass Schriften nur dann angezeigt werden, wenn sie auf dem System des Benutzers installiert sind. Das ist nur bei vier Schriften definitiv überall der Fall: Arial, Courier, Times und Verdana. Wenn Sie ein professionelles Layout anstreben, sollten Sie keine anderen Schriften einsetzen.

Schriftgrößen im Internet | Uns verwundert immer wieder die Diskussion über die richtigen Schriftgrößen im Internet. Geben Sie Schriften nie in Punktgrößen an, die Darstellung unterscheidet sich bedingt durch die Bildschirmauflösungen auf Mac und PC enorm. Verwenden Sie Pixelgrößen und diese Probleme treten nicht auf.

Auf der Website von Apple finden Sie unter http://developer.apple.com/internet/fonts/fonts_gallery.html eine hervorragende Gegenüberstellung der Schriftgrößen auf verschiedenen Systemen.

Ein gutes Layout wirkt auch durch die Proportionen der einzelnen Elemente zueinander. Dazu gehört auch die Schrift. Grafiken werden grundsätzlich in Pixelgrößen angegeben. Geben Sie nun die Schrift ebenfalls in Pixelmaßen an, stimmt auch das Größenverhältnis zwischen Schrift und Grafiken.

Nicht alle von Dreamweaver 8 angebotenen Schriftformatierungen funktionieren in allen Browsern. Sicher können Sie bei Schriftgrößen, Font, Farbe, Auszeichnung und bei den Zeilenabständen sein.


Rheinwerk Computing

12.7.5 Zuweisen von CSS im Eigenschafteninspektor  downtop

Stile können in Dreamweaver direkt über den Eigenschafteninspektor zugewiesen werden. Damit gewinnt das Programm enorm an Komfort, zumal die CSS-Stile auch gleich im korrekten Format als Vorschau angezeigt werden.

Abbildung 12.11 Zuweisen von CSS-Stilen über den Eigenschafteninspektor

Anklicken statt Markieren | Arbeiten Sie beim Zuweisen von Schriftformatierungen unbedingt sorgsam. Klicken Sie, wenn Sie einem Absatz einen CSS-Stil zuweisen möchten, einfach in den Absatz. Markieren Sie auf keinen Fall den gesamten Absatz.

Markiert wird nur, wenn Sie einzelnen Zeichen oder Worten ein Format zuweisen möchten. Wenn Sie markierten Zeichen einen CSS-Stil zuweisen, erstellt Dreamweaver 8 automatisch einen <span>-Tag:

<span class="headline_1"> Pluvia refectorium vita O</span>

Wenn Sie nicht aufpassen, wimmelt Ihr Dokument bald von diesen Tags.

Es kommt dann häufig vor, dass diese Tags nicht gelöscht werden, wenn Sie Elemente innerhalb der Tags entfernen. Führen Sie am besten immer eine HTML-Optimierung durch, nachdem Sie Ihre Arbeiten fertig gestellt haben.


<p> oder <br>
Achten Sie darauf, dass Dreamweaver 8 beim Betätigen von in Texten immer einen Absatz erzeugt. Beim Formatieren gibt es nichts Schlimmeres als 100 Absätze in einem Text. Erstellen Sie Absätze wirklich nur dort, wo auch tatsächlich ein Absatz sein soll. Zudem sind die Zeilenabstände bei Absätzen deutlich größer. Wenn Sie innerhalb eines Absatzes bleiben möchten, aber dennoch einen Zeilenumbruch benötigen, halten Sie die -Taste gedrückt und drücken dann die . Dreamweaver 8 erzeugt dann keinen Absatz, sondern einen Zeilenumbruch <br>.


Rheinwerk Computing

12.7.6 Verknüpfen externer CSS-Dateien  downtop

Um eine externe CSS-Datei mit Ihrem Dokument zu verknüpfen, klicken Sie im Bedienfeld CSS auf das Verknüpfungssymbol (siehe Seite 207). In einer Dialogbox können Sie dann die bereits bestehende CSS-Datei auswählen.

Wenn Sie möchten, können Sie an dieser Stelle einen Medientyp für die in der Datei enthaltenen CSS-Regeln vorgeben.

Abbildung 12.12 Anfügen externer CSS-Dateien


Rheinwerk Computing

12.7.7 CSS-Regeln für unterschiedliche Ausgabemedien  toptop

Wie weiter oben erwähnt, können sich CSS-Regeln in einem Dokument auf unterschiedliche Ausgabegeräte beziehen.

Abbildung 12.13 Verschiedene Darstellungen auf unterschiedlichen Medientypen

In unserem Beispiel (siehe Abbildung 12.14) wurden zwei externe CSS-Dateien verknüpft. Die Datei screen.css erhielt beim Verknüpfen den Medientyp Screen, die externe Datei print.css den Medientyp Druck.

In beiden CSS-Dateien wurden Regeln mit der gleichen Bezeichnung deklariert. Der einzige Unterschied ist die Einstellung der Schriftgrößen in Pixel in der Datei screen.css und in Punktgrößen in der Datei print.css.

In Dreamweaver 8 können Sie direkt zwischen den Darstellungen der verschiedenen Medientypen wählen, wie im Abschnitt 12.3 beschrieben.



Ihre Meinung

Wie hat Ihnen das Openbook gefallen? Wir freuen uns immer über Ihre Rückmeldung. Schreiben Sie uns gerne Ihr Feedback als E-Mail an kommunikation@rheinwerk-verlag.de.

 <<   zurück
  
  Zum Rheinwerk-Shop
Zum Rheinwerk-Shop: Adobe Dreamweaver CS3
Die Neuauflage:
Adobe Dreamweaver CS3
Jetzt bestellen


 Ihre Meinung?
Wie hat Ihnen das Openbook gefallen?
Ihre Meinung

 Buchtipps
Zum Rheinwerk-Shop: Adobe Dreamweaver CC






 Adobe
 Dreamweaver CC


Zum Rheinwerk-Shop: Adobe Dreamweaver CC Einstieg






 Adobe Dreamweaver
 CC Einstieg


Zum Rheinwerk-Shop: Responsive Webdesign






 Responsive Webdesign


Zum Rheinwerk-Shop: Suchmaschinen-Optimierung






 Suchmaschinen-
 Optimierung


Zum Rheinwerk-Shop: Schrödinger lernt HTML5, CSS3 und JavaScript






 Schrödinger lernt
 HTML5, CSS3
 und JavaScript


 Lieferung
Versandkostenfrei bestellen in Deutschland, Österreich und der Schweiz
InfoInfo




Copyright © Rheinwerk Verlag GmbH 2006
Für Ihren privaten Gebrauch dürfen Sie die Online-Version natürlich ausdrucken. Ansonsten unterliegt das Openbook denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt.
Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.


Nutzungsbestimmungen | Datenschutz | Impressum

Rheinwerk Verlag GmbH, Rheinwerkallee 4, 53227 Bonn, Tel.: 0228.42150.0, Fax 0228.42150.77, service@rheinwerk-verlag.de

Cookie-Einstellungen ändern