Alle Kapitel aufklappen
Alle Kapitel zuklappen
1 Das Web ist nicht aus Papier
29
1.1 Papierdenken, Webseiten und enttäuschte Erwartungen
29
1.2 Der Autor einer Webseite hat keine Kontrolle
30
1.2.1 »Responsiv«: Der Benutzer bringt den Bildschirm mit
30
1.2.2 »Barrierefrei«: Der Benutzer kann die Wünsche der Webdesigner ignorieren
31
1.2.3 Fazit: Im Web bestimmt der Benutzer, nicht der Autor
31
1.3 Webseiten sehen bei jedem Benutzer anders aus
32
1.3.1 Webseiten bestehen aus Quelltext
32
1.3.2 Der Browser macht aus dem Quelltext eine sichtbare Webseite
33
1.3.3 Die flexible Zeitung: Papierseiten sind starr, Webseiten flexibel
34
1.3.4 Webseiten haben Schichten: HTML, CSS und JavaScript
34
1.4 Übersicht: Eine kurze Geschichte des Weblayouts
35
1.4.1 Fast kein Layout: Mosaic und Netscape Navigator
35
1.4.2 Mitte der 1990er: Layouts mit HTML-Tabellen und <font>
36
1.4.3 Das neue Jahrtausend: CSS-Layouts und responsives Webdesign
37
1.4.4 Fazit: Die Browser bestimmen, was geht
38
2 HTML und CSS im Schnelldurchlauf
39
2.1 Webseiten bestehen aus rechteckigen Kästchen
39
2.2 HTML ist der Maurer, der rechteckige Kästchen erstellt
40
2.2.1 Die erste Webseite erstellen
40
2.2.2 Die Kästchen der HTML-Elemente sichtbar machen
41
2.3 CSS ist der Stylist, der die rechteckigen Kästchen gestaltet
43
2.3.1 Das Styling für die Webseite – die erste CSS-Regel
43
2.3.2 Ein Style für die »h1«-Überschrift
44
2.4 Entwickler-Tools – HTML und CSS analysieren
46
Teil II HTML-Crashkurs – Kästchen erstellen
49
3 Das HTML-Grundgerüst
51
3.1 HTML – Hyperlinks erstellen und »Etiketten kleben«
51
3.1.1 HT wie Hypertext – Text mit Hyperlinks
52
3.1.2 M wie Markup – Etiketten kleben
52
3.1.3 L wie Language – Vokabeln und Grammatikregeln
52
3.1.4 Missverständnisse zu HTML
53
3.2 Das HTML-Grundgerüst ist das Skelett einer Webseite
53
3.2.1 Eine gute Angewohnheit – <!– Kommentare –>
53
3.2.2 Ein Grundgerüst für eine Webseite erstellen
54
3.3 Die Dokumenttyp-Definition – <!DOCTYPE html>
55
3.4 Das Stammelement <html>
55
3.5 Informationen über die Webseite – <head>
56
3.5.1 Die Angabe des Zeichensatzes – <meta charset="utf-8">
56
3.5.2 Der Name der Seite – <title>
57
3.5.3 Die Beschreibung für Suchmaschinen – <meta name="description">
58
3.5.4 Weitere »meta«-Elemente
58
3.6 Der Inhalt der Webseite – <body>
59
3.7 HTML-Elemente im Quelltext – Anfangs-Tag, Inhalt und EndeTag
59
4 HTML-Elemente für Überschriften, Text und Listen
61
4.1 Das Grundgerüst für die Startseite erstellen
62
4.2 Die Seite in Bereiche einteilen: »header«, »nav«, »main«, »footer« und »div«
63
4.2.1 Vier Bereiche: »header«, »nav«, »main« und »footer«
63
4.2.2 Der Schutzumschlag – <div id="wrapper">
64
4.2.3 Die Layoutbereiche erstellen
65
4.2.4 Visuell – schematische Darstellung der Bereiche
65
4.3 Überschriften – »h1« bis »h6«
66
4.3.1 Benutzen Sie Überschriften
67
4.3.2 Überschriftenebene nicht aufgrund der Schriftgröße wählen
67
4.4 Fließtext – Absätze und Hervorhebungen
68
4.4.1 Absätze – »p« wie »paragraph«
68
4.4.2 Text hervorheben – »strong« und »em«
69
4.4.3 HTML-Elemente verschachteln – zuerst geöffnet, zuletzt geschlossen
70
4.5 Über Block- und Inline-Elemente
70
4.5.1 Blockelemente werden so breit, wie es geht
70
4.5.2 Inline-Elemente werden nur so breit wie ihr Inhalt
71
4.5.3 Die Konturen von HTML-Elementen sichtbar machen
71
4.6 Listenkisten – Aufzählungen und Nummerierungen
72
4.6.1 Aufzählungen – ungeordnete Listen mit »ul« und »li«
72
4.6.2 Nummerierungen – geordnete Listen mit »ol« und »li«
73
4.7 Verschachtelte Listen
74
4.7.1 Eine verschachtelte Liste erstellen
74
4.7.2 Schematische Darstellung der verschachtelten Liste
75
4.8 Jeder Browser hat ein eingebautes Stylesheet
76
5 HTML-Elemente für Links, Bilder und mehr
79
5.1 Hyperlinks – das Besondere am World Wide Web
79
5.1.1 Anatomie eines Hyperlinks
80
5.1.2 Die Navigation – eine ungeordnete Liste mit Hyperlinks
81
5.1.3 Links auf andere Dateien – PDF, MP3 etc.
82
5.2 Die Wegbeschreibung zur Grafik – »img«
83
5.2.1 Die Attribute zu »img«
83
5.2.2 »img« – eine Grafik auf der Beispielseite einfügen
84
5.2.3 Ein Logo als Überschrift?
85
5.3 Weitere HTML-Elemente zur Auszeichnung von Text
86
5.3.1 Beginne eine neue Zeile mit »br«
86
5.3.2 »address« für Kontaktadressen
86
5.3.3 »span« ist ein semantisch neutrales Inline-Element
88
5.3.4 »blockquote« und »cite« für Zitate
88
5.4 Know-how – Zeichensätze und Sonderzeichen
89
5.4.1 UTF-8: Wissenswertes über Zeichensätze
90
5.4.2 Character Entities – die Kodierung von Sonderzeichen
91
6 Von der Beispielseite zur Beispielsite
95
6.1 Stimmt die Statik? Der HTML-Validator
95
6.2 CSS zum Ausprobieren – die W3C Core Styles
98
6.3 Die Kontaktseite – von der Seite zur Site
100
Teil III CSS Grundlagen – Kästchen gestalten
103
7 CSS kennenlernen – Schriften, Farben und Hyperlinks
105
7.1 Ein Stylesheet ist eine Sammlung von Formatvorlagen
105
7.2 Überblick: CSS und das Gestalten der HTML-Kästchen
106
7.3 Das erste eigene Stylesheet
107
7.3.1 Ein Stylesheet erstellen und einen CSS-Kommentar schreiben
107
7.3.2 Die Verbindung zwischen HTML und CSS – »link«
108
7.4 Farben für Hintergrund und Schrift definieren
109
7.4.1 Hintergrund- und Schriftfarbe für »body«
109
7.4.2 Hintergrund- und Schriftfarbe für »div#wrapper«
110
7.4.3 Hintergrund- und Schriftfarben im Kopfbereich
112
7.5 Schriftgestaltung mit »font-family« und »font-size«
113
7.6 Textgestaltung: Die Kontaktadresse im Fußbereich
115
7.7 Hyperlinks gestalten
116
7.7.1 Hyperlinks – das HTML-Element »a«
116
7.7.2 Besuchte und nicht besuchte Hyperlinks
117
7.7.3 Wenn die Maus darüber schwebt – »a:hover« und Kollegen
119
7.7.4 »outline« – die Umrisslinie um Elemente mit Fokus
120
7.8 Styles können an drei verschiedenen Stellen definiert werden
121
7.8.1 Möglichkeit 1: Extern – CSS-Regeln in einer eigenen CSS-Datei
121
7.8.2 Möglichkeit 2: Zwischen <head> und </head> im Element »style«
122
7.8.3 Möglichkeit 3: Direkt im HTML-Element mit dem Attribut »style«
122
7.8.4 Vorfahrt – welche Styles gewinnen?
123
8 Selektoren, Einheiten und Farben in CSS
125
8.1 Style – der Aufbau einer CSS-Regel
125
8.2 Ein Selektor wählt das zu gestaltende Kästchen aus
126
8.2.1 »Der Name der Kiste« – einfache Elementselektoren
127
8.2.2 Mehrere Kästchen auf einmal – Selektoren gruppieren mit Komma
127
8.2.3 Alle Kästchen auf der Seite – der Universalselektor »*«
128
8.3 Überblick: Die HTML-Elemente im DOM-Baum
128
8.4 Selektoren kombinieren – Nachfahren auswählen
130
8.4.1 Beispiel 1: Schriftgestaltung nur für den Slogan im Kopfbereich
130
8.4.2 Beispiel 2: Aufzählungszeichen nur in ungeordneten Listen gestalten
131
8.4.3 Beispiel 3: Unterschiedlich nummerierte Ebenen bei geordneten Listen
132
8.5 Eigene Namen vergeben – »id« und »class«
132
8.5.1 Es kann nur einen geben – »id«, der Selektor mit der Raute
133
8.5.2 Gruppenbildung – »class«, der Selektor mit dem Punkt
133
8.5.3 ID oder Klasse – wann nimmt man was?
135
8.5.4 Sinnvolle Namen – »id« und »class« sollten die Bedeutung des Elements beschreiben
136
8.6 Spezifität – das Punktesystem für Selektoren
136
8.6.1 Einer wird gewinnen – so funktioniert Spezifität
136
8.6.2 Ein paar Beispiele für die Punktewertung
137
8.6.3 Die Spezifität ist in Wirklichkeit eine Matrix ...
138
8.6.4 Sparsam benutzen – »!important«
138
8.7 Werte und Maße in CSS – die Qual der Wahl
139
8.7.1 Grundregeln: Die Leerstelle, die Null und der Anführungsstrich
139
8.7.2 Für den Bildschirm – relative Einheiten
139
8.7.3 Für den Drucker – absolute Einheiten
140
8.8 Farben definieren – hexadezimal, RGB und Namen
141
9.1 Zunächst in modernen Browsern testen
145
9.2 Das Box-Modell in der Übersicht
146
9.2.1 Alle Boxen sind gleich – das Modell
146
9.2.2 Der Inhaltsbereich – »width« (Breite) und »height« (Höhe)
147
9.2.3 Der Innenabstand – »padding«
148
9.2.4 Der Rahmen drumherum – »border« (Rahmenlinien)
149
9.2.5 Der Außenabstand – »margin«
149
9.2.6 Wenig intuitiv – die Gesamtbreite einer Box berechnen
150
9.2.7 Ein interaktives Box-Modell zum Ausprobieren
151
9.3 Kalibrierung – Abstände per Reset vereinheitlichen
152
9.3.1 Reset – Abstände annulieren und HTML5-Elemente blocken
152
9.3.2 Restaurierung – Abstände für die wichtigsten Elemente neu definieren
154
9.4 Webseite zentrieren mit »width« und »margin«
155
9.4.1 Die Breite eines Elements – »width«
155
9.4.2 Die Seite horizontal zentrieren mit »margin: auto«
156
9.5 Rahmenlinien erstellen – »border«
158
9.6 Ein bisschen Abstand drumherum – »padding«
159
9.6.1 Der erste Versuch: Ein »padding« für den Wrapper
159
9.6.2 Besser: Ein Padding für jeden Layoutbereich
160
9.7 Das Box-Modell und die farbliche Gestaltung
162
9.7.1 Das Logo mitgestalten – »padding« und »border« in Aktion
162
9.7.2 Das Box-Modell für das Logo im Entwickler-Tool des Firefox
163
9.8 Hintergrundgrafiken per CSS
164
9.8.1 Hintergrundgrafik einbinden – »background-image«
164
9.8.2 Hintergrundgrafiken wiederholen – »background-repeat«
167
9.8.3 Hintergrundgrafik positionieren – »background-position«
167
9.8.4 Hintergrundgrafik fixieren – »background-attachment«
168
9.8.5 Die Kurzschreibweise – »background«
169
9.8.6 Das Box-Modell ist ein bisschen 3D
170
9.9 Vertikale Abstände kollabieren – »collapsing margins«
170
9.9.1 Kollabierende Außenabstände bei aufeinanderfolgenden Elementen
171
9.9.2 Das Beispiel – ein Kopfbereich mit Überschrift und Absatz
171
9.9.3 Collapsing margins, Teil 1: Die Überschrift im Kopfbereich
172
9.9.4 Collapsing margins, Teil 2: Der Absatz im Kopfbereich
174
10 Ordnung halten und aufräumen
177
10.1 Der Kommentar am Anfang
177
10.2 Das Stylesheet in Abschnitte unterteilen
178
10.2.1 Teil 1: Allgemeine Styles
179
10.2.2 Teil 2: Styles für die Layoutbereiche
180
10.2.3 Teil 3: Sonstige Styles
180
10.3 Verschiedene Schreibweisen für Styles
180
10.3.1 Eine typische CSS-Regel: Eine Deklaration pro Zeile
180
10.3.2 Kurze Styles: Alles in einer Zeile
181
10.3.3 Kombinierte und gruppierte Selektoren
181
10.4 Die Reihenfolge der Deklarationen im Style
182
10.4.1 Möglichkeit 1: Die Reihenfolge orientiert sich am Aufbau der Boxen
182
10.4.2 Möglichkeit 2: Alphabetisch sortierte Deklarationen
183
10.5 Effektiv – Kurzschreibweisen für »padding« und »margin«
183
10.5.1 Alle vier Seiten haben den gleichen Wert
183
10.5.2 Die Reihenfolge entscheidet – nur eine Seite hat einen anderen Wert
184
10.5.3 Unterschiedliche Werte für alle vier Seiten
185
10.5.4 Paarweise – »oben = unten« und »links = rechts«
185
10.6 Mehrere Stylesheets erstellen und zentral einbinden
186
10.6.1 Teile und herrsche – Aufteilung der Styles
186
10.6.2 Eines, sie zu binden – das zentrale Stylesheet »zentrale.css«
187
10.6.3 Einen Link zum zentralen Stylesheet erstellen
188
10.6.4 »@media« – Definition der Ausgabemedien
188
10.7 Styles aufräumen: Die einzelnen Stylesheets
189
10.7.1 Das zentrale Stylesheet »zentrale.css« im Überblick
189
10.7.2 Reset und Restaurierung der Abstände – »reset.css«
190
10.7.3 Die Gestaltung für den Bildschirm – »bildschirm.css«
192
10.8 Dateien in Unterordnern organisieren
194
10.8.1 Ordner erstellen und Dateien verschieben
195
10.8.2 Die Pfadangabe zum Stylesheet ändern
197
10.8.3 Pfadangaben zu den Grafiken ändern
197
10.9 Der CSS-Validator
199
10.10 Auf einen Blick
201
11 Eine einfache horizontale Navigation
203
11.1 Einfache horizontale Navigation mit »display: inline«
203
11.1.1 Die Listenelemente in der Navigation selektieren
203
11.1.2 Das Stylesheet »navi-inline.css« erstellen
205
11.1.3 »Debuggen« – Fehler finden mit den Entwickler-Tools im Browser
207
11.1.4 Feineinstellungen – Abstände und Hyperlinks anpassen
208
11.2 Punktsieg – Spezifität in der Praxis
209
11.2.1 »margin-bottom« für »ul«
209
11.2.2 Die Farbe der Hyperlinks
210
11.2.3 Feineinstellungen für die Hyperlinks in der Navigation
210
11.3 Von Elementen und Boxen
210
11.3.1 Im Quelltext »Element«, am Bildschirm »Box«
211
11.3.2 »display« ändert nur die Box, nicht das Element
211
11.4 Tabbed Navigation – Navigation mit Registern
212
11.4.1 Schritt 1: Vorbereitende Maßnahmen für den Navigationsbereich
212
11.4.2 Schritt 2: Die Hyperlinks im Navigationsbereich zu Tabs machen
213
11.4.3 Schritt 3: Einen Rollover-Effekt für die Tabs definieren
214
11.4.4 Schritt 4: »Sie sind hier« – aktuelle Seite hervorheben
215
11.4.5 Standardkonform, barrierefrei und flexibel
218
11.4.6 Optional: Abgerundete Ecken mit »border-radius«
219
11.5 Know-how – das Box-Modell für Inliner
220
11.5.1 Es gibt verschiedene Arten von Inline-Elementen
220
11.5.2 Inline-Boxen sind etwas anders als Block-Boxen
221
11.5.3 Inline-Blockboxen sind ein Mittelding
222
11.6 Exkurs: Whitespace – der Leerstellenpakt
223
11.6.1 Ein Zwischenraum, hindurchzuschaun ...
223
11.6.2 Whitespace – Leerstellen, Tabulatoren und Zeilenumbrüche
224
11.6.3 So entsteht der mysteriöse Zwischenraum
224
11.6.4 Sechs Möglichkeiten zur Entfernung der Lücke
225
12 Ein Kontaktformular erstellen und gestalten
229
12.1 Schritt 1: Das HTML für das Kontaktformular
229
12.1.1 Das Element »form« definiert ein Formular
231
12.1.2 Beschriftung der Formularfelder mit »label«
232
12.1.3 Ein ganz normales einzeiliges Eingabefeld
232
12.1.4 Ein spezielles Eingabefeld für E-Mail-Adressen
233
12.1.5 Ein mehrzeiliges Eingabefeld mit »textarea«
234
12.1.6 Submit: Eine Schaltfläche zum Abschicken der Formulardaten
234
12.2 Schritt 2: Das Formular per CSS gestalten
235
12.2.1 Ein neues Stylesheet für Formulare
235
12.2.2 Die Gestaltung des Kontaktformulars
236
12.2.3 Kindselektoren und Attributselektoren
239
12.3 Schritt 3: Das Formular aktivieren und testen
240
12.3.1 Das Reiseziel für die Formulardaten festlegen
240
12.3.2 Das fertige Formular testen
242
12.4 Exkurs: Ein mehrspaltiges Kontaktformular
242
13 Webfonts, Fließtext und Druckversion
247
13.1 Webfonts – die Schriftart gleich mitliefern
247
13.1.1 Klassische Schriftarten im Web
247
13.1.2 Webfonts im Überblick
248
13.1.3 Die Google Fonts – einfach und kostenlos
249
13.1.4 Google Fonts – so geht’s
250
13.1.5 Den Fließtext auf den Beispielseiten gestalten
251
13.2 Fließtext gestalten
253
13.2.1 Schriftgröße und Zeilenabstand
253
13.2.2 Zitate gestalten
255
13.2.3 »del« und »ins« für Änderungen am Text
257
13.3 Eine Druckversion für die Beispielseiten
258
13.3.1 Stylesheet nur für die Anzeige am Bildschirm
259
13.3.2 Ein Stylesheet nur für den Ausdruck
259
13.3.3 Grundlegende Gestaltung für die Druckversion
260
13.3.4 URL der Hyperlinks sichtbar machen
262
13.4 Favicon – das Minilogo für Ihre Seiten
264
14 HTML-Tabellen erstellen und gestalten
267
14.1 Das HTML für Tabellen
267
14.1.1 Eine einfache Tabelle besteht aus »table«, »tr« und »td«
267
14.1.2 Überschriften in Tabellen stehen in »th«
269
14.1.3 Logische Bereiche in Tabellen – »thead«, »tbody« und »tfoot«
270
14.1.4 Zellen verbinden – »colspan« und »rowspan«
271
14.2 Tabellen gestalten per CSS – ein Beispiel
272
14.2.1 Das HTML für die Beispieltabelle
272
14.2.2 Die Gestaltung der Beispieltabelle per CSS
274
14.2.3 Eine Tabelle ohne Zwischenräume – »border-collapse: collapse«
275
14.3 Übersichtliche Tabellen – Hover und Zebrastreifen
276
14.3.1 Eine Tabelle mit Zebrastreifen
276
14.3.2 Tabellenzeilen mit Hover-Effekt – »tr:hover«
278
15 Der Browser und das CSS: Kaskade, Vererbung oder Standardwert
281
15.1 Überblick: DOM-Baum und Kaskade
281
15.1.1 Der DOM-Baum für die Startseite
282
15.1.2 Drei Konzepte – Kaskade, Vererbung und Standardwert
282
15.1.3 Das Beispiel: »margin-bottom« für »ul.navmain«
284
15.2 Kaskade – Stufe 1: Sammle alle relevanten Deklarationen
284
15.2.1 Das Browser-Stylesheet
285
15.2.2 Die Stylesheets des Autors – »reset.css«
286
15.2.3 Die Stylesheets des Autors: »navi-tabs.css«
287
15.3 Kaskade – Stufe 2: Sortiere nach Wichtigkeit
287
15.3.1 Normal – Deklarationen ohne »!important«
288
15.3.2 Wichtig – Deklarationen mit »!important«
288
15.3.3 Die Sortierung nach Wichtigkeit im Überblick
288
15.4 Kaskade – Stufe 3: Sortiere nach Spezifität
290
15.5 Kaskade – Stufe 4: Sortiere nach Reihenfolge
291
15.6 Die Vererbung (inheritance)
292
15.6.1 Vererbung macht ein Stylesheet übersichtlicher
293
15.6.2 Bestimmte Eigenschaften werden nicht vererbt
293
15.6.3 Potenzielle Probleme bei der Vererbung relativer Werte
294
15.7 Der Standardwert (initial value)
295
Teil IV CSS-Positionierung – Kästchen verschieben
297
16 Kästchen verschieben mit »position«
299
16.1 »Flow« – die Seite ist ein langer, ruhiger Fluss
300
16.1.1 Drei Block-Boxen im Fluss
300
16.1.2 Drei verkürzte Boxen im Fluss
302
16.2 Versetzt weiterfließen – »position: relative«
303
16.3 Raus aus dem Fluss – »position: absolute«
304
16.4 Absolute Positionierung auf der Beispielsite
306
16.4.1 Absolute Positionierung relativ zum Rand des Browserfensters
306
16.4.2 Absolute Positionierung mit einem umgebenden, relativ positionierten Element
308
16.4.3 Kleine Übung zwischendurch: »Grundlagen.« eine Zeile tiefer setzen
310
16.5 Wie ein Fels in der Brandung – »position: fixed«
311
16.6 Positionierte Boxen und der »z-index«
313
17 Kästchen verschieben mit »float« und »clear«
317
17.1 Text um Bilder fließen lassen
317
17.1.1 Die Grafik einbinden
318
17.1.2 Die Grafik floaten mit »float:left«
319
17.1.3 Einen Abstand zwischen Grafik und Text definieren
320
17.2 Praktisch – CSS-Klassen zum Floaten
321
17.3 Floats beenden mit »clear«
323
17.4 Floats mit mehreren Boxen
326
17.4.1 Das Beispiel: Drei Boxen ohne »float«
326
17.4.2 Drei Kästchen nach links floaten
327
17.4.3 Drei Kästchen nach rechts floaten
328
17.4.4 »float drop« – zu wenig Platz im Browserfenster
329
17.4.5 »float« und verschieden hohe Boxen
330
17.5 Zusammenfassung: Besonderheiten beim Floaten
331
18 Containing Floats – gefloatete Elemente umschließen
333
18.1 Die Beispielseite zum Umschließen von Floats
333
18.2 Das Problem: Gefloatete Elemente ragen nach unten heraus
336
18.3 Mehrere Methoden zum Umschließen von Floats
338
18.4 Methode 1: Zusätzliches HTML-Element und »clear«
339
18.5 Methode 2: Set a float to fix a float
340
18.6 Methode 3: Ohne »float« und »clear« – »overflow: hidden«
342
18.7 Methode 4: Auch ohne »float« und »clear« – »display:table«
344
18.8 Methode 5: Der Micro Clearfix Hack
345
18.9 Die Galerieseite in die Beispielsite einbauen
346
18.9.1 Die Beispielseite »galerie.html«
348
18.9.2 Das CSS in »bildschirm.css« im Überblick
349
18.10 Auf einen Blick
350
19 Eine floatbasierte horizontale Navigation
353
19.1 Vorbereitungen für die floatbasierte Navigation
354
19.2 Schritt 1: Den Navigationsbereich gestalten
355
19.3 Schritt 2: Die Links in der Navigation gestalten
357
19.4 Schritt 3: Linkzustände gestalten
358
19.5 Know-how: Lineare Farbverläufe per CSS3
360
19.5.1 Die Farben definieren: Farbwert (»color«) und Verlaufspunkt (»stop«)
361
19.5.2 Die Richtung definieren: Den Verlauf der Farben bestimmen
361
Teil V Mehrspaltige Layouts mit CSS
365
20 Media Queries – eine mobile Version erstellen
367
20.1 Bestandsaufname: Die Beispielseiten auf einem Smartphone
367
20.2 Schritt 1: Die feste Layoutbreite entfernen
369
20.3 Schritt 2: Die Anweisung »meta viewport« hinzufügen
370
20.4 Schritt 3: Den Slogan neu positionieren
372
20.5 Schritt 4: Eine Media Query für breite Browserfenster
373
20.5.1 Ein neues Stylesheet für breitere Browserfenster
375
20.5.2 Das Layout der Beispielseiten für breite Browserfenster
376
20.6 Schritt 5: Das Kontaktformular anpassen
379
20.7 Know-how: Bilder für hochauflösende Bildschirme
381
20.7.1 Das Problem: Hochauflösende Bildschirme benötigen mehr Pixel
381
20.7.2 Grafiken nach Pixeldichte servieren: <img> und das Attribut »srcset x«
382
20.7.3 Die Beispieldateien für hochauflösende Bildschirme optimieren
383
21 Zweispaltiges Layout mit »float« und »margin«
387
21.1 Methoden zum Layouten per CSS im Überblick
387
21.1.1 Die Gegenwart: »display«, »position« und »float«
387
21.1.2 Web Developer – Layoutmethoden auf Webseiten untersuchen
388
21.1.3 Die Zukunft: Layoutmodule von CSS3
389
21.2 Layout mit fester Breite per »float« und »margin«
390
21.2.1 Schritt 1: Ein neues Stylesheet erstellen und einbinden
391
21.2.2 Schritt 2: Den Navigationsbereich nach links floaten
392
21.2.3 Schritt 3: Den Textbereich mit einem Außenabstand versehen
394
21.2.4 Schritt 4: Die Navigationsliste gestalten
395
21.2.5 Schritt 5: Die Hyperlinks in der Navigation gestalten
396
21.2.6 Schritt 6: Den aktuellen Navigationspunkt hervorheben
397
21.2.7 Schritt 7: Überschrift ausrichten und Fußbereich clearen
398
21.3 Flexibles Layout mit fester Navigationsspalte
400
21.3.1 Flüssig, elastisch, flexibel, frustriert ...
400
21.3.2 So funktionieren flexible Layouts
400
21.3.3 Das Layout flexibilisieren
401
21.4 Flexible Layouts und das Border-Box-Modell
403
21.4.1 Das Problem mit dem klassischen Box-Modell von CSS
403
21.4.2 Die Lösung: Das Border-Box-Modell mit »box-sizing: border-box«
405
21.5 Know-how: Die globale Wirkung von »clear« und der BFC
407
21.5.1 Die globale Wirkung von »clear« ist manchmal erwünscht
407
21.5.2 Die globale Wirkung von »clear« auf der Seite »galerie.html«
408
21.5.3 Lösungen für die Seite »galerie.html«
410
21.5.4 Der Block Formatting Context (BFC)
410
22 Mehrspaltige Layouts mit »Content First«
413
22.1 Die HTML-Elemente »aside« und »section«
413
22.1.1 Ideal für Sidebars: das HTML-Element »aside«
414
22.1.2 Inhalte in Abschnitte unterteilen: das HTML-Element »section«
414
22.2 Zweispaltige Layouts: beide Bereiche mit »float«
415
22.2.1 Schritt 1: »aside« und »section« – Infobereich im HTML hinzufügen
415
22.2.2 Schritt 2: Die Grundformatierung in »bildschirm.css«
417
22.2.3 Schritt 3: Desktop-Version mit zweispaltigem Layout
418
22.2.4 Optional: Spalten umdrehen? Inhaltsbereich nach rechts floaten …
421
22.2.5 Das feste, zweispaltige Float-Layout flexibilisieren
422
22.3 Dreispaltige Layouts: »float« und negativer Margin
423
22.3.1 Der Ausgangspunkt: die Startseite im Überblick
423
22.3.2 Schritt 1: Den Inhaltsbereich floaten und negativen Margin zuweisen
424
22.3.3 Schritt 2: Info- und Newsbereich floaten
426
22.4 »Bäumchen wechsel dich« für die Layoutbereiche
428
22.4.1 Möglichkeit 1: Info- und Newsbereich tauschen die Seiten
428
22.4.2 Möglichkeit 2: Inhaltsbereich und doppelte Sidebar
429
23 Suchfunktion, Dropdown-Menü und mobile Navigation
433
23.1 Eine Suchfunktion für Ihre Site
433
23.1.1 Schritt 1: Das HTML für das Suchformular
434
23.1.2 Schritt 2: Das Suchformular per CSS positionieren
435
23.1.3 Schritt 3: Das Suchformular per CSS gestalten
437
23.1.4 Optional: Ein serverseitiges Suchprogramm einbinden
439
23.2 Dropdown – horizontale Navigation zum Ausklappen
440
23.2.1 Die Ausgangsposition: Die Beispielseiten mit zwei Navigationsebenen
440
23.2.2 Schritt 1: Listenelemente mit »clear« untereinanderstellen
442
23.2.3 Schritt 2: Die zweite Navigationsebene verstecken
444
23.2.4 Schritt 3: Die zweite Navigationsebene wieder sichtbar machen
445
23.2.5 Schritt 4: Die Links in der zweiten Navigationsebene gestalten
446
23.2.6 Auf Touchscreens gibt es kein »:hover« …
447
23.2.7 Dropdowns auf Touchscreens mit »Double Tap To Go«
447
23.3 Eine mobile Navigation nur mit CSS
449
23.3.1 Schritt 1: Einen Menü-Link auf den Webseiten einfügen
449
23.3.2 Schritt 2: Stylesheet erstellen Menü-Link gestalten
451
23.3.3 Schritt 3: Navigationsbereich gestalten
453
23.3.4 Schritt 4: Den Navigationsbereich per Flexbox verschieben
455
23.3.5 Schritt 5: Das Suchformular wieder einblenden
457
24 Layouten mit der Flexbox: »display:flex«
461
24.1 Flexbox: Das »CSS Flexible Box Layout Module«
461
24.1.1 Entstehung und Browserkompatibilität
462
24.1.2 Flexbox: Neue Möglichkeiten ohne alte Probleme
463
24.1.3 Die Flexbox ist für eindimensionale Layouts gedacht
463
24.2 Der erste Schritt: Flexbox definieren mit »display:flex«
464
24.2.1 Die Flexbox basiert auf dem »Eltern-Kind-Prinzip«
464
24.2.2 Eine Flexbox definieren: »display:flex« für das Elternelement
465
24.3 Die Ausdehnung der Flex-Items bestimmen mit »flex«
467
24.3.1 Alle Flex-Items sollen gleich breit sein: »flex: 1«
467
24.3.2 »Verhältnismäßig« einfach: Flex-Items mit unterschiedlicher Breite
468
24.3.3 Die Reihenfolge der Flex-Items ändern mit »order«
469
24.4 »flex« ist kurz für »flex-grow«, »flex-shrink« und »flex-basis«
470
24.4.1 Die Standardwerte für »flex-grow«, »flex-shrink« und »flex-basis«
470
24.4.2 Die Kurzschreibweise »flex« im Detail
471
24.4.3 Komplex: So berechnet der Browser die Größe der Flex-Items
472
24.5 Das Box-Modell der Flexbox: Haupt- und Nebenachsen
473
24.5.1 Das Flex-Box-Modell hat eine Haupt- und eine Nebenachse
473
24.5.2 »flex-direction« ändert die Flussrichtung: »row« wird zu »column«
474
24.5.3 »flex-wrap« ermöglicht eine mehrzeilige Flexbox
475
24.5.4 »flex-flow« ist die Kurzschreibweise für »flex-direction« und »flex-wrap«
477
24.6 Beispiel: Flexibles Kontaktformular ohne Media Query
477
24.6.1 Schritt 1: Flexbox-Container definieren
478
24.6.2 Schritt 2: Die Beschriftung – »label« bekommt eine feste Breite
479
24.6.3 Schritt 3: Die Eingabefelder werden flexibel
480
24.6.4 Schritt für Schritt: So funktioniert das flexible Formular
482
24.6.5 »Klasse. Ab heute dann mit Flexbox?« – »Kommt drauf an …«
483
24.7 Flexbox: Eigenschaften und Werte in der Übersicht
484
24.7.1 Eigenschaften und Werte für die Flexibilität
484
24.7.2 Eigenschaften und Werte für Ausrichtung und Verteilung
485
Teil VI Patches, Werkzeuge und nützliche Websites
489
25 Patchwork – Flicken im CSS
491
25.1 IE und CSS – zwei Welten begegnen sich
491
25.1.1 Eine superkurze Geschichte des Internet Explorers
492
25.1.2 »Conditional Comments« – Styles nur für den IE
492
25.2 Der Internet-Explorer-Countdown: 11, 10, 9 …
493
25.2.1 Die Beispielseiten im Internet Explorer 11
493
25.2.2 Die Beispielseiten im Internet Explorer 10
494
25.2.3 Die Beispielseiten im Internet Explorer 9
495
25.3 Die Beispielseiten im Internet Explorer 8
496
25.3.1 »HTML5Shiv«: Nachhilfe per JavaScript für IE8 und älter
497
25.3.2 Der IE8 kennt keine Media Queries
499
25.4 Die Browserpräfixe: »-webkit-« und Co
501
25.5 Ein Fundament für Ihr CSS: »normalize.css«
502
26 Werkzeuge und nützliche Websites
505
26.1 Die Browser bestimmen, was geht
505
26.1.1 Die aktuellen Browser im Überblick
505
26.1.2 Unentbehrlicher Helfer im Alltag: »caniuse.com«
507
26.2 Browserzubehör – praktische Add-ons
507
26.2.1 View Source Chart – Quelltext als »lauter little boxes«
507
26.2.2 Web Developer – das Schweizer Offiziersmesser (Firefox/Chrome)
508
26.2.3 ColorZilla – die Farbenwahl (Firefox und Chrome)
509
26.3 Editoren für HTML und CSS
509
26.4 Editoren zum Bearbeiten von Grafiken
511
26.5 FTP – Veröffentlichen von Webseiten
511
26.6 Referenzen und Websites zu HTML und CSS
512
26.6.1 Nachschlagewerke zu HTML
512
26.6.2 Nachschlagewerke zu CSS
513
26.6.3 Immer einen Besuch wert: »css-tricks.com«
514