Seminare und Schulungen für Webdesign Windows 7 mit Cascading Style Sheets

CSS

Cascading Style Sheets

ist eine deklarative Stylesheet-Sprache auf der Basis von Funktionen und Operatoren für strukturierte Dokumente. Ein Stylesheet ist gut mit einer Formatvorlage zu vergleichen. Grundidee hierbei ist die Trennung von Information (Daten) und Darstellung. Ein Stylesheet interpretiert die zugewiesenen Daten (Text, Tabellen, Grafiken etc.) und formatiert sie für Bildschirmausgabe, oder Druck entsprechend den vorgegebenen Regeln. Stylesheets ermöglichen mehr Arbeitsteilung als sie früher z.B. bei HTML und eingebetteten Formatierungsbefehlen möglich war.

Kaskade - Anwendung von aufeinander aufbauenden Stylesheets

Vorteile:

Abgestuft einheitliches Erscheinungsbild

Effiziente Pflege vieler mit einem Stylesheet verknüpfter Webseiten

Kleinere Dateigrößen - Schnellerer Download

Cascading Style Sheets

Cascading Style Sheets werden in Verbindung mit HTML und XML eingesetzt. CSS legt fest, wie der speziell ausgezeichnete Inhalt dargestellt werden soll. Dazu ist es wichtig, das HTML oder XML so zu gestalten, dass die Abschnitte, deren Aussehen gleich sein soll, auch als Gruppe erkannt werden können. Man zeichnet daher im Dokument die Bedeutung einzelner Abschnitte aus, während das Aussehen dieser Abschnitte im CSS-Deklarationsbereich festgelegt wird.

Die Grundlage der Darstellung bildet das Browser-Stylesheet mit seinen grundlegenden HTML-spezifischen Darstellungsanweisungen. Wird ein HTML-Dokument, das kein Stylesheet referenziert und auch selbst keinerlei HTML- oder CSS-Formatierungen enthält im Browser aufgerufen, so wird es dennoch mit einem Basis-Layout dargestellt. Überschriften weisen in grafischen Browsern beispielsweise einen größeren Schriftgrad auf, werden fett dargestellt und erzeugen einen neuen Absatz. Dies bedingt ein Browser-Stylesheet, das grundlegende Informationen über darzustellende Elemente für die Anzeige im Browser enthält.

Enthält ein Benutzer-Stylesheet nun jedoch anders lautende Deklarationen, so überschreiben diese das Browser-Stylesheet. Definieren Sie nun im Autoren-Stylesheet Formatierungen, werden diese höher gewichtet als das Benutzer-Stylesheet. Die Reihenfolge des Einlesens der Stylesheets in den Code der Seite entscheidet über die hierarchische Position des Stylesheets in der "Kaskade".

Zunächst wird ermittelt, ob für ein Element CSS-Eigenschaften definiert wurden, die für den aktuell dargestellten Medientyp gelten. Dies umfasst Browser-, Autoren- und Benutzer-Stylesheets. Wird nur ein zutreffender Selektor gefunden, werden die darin enthaltenen Eigenschaften auf das Element angewandt und die Bearbeitung beim nächsten Element fortgesetzt. Existieren jedoch in unterschiedlichen Stylesheets verschieden lautende Angaben, wird im folgenden Schritt deren Priorität ermittelt.

Inhalte der CSS-Webdesign
Schulungen, Workshops und Seminare (W7)

  • Stile
    CSS-Formatierungen können direkt über HTML-Tags zugewiesen werden. Es können aber auch über das Bedienfeld CSS-STILE neue CSS-Regeln definiert werden, die wahlweise nur für das aktuelle Dokument (Stil im Kopfbereich), oder für viele damit verknüpfte Dokumente gelten.

  • Klassen
    Formateigenschaften können in Dreamweaver über das Bedienfeld CSS-STILE "Neue CSS-Regeln" auch beliebigen Elementen manuell zugewiesen werden. Diese "Klassen" sind von HTML-Tags unabhängig

  • Interne Stylesheets
    Interne Stylesheets werden direkt in den Code der Webseite eingebunden. Im Dateikopf einer HTML-Datei können Sie einen Bereich für CSS-Formate definieren die dann für das ganze Dokument gültig sind. Sie ersparen sich hierdurch unter Umständen umfangreiche und komplexe Zuweisungen von verschiedenen Formateigenschaften im Code dieser Seite    . Wenn Sie beispielsweise in Dreamweaver die Schriftgestaltung und Hintergrundfarbe einer Webseite im Dialogfenster SEITENEIGENSCHAFTEN festlegen, werden die entsprechenden CSS-Regeln im Kopfbereich der Seite eingefügt

  • Externe Stylsheets
    In vielen Fällen werden einheitliche Formate für alle HTML-Dateien des Projekts gewünscht. Dann müssen die Angaben nicht in jeder Datei zu wiederholt werden. Stattdessen können Sie die Formate in einer separaten Textdatei definieren und diese Datei in jede gewünschte HTML-Datei einbinden. Es handelt sich dabei um Textdateien mit der Dateiendung .css, die Formateigenschaften in Form von CSS-Codes enthalten. Wenn Sie die Angaben in der separaten Datei ändern, wirken sich die Änderungen einheitlich auf alle Dateien aus, in denen die separate CSS-Datei eingebunden ist. Auf dieser Basis kann ein ganzer Webauftritt mit identischen Formateinstellung auf allen Seiten gestaltet werden. Erstellt werden Sie auf dem gleichen Wege wie die internen Stylesheets. Dreamweaver bietet Stylesheets an, mit denen ein ganzes Seitendesign übernommen werden kann

  • Der Head-Bereich
    hier kann ein internes Stylesheet definiert, oder aber mit dem Linkbefehl eine externe CSS-Datei referenziert werden. Innerhalb des <link>-Tags müssen die Angaben zum CSS-Typ "rel="stylesheet" type="text/css" stehen. Im Attribut href wird dann der relative oder absolute Speicherort der Datei angegeben

  • Verschiedene Ausgabemedien
    Im Stylesheet können für unterschiedliche Ausgabemedien, Bildschirm und Drucker unterschiedliche Anweisungen für die Gestaltung der Daten hinterlegt werden. Beispielsweise können auf dem Bildschirm helle Schriften auf dunklen Hintergründen attraktiv aussehen, während dies für die Druckausgabe keine gute Lösung ist. Im Druck hingegen sehen Absatzeinzüge von mindestens 2cm besser aus, während durch entsprechende Angaben am Bildschirm möglicherweise kostbarer Präsentationsraum verschenkt wird. Daher können Sie für verschiedene Ausgabemedien unterschiedliche CSS-Dateien einbinden, die verschiedene Formatdefinitionen enthalten. Die Software muss beim Präsentieren der Seiten entscheiden, welche der eingebundenen CSS-Dateien maßgeblich ist. Wenn der Web-Browser also beispielsweise die Seiten am Bildschirm anzeigt, sollte er die CSS-Datei verwenden, die Sie explizit für das Medium "Bildschirm" bestimmen, und wenn der Anwender eine Seite ausdruckt, sollte der Browser stattdessen die CSS-Datei verwenden, die Sie für das Medium "Drucker" angeben.

 

Unsere Seminare und Schulungen befähigen Sie innerhalb von drei Tagen zum Erstellen und Verwalten von Webseiten und Websites mit Adobe-Dreamweaver. Haben Sie fortgeschrittene Ansprüche an Ihren Lehrgang, besonderen Beratungsbedarf, didaktische- oder Terminwünsche, so helfen wir Ihnen gerne im Rahmen eines individuell vereinbarten Adobe-Dreamweaver Training, oder eines Dreamweaver Workshops in unserem Hause.

Für Adobe-Dreamweaver Inhouse-Kurse haben wir folgendes Kostenmodell entwickelt: