Cascading Style Sheets Vollständige Trennung von Layout (CSS) und Inhalt (HTML) www.staff.uni-mainz.de/slowi/html/css.ppt
Beispiel zur Einführung: Wozu CSS? ALLES GROSSGESCHRIEBEN Bla text In einem Rutsch wird aus einer einfachen Webseite durch Zuweisung eines Style-Sheets eine Layoutete Datei
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)
Was geht in Netscape 4 und IE4? CSS-Guide von Stefan Münz: http://selfhtml.teamone.de/css/index.htm An jeder besprochenen Funktion ist ein Symbol, ob es nur im Standard ist oder von welcher Browserversion es verstanden wird
Übung: Wie fange ich zu arbeiten an? Erst mal gucken, zb beim W3: http://www.w3.org/StyleSheets/Core/preview HTML-Sampler und beliebigen Stil auswählen Zen Garden: http://www.csszengarden.com/ Jeweils der gleiche Inhalt in unterschiedlichem Layout
Wie kommt das CSS zum HTML? Extern: <head><link rel=stylesheet href="meinestile.css" type="text/css"> Nur in der einen Datei - Embedded: <style type="text/css"><!– css -> Nur an der einen Stelle - Inline: <p style="text-indent: 10pt">text</p>
Übung: CSS in Webseite einbinden Kopiere simpel.html und meinestile.css aus www.staff.uni-mainz.de/slowi/html/ (mit rechter Maus draufklicken, Ziel speichern im Webverzeichnis meinestile.css in simpel.html in den Header schreiben: <link rel="stylesheet" type="text/css" href="meinestile.css"> simpel.html davor und danach im Webbrowser anschauen. Was ist anders?
Ü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 2. meinestile.css 1.
Syntax-Elemente eines Styles ruleset P, em, li {color: red; text-indent: 10pt} property value declaration
Änderbare Eigenschaften Schrift Abstände, Ränder, Ausrichtung, Rahmen Farben Tabellen Mehrspaltiger Textfluss Seitenumbruch
Was kann man neu definieren? Freie Eigenschaften (Klassen), indem man ein Stück Text markiert und die Klasse/Eigenschaft zuweist (mit <span>) HTML-Tags Link-Eigenschaften (Aktiv, Darübergestrichen/Hover, vor kurzem mal angeklickt/visited)
Style-Sheet in Dreamweaver 1 Fenster 2 CSS-Stile 4 3
Ü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
Ü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)
Ü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
Ü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
CSS-Stil-Definitionsfenster in Dreamweaver
Ü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.