Links im Skript (Links öffnen sich in neuem Fenster)

Erster Halbtag ˆ

Warum CSS?

• Content und Layout - Veranschaulichung (3 Seiten)
• Div. Beispiele von CSS in Action
  • http://www.be.ch/web/behoerden-verwaltung
• http://www.stichpunkt.de/css/switch.html
• http://www.csszengarden.com/

Das erste CSS

• Was sind HTML-Formatierungen (Beispiel)
• Beispiel mit viel Inline-Formatierungen
• Empfehlung zum Einsatz von CSS vom W3-Konsortium
• Index der Elemente (Tags) mit Angaben ob erlaubt  oder nicht
• Index der Attribute mit Angaben ob erlaubt  oder nicht
•  
• Eine leere HTML-Seite
• Blindtexte
• Diversen Möglichkeiten, CSS einzubinden
• Beispiel für Einbinden in eine XHTML-Datei
• Link zum Download von TopStyleLite
• Erste Seiten mit CSS

Rangfolge und Import von CSS, Funktion des Doctypes, alternative CSS

• Was ist ein Doctype? (Sehr ausführliche Erklärung)
• Beispiele für Doctype
• Seite mit alternativen Stylsheets

Selekoren und Klassen

• selektor-nachfahre.htm (S. 28)
• selektor-kind.htm (S. 30)
• selektor-nachbar.htm (S. 31)
• selektor-class.htm (S. 33)
• selector-class2.htm (S. 34)
• html.htm (S. 34)
• selektor-id.htm (S. 36)
• selektor-attribute.htm (S. 38)
• pseudo_first-child.htm (S. 40)
• pseudo_dynamisch.htm (S. 42)
• pseudo_firsline.htm (S. 43)
• pseudo_before-after.htm (S. 44)
• Links mit CSS stylen

Zweiter Halbtagˆ

Eigenschaften der Schrift mit praktischem Beispiel

• Texteigenschaften (in CSS4you)
• Texteigenschaften (in SelfHTML)
• Einsatz des <span>-Tags   

Texteigenschaften mit praktischem Beispiel

• Blocklevel und Inline-Element
• Übung S.73 (Text als .txt)

Farben

• Farbangaben (in CSS4you)
• Einsatz von Systemfarben (in CSS4you)

Hintergründe, Links und Cursors

• Verschieden Cursors (in SelfHTML)
• Verschiedene Cursors (Beispiele Herdt)
• http://www.squidfingers.com/patterns/ (Link auf S. 82)

Praxis-Übung bisher Gelerntes

• Farben und Hintergünde

Listen

• Sinnvoller Einsatz von Listen (in einfach-fuer-alle.de)
• Listamatic

Zwischenräume und Rahmen

• Erklärung zum Box-Modell (in selfHTML)
• Box-Modell mit Doctype-Problematik

Praxis-Übung bisher Gelerntes

• Erster Zweispalter

Tabellen und Klassifizierung von Blöcken

• Blocklevel und Inline-Element
• Beispiel mit "display:none" und JavaScript
• Tabellenbeispiel mit border-collapse

Positionieren 1 (DW-Ebenen)

• Ebenen im Dreamweaver (position:absolute)

Dritter Halbtagˆ

Repetition (little boxes)

• Repetitions-Übung "Little Boxes" (bis Punkt 5)
• HTML-Validator
• CSS-Validator

Vierter Halbtagˆ

Positionieren mit "position" (Herdt & LittleBoxes)

• Das Box-Modell (als PDF)
• Beispiele zu position
• Übung position (Little Boxes)

Positionieren mit "float"

• Theorie des Floats (Schön schrittweise aufgebaut)
• Float—die Theorie (Der Artikel)
• Bilder und mehrspaltiger Text auf einer zusätzlichen Seite in Little Boxes einfügen.

CSS für den Druck

• druckCSS.pdf

Formulare

• http://www.aplus.co.yu/css/forms/?css=0 --> Definitionen
• http://www.themaninblue.com/experiment/InForm/index.htm --> Beispiele
• http://www.css4you.de/trickkiste/tr00002.html
• http://www.einfach-fuer-alle.de/artikel/formulare/
• Angaben zum Anzeigen der Inhalte
• Angaben zum Absenden der Inhalte
• Komplexe Formatierungen: http://www.thestyleworks.de/tut-art/pretty_accessible_forms.shtml
• Formularseite erstellen