Die Präsentation wird geladen. Bitte warten

Die Präsentation wird geladen. Bitte warten

Cascading Style Sheets Vollständige Trennung von Layout (CSS) und Inhalt (HTML)

Ähnliche Präsentationen


Präsentation zum Thema: "Cascading Style Sheets Vollständige Trennung von Layout (CSS) und Inhalt (HTML)"—  Präsentation transkript:

1 Cascading Style Sheets Vollständige Trennung von Layout (CSS) und Inhalt (HTML)

2 Beispiel zur Einführung: Wozu CSS? In einem Rutsch wird aus einer einfachen Webseite durch Zuweisung eines Stile-Sheets eine Layoutete Datei Bla text

3 Welche Browser verstehen CSS? IE3: CSS 1 IE4, Netscape 4: CSS1, CSS 2 (teilweise) Sobald im Netscape Javascript ausgeschaltet ist, werden Style Sheets ignoriert. (ebenso ältere Browserversionen)

4 Was geht in Netscape 4 und IE4? Tabelle über alle Funktionen: s/mastergrid.shtml CSS-Guide von Stefan Münz: An jeder besprochenen Funktion ist ein Symbol, ob es nur im Standard ist oder von welcher Browserversion es verstanden wird

5 Übung: Wie fange ich zu arbeiten an? Vorgefertigte Style Sheets Bitte im Netscape aufrufen! Beliebigen Stil und unten (show me only style sheet) anklicken Style sheet speichern mit: Auf Datei – Speichern gehen und so in public_html als w3org.css speichern (als Vorlage zum Weiterarbeiten)

6 Wenn das CSS nicht funktionieren will Validatoren für fehlerfreie Seiten Validator.w3.org

7 Wie kommt das CSS zum HTML? Extern: Nur in der einen Datei - Embedded: Nur an der einen Stelle - Inline: text

8 Übung: CSS in Webseite einbinden Kopiere style.css und simpel.html aus (mit rechter Maus draufklicken, Ziel speichern unter public_html. Style.css in simpel.html in den Header schreiben: simpel.html davor und danach im Webbrowser anschauen. Was ist anders?

9 Übung- Nachtrag: CSS einbinden Das gleiche geht natürlich auch im Dreamweaver menügeführt: Fenster – CSS-Stile Darin auf das Icon mit dem Stift klicken Auf Verknüpfen klicken Das Style-Sheet style.css auswählen OK

10 Syntax-Elemente eines Styles P, em, li {color: red; text-indent: 10pt} propertyvalue declaration ruleset

11 Änderbare Eigenschaften (im Prinzip) Schrift Abstände, Ränder, Ausrichtung, Rahmen Farben Tabellen Mehrspaltiger Textfluss Seitenumbruch

12 Dreamweaver Hauptfenster 1. Launcher: Einblenden des CSS-Fensters 2. Mit Style Sheet verknüpfen

13 Was kann man neu definieren? Freie Eigenschaften (Klassen), indem man ein Stück Text markiert und die Klasse/Eigenschaft zuweist HTML-Tags Link-Eigenschaften (Aktiv, Darübergestrichen/Hover, vor kurzem mal angeklickt/visited)

14 CSS-Datei in Dreamweaver bearbeiten

15 Klasse neu definieren in simpel.html im Style-Fenster unten auf das Icon mit dem Plus klicken Bei Name.betonung eintragen, OK Typ: Farbe: rot, Stärke: fett, Variante: Kapitälchen, Hintergrund, Farbe: gelb Mit OK bestätigen Text auf Webseite markieren, dann im Style-Fenster auf betonung klicken

16 HTML-Tag H1 neu definieren in simpel.html im Style-Fenster unten auf das Icon mit dem Plus klicken Bei Typ HTML-Tag anklicken, OK Jetzt wird das Tag H1 neu definiert Die Schriftfarbe auf Hellblau ändern Mit OK bestätigen

17 HTML-Tag H2 neu definieren in simpel.html im Style-Fenster unten auf das Icon mit dem Plus klicken Bei Typ HTML-Tag anklicken Bei Tag h2 auswählen, OK Jetzt wird das Tag H2 neu definiert Ein Hintergrundbild einfügen Mit OK bestätigen

18 CSS-Selektor neu definieren in simpel.html im Style-Fenster unten auf das Icon mit dem Plus klicken Bei Typ CSS-Selektor anklicken Bei Tag a:hover auswählen, OK Jetzt wird das Verhalten eines Hyperlinks beim darüberfahren neu definiert Die Schrift vergrößern Mit OK bestätigen

19 CSS-Stil-Definitionsfenster in Dreamweaver

20 Übung: Nachbereitung In kurs.html link setzen (CSS soll auf simpel.html zeigen) Maile das fertige style.css an


Herunterladen ppt "Cascading Style Sheets Vollständige Trennung von Layout (CSS) und Inhalt (HTML)"

Ähnliche Präsentationen


Google-Anzeigen