Cascading Style Sheets
                                   Barrierefrei in die Zukunft




1 / 57   Cascading Style Sheets ...
Agenda
 •  Theoretischer Teil
         1.    Einführung
         2.    Tools
         3.    CSS einbinden
         4.    S...
Agenda
 •  Praktischer Teil (Workshop)
         1.    Vorbereitung und Strukturierung des HTML Codes
         2.    Sinnvo...
Ziele des Seminars
 •  Sensibilisierung für das Thema CSS
 •  Erste praktische Erfahrungen im Umgang
    mit Cascading Sty...
1 | Einführung und Grundlagen

 Was sind
 Cascading Style Sheets?


5 / 57   Cascading Style Sheets (CSS)
         Seminar...
Was sind Cascading Style Sheets?
 CSS ist eine deklarative Stylesheet-Sprache für
 strukturierte Dokumente, die vor allem ...
Aufbau einer Webseite


                                             Interaktion (Javascript)

                           ...
Das alte Modell




8 / 57   Cascading Style Sheets (CSS)
         Seminar, 09. und 10. Februar 2009
Das alte Modell




9 / 57   Cascading Style Sheets (CSS)
         Seminar, 09. und 10. Februar 2009
Das aktuelle Modell




10 / 57   Cascading Style Sheets (CSS)
          Seminar, 09. und 10. Februar 2009
Vorteile
 •        Leichter zu editieren
 •        Schnellerer Seitenaufbau
 •        Geringes Datenvolumen
 •        Barr...
Zusammenfassung
 •  Cascading Style Sheets sind
    Formatierungen, mit denen sich das
    Erscheinungsbild einer Website ...
6 | CSS-Eigenschaften

 Das Box Modell




13 / 57   Cascading Style Sheets (CSS)
          Seminar, 09. und 10. Februar 2...
Das Box Modell
 Beschreibt, wie sich die Breite von
 Block-Elementen, unter Berücksichtung
 verschiedener zusätzlicher Sty...
Das Box Modell




15 / 57   Cascading Style Sheets (CSS)
          Seminar, 09. und 10. Februar 2009
Das Box Modell
 Ein Beispiel:

 div.box { width:300px; border:1px;!
  ! ! ! ! !padding: 10px; margin: 10px; }!

 Tatsächli...
Das Box Modell
 „Box Model Bug“ im Internet Explorer
 IE 6 addiert Innenabstände (padding) und
 Rahmenbreite (border) nich...
Typischer Workflow




   Photoshop-Layout                           HTML-Rohbau   CSS-Entwicklung




18 / 57   Cascading...
Nächste SlideShare
Wird geladen in …5
×

CSS Seminar

1.067 Aufrufe

Veröffentlicht am

0 Kommentare
0 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

Keine Downloads
Aufrufe
Aufrufe insgesamt
1.067
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
4
Aktionen
Geteilt
0
Downloads
0
Kommentare
0
Gefällt mir
0
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

CSS Seminar

  1. 1. Cascading Style Sheets Barrierefrei in die Zukunft 1 / 57 Cascading Style Sheets (CSS) Seminar, 09. und 10. Februar 2009
  2. 2. Agenda •  Theoretischer Teil 1.  Einführung 2.  Tools 3.  CSS einbinden 4.  Selektoren, Klassen und ID‘s 5.  Maßeinheiten und Farbangaben 6.  CSS-Eigenschaften 2 / 57 Cascading Style Sheets (CSS) Seminar, 09. und 10. Februar 2009
  3. 3. Agenda •  Praktischer Teil (Workshop) 1.  Vorbereitung und Strukturierung des HTML Codes 2.  Sinnvoller Aufbau und Struktur einer CSS-Datei 3.  Positionierung von Inhaltsblöcken ohne Tabellen 4.  Formulargestaltung mit CSS 5.  Print.css – Spezielles CSS zur Formatierung der Druckausgabe 3 / 57 Cascading Style Sheets (CSS) Seminar, 09. und 10. Februar 2009
  4. 4. Ziele des Seminars •  Sensibilisierung für das Thema CSS •  Erste praktische Erfahrungen im Umgang mit Cascading Style Sheets •  Motivation zur selbstständigen Festigung und Erweiterung des erworbenen Wissens 4 / 57 Cascading Style Sheets (CSS) Seminar, 09. und 10. Februar 2009
  5. 5. 1 | Einführung und Grundlagen Was sind Cascading Style Sheets? 5 / 57 Cascading Style Sheets (CSS) Seminar, 09. und 10. Februar 2009
  6. 6. Was sind Cascading Style Sheets? CSS ist eine deklarative Stylesheet-Sprache für strukturierte Dokumente, die vor allem zusammen mit HTML eingesetzt wird. CSS legt dabei fest, wie ein besonders ausgezeichneter Inhalt oder Bereich dargestellt werden soll, mit anderen Worten, man trennt den eigentlichen Inhalt von der optischen Gestaltung. Quelle: Wikipedia 6 / 57 Cascading Style Sheets (CSS) Seminar, 09. und 10. Februar 2009
  7. 7. Aufbau einer Webseite Interaktion (Javascript) Styling (CSS) Inhalt (HTML) 7 / 57 Cascading Style Sheets (CSS) Seminar, 09. und 10. Februar 2009
  8. 8. Das alte Modell 8 / 57 Cascading Style Sheets (CSS) Seminar, 09. und 10. Februar 2009
  9. 9. Das alte Modell 9 / 57 Cascading Style Sheets (CSS) Seminar, 09. und 10. Februar 2009
  10. 10. Das aktuelle Modell 10 / 57 Cascading Style Sheets (CSS) Seminar, 09. und 10. Februar 2009
  11. 11. Vorteile •  Leichter zu editieren •  Schnellerer Seitenaufbau •  Geringes Datenvolumen •  Barrierefreies Webdesign •  Google-freundlich! 11 / 57 Cascading Style Sheets (CSS) Seminar, 09. und 10. Februar 2009
  12. 12. Zusammenfassung •  Cascading Style Sheets sind Formatierungen, mit denen sich das Erscheinungsbild einer Website festlegen lässt. •  Diese Formatierungen werden vom eigentlichen Inhalt getrennt. 12 / 57 Cascading Style Sheets (CSS) Seminar, 09. und 10. Februar 2009
  13. 13. 6 | CSS-Eigenschaften Das Box Modell 13 / 57 Cascading Style Sheets (CSS) Seminar, 09. und 10. Februar 2009
  14. 14. Das Box Modell Beschreibt, wie sich die Breite von Block-Elementen, unter Berücksichtung verschiedener zusätzlicher Style-Angaben berechnen lässt. Wichtig für die pixelgenaue Positionierung von Elementen! 14 / 57 Cascading Style Sheets (CSS) Seminar, 09. und 10. Februar 2009
  15. 15. Das Box Modell 15 / 57 Cascading Style Sheets (CSS) Seminar, 09. und 10. Februar 2009
  16. 16. Das Box Modell Ein Beispiel: div.box { width:300px; border:1px;! ! ! ! ! !padding: 10px; margin: 10px; }! Tatsächliche Breite: 300px + (2 x 1px) + (2 x 10px) + (2 x 10px) = 342px 16 / 57 Cascading Style Sheets (CSS) Seminar, 09. und 10. Februar 2009
  17. 17. Das Box Modell „Box Model Bug“ im Internet Explorer IE 6 addiert Innenabstände (padding) und Rahmenbreite (border) nicht zur Breite hinzu! Tatsächliche Breite im IE: 300px + (2 x 1px) + (2 x 10px) + (2 x 10px) = 320px (!) 17 / 57 Cascading Style Sheets (CSS) Seminar, 09. und 10. Februar 2009
  18. 18. Typischer Workflow Photoshop-Layout HTML-Rohbau CSS-Entwicklung 18 / 57 Cascading Style Sheets (CSS) Seminar, 09. und 10. Februar 2009

×