Allgemeine Technologien II Sommersemester Mai 2011 CSS

Größe: px

Ab Seite anzeigen:

Download "Allgemeine Technologien II Sommersemester Mai 2011 CSS"

Leander Lange
vor 7 Jahren
Abrufe

1 Allgemeine Technologien II Sommersemester Mai 2011 CSS

2 Kursthemen Designparadigmen Framesets Tabellenbasierte Layouts <div>-basierte Layouts: CSS & Co. Cascading Style Sheets CSS CSS einbinden Inline-Styles CSS im Dokumentkopf Externe Stylesheets Konzepte Typen-, Klassen-, ID-Selektoren, Pseudoklassen Boxmodell Positionierung Farben Textformatierung Textumfluss Beispeillösungen zum Übungsblatt ( HTML II ):

3 Beispiellösungen Beispiellösungen zum Übungsblatt HTML II :

4 Hausaufgaben

5 Hausaufgaben Unterschiedliche Lösungswege 1. Framesets 2. Tabellenbasierte Layouts 3. (Div-basierte Layouts (CSS))

6 HTML Designparadigmen

7 HTML Designparadigmen 1. Framesets 2. Tabellenbasierte Layouts 3. Div-basierte Layouts (CSS)

Framesets (anno Pief) http://www.ceec.uni-koeln.

8 Framesets (anno Pief) Einzelne Bereiche der Website realisiert über separate HTML-Dateien

9 Framesets CEEC Quellcode

Framesets Pro: Unterschiedliche Inhalte (HTML-Dateien) lassen sich verhältnismäßig einfach (zwei Tags) wiedergeben <frameset> <frame> Überblick: http://de.selfhtml.

10 Framesets Pro: Unterschiedliche Inhalte (HTML-Dateien) lassen sich verhältnismäßig einfach (zwei Tags) wiedergeben <frameset> <frame> Überblick: Contra Barrierefreiheit nicht gewährleistet Verlinkungsschwierigkeiten: Wird direkt auf das Frame, d.h. die eingebettete HTML-Datei verlinkt, fehlen u.u. Navigationselemente

11 Barrierefreiheit: Biene Award

12 HTML Designparadigmen 1. Framesets 2. Tabellenbasierte Layouts 3. Div-basierte Layouts (CSS)

13 HTML: Tabellen <table> <tr> </tr> <tr> </tr> </table> Attribute: border= 1px cellspacing= 0 cellpadding= 0 <td>zeile 1, Spalte 1</td> <td>zeile 1, Spalte 2</td> <td>zeile 2, Spalte 1</td> <td>zeile 2, Spalte 2</td>

14 Tabellenbasierte Layouts IDSL I (

15 Tabellenbasierte Layouts

16 Tabellenbasierte Layouts Pro: Leistet, was versprochen (komplizierte Layouts über mehrere Spalten) Contra Wartbarkeit: Hinzufügen neuer Elemente mitunter sehr umständlich Ändern von Zeileneigenschaften aufgrund der Vielzahl der Zeilen wenig praktikabel Enormer Overhead: Um triviale Layouts zu generieren, sind einige <table>, <tr>, <td> Tags nötig

17 HTML Designparadigmen 1. Framesets 2. Tabellenbasierte Layouts 3. Div-basierte Layouts (CSS)

18 CSS Cascading Style Sheets

19 CSS Grundidee: Trennung von Inhalt (HTML) und Darstellung (CSS)

20 CSS einbinden Unterschiedliche Möglichkeiten, CSS zu verwenden: Inline-Styles <h1 style= font-family: Arial; color: blue; > Diese Überschrift wird in der Schriftart Arial und blau dargestellt </h1> Stylesheetdefinition im Dokumentkopf <html><head><title>stylesheetdemonstration</title> <style type= text/css >  </style> color: red; font-family: Arial; Externe Stylesheets (eigene CSS-Datei) <html><head><title>beispiel: Externe CSS Datei</title> <link type="text/css" rel="stylesheet" media="all" href="style.css > </head> [ ]

21 CSS Selektoren In der Style Sheet Datei: CSS-Regeln in Form von Selektoren: Selektorname { Eigenschaft: Wert; } Arten von Selektoren: Typen-Selektoren Klassen-Selektoren ID-Selektoren Nachkommen-Selektoren

22 CSS-Selektoren Typen-Selektoren: Wenden Stildefinitionen auf (u.a.) HTML-Tags an: p { } background-color: #cccccc;

23 CSS Selektoren II Klassen-Selektoren.warning { color: red; font-weight: bold; } <p class= warning >Dieser Absatz wird rot und stark hervorgehoben dargestellt</p> Klassen-Selektoren sollten verwendet werden, wenn die gleiche Stildefinition mehrere Male in einem Dokument benutzt werden soll

24 CSS Selektoren III ID-Selektoren #navigation { border: 2px solid #000000; } <ul id= navigation > <li>navigationspunkt 1</li> <li>navigationspunkt 2</li> </ul> ID-Selektoren sollten verwendet werden, wenn die Stildefinition nur ein Mal in einem Dokument verwendet werden soll

25 CSS Selektoren IV Nachkommen-/Kontext-Selektoren li a { background-color: #cccccc; } <ul id= navigation > <li><a href= URL >Navigationspunkt</a></li> <li><a href= URL2 >Navigationspunkt</a></li> </ul>

26 Farben <h2 style= color: rgb(0, 0, 255) >Blaue Überschrift</h2> <h2 style= color: #0000ff >Blaue Überschrift</h2>

27 Übung 1

28 CSS Pseudoklassen a:link { color: blue; } a:visited { color: purple; } a:hover { color: red; } a:active { color: gray; } U.a. Definition des Verhaltens von Elementen: a:hover bestimmt, wie sich die Darstellung des Hyperlinks verändert, wenn die Mouse über den Link fährt.

29 Übung 2

30 Boxmodell #contentbereich { width: 1024px; height: 768px; padding: 5px; padding-left: 10px; border: 2px solid #cccccc; margin: 15px; } Vgl.:

31 Positionierung Drei Arten der Positionierung: relative: positioniert relativ zu der Position, die das positionierte Element im normalen Textfluss hat. absolute: positioniert eine Box entweder relativ zu einem ebenfalls positionierten Elternelement, oder absolut im Dokument. fixed: positioniert eine Box absolut; beim Scrollen bleibt die Box an ihrer Position stehen ( fixed ). <div style= position: absolute; left: 150px; top: 75px; background-color: silver >Lorem Ipsum</div>

32 Textumfluss Ohne float float: left float: right

33 Übung 3

34 /

35 Hausaufgaben Lösen Sie bitte die Hausaufgaben, die Sie auf der kursbegleitenden Website unter finden

Ähnliche Dokumente

Allgemeine Technologien II Wintersemester 2011 / November 2011 CSS

Allgemeine Technologien II Wintersemester 2011 / 2012 28. November 2011 CSS Themen 28.11.2011 Cascading Style Sheets CSS CSS einbinden Inline-Styles CSS im Dokumentkopf Externe Stylesheets Konzepte Typen-,