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) www.staff.uni- mainz.de/slowi/html/css.ppt.

Ähnliche Präsentationen


Präsentation zum Thema: "Cascading Style Sheets Vollständige Trennung von Layout (CSS) und Inhalt (HTML) www.staff.uni- mainz.de/slowi/html/css.ppt."—  Präsentation transkript:

1 Cascading Style Sheets Vollständige Trennung von Layout (CSS) und Inhalt (HTML) mainz.de/slowi/html/css.ppt

2 Beispiel zur Einführung: Wozu CSS? In einem Rutsch wird aus einer einfachen Webseite durch Zuweisung eines Style-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? 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? Erst mal gucken, zb beim W3: HTML-Sampler und beliebigen Stil auswählen Zen Garden: Jeweils der gleiche Inhalt in unterschiedlichem Layout

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

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

8 Übung- Alternative: CSS einbinden Das gleiche geht im Dreamweaver menügeführt: Fenster – CSS-Stile Mit dem linken Icon das Fenster öffnen meinestile.css eintippen - OK meinestile.css 1. 2.

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

10 Änderbare Eigenschaften Schrift Abstände, Ränder, Ausrichtung, Rahmen Farben Tabellen Mehrspaltiger Textfluss Seitenumbruch

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

12 Style-Sheet in Dreamweaver Fenster CSS-Stile

13 Übung: (Selbsterfundene) Klasse neu definieren Fenster – CSS-Stile öffnen in simpel.html im Style-Fenster unten auf das Icon mit dem Plus klicken Bei Name.betonung eintragen, der Punkt vor betonung ist essentiell! Farbe: helles orange, Variante: Kapitälchen, Hintergrund-Farbe: weiß Mit OK bestätigen Ein kleines Stück Text auf Webseite markieren, dann im Style-Fenster mit der rechten Maus auf.betonung klicken, auf Anwenden gehen

14 Übung: HTML-Tag H1 neu definieren In CSS-Stile auf das + klicken Bei Typ: HTML-Tag auswählen, Bei Name: H1 auswählen, OK Die Schriftfarbe auf Hellgrau ändern Mit OK bestätigen (Änderungen mit re. Maus auf das Tag)

15 Übung: HTML-Tag body umdefinieren Startseite Uni, mit rechter Maus auf den Gutenberg klicken, Bild/Grafik speichern im Webverz. Klicken Sie im CSS-Fenster mit der rechten Maus auf body, wählen Sie Bearbeiten Ein Hintergrundbild einfügen (nicht wiederholen), als HG-Farbe eine auswählen, die auch im Bild vorkommt (mit der Pipette) In der Kategorie "Hintergrund" ein Bild einfügen und bei ""Wiederholen" "nicht wiederholen" auswählen. Mit OK bestätigen

16 Übung: CSS-Selektor umdefinieren a:hover mit rechter Maus anklicken, auf "Bearbeiten" gehen Jetzt wird das Verhalten eines Hyperlinks beim darüberfahren neu definiert Unterstreichung hinzufügen Mit OK bestätigen

17 CSS-Stil-Definitionsfenster in Dreamweaver

18 Übung: Nachbereitung kurs.html öffnen, link auf simpel.html setzen Alle HTML-Seiten im Dreamweaver öffnen und das Stylesheet meinestile.css zuweisen. Jetzt haben Sie die Layoutkontrolle über alle Ihre Seiten.


Herunterladen ppt "Cascading Style Sheets Vollständige Trennung von Layout (CSS) und Inhalt (HTML) www.staff.uni- mainz.de/slowi/html/css.ppt."

Ähnliche Präsentationen


Google-Anzeigen