Inhaltsübersicht. Teil V Wichtige Werkzeuge. readme.txt. Teil I Die Einleitung 1 Das Web ist nicht aus Papier

(1)

Inhaltsübersicht

readme.txt

Teil I Die Einleitung

1 Das Web ist nicht aus Papier Teil II HTML - Kisten erstellen 2 So funktioniert HTML

3 Die wichtigsten HTML-Elemente

Teil III CSS-Grundlagen - Kisten gestalten

4 CSS kennen lernen: Schriften, Farben und Hyperlinks 5 Selektoren, Einheiten und Farben

6 Abstände gestalten mit dem Box-Modell 7 Ordnung halten im Stylesheet

8 Eine horizontale Navigation erstellen 9 Druckversion und Kontaktformular

19 23 25 35 37 5i

87 89

in

127 151 165 179 10 Der Browser und das CSS: Kaskade, Vererbung und Standardwert 197 Teil IV CSS-Layout - Kisten verschieben 207 11 Der Flow und die Positionierung

12 Float: Schwebende Boxen

13 Mehrspaltige Layouts mit position: absolute 74 Mehrspaltige Layouts mit float

15 Layouts für Fortgeschrittene 16 Patchwork: Flicken im CSS

Teil V Wichtige Werkzeuge

17 Nützliche Programme Stichwortverzeichnis

2 0 9 223 251 259 281

293

305 3°7

321

gescannt durch

Bibliografische Informationen

http://d-nb.info/987936913 digitalisiert durch

(2)

readme.txt 19

Teil I Die Einleitung 23

1 Das Web ist nicht aus Papier 25 1.1 Papierdenken, Webseiten und enttäuschte Erwartungen 25

Unterschied 1: Der Autor einer Webseite hat keine

vollständige Kontrolle 26 Unterschied 2: Webseiten sehen bei jedem Benutzer

anders aus 28 Die Zeitung: Papierseiten sind starr, Webseiten flexibel 29 1.2 Jenseits von Papier 30 Webseiten haben Schichten 30 Mediengerechte Webseiten 31 1.3 Webseiten gestalten mit Tabellen? 31 Notwehr: Tabellen und <font> 31 Zurück zum Papierdenken 32 1.4 Tabellenfreie Layouts mit CSS 33

Teil II HTML-Kisten erstellen 35

2 So funktioniert HTML 37

2.1 Webseiten bestehen aus rechteckigen Kästchen 37

2.2 WasistHT-M-Leigentlich? 38

HT wie Hypertext: Hyperlinks erstellen 38

M wie Markup: Etiketten kleben 38

L wie Language: Vokabeln und Grammatikregeln 39

XHTML: Die neueste Version von HTML 39

2.3 Die drei häufigsten Missverständnisse zu HTML 40

1. HTML ist keine Programmiersprache 40

2. HTML ist keine Seitenbeschreibungssprache 40

3. HTML dient nicht zum Gestalten von Webseiten 40

(3)

littlE böXE5

2.4 <!-HTML-Kommentare--> 4 ° 2.5 Auf jeder Webseite vorhanden: Das Grundgerüst 41 Ein Grundgerüst für die Webseite erstellen 41 1. Die Dokumenttyp-Definition: <!DOCTYPE html PUBLIC ...> 43 2. Das Stammelement: <html> 43 3. Der Vorspann: <head> 44 4. Der Inhalt der Webseite: <body> 46 2.6 Wissenswertes zu HTML-Elementen 46

Die Namen der HTML-Elemente stammen aus dem

Englischen 46 Alle HTML-Elemente haben einen Anfangs- und ein Ende-Tag 46 HTML-Elemente: Anfangs-Tag, Inhalt und Ende-Tag 47 Das Wichtigste zu Attributen 47 Block- und Inline-Elemente verhalten sich unterschiedlich 48 2.7 Auf einen Blick 49 3 Die wichtigsten HTML-Elemente 51 3.1 Die Seite in Bereiche einteilen: div 5

1

Vier Bereiche: Kopf, Navigation, Text und Fusszeile 5

2

Der Schutzumschlag: wrapper 5

2

Die Bereiche erstellen mit div 53 Visuell: Schematische Darstellung der div-Bereiche 54 3.2 Überschriften: hi bis h6 54 Benutzen Sie Überschriften 55 Überschriftebene nicht aufgrund der Schriftgröße wählen 55 3.3 Absätze: p wie paragraph 56 3.4 Text hervorheben: strong und em 57 3.5 HTML-Elemente verschachteln: Zuerst geöffnet,

zuletzt geschlossen 57

3.6 Jeder Browser hat ein eingebautes Stylesheet 58

3.7 Listen: Aufzählungen und Nummerierungen 59

Aufzählungen: Ungeordnete Listen mit ul und li 59

Nummerierungen: Geordnete Listen mit ol und li 60

Verschachtelte Listen 61

Schematische Darstellung der verschachtelten Liste 62

3.8 Definitionslisten: dl, dt und dd 62

3.9 Hyperlinks: Das Besondere am World Wide Web 63

Anatomie eines Hyperlinks 63

Die Navigation: Eine ungeordnete Liste mit Hyperlinks 64

(4)

3.10 Skip-Links: Hyperlinksauf derselben Seite 66 Ein Skip-Link zum Überspringen der Navigation 66 Ein Hyperlink zurück nach oben 67 3.11 Die Wegbeschreibung zur Grafik: img 67 Die Attribute zu img 68 Ein Logo als Überschrift? 69 3.12 Weitere nützliche Elemente 70 Beginne eine neue Zeile: <br/> 70 address für Adressen 71 blockquote und cite für Zitate 71 span ist ein neutrales Inline-Element 72 Character Entities: Allgemeine Sonderzeichen 73 3.13 Tabellen sind nicht verboten 75 Eine einfache Tabelle: table, tr und t d 75 Im Quelltext stehen die Spalten untereinander 76 Kopf, Fuß und Körper einer Tabelle 76 3.14 Stimmt die Statik? HTML überprüfen mit dem Validator 78 3.15 CSS zum Ausprobieren: Die W3C Core Styles 79 3.16 Die Kontaktseite: Von der Seite zur Site. 81 3.17 Der Quelltext der Webseiten im Überblick 82 Der Quelltext der Startseite index.html 82 Der Quelltext der Kontaktseite kontakt.html 84 3.18 Auf einen Blick 85

Teil IM CSS-Grundlagen - Kisten gestalten 87 4 CSS kennen lernen: Schriften, Farben und Hyperlinks 89 4.1 Ein Stylesheet ist eine Sammlung von Formatvorlagen 89 4.2 CSS und die HTML-Kästchen auf der Webseite 90 4.3 Das erste eigene Stylesheet 90 Stylesheet erstellen und einen CSS-Kommentar schreiben 90 Die Verbindung zwischen HTML und CSS: link 91 4.4 Hintergrund- und Schriftfarben definieren 93

Hintergrund- und Schriftfarbe für body und #wrapper 93 Hintergrund- und Schriftfarben im Kopfbereich 94 4-5 Schriftart und-große: font-family und font-size 96 4-6 Schriftgröße für Überschriften ändern 97 4-7 Style: Der Aufbau einer CSS-Regel 97 4-8 Die Adresse gestalten 99

(5)

Webseiffin g e s t a f t e i mit C

4.9 Hyperlinks gestalten 100 Hyperlinks: Das HTML-Element a 100 Besuchte und nicht besuchte Hyperlinks 100 Wenn die Maus darüber schwebt: a:hover und Kollegen 102 Die Reihenfolge der Pseudoklassen i m Stylesheet ist wichtig 104 Den Skip-Link ausblenden 104 4.10 Styles werden an drei verschiedenen Stellen definiert 106 1. CSS-Regeln in einer externen CSS-Datei 106 2. Zwischen <head> und </head>: Das Element style 106 3. Direkt i m HTML-Element: Das Attribut style 107 Vorfahrt: Welche Styles gewinnen? 107 4.11 Das Stylesheet im Überblick 108 4.12 Auf einen Blick 109 5 Selektoren, Einheiten und Farben 111 5.1 Ein Selektor w ä h l t das zu gestaltende Kästchen aus 111 Ein einfacher Selektor: Der Name des Kästchens 112 Mehrere Kästchen auf einmal: Selektoren m i t Komma

trennen 112 Alle Kästchen auf der Seite: Der Universalselektor * 113 5.2 Nur in diesem Bereich: Selektoren verschachteln " 3 Nur die Hyperlinks im Textbereich: #textbereich a " 3 Aufzählungszeichen in ungeordneten Listen gestalten: ul li 114 Unterschiedliche Nummerierung bei geordneten Listen 114 5.3 Eigene Namen vergeben mit ID und class " 5 Es kann nur einen geben: ID, der Selektor mit der Raute 115 Gruppenbildung: class, der Selektor m i t dem Punkt 116 ID oder Klasse - Wann n i m m t man was? 117 ID- und Class-Namen sollten die Bedeutung des Elements beschreiben 117 5.4 Spezifität: Das Punktesystem für Selektoren 118 Einer w i r d gewinnen: So funktioniert Spezifität 118 Ein paar Beispiele für die Punktewertung 119 Sparsam benutzen: ümportant 120 5.5 Werte und Maße in CSS: Die Qual der Wahl 120

Grundregeln: Die Leerstelle, die Null und der

Anführungsstrich 120 Für den Bildschirm: Relative Einheiten 121 Für den Drucker: Absolute Einheiten 122

10

(6)

5.6 Farben definieren: Hexadezimal, Dezimal und Namen 123 5.7 Auf einen Blick 125 6 Abstände gestalten mit dem Box-Modell 127 6.1 Potentielle Probleme beim Gestalten der Kästchen 127 6.2 Das Box-Modell in der Übersicht 128 Alle Boxen sind gleich: Das Modell 128 Der Inhaltsbereich: w i d t h (Breite) und height (Höhe) 129 Der Innenabstand: padding (Polsterung) 130 Der Rahmen: border (Rahmenlinien) 130 Der Außenabstand: margin (Rand) 131 Vertikale Außenabstände kollabieren: collapsing margins 131 Wenig intuitiv: Die Gesamtbreite einer Box berechnen 132 6.3 Kalibrierung: Abstände auf Null setzen 133

Die Abstände der eingebauten Browser Stylesheets

annullieren 133 Die Abstände für die wichtigsten Elemente neu definieren 135 6.4 Die Breite eines Elements: w i d t h 136 6.5 Die Seite zentrieren: margin: auto 137 6.6 Eine Rahmenlinie erstellen: border 138 6.7 Ein bisschen Abstand drum herum: padding 139 6.8 Das Box-Modell und die farbliche Gestaltung 142 6.9 Hintergrundgrafiken per CSS 143 Hintergrundgrafik einbinden: background-image 143 Hintergrundgrafiken kacheln: background-repeat 144 Hintergrundgrafik positionieren: background-position 146 Hintergrundgrafik fixieren: background-attachment 146 6.10 Das Stylesheet im Überblick 147 6.11 Auf einen Blick 149 7 Ordnung halten im Stylesheet 151 7.1 Der Kommentar am Anfang 151 7.2 Das Stylesheet in Abschnitte unterteilen 152 Teil 1 - Kalibrierung und allgemeine Styles 153 Teil 2 - Styles für die Layoutbereiche 153 Teil 3 - Sonstige Styles 154 7.3 Sinnvoller Aufbau der Styles 154 Eine typische CSS-Regel 154 Alles in einer Zeile 155 Verschachtelte und gruppierte Selektoren 155

11

(7)

Weissiten gestaitBi mit

7.4 Die Reihenfolge der Deklarationen im Style 155 Reihenfolge orientiert sich am Box-Modell 156 Alphabetisch sortiert 156 7.5 Kurzschreibweisen padding und margin 157 Alle vier Seiten gleich 157 Die Reihenfolge entscheidet: Nur eine Seite anders 157 Unterschiedliche Werte für alle vier Seiten 158 Paarweise: Oben = unten und links = rechts 159 7.6 Das aufgeräumte Stylesheet im Überblick 159 7.7 DerCSS-Validator 161 7.8 Auf einen Blick 163 8 Eine horizontale Navigation erstellen 165 8.1 Listenelemente nebeneinander: display: inline 165 Der verschachtelte Selektor #navibereich li 166 Feineinstellungen: Abstände und Hyperlinks anpassen 167 8.2 Punktsieg: Specificity in der Praxis 168 margin-bottomfürul 168 Die Farbe der Hyperlinks 169 Feineinstellungen für die Hyperlinks 169 8.3 Tabbed Navigation - Navigation mit Registern 170 Vorbereitende Maßnahmen für #navibereich 170 Die Hyperlinks im Navigationsbereich ändern 17

1

Einen Rollover-Effekt für die Hyperlinks definieren

1

7

2

Sie sind hier: Aktuelle Seite hervorheben 173 Standardkonform, barrierefrei und flexibel 174 8.4 Die Styles zur Navigation i m Überblick 176 8.5 Auf einen Blick 177 9 Druckversion und Kontaktformular 179 9.1 Eine Druckversion f ü r die Webseiten erstellen 179 Stylesheet nur f ü r die Anzeige am Bildschirm 179 Ein zweites Stylesheet nur für den Ausdruck 181 Grundlegende Schriftgestaltung 182 Gestaltung der Überschriften 183 Navigation und Skip-Link ausblenden 185 URL der Hyperlinks sichtbar machen 185 9.2 Ein Formular f ü r die Kontaktseite 187 Schritt i : Das Formular i m HTML-Quelltext 187 Schritt 2: Das Formular per CSS gestalten 189

12

(8)

Schritt 3: Den Cursor in das erste Feld setzen 191 Schritt 4 : Das Reiseziel für das Formular festlegen 192 Schritt 5: Dem Formular-Chef die E-Mail-Adresse mitteilen 193 Schritt 6: Testen des fertigen Formulars 195 9.3 Auf einen Blick 196 10 Der Browser und das CSS: Kaskade, Vererbung und

Standardwert 197 10.1 Der Stammbaum: Die Struktur der Webseite 197 Der Stammbaum für die Startseite 198 Die Reihenfolge: Kaskade-Vererbung-Standardwert 199 10.2 Die Kaskade: Das Cascading in Cascading Style Sheets 200 Stufe v. Finde alle Deklarationen zu einem Element 200 Stufe 2: Sortiere nach Ursprung und Wichtigkeit 201 Stufe 3: Sortiere nach Spezifität des Selektors 202 Stufe 4 : Sortiere nach Reihenfolge des Auftretens 203 10.3 Die Vererbung (inheritance) 204 Vererbung macht ein Stylesheet übersichtlicher 204 Bestimmte Eigenschaften werden nicht vererbt 205 10.4 Der Standardwert (initial value) 205 10.5 Auf einen Blick 205

Teil IV CSS-Layout - Kisten verschieben 207 11 Der Flow und die Positionierung 2 0 9 11.1 Die Seite ist ein langer ruhiger Fluss 210 11.2 Letit f l o w : Der normale Fluss der Boxen 210 Drei Boxen im Fluss 210 Drei verkürzte Boxen im Fluss 211 Versetzt weiterfließen: position: relative 212 n-3 Die absolute Positionierung: Raus aus dem Fluss 214 1. position: absolute, relativ zum Stammelement 215 2. position: absolute, relativ zum Kopfbereich 217 Schriftgestaltung für den Slogan im Kopfbereich 218 Wie ein Fels in der Brandung: position: fixed 219

" . 4 Auf einen Blick 221 12 Float: Schwebende Boxen 223 12.1 Text u m Bilder fließen lassen 223 Die Grafik einbinden 224

(9)

UttlE

Webseilen gestatten mit CSS.GrüniSa

Die Grafik floaten 225 Abstand zwischen Grafik und Text definieren 226 Praktisch: CSS-Klassen zum links und rechts floaten 226 clear: Text unterhalb der Grafik beginnen lassen 228 12.2 Floats mit mehreren Boxen 230 Das Beispiel: Drei Boxen ohne float 230 Drei Kästchen nach links floaten 232 Drei Kästchen nach rechts floaten 233 Float und zu wenig Platz im Browserfenster 234 Float und verschieden hohe Boxen 234 12.3 Kleine Galerie: Gefloatete Elemente umschließen 235 Der HTML Quelltext 236 Der erste Versuch: Die Bilder floaten 238 Lösung i: HTML-Element mit clear 239 Lösung 2: Set a float t o fix a float 240 Lösung 3: Ohne float und clear. overflow: hidden 242 Floats umschließen: Die Übersicht 243 12.4 Die Galerie in die Beispielsite einbauen 244 Die Beispielseite galerie.html 245 Das CSS im Überblick 246 Die Seite im Internet Explorer 6 247 12.5 Auf einen Blick 248 13 Mehrspaltige Layouts mit position: absolute 251 13.1 Ein einfaches zweispaltiges Layout 252 13.2 Ein einfaches dreispaltiges Layout 253 13.3 Ein dreispaltiges Layout mit Kopfbereich 254 13.4 Das Problem: Ein durchgehender Fußbereich 256 13.5 Auf einen Blick 258 14 Mehrspaltige Layouts mit float 259

14.1 Zweispaltiges Layout mit float und margin 259 Schritt 1: Den Navigationsbereich floaten 260 Schritt 2: Den Textbereich mit einem großen Rand

versehen 262 Schritt 3: Die Listenelemente in der Navigation gestalten 263 Schritt 4: Die Hyperlinks in der Navigation gestalten 264 Schritt 5: Den aktuellen Navigationspunkt hervorheben 265 Schritt 6: »Falsche Spalte« - Hintergrundfarbe für die

Navigation 266

(10)

14-2

14-3

14-4

H-5

15 15.1 15-2 15-3 15-4 15-5 16 16.1

16.2

16.3

16.4

Schritt 7: Den Fußbereich clearen Exkurs: Die globale Wirkung von clear Dreispaltiges Layout mit float und margin Das HTML für die dritte Spalte

Die Anpassungen im CSS

Zweispaltiges Layout mit entgegengesetzten Floats Eine andere Reihenfolge im HTML

Das CSS anpassen

Dreispaltig mit entgegengesetzten Floats Zwei zusätzliche Bereiche im HTML einfügen Die beiden neuen Spalten im CSS gestalten Auf einen Blick

Layouts für Fortgeschrittene Liquid Layouts (mit Prozentangaben) Elastische Layouts (Angaben in em) Fertige CSS-Layouts

YAML-YetAnotherMulticolumn Layout Auf einen Blick

Patchwork: Flicken im CSS Patches und Hacks

Vor dem Einbau von Patches gründlich checken Inline-Patches und zusätzliche Stylesheets Inline-Patches: Sternchen & Co.

@import-Styles vor alten Browsern verstecken Der Internet Explorer

Kurze Geschichte des Internet Explorer Der Internet Explorer und das »Layout«

Das etwas andere Box-Modell des IE 5.x Conditional Comments: Styles nur für den IE Testen, ob Conditional Comments funktionieren Conditional Comments in Aktion

Patches für den IE5.X Patches für IE5 und IE6 Patches für den IE7 Auf einen Blick

268 269 271 272 272 274 274 275 277 277 278 279 281 282 285 288 290 291 293 293 293 294 294 295 296 296 297 298 299 3 0 0 301 301 302 303 3O3

15

(11)

»ebseitsn gestalten mit CSS. SrwdlegC'S.

TeilV

17 17.1 17.2

17-3

17-4 17-5

Wichtige Werkzeuge Nützliche Programme Browser

TopStyle-der CSS-Editor TopStyle Lite downloaden Kurzes Tutorial zu TopStyle Lite Praktische Add-Ons für den Firefox

Visual Source Chart-die Kästchen im Quelltext sichtbar machen

Web Developer- Das Schweizer Offiziersmesser Firebug - Das Analysetool

ColorZilla - Die Farbenwahl Hilfreiche Sites zu CSS Interessante Bücher

305

307 307 308 309 310 314 314 315 316 317 318 319

Stichwortverzeichnis 3

2 1

16