Galileo Design < openbook > Galileo 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

Download:
- ZIP, ca. 33 MB
Neuauflage bestellen
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
Galileo 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


Galileo Computing

12.6 Selektor-Typen  downtop

Die verschiedenen Arten von Selektoren ergeben sich aus der Art der Anwendung im Dokument. Im Einzelnen sind dies Klassen-Selektoren, Tag-Selektoren, ID- und Kontext-Selektoren. Die Bezeichnung »Selektoren« beschreibt sehr gut die Eigenschaft der einzelnen CSS-Stile, einen Bereich zu selektieren und dann auf diesen selektierten Bereich Stilvorgaben anzuwenden.


Galileo Computing

12.6.1 Klassen-Selektoren  downtop

Klassen werden durch einen Namen mit vorangestelltem Punkt deklariert. In Listing 12.4 finden Sie eine Klassendefinition. Die definierte Klasse heißt in diesem Fall stilvorlage.

Listing 12.4 Deklaration der Klasse stilvorlage

<style type="text/css">
<!--
..stilvorlage {
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 11px;
 color: #000000;
}
-->
</style>

Klasse anwenden | Klassen sind Sammlungen von Eigenschaften. Sie müssen explizit auf einen Tag angewandt werden, um eine Wirkung zu erzielen. Dabei spielt es keine Rolle, in welchem Bereich des Dokuments die Klasse angewandt wird.

Grundsätzlich besteht ein CSS-Stil mit Klassen-Selektoren immer aus zwei Teilen – einer ist die Regel, der zweite die Anwendung des Stils im HTML-Tag.

Listing 12.5 Anwendung des zuvor deklarierten Stils

<span class="stilvorlage">Stilanwendung</span>

Den der Klassendefinition vorangestellten Punkt müssen Sie bei Dreamweaver 8 nicht eintragen, es sei denn, Sie schreiben den Stil von Hand direkt in den Quelltext. Achten Sie darauf, keine Sonderzeichen etc. zu verwenden. Es gelten hier die üblichen Regeln für Dateinamen in UNIX-Systemen.

Auskommentieren für ältere Browser | Sie können die eigentliche CSS-Regel in spitze Kommentarzeichen setzen, damit die Definition von alten Browsern, die kein CSS unterstützen, nicht als Text ausgegeben wird.


Galileo Computing

12.6.2 Tag-Selektoren  downtop

Nicht nur über Klassen können Formate zugewiesen werden, sondern auch jedem HTML-Element – mit Ausnahme nicht zu schließender Tags wie <br>. Die Deklaration sieht folgendermaßen aus:

Listing 12.6 Formatierter HTML-Tag

body {
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 11px;
 color: #000000;
}

Automatisch zugewiesen | CSS-Stile mit Tag-Selektoren müssen Sie im HTML-Element nicht explizit zuweisen. Die Formatierungen werden automatisch verwendet, wenn der entsprechende Tag im Dokument vorkommt. Üblicherweise werden formatierte Tags bei Tabellen, Body-, H1- und H2-Elementen usw. eingesetzt.


Galileo Computing

12.6.3 Kontext-Selektoren  downtop

Kontext-Selektoren beziehen ihren Wirkungskreis aus der Eigenschaft eines Elementes. Häufig angewandte sind etwa a:link, a:hover und a:active, die bestimmte Zustände von Links beschreiben.

Das folgende Beispiel weist normalen, nicht aktiven Hyperlinks Schrifttyp, -größe und -farbe zu. Die Formatierung ist als interner CSS-Stil im Head-Bereich des Dokumentes angelegt.

Listing 12.7 Kontext-Selektor für einen Textlink

<html>
<head>
<title>Unbenanntes Dokument</title>
<style type="text/css">
<!--
a:link {
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 11px;
 color: #000000;
}
-->
</style>
</head>
<body>
<a href="#top">Stilanwendung</a></body>
</html>

Galileo Computing

12.6.4 ID-Selektoren  toptop

Nahezu jedem Element innerhalb eines HTML-Dokuments kann man eine ID zuweisen. ID-Selektoren formatieren dann das Element selbst oder seine Inhalte.

Der Selektor selbst wird mit einem # gefolgt vom ID-Namen gesetzt. Im HTML-Code wird der ID-Name einem Tag durch Hinzufügen des Attributes id="[ID-Name]" zugewiesen. Alles innerhalb dieses Tags wird gemäß der Vorgaben in der CSS-Regel formatiert.

Listing 12.8 ID-Selektor für ID-Tabelle

<html>
<head>
<title>Unbenanntes Dokument</title>
<style type="text/css">
<!--
#tabelle {
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 11px;
 color: #000000;
}
-->
</style>
</head>
<body>
Stilanwendung
<table width="200" border="1" id="tabelle">
  <tr>
    <td>Stilanwendung</td>
  </tr>
</table>
</body>
</html>

ID- und Kontext-Selektoren sind vor allem beim Entwickeln dynamischer Websites sehr wichtig. Beide lassen sich auch kombinieren.



Ihr Kommentar

Wie hat Ihnen das <openbook> gefallen? Wir freuen uns immer über Ihre freundlichen und kritischen Rückmeldungen.






 <<   zurück
  
  Zum Katalog
Zum Katalog: Adobe Dreamweaver CS3
Die Neuauflage:
Adobe Dreamweaver CS3
Jetzt bestellen


 Ihre Meinung?
Wie hat Ihnen das <openbook> gefallen?
Ihre Meinung

 Buchtipps
Zum Katalog: Adobe Dreamweaver CS3 - Der praktische Einstieg






 Adobe Dreamweaver
 CS3 - Der praktische
 Einstieg


Zum Katalog: Adobe Dreamweaver CS3 - Videotraining






 Adobe Dreamweaver
 CS3 - Videotraining


Zum Katalog: Adobe Flash CS3 - Videotraining






 Adobe Flash CS3 -
 Videotraining


Zum Katalog: Adobe Photoshop CS3






 Adobe Photoshop CS3


 Shopping
Versandkostenfrei bestellen in Deutschland und Österreich
InfoInfo




Copyright © Galileo Press 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.


[Galileo Design]
[Schulungen direkt von den Autoren: firstART- Agentur für Design und Consulting]
Galileo Press, Rheinwerkallee 4, 53227 Bonn, Tel.: 0228.42150.0, Fax 0228.42150.77, info@galileo-press.de