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: http://www.webreview.com/style/css1/chart 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! http://www.w3.org/StyleSheets/Core/preview 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 www.htmlhelp.org/tools/validator 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 www.zdv.uni-mainz.de/download/html/ (mit rechter Maus draufklicken, Ziel speichern unter public_html. www.zdv.uni-mainz.de/download/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 1 3 2 4 5

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 slowi@mail.uni-mainz.de


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

Ähnliche Präsentationen


Google-Anzeigen