• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
CSS Seminar
 

CSS Seminar

on

  • 1,133 views

 

Statistics

Views

Total Views
1,133
Views on SlideShare
1,132
Embed Views
1

Actions

Likes
0
Downloads
0
Comments
0

1 Embed 1

http://www.slideshare.net 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    CSS Seminar CSS Seminar Presentation Transcript

    • Cascading Style Sheets Barrierefrei in die Zukunft 1 / 57 Cascading Style Sheets (CSS) Seminar, 09. und 10. Februar 2009
    • 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
    • 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
    • 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
    • 1 | Einführung und Grundlagen Was sind Cascading Style Sheets? 5 / 57 Cascading Style Sheets (CSS) Seminar, 09. und 10. Februar 2009
    • 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
    • Aufbau einer Webseite Interaktion (Javascript) Styling (CSS) Inhalt (HTML) 7 / 57 Cascading Style Sheets (CSS) Seminar, 09. und 10. Februar 2009
    • 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 •  Barrierefreies Webdesign •  Google-freundlich! 11 / 57 Cascading Style Sheets (CSS) Seminar, 09. und 10. Februar 2009
    • 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
    • 6 | CSS-Eigenschaften Das Box Modell 13 / 57 Cascading Style Sheets (CSS) Seminar, 09. und 10. Februar 2009
    • 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
    • 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ä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
    • 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
    • Typischer Workflow Photoshop-Layout HTML-Rohbau CSS-Entwicklung 18 / 57 Cascading Style Sheets (CSS) Seminar, 09. und 10. Februar 2009