Einstieg in CSS: Webseiten gestalten mit HTML und CSS ; [Aktuell zu HTML5 und CSS3 ; Grundlagen: Schriften, Farben und Box-Modelle ; Konzepte: Spezifität, Kaskade und Positionierung verständlich erklärt ; Gestaltung: Navigation, mehrspaltige Layouts und Media Queries]
Saved in:
| Main Author: | |
|---|---|
| Format: | Book |
| Language: | German |
| Published: |
Bonn
Galileo Press
2014
|
| Edition: | 1. Aufl. |
| Series: | Galileo Computing
|
| Subjects: | |
| Online Access: | Inhaltstext Ausführliche Beschreibung Inhaltsverzeichnis Klappentext |
| Physical Description: | 487 S. Ill., graph. Darst. |
| ISBN: | 9783836227766 3836227762 |
Staff View
MARC
| LEADER | 00000nam a2200000 c 4500 | ||
|---|---|---|---|
| 001 | BV041387233 | ||
| 003 | DE-604 | ||
| 005 | 20200114 | ||
| 007 | t | ||
| 008 | 131029s2014 gw ad|| |||| 00||| ger d | ||
| 015 | |a 13,N33 |2 dnb | ||
| 016 | 7 | |a 1037931475 |2 DE-101 | |
| 020 | |a 9783836227766 |c kart. : EUR 24.90 (DE), EUR 25.60 (AT), sfr 32.90 (freier Pr.) |9 978-3-8362-2776-6 | ||
| 020 | |a 3836227762 |9 3-8362-2776-2 | ||
| 035 | |a (OCoLC)864524588 | ||
| 035 | |a (DE-599)DNB1037931475 | ||
| 040 | |a DE-604 |b ger |e rakddb | ||
| 041 | 0 | |a ger | |
| 044 | |a gw |c XA-DE-NW | ||
| 049 | |a DE-898 |a DE-859 |a DE-29T |a DE-739 |a DE-M347 |a DE-83 |a DE-573 |a DE-863 |a DE-92 |a DE-1102 |a DE-523 |a DE-Aug4 |a DE-473 | ||
| 082 | 0 | |a 006.74 |2 22/ger | |
| 084 | |a ST 230 |0 (DE-625)143617: |2 rvk | ||
| 084 | |a ST 250 |0 (DE-625)143626: |2 rvk | ||
| 084 | |a ST 252 |0 (DE-625)143627: |2 rvk | ||
| 084 | |a ST 253 |0 (DE-625)143628: |2 rvk | ||
| 084 | |a 004 |2 sdnb | ||
| 100 | 1 | |a Müller, Peter |d 1960- |e Verfasser |0 (DE-588)1013505735 |4 aut | |
| 245 | 1 | 0 | |a Einstieg in CSS |b Webseiten gestalten mit HTML und CSS ; [Aktuell zu HTML5 und CSS3 ; Grundlagen: Schriften, Farben und Box-Modelle ; Konzepte: Spezifität, Kaskade und Positionierung verständlich erklärt ; Gestaltung: Navigation, mehrspaltige Layouts und Media Queries] |c Peter Müller |
| 246 | 1 | 0 | |a HTML 5 CSS 3 fünf drei |
| 250 | |a 1. Aufl. | ||
| 264 | 1 | |a Bonn |b Galileo Press |c 2014 | |
| 300 | |a 487 S. |b Ill., graph. Darst. | ||
| 336 | |b txt |2 rdacontent | ||
| 337 | |b n |2 rdamedia | ||
| 338 | |b nc |2 rdacarrier | ||
| 490 | 0 | |a Galileo Computing | |
| 650 | 0 | 7 | |a Cascading Style Sheets 3.0 |0 (DE-588)7750895-6 |2 gnd |9 rswk-swf |
| 650 | 0 | 7 | |a Webdesign |0 (DE-588)1041632088 |2 gnd |9 rswk-swf |
| 650 | 0 | 7 | |a HTML 5.0 |0 (DE-588)7704810-6 |2 gnd |9 rswk-swf |
| 689 | 0 | 0 | |a Webdesign |0 (DE-588)1041632088 |D s |
| 689 | 0 | 1 | |a HTML 5.0 |0 (DE-588)7704810-6 |D s |
| 689 | 0 | 2 | |a Cascading Style Sheets 3.0 |0 (DE-588)7750895-6 |D s |
| 689 | 0 | |5 DE-604 | |
| 856 | 4 | 2 | |m X:MVB |q text/html |u http://deposit.dnb.de/cgi-bin/dokserv?id=4397940&prov=M&dok_var=1&dok_ext=htm |3 Inhaltstext |
| 856 | 4 | 2 | |q text/html |u http://www.galileocomputing.de/3545 |3 Ausführliche Beschreibung |
| 856 | 4 | 2 | |m DNB Datenaustausch |q application/pdf |u http://bvbr.bib-bvb.de:8991/F?func=service&doc_library=BVB01&local_base=BVB01&doc_number=026835101&sequence=000001&line_number=0001&func_code=DB_RECORDS&service_type=MEDIA |3 Inhaltsverzeichnis |
| 856 | 4 | 2 | |m Digitalisierung UB Passau - ADAM Catalogue Enrichment |q application/pdf |u http://bvbr.bib-bvb.de:8991/F?func=service&doc_library=BVB01&local_base=BVB01&doc_number=026835101&sequence=000004&line_number=0002&func_code=DB_RECORDS&service_type=MEDIA |3 Klappentext |
| 943 | 1 | |a oai:aleph.bib-bvb.de:BVB01-026835101 | |
Record in the Search Index
| DE-BY-863_location | 1000 |
|---|---|
| DE-BY-FWS_call_number | 1000/ST 253 C18 M947 |
| DE-BY-FWS_katkey | 512881 |
| DE-BY-FWS_media_number | 083101318777 |
| _version_ | 1824555701149630464 |
| adam_text |
AUF EINEN BLICK
TEIL I DIE EINLEITUNG
1 DAS WEB IST NICHT AUS PAPIER 29
2 HTML UND CSS IM SCHNELLDURCHLAUF 41
TEIL II HTML-CRASHKURS - KAESTCHEN ERSTELLEN
3 DAS HTML-GRUNDGERUEST 53
4 HTML-ELEMENTE FUER OBERSCHRIFTEN, TEXT UND LISTEN 63
5 HTML-ELEMENTE FUER LINKS, BILDER UND MEHR 81
6 DAS HTMLFUER DIE BEISPIELSEITEN 99
TEIL III CSS GRUNDLAGEN - KAESTCHEN GESTALTEN
7 CSS KENNENLERNEN-SCHRIFTEN, FARBEN UND HYPERLINKS 111
8 SELEKTOREN, EINHEITEN UND FARBEN 133
9 DAS BOX-MODELL 153
10 ORDNUNG HALTEN IN DEN STYLESHEETS 187
11 EINE HORIZONTALE NAVIGATION PER DISPLAY:INLINE 207
12 EIN KONTAKTFORMULAR ERSTELLEN 231
13 HTML-TABELLEN ERSTELLEN UND GESTALTEN 247
14 FLIESSTEXT, WEBFONTS UND DRUCKVERSION 259
15 KASKADE, VERERBUNG ODER STANDARDWERT 279
TEIL IV CSS-POSITIONIERUNG - KAESTCHEN VERSCHIEBEN
16 KAESTCHEN VERSCHIEBEN MIT POSITION 297
17 KAESTCHEN VERSCHIEBEN MIT FLOAT UND CLEAR 315
18 CONTAINING FLOATS-GEFLOATETE ELEMENTE UMSCHLIESSEN 331
19 EINE FLOATBASIERTE HORIZONTALE NAVIGATION 351
TEILV MEHRSPALTIGE LAYOUTS MIT CSS
20 MEDIA QUERIES - EINE MOBILE VERSION ERSTELLEN 365
21 ZWEISPALTIGES LAYOUT MIT FLOAT UND MARGIN 381
22 WEITERE MEHRSPALTIGE LAYOUTMETHODEN 409
23 PATCHWORK - FLICKEN IM CSS 437
TEIL VI TIPPS UND TRICKS
24 SUCHFUNKTION, DROPDOWN UND HTML5 449
25 NUETZLICHE PROGRAMME UND WEBSITES 469
HTTP://D-NB.INFO/1037931475
INHALT
VORWORT 23
TEIL I DIE EINLEITUNG
1 DAS WEB IST NICHT AUS PAPIER
29
1.1 PAPIERDENKEN, WEBSEITEN UND ENTTAEUSCHTE ERWARTUNGEN 29
1.2 DER AUTOR EINER WEBSEITE HAT KEINE VOLLSTAENDIGE KONTROLLE
UEBER DEREN AUSSEHEN 30
1.2.1 DER UNTERSCHIED ZWISCHEN PAPIER-UND WEBSEITEN 30
1.2.2 DER BENUTZER KANN DIE WUENSCHE DER WEBDESIGNER IGNORIEREN 31
1.2.3 IM WEB BESTIMMT DER BENUTZER, NICHT DER AUTOR 32
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 PAPIERSEITEN SIND STARR, WEBSEITEN FLEXIBEL 34
1.4 JENSEITS VON PAPIER 35
1.4.1 WEBSEITEN HABEN SCHICHTEN 35
1.4.2 MEDIENGERECHTES WEBDESIGN 36
1.5 ZURUECK IN DIE ZUKUNFT-DIE BROWSER BESTIMMEN 37
1.5.1 DIE ERSTEN GRAFISCHEN BROWSER-MOSAIC UND NETSCAPE NAVIGATOR 37
1.5.2 NOTWEHR IN DEN 1990ERN-TABELLEN UND FONT 38
1.5.3 DAS NEUE JAHRTAUSEND-TABELLENFREIE LAYOUTS MIT CSS 39
1.5.4 DIE BROWSER BESTIMMEN, WAS GEHT - HTML5 UND CSS3 40
2 HTML UND CSS
IM SCHNELLDURCHLAUF 41
2.1 WEBSEITEN BESTEHEN AUS RECHTECKIGEN KAESTCHEN 41
2.2 HTML IST DER MAURER-RECHTECKIGE KAESTCHEN ERSTELLEN 42
2.2.1 DIE ERSTE WEBSEITE ERSTELLEN 42
2.2.2 DIE KAESTCHEN DER HTML-ELEMENTE SICHTBAR MACHEN 43
5
2.3 CSS IST DER STYLIST - RECHTECKIGE KAESTCHEN GESTALTEN 45
2.3.1 DAS STYLING FUER DIE WEBSEITE-DIE ERSTE CSS-REGEL 45
2.3.2 EIN STYLE FUER DIE H1-UEBERSCHRIFT 47
2.4 ENTWICKLER-TOOLS-HTML UND CSS ANALYSIEREN 48
2.5 AUF EINEN BLICK 49
TEIL II HTML-CRASHKURS - KAESTCHEN ERSTELLEN
3 DAS HTML-GRUNDGERUEST
53
3.1 HTML-HYPERLINKS ERSTELLEN UND ETIKETTEN KLEBEN 53
3.1.1 HT WIE HYPERTEXT-TEXT MIT HYPERLINKS 54
3.1.2 M WIE MARKUP - ETIKETTEN KLEBEN 54
3.1.3 LWIE LANGUAGE-VOKABELN UND GRAMMATIKREGELN 54
3.1.4 MISSVERSTAENDNISSE ZU HTML 55
3.2 DAS HTML-GRUNDGERUEST IST DAS SKELETT EINER WEBSEITE 55
3.2.1 EINE GUTE ANGEWOHNHEIT- 1- KOMMENTARE- 55
3.2.2 EIN GRUNDGERUEST FUER EINE WEBSEITEERSTELLEN 56
3.3 DIE DOKUMENTTYP-DEFINITION - !DOCTYPE HTML 57
3.4 DAS STAMMELEMENT HTML 58
3.5 INFORMATIONEN UEBER DIE WEBSEITE - HEAD 58
3.5.1 DIE ANGABE DES ZEICHENSATZES - META CHARSET="UTF-8" 58
3.5.2 DER NAME DER SEITE- TITLE 59
3.5.3 DIE BESCHREIBUNG FUER SUCHMASCHINEN - META NAME="DESCRIPTION" 60
3.5.4 WEITERE META-ELEMENTE 60
3.6 DER INHALT DER WEBSEITE- BODY 61
3.7 HTML-ELEMENTE IM QUELLTEXT-ANFANGS-TAG, INHALT UND ENDE-TAG 61
3.8 AUF EINEN BLICK 62
4 HTML-ELEMENTE FUER UEBERSCHRIFTEN, TEXT UND LISTEN
63
4.1 DAS GRUNDGERUEST FUER DIE STARTSEITE ERSTELLEN 64
4.2 DIE SEITE IN LAYOUTBEREICHE EINTEILEN - DIV 65
6
4.2.1 VIER BEREICHE: KOPFBEREICH, NAVIGATION, INHALT UND FUSSBEREICH 65
4.2.2 DER SCHUTZUMSCHLAG - DIV ID="WRAPPER" 66
4.2.3 DIE LAYOUTBEREICHE MIT DIV ERSTELLEN 66
4.2.4 VISUELL - SCHEMATISCHE DARSTELLUNG DER DIV-BEREICHE 67
4.3 UEBERSCHRIFTEN - HL BIS H6 68
4.3.1 BENUTZEN SIE UEBERSCHRIFTEN 68
4.3.2 UEBERSCHRIFTENEBENE NICHT AUFGRUND DER SCHRIFTGROESSE WAEHLEN 69
4.4 FLIESSTEXT-ABSAETZE UND HERVORHEBUNGEN 70
4.4.1 ABSAETZE - P WIE PARAGRAPH 70
4.4.2 TEXT HERVORHEBEN - STRONG UND EM 70
4.4.3 HTML-ELEMENTE VERSCHACHTELN - ZUERST GEOEFFNET, ZULETZT GESCHLOSSEN
. 71
4.5 UEBER BLOCK-UND INLINE-ELEMENTE 72
4.5.1 BLOCKELEMENTE WERDEN SO BREIT, WIE ES GEHT 72
4.5.2 INLINE-ELEMENTE WERDEN NUR SO BREIT WIE IHR INHALT 72
4.5.3 BLOCK-UND INLINE-ELEMENTE SICHTBAR MACHEN 73
4.6 LISTEN-AUFZAEHLUNGEN UND NUMMERIERUNGEN 74
4.6.1 AUFZAEHLUNGEN - UNGEORDNETE LISTEN MIT UL UND II 74
4.6.2 NUMMERIERUNGEN - GEORDNETE LISTEN MIT OL UND II 75
4.7 VERSCHACHTELTE LISTEN 76
4.7.1 EINE VERSCHACHTELTE LISTE ERSTELLEN 76
4.7.2 SCHEMATISCHE DARSTELLUNG DER VERSCHACHTELTEN LISTE 77
4.8 JEDER BROWSER HAT EIN EINGEBAUTES STYLESHEET 78
4.9 AUF EINEN BLICK 79
5 HTML-ELEMENTE FUER LINKS, BILDER UND MEHR 8I
5.1 HYPERLINKS - DAS BESONDERE AM WORLD WIDE WEB 81
5.1.1 ANATOMIE EINES HYPERLINKS 82
5.1.2 HYPERLINKS VERFEINERN - TITLE 83
5.1.3 DIE NAVIGATION-EINE UNGEORDNETE LISTE MIT HYPERLINKS 85
5.1.4 LINKS AUF ANDERE DATEIEN - PDF, MP3 ETC 86
5.2 DIE WEGBESCHREIBUNG ZUR GRAFIK -IMG 87
5.2.1 DIE ATTRIBUTE ZU IMG 87
5.2.2 EIN LOGO ALS UEBERSCHRIFT? 88
7
5.3 WEITERE NUETZLICHE HTML-ELEMENTE 89
5.3.1 BEGINNE EINE NEUE ZEILE MIT BR 89
5.3.2 ADDRESS FUER KONTAKTADRESSEN 90
5.3.3 SPAN IST EIN SEMANTISCH NEUTRALES INLINE-ELEMENT 91
5.3.4 BLOCKQUOTE UND CITE FUER ZITATE 92
5.4 CHARACTER ENTITIES - ALLGEMEINE SONDERZEICHEN 93
5.5 KNOW-HOW-WISSENSWERTES UEBER ZEICHENSAETZE 95
5.5.1 ZEICHENSAETZE SIND SCHABLONEN FUER BUCHSTABEN 95
5.5.2 UTF-8 UND DER EDITOR 96
5.5.3 UTF-8 UND DER WEBSERVER 97
5.6 AUF EINEN BLICK 98
6 DAS HTML FUER DIE BEISPIELSEITEN
99
6.1 STIMMT DIE STATIK? DER HTML-VALIDATOR 99
6.2 CSS ZUM AUSPROBIEREN -DIE W3C CORE STYLES 102
6.3 DIE KONTAKTSEITE-VON DER SEITE ZUR SITE 103
6.4 DER QUELLTEXT DER WEBSEITEN IM UEBERBLICK 105
6.4.1 DER QUELLTEXT DER STARTSEITE INDEX.HTML 105
6.4.2 DERQUELLTEXTDERKONTAKTSEITEXKONTAKT.HTML 107
6.5 AUF EINEN BLICK 108
TEIL III CSS GRUNDLAGEN - KAESTCHEN GESTALTEN
7 CSS KENNENLERNEN-
SCHRIFTEN, FARBEN UND HYPERLINKS 111
7.1 EIN STYLESHEET IST EINE SAMMLUNG VON FORMATVORLAGEN 111
7.2 UEBERBLICK: CSS UND DAS GESTALTEN DER HTML-KAESTCHEN 112
7.3 DAS ERSTE EIGENE STYLESHEET 112
7.3.1 EIN STYLESHEET ERSTELLEN UND EINEN CSS-KOMMENTAR SCHREIBEN 113
7.3.2 DIE VERBINDUNG ZWISCHEN HTML UND CSS - LINK 113
8
7.4 HINTERGRUND- UND SCHRIFTFARBEN DEFINIEREN 114
7.4.1 HINTERGRUND-UND SCHRIFTFARBE FUER BODY 115
7.4.2 HINTERGRUND- UND SCHRIFTFARBE FUER DIV#WRAPPER 116
7.4.3 HINTERGRUND-UND SCHRIFTFARBEN IM KOPFBEREICH 118
7.5 SCHRIFTART UND -GROSSE GESTALTEN 119
7.5.1 GRUNDLEGENDE SCHRIFTFORMATIERUNG FUER DIE GANZE SEITE 119
7.5.2 SCHRIFTGROESSE FUER UEBERSCHRIFTEN AENDERN 120
7.6 DIE KONTAKTADRESSE IM FUSSBEREICH GESTALTEN 121
7.7 HYPERLINKS GESTALTEN 123
7.7.1 HYPERLINKS-DAS HTML-ELEMENT A 123
7.7.2 BESUCHTE UND NICHT BESUCHTE HYPERLINKS 124
7.7.3 WENN DIE MAUS DARUEBERSCHWEBT-A:HOVER UND KOLLEGEN 125
7.7.4 DIE REIHENFOLGE DER PSEUDOKLASSEN IM STYLESHEET IST WICHTIG 127
7.8 STYLES KOENNEN AN DREI VERSCHIEDENEN STELLEN DEFINIERT WERDEN 128
7.8.1 MOEGLICHKEIT 1: EXTERN - CSS-REGELN IN EINER EIGENEN CSS-DATEI 128
7.8.2 MOEGLICHKEIT 2: ZWISCHEN HEAD UND /HEAD IM ELEMENT STYLE 128
7.8.3 MOEGLICHKEIT 3: DIREKT IM HTML-ELEMENT MIT DEM ATTRIBUT STYLE 128
7.8.4 VORFAHRT-WELCHE STYLES GEWINNEN? 129
7.9 DAS STYLESHEET IM UEBERBLICK 130
7.10 AUF EINEN BLICK 131
8 SELEKTOREN, EINHEITEN UND FARBEN
133
8.1 STYLE-DER AUFBAU EINER CSS-REGEL 133
8.2 EIN SELEKTOR WAEHLT DAS ZU GESTALTENDE KAESTCHEN AUS 134
8.2.1 DER NAME DER KISTE-EINFACHE ELEMENTSELEKTOREN 135
8.2.2 MEHRERE KAESTCHEN AUF EINMAL-SELEKTOREN GRUPPIEREN MIT KOMMA 135
8.2.3 ALLE KAESTCHEN AUFDER SEITE-DER UNIVERSALSELEKTOR* 136
8.3 UEBERBLICK: DIE HTML-ELEMENTE IM DOM-BAUM 136
8.4 SELEKTOREN KOMBINIEREN - NACHFAHREN AUSWAEHLEN 138
8.4.1 BEISPIEL 1: NUR DIE HYPERLINKS IM TEXTBEREICH GESTALTEN 138
8.4.2 BEISPIEL 2: SCHRIFTGESTALTUNG NUR FUER DEN SLOGAN IM KOPFBEREICH
139
8.4.3 BEISPIEL 3: AUFZAEHLUNGSZEICHEN NUR IN UNGEORDNETEN LISTEN
GESTALTEN . 140
9
8.4.4 BEISPIEL 4: UNTERSCHIEDLICH NUMMERIERTE EBENEN
BEI GEORDNETEN LISTEN 141
8.5 EIGENE NAMEN VERGEBEN - ID UND CLASS 141
8.5.1 ES KANN NUR EINEN GEBEN - ID, DER SELEKTOR MIT DER RAUTE 141
8.5.2 GRUPPENBILDUNG-CLASS, DER SELEKTOR MIT DEM PUNKT 142
8.5.3 ID ODER KLASSE-WANN NIMMT MAN WAS? 143
8.5.4 SINNVOLLE NAMEN - ID UND CLASS SOLLTEN DIE BEDEUTUNG
DES ELEMENTS BESCHREIBEN 144
8.6 SPEZIFITAET -DAS PUNKTESYSTEM FUER SELEKTOREN 145
8.6.1 EINER WIRD GEWINNEN-SOFUNKTIONIERT SPEZIFITAET 145
8.6.2 EIN PAAR BEISPIELE FUER DIE PUNKTEWERTUNG 145
8.6.3 DIE SPEZIFITAET IST IN WIRKLICHKEIT EINE MATRIX 146
8.6.4 SPARSAM BENUTZEN - LIMPORTANT 147
8.7 WERTE UND MASSE IN CSS-DIE QUAL DER WAHL 147
8.7.1 GRUNDREGELN: DIE LEERSTELLE, DIE NULL UND DER ANFUEHRUNGSSTRICH 148
8.7.2 FUER DEN BILDSCHIRM - RELATIVE EINHEITEN 148
8.7.3 FUERDEN DRUCKER-ABSOLUTE EINHEITEN 149
8.8 FARBEN DEFINIEREN - HEXADEZIMAL, DEZIMAL UND NAMEN 150
8.9 AUF EINEN BLICK 152
9 DAS BOX-MODELL
153
9.1 ZUERST IN MODERNEN BROWSERN TESTEN 153
9.2 DAS BOX-MODELL IN DER UEBERSICHT 154
9.2.1 ALLE BOXEN SIND GLEICH-DAS MODELL 154
9.2.2 DER INHALTSBEREICH - WIDTH (BREITE) UND HEIGHT (HOEHE) 156
9.2.3 DER INNENABSTAND - PADDING 156
9.2.4 DER RAHMEN DRUMHERUM - BORDER (RAHMENLINIEN) 157
9.2.5 DER AUSSENABSTAND - MARGIN 157
9.2.6 WENIG INTUITIV-DIE GESAMTBREITE EINER BOX BERECHNEN 158
9.3 KALIBRIERUNG-ABSTAENDEAUF NULL SETZEN 159
9.3.1 DIE ABSTAENDE DER EINGEBAUTEN BROWSER-STYLESHEETS ANNULLIEREN 159
9.3.2 DIE ABSTAENDE FUER DIE WICHTIGSTEN ELEMENTE NEU DEFINIEREN 160
9.4 WEBSEITE ZENTRIEREN MIT WIDTH UND MARGIN 162
10
9.4.1 DIE BREITE EINES ELEMENTS -WIDTH 162
9.4.2 DIE SEITE ZENTRIEREN MIT MARGIN: AUTO 163
9.5 RAHMENLINIEN ERSTELLEN - BORDER 164
9.6 EIN BISSCHEN ABSTAND DRUMHERUM - PADDING 165
9.7 DAS BOX-MODELL UND DIE FARBLICHE GESTALTUNG 168
9.7.1 DAS LOGO MIT GESTALTEN - PADDING UND BORDER IN AKTION 169
9.7.2 DAS BOX-MODELL IN DEN ENTWICKLER-TOOLS DER BROWSER 170
9.8 HINTERGRUNDGRAFIKEN PER CSS 171
9.8.1 HINTERGRUNDGRAFIK EINBINDEN - BACKGROUND-IMAGE 172
9.8.2 HINTERGRUNDGRAFIKEN WIEDERHOLEN - BACKGROUND-REPEAT 173
9.8.3 HINTERGRUNDGRAFIK POSITIONIEREN - BACKGROUND-POSITION 174
9.8.4 HINTERGRUNDGRAFIK FIXIEREN - BACKGROUND-ATTACHMENT 175
9.8.5 DIE KURZSCHREIBWEISE-BACKGROUND 176
9.8.6 DAS BOX-MODELL IST EIN BISSCHEN 3D 177
9.9 VERTIKALE AUSSENABSTAENDE KOLLABIEREN - COLLAPSING MARGINS 178
9.9.1 KOLLABIERENDE AUSSENABSTAENDE BEI AUFEINANDERFOLGENDEN ELEMENTEN
. 178
9.9.2 UNERWARTETE ABSTAENDE-EIN BEISPIEL AUS DEM ALLTAG 179
9.10 DAS STYLESHEET IM UEBERBLICK 183
9.11 AUF EINEN BLICK 185
10 ORDNUNG HALTEN IN DEN STYLESHEETS 187
10.1 DER KOMMENTAR AM ANFANG 187
10.2 DAS STYLESHEET IN ABSCHNITTE UNTERTEILEN 188
10.2.1 TEIL 1: ALLGEMEINE STYLES 189
10.2.2 TEIL 2: STYLES FUER DIE LAYOUTBEREICHE 190
10.2.3 TEIL 3: SONSTIGE STYLES 190
10.3 VERSCHIEDENE SCHREIBWEISEN FUER STYLES 190
10.3.1 EINE TYPISCHE CSS-REGEL 190
10.3.2 ALLES IN EINER ZEILE 191
10.3.3 KOMBINIERTE UND GRUPPIERTE SELEKTOREN 191
10.4 DIE REIHENFOLGE DER DEKLARATIONEN IM STYLE 192
10.4.1 MOEGLICHKEIT 1: DIE REIHENFOLGE ORIENTIERT SICH AM AUFBAU DER
BOXEN 192
10.4.2 MOEGLICHKEIT 2: ALPHABETISCH SORTIERT 193
11
10.5 EFFEKTIV- KURZSCHREIBWEISEN FUER PADDING UND MARGIN 193
10.5.1 ALLE VIER SEITEN GLEICH 193
10.5.2 DIE REIHENFOLGE ENTSCHEIDET - NUR EINE SEITE ANDERS 194
10.5.3 UNTERSCHIEDLICHE WERTE FUER ALLE VIER SEITEN 195
10.5.4 PAARWEISE-OBEN = UNTEN UND LINKS = RECHTS 195
10.6 MEHRERE STYLESHEETS ERSTELLEN UND ZENTRAL EINBINDEN 196
10.6.1 TEILE UND HERRSCHE-AUFTEILUNG DER STYLES 196
10.6.2 EINES, SIE ZU BINDEN-DAS ZENTRALE STYLESHEET ZENTRALE.CSS 197
10.6.3 EINEN LINK ZUM ZENTRALEN STYLESHEET ERSTELLEN 198
10.6.4 @MEDIA - DEFINITION DER AUSGABEMEDIEN 198
10.7 DIE STYLESHEETS FUER DIE BEISPIELSITE IM UEBERBLICK 199
10.7.1 DAS ZENTRALE STYLESHEET ZENTRALE.CSS 199
10.7.2 RESET UND RESTAURIERUNG DER ABSTAENDE - FUNDAMENT.CSS 200
10.7.3 DIE GESTALTUNG FUER DEN BILDSCHIRM - BILDSCHIRM.CSS 202
10.8 DER CSS-VALIDATOR 204
10.9 AUF EINEN BLICK 206
11 EINE HORIZONTALE NAVIGATION PER DISPLAY:INLINE
207
11.1 EINFACHE HORIZONTALE NAVIGATION MIT DISPLAY: INLINE 207
11.1.1 DER KOMBINIERTE SELEKTOR #NAVIBEREICH II 208
11.1.2 FEHLER FINDEN MIT DEN ENTWICKLER-TOOLS IM BROWSER 210
11.1.3 FEINEINSTELLUNGEN-ABSTAENDE UND HYPERLINKS ANPASSEN 211
11.2 PUNKTSIEG-SPEZIFITAET IN DER PRAXIS 212
11.2.1 MARGIN-BOTTOM FUER UL 212
11.2.2 DIE FARBE DER HYPERLINKS 213
11.2.3 FEINEINSTELLUNGEN FUER DIE HYPERLINKS 213
11.3 VON ELEMENTEN UND BOXEN 214
11.3.1 IM QUELLTEXT ELEMENT, AM BILDSCHIRM BOX 214
11.3.2 DISPLAY AENDERT NUR DIE BOX, NICHT DAS ELEMENT 214
11.4 TABBED NAVIGATION - NAVIGATION MIT REGISTERN 215
11.4.1 SCHRITT 1: VORBEREITENDE MASSNAHMEN FUER #NAVIBEREICH 215
11.4.2 SCHRITT 2: DIE HYPERLINKS IM NAVIGATIONSBEREICH ZU TABS MACHEN
216
11.4.3 SCHRITT 3-, EINEN ROLLOVER-EFFEKT FUER DIE TABS DEFINIEREN 217
11.4.4 SCHRITT 4: SIE SIND HIER - AKTUELLE SEITE HERVORHEBEN 219
12
11.4.5 STANDARDKONFORM, BARRIEREFREI UND FLEXIBEL 221
11.4.6 DIE STYLES ZUR TABBED NAVIGATION IM UEBERBLICK 222
11.5 KNOW-HOW-DAS BOX-MODELL FUER INLINER 223
11.5.1 ES GIBT VERSCHIEDENE ARTEN VON INLINE-ELEMENTEN 223
11.5.2 INLINE-BOXEN SIND ETWAS ANDERS ALS BLOCK-BOXEN 224
11.5.3 INLINE-BLOCKBOXEN SIND EIN MITTELDING 225
11.6 EXKURS: WHITESPACE - DER LEERSTELLENPAKT 226
11.6.1 EIN ZWISCHENRAUM, HINDURCHZUSCHAUN 226
11.6.2 WHITESPACE-LEERSTELLEN,TABULATOREN UND ZEILENUMBRUECHE 227
11.6.3 SO ENTSTEHT DER MYSTERIOESE ZWISCHENRAUM 227
11.6.4 SECHS MOEGLICHKEITEN ZUR ENTFERNUNG DER LUECKE 228
11.7 AUF EINEN BLICK 230
12 EIN KONTAKTFORMULAR ERSTELLEN
231
12.1 SCHRITT 1: DAS HTML FUER DAS KONTAKTFORMULAR 231
12.1.1 DAS ELEMENT FORM DEFINIERT EIN FORMULAR 232
12.1.2 BESCHRIFTUNG DER FORMULARFELDER MIT LABEL 233
12.1.3 EIN GANZ NORMALES EINZEILIGES EINGABEFELD 234
12.1.4 EIN SPEZIELLES EINGABEFELD FUER E-MAIL-ADRESSEN 235
12.1.5 EIN MEHRZEILIGES EINGABEFELD MIT TEXTAREA 236
12.1.6 SUBMIT: EINE SCHALTFLAECHE ZUM ABSCHICKEN DER FORMULARDATEN 236
12.2 SCHRITT 2: DAS FORMULAR PER CSS GESTALTEN 237
12.2.1 EIN NEUES STYLESHEET FUER FORMULARE 237
12.2.2 DIE GESTALTUNG DES KONTAKTFORMULARS 238
12.3 SCHRITT 3: DAS FORMULAR AKTIVIEREN UND TESTEN 241
12.3.1 DAS REISEZIEL FUER DIE FORMULARDATEN FESTLEGEN 241
12.3.2 DAS FERTIGE FORMULAR TESTEN 242
12.4 EXKURS: EIN MEHRSPALTIGES KONTAKTFORMULAR 243
12.5 AUF EINEN BLICK 245
13
13 HTML-TABELLEN ERSTELLEN UND GESTALTEN
247
13.1 DAS HTML FUER TABELLEN 247
13.1.1 EINE EINFACHE TABELLE BESTEHT AUS TABLE, TR UND TD 247
13.1.2 UEBERSCHRIFTEN IN TABELLEN STEHEN IN TH 249
13.1.3 LOGISCHE BEREICHE IN TABELLEN - THEAD, TBODY UND TFOOT 250
13.1.4 ZELLEN VERBINDEN - COLSPAN UND ROWSPAN 251
13.2 TABELLEN GESTALTEN PER CSS-EIN BEISPIEL 252
13.2.1 DAS HTMLFUERDIE BEISPIELTABELLE 252
13.2.2 DIE GESTALTUNG DER BEISPIELTABELLE PER CSS 254
13.2.3 EINE TABELLE OHNE ZWISCHENRAEUME - BORDER-COLLAPSE: COLLAPSE 255
13.3 UEBERSICHTLICHE TABELLEN - HOEVER UND ZEBRASTREIFEN 256
13.3.1 TABELLENZEILEN MIT HOEVER-EFFEKT - TNHOVER 256
13.3.2 EINE TABELLE MIT ZEBRASTREIFEN 257
13.4 AUF EINEN BLICK 258
14 FLIESSTEXT, WEBFONTS UND DRUCKVERSION
259
14.1 FLIESSTEXT BESSER LESBAR MACHEN 259
14.1.1 SCHRIFTART, SCHRIFTGROESSE UND ZEILENABSTAND 259
14.1.2 ZITATE GESTALTEN 262
14.1.3 DEL UND INS FUER AENDERUNGEN AM TEXT 263
14.2 WEBFONTS-DIE SCHRIFTART GLEICH MITLIEFERN 265
14.2.1 DIE BISHERIGE ENTWICKLUNG IM UEBERBLICK 265
14.2.2 DIE GOOGLE FONTS-EINFACH UND KOSTENLOS 266
14.3 EINE DRUCKVERSION FUER DIE BEISPIELSEITEN 269
14.3.1 STYLESHEET NUR FUER DIE ANZEIGE AM BILDSCHIRM 269
14.3.2 EIN STYLESHEET NUR FUER DEN AUSDRUCK 270
14.3.3 GRUNDLEGENDE SCHRIFTGESTALTUNG FUER DIE DRUCKVERSION 271
14.3.4 GESTALTUNG DER UEBERSCHRIFTEN FUER DIE DRUCKVERSION 272
14.3.5 NAVIGATION BEIM AUSDRUCK AUSBLENDEN 274
14.3.6 URL DER HYPERLINKS SICHTBAR MACHEN 274
14.4 FAVICON-DAS MINILOGO FUER IHRE SEITEN 277
14.5 AUF EINEN BLICK 278
14
15 KASKADE, VERERBUNG ODER STANDARDWERT
279
15.1 UEBERBLICK: DOM-BAUM UND KASKADE 279
15.1.1 DER DOM-BAUM FUER DIE STARTSEITE 280
15.1.2 DREI KONZEPTE-KASKADE, VERERBUNG UND STANDARDWERT 281
15.1.3 VISUELLE DARSTELLUNG DES BROWSERS IN AKTION 282
15.1.4 DAS BEISPIEL: MARGIN-BOTTOM FUER #NAVIBEREICH UL 282
15.2 DER ANFANG: SAMMLE ALLE RELEVANTEN DEKLARATIONEN 283
15.2.1 DAS BROWSER-STYLESHEET 283
15.2.2 DIE STYLESHEETS DES AUTORS - FUNDAMENT.CSS 284
15.2.3 DIE STYLESHEETS DES AUTORS: NAVI-TABS.CSS 285
15.3 STUFE 1: SORTIERE NACH WICHTIGKEIT (IMPORTANCE) 286
15.3.1 NORMAL - DEKLARATIONEN OHNE LIMPORTANT 286
15.3.2 WICHTIG - DEKLARATIONEN MIT LIMPORTANT 287
15.3.3 DIE SORTIERUNG NACH WICHTIGKEIT IM UEBERBLICK 287
15.4 STUFE 2: SORTIERE NACH SPEZIFITAET (SPECIFICITY) 289
15.5 STUFE 3: SORTIERE NACH REIHENFOLGE (ORDER) 290
15.6 DIE VERERBUNG (INHERITANCE) 291
15.6.1 VERERBUNG MACHT EIN STYLESHEET UEBERSICHTLICHER 291
15.6.2 BESTIMMTE EIGENSCHAFTEN WERDEN NICHT VERERBT 292
15.6.3 POTENZIELLE PROBLEME BEI DER VERERBUNG RELATIVER WERTE 293
15.7 DER STANDARDWERT (INITIAL VALUE) 293
15.8 AUF EINEN BLICK 294
TEIL IV CSS-POSITIONIERUNG - KAESTCHEN VERSCHIEBEN
16 KAESTCHEN VERSCHIEBEN MIT POSITION
297
16.1 UEBERBLICK: CSS UND POSITIONIERUNG 297
16.2 FLOW-DIE SEITE IST EIN LANGER, RUHIGER FLUSS 298
16.2.1 DREI BOXEN IM FLUSS 298
16.2.2 DREI VERKUERZTE BOXEN IM FLUSS 300
16.3 VERSETZT WEITERFLIESSEN - POSITION: RELATIVE 301
16.4 RAUS AUS DEM FLUSS-POSITION: ABSOLUTE 302
15
16.5 ABSOLUTE POSITIONIERUNG AUF DER BEISPIELSITE 304
16.5.1 1. ABSOLUTE POSITIONIERUNG RELATIV ZUM RAND DES BROWSERFENSTERS
305
16.5.2 ABSOLUTE POSITIONIERUNG MIT EINEM UMGEBENDEN,
RELATIV POSITIONIERTEN ELEMENT 306
16.5.3 KLEINE UEBUNG ZWISCHENDURCH: GRUNDLAGEN. EINE ZEILE TIEFER 308
16.6 WIE EIN FELS IN DER BRANDUNG-POSITION: FIXED 309
16.7 POSITIONIERTE BOXEN UND DER Z-INDEX 311
16.8 AUF EINEN BLICK 314
17 KAESTCHEN VERSCHIEBEN MIT FLOAT UND DEAR
315
17.1 TEXT UM BILDER FLIESSEN LASSEN 315
17.1.1 DIE GRAFIK EINBINDEN 316
17.1.2 DIE GRAFIK FLOATEN MIT FLOAT:LEFT 317
17.1.3 EINEN ABSTAND ZWISCHEN GRAFIK UND TEXT DEFINIEREN 318
17.2 PRAKTISCH - CSS-KLASSEN ZUM FLOATEN 319
17.3 FLOATS BEENDEN MIT CLEAR 321
17.4 FLOATS MIT MEHREREN BOXEN 324
17.4.1 DAS BEISPIEL: DREI BOXEN OHNE FLOAT 324
17.4.2 DREI KAESTCHEN NACH LINKS FLOATEN 325
17.4.3 DREI KAESTCHEN NACH RECHTS FLOATEN 326
17.4.4 FLOAT DROP - ZU WENIG PLATZ IM BROWSERFENSTER 327
17.4.5 FLOAT UND VERSCHIEDEN HOHE BOXEN 328
17.5 ZUSAMMENFASSUNG: BESONDERHEITEN BEIM FLOATEN 329
17.6 AUF EINEN BLICK 330
18 CONTAINING FLOATS -
GEFLOATETE ELEMENTE UMSCHLIESSEN
331
18.1 DIE BEISPIELSEITE ZUM UMSCHLIESSEN VON FLOATS 331
18.2 DAS PROBLEM: CEFLOATETE ELEMENTE RAGEN NACH UNTEN HERAUS 334
18.3 FUENF METHODEN ZUM UMSCHLIESSEN VON FLOATS 336
16
18.4 METHODE 1: FLOAT EINSCHLIESSEN MIT CLEAR 337
18.5 METHODE 2: SET A FLOAT TO FIX A FLOAT 338
18.6 METHODE 3: OHNE FLOAT UND CLEAR - OVERFLOW: HIDDEN 340
18.7 METHODE 4: AUCH OHNE FLOAT UND CLEAR - DISPLAY:TABLE 341
18.8 METHODE 5: EASY CLEARING - DIE SACHE MIT DEM PUNKT 342
18.8.1 TEIL 1: DER KERN VON CLEARFIX 344
18.8.2 TEIL 2: DER PATCH FUER DEN IE7 345
18.9 DIE GALERIESEITE IN DIE BEISPIELSITE EINBAUEN 346
18.9.1 DIE BEISPIELSEITE GALERIE.HTML 347
18.9.2 DAS EASY CLEARING IN FUNDAMENT.CSS SPEICHERN 348
18.9.3 DAS CSS IN BILDSCHIRM.CSS IM UEBERBLICK 348
18.10AUF EINEN BLICK 350
19 EINE FLOATBASIERTE HORIZONTALE NAVIGATION
351
19.1 VORBEREITUNGEN FUER DIE FLOATBASIERTE NAVIGATION 352
19.2 SCHRITT 1: DEN NAVIGATIONSBEREICH GESTALTEN 353
19.3 SCHRITT 2: DIE LINKS IN DER NAVIGATION GESTALTEN 355
19.4 SCHRITT 3: AKTIVE LINKS HERVORHEBEN UND HOEVER-EFFEKT ERSTELLEN 356
19.5 SCHRITT 4: CSS-SPRITES-MEHRERE GRAFIKEN IN EINER 357
19.6 DAS KOMPLETTE CSS FUER DIE NAVIGATION IM UEBERBLICK 360
19.7 AUF EINEN BLICK 362
TEIL V MEHRSPALTIGE LAYOUTS MIT CSS
20 MEDIA QUERIES - EINE MOBILE VERSION ERSTELLEN 365
20.1 BESTANDSAUFNAME: DIE BEISPIELSEITEN AUF EINEM SMARTPHONE 365
20.1.1 DIE BEISPIELSEITEN IN EINEM SMARTPHONE BETRACHTEN 366
20.2 SCHRITT 1: DIE FESTE LAYOUTBREITE ENTFERNEN 367
20.3 SCHRITT 2: DIE ANWEISUNG META VIEWPORT HINZUFUEGEN 369
20.4 SCHRITT 3: OPTIMIERUNG VON KOPFBEREICH UND FORMULAR 370
17
20.4.1 DER SLOGAN IM KOPFBEREICH KOMMT WIEDER UNTER DAS LOGO 370
20.4.2 KONTAKTFORMULAR IN DER BREITE ANPASSEN 372
20.5 SCHRITT 4: MEDIA QUERY FUER GROSSE BILDSCHIRME 373
20.5.1 EIN NEUES STYLESHEET FUER BREITERE BROWSERFENSTER 375
20.5.2 DIE GESTALTUNG DER BEISPIELSEITEN FUER BREITE BROWSERFENSTER 376
20.5.3 MOBILE FIRST-AELTERE INTERNET EXPLORER VERSTEHEN KEINE MEDIA
QUERIES . 378
20.6 AUF EINEN BLICK 379
21 ZWEISPALTIGES LAYOUT MIT FLOAT UND MARGIN
38I
21.1 MEHRSPALTIGKEIT IST IN CSS 2 EIGENTLICH EINE ILLUSION 382
21.1.1 DAS NEBENEINANDER AUF WEBSEITEN MIT POSITION UND FLOAT 382
21.1.2 WEB DEVELOPER-VORHANDENE WEBSEITEN UNTERSUCHEN 383
21.1.3 CSS-LAYOUTS HEUTE UND MORGEN 384
21.2 FESTES LAYOUT MIT FLOAT UND MARGIN 385
21.2.1 SCHRITT 1: EIN NEUES STYLESHEET FUER DIE NAVIGATION ERSTELLEN UND
EINBINDEN 386
21.2.2 SCHRITT 2: DEN NAVIGATIONSBEREICH NACH LINKS FLOATEN 387
21.2.3 SCHRITT 3: DEN TEXTBEREICH MIT EINEM AUSSENABSTAND VERSEHEN 389
21.2.4 SCHRITT 4: DIE NAVIGATIONSLISTE GESTALTEN 390
21.2.5 SCHRITT 5: DIE HYPERLINKS IN DER NAVIGATION GESTALTEN 392
21.2.6 SCHRITT 6: DEN AKTUELLEN NAVIGATIONSPUNKT HERVORHEBEN 393
21.2.7 SCHRITT 7: UEBERSCHRIFT AUSRICHTEN UND FUSSBEREICH CLEAREN 394
21.3 FLEXIBLES LAYOUT MIT FESTER NAVIGATIONSSPALTE 395
21.3.1 FLUESSIG, ELASTISCH, FLEXIBEL, FRUSTRIERT 395
21.3.2 SO FUNKTIONIEREN FLEXIBLE LAYOUTS 396
21.3.3 DAS LAYOUT FLEXIBILISIEREN 397
21.4 FLEXIBLES LAYOUT MIT FLEXIBLER NAVIGATIONSSPALTE 399
21.4.1 DAS PROBLEM MIT DEM KLASSISCHEN BOX-MODELL VON CSS 399
21.4.2 MOEGLICHKEIT 1: LAYOUTBEREICH AUF BORDER-BOX UMSTELLEN 401
21.4.3 MOEGLICHKEIT 2: DAS DOPPELTE DIVCHEN 403
21.5 EXKURS: DIE GLOBALE WIRKUNG VON CLEAR UND DER BFC 404
21.5.1 DIE GLOBALE WIRKUNG VON CLEAR 404
21.5.2 DER BLOCK FORMATTING CONTEXT (BFC) 407
21.6 AUF EINEN BLICK 408
18
22 WEITERE MEHRSPALTIGE LAYOUTMETHODEN
409
22.1 DER INFOBEREICH-EIN ZUSAETZLICHER LAYOUTBEREICH 409
22.1.1 SCHRITT 1: DEN INFOBEREICH IM HTML HINZUFUEGEN 410
22.1.2 SCHRITT 2: DIE CRUNDFORMATIERUNG IN BILDSCHIRM.CSS 411
22.1.3 SCHRITT 3: DESKTOP-VERSION MIT ZWEISPALTIGEM LAYOUT 412
22.2 DAS FESTE LAYOUT FLEXIBILISIEREN 415
22.2.1 SCHRITT 1: DEM WRAPPER EINE FLEXIBLE BREITE GEBEN 415
22.2.2 SCHRITT 2: TEXT-UND INFOBEREICH MIT FLEXIBLER BREITE 416
22.3 EIN DREISPALTIGES LAYOUT MIT VERTIKALER NAVIGATION 417
22.3.1 SCHRITT 1: DIE STYLESHEETS FUER DIE NAVIGATION VONEINANDER
ABGRENZEN 418
22.3.2 SCHRITT 2: DIE ANALYSE DES AKTUELLEN LAYOUTS IM ENTWICKLER-TOOL
420
22.3.3 SCHRITT 3: DIE REPARATUR DES LAYOUTS IM EDITOR 422
22.4 BAEUMCHEN WECHSEL DICH FUER DIE LAYOUTBEREICHE 424
22.4.1 DER TEXTBEREICH ALS RECHTSAUSSEN 424
22.4.2 DIE NAVIGATION NACH RECHTS UND DER TEXTBEREICH GANZ LINKS 424
22.4.3 INFOBEREICH UND NAVIGATION TAUSCHEN DIE PLAETZE 426
22.5 EIN DREISPALTIGES LAYOUT MIT NEGATIVEM MARGIN 427
22.5.1 SCHRITT 1: DIE BEIDEN INFOBEREICHE IM HTML HINZUFUEGEN UND
GESTALTEN . 427
22.5.2 SCHRITT 2: DEN TEXTBEREICH FLOATEN UND NEGATIVEN MARGIN ZUWEISEN
428
22.5.3 SCHRITT 3: DIE BEIDEN INFOBEREICHE FLOATEN 432
22.5.4 OPTIONAL: DIE INFOBEREICHE TAUSCHEN DIE SEITEN 433
22.6 AUF EINEN BLICK 434
23 PATCHWORK-FLICKEN IM CSS
437
23.1 PATCHES UND HACKS 437
23.1.1 VOR DEM EINBAU VON PATCHES GRUENDLICH CHECKEN 437
23.1.2 INLINE-PATCHES UND ZUSAETZLICHE STYLESHEETS 438
23.2 DER INTERNET EXPLORER 438
23.2.1 EINE KURZE GESCHICHTE DES INTERNET EXPLORERS 439
23.2.2 DER INTERNET EXPLORER UND DAS LAYOUT 439
23.3 CONDITIONAL COMMENTS IN AKTION 441
23.3.1 CONDITIONAL COMMENTS - STYLES NUR FUER DEN IE 441
23.3.2 TESTEN, OB CONDITIONAL COMMENTS FUNKTIONIEREN 442
19
23.4 DIE BEISPIELSEITEN IM IE 7 UND IE8 443
23.5 AUF EINEN BLICK 445
TEIL VI TIPPS UND TRICKS
24 SUCHFUNKTION, DROPDOWN UND HTML5
449
24.1 EINE SUCHFUNKTION FUER IHRE SITE 449
24.1.1 SCHRITT 1: DAS HTMLFUERDAS SUCHFORMULAR 450
24.1.2 SCHRITT 2: DAS SUCHFORMULAR PER CSS POSITIONIEREN 451
24.1.3 SCHRITT 3: DAS SUCHFORMULAR PER CSS GESTALTEN 453
24.1.4 DIE SERVERSEITIGE SUCHFUNKTION 456
24.2 DROPDOWN - HORIZONTALE NAVIGATION ZUM RAUSKLAPPEN 457
24.2.1 VIER ZUSAETZLICHE HTML-DATEIEN LIEGEN FUER SIE BEREIT 458
24.2.2 SCHRITT 1: LISTENELEMENTE MIT CLEAR UNTEREINANDERSTELLEN 459
24.2.3 SCHRITT 2: DIE ZWEITE NAVIGATIONSEBENE VERSTECKEN 461
24.2.4 SCHRITT 3: DIE ZWEITE NAVIGATIONSEBENE WIEDER SICHTBAR MACHEN 462
24.2.5 SCHRITT 4: DIE LINKS IN DER ZWEITEN NAVIGATIONSEBENE GESTALTEN
463
24.3 DIE NEUEN HTML5-ELEMENTE FUER DIE LAYOUTBEREICHE 464
24.3.1 DIE WICHTIGSTEN NEUEN HTML5-ELEMENTE 465
24.3.2 VOR DEM AUSPROBIEREN: NACHHILFE FUER AELTERE UND ALTE BROWSER 466
24.4 AUF EINEN BLICK 468
25 NUETZLICHE PROGRAMME UND WEBSITES 469
25.1 DIE BROWSER 469
25.1.1 DIE AKTUELLEN BROWSER IN DER UEBERSICHT 469
25.2 BROWSERZUBEHOER-PRAKTISCHEADD-ONS 471
25.2.1 VIEW SOURCE CHART - DER QUELLTEXT ALS DIAGRAMM (FIREFOX) 471
25.2.2 FIREBUG - DAS ANALYSETOOL FUER DEN FIREFOX 472
25.2.3 WEB DEVELOPER - DAS SCHWEIZER OFFIZIERSMESSER (FIREFOX/CHROME)
473
25.2.4 COLORZILLA-DIE FARBENWAHL (FIREFOX/CHROME) 474
25.3 EDITOREN FUER HTML UND CSS 475
20
25.3.1 QUELLTEXT VS. WYSIWYG 475
25.3.2 EINIGE EDITOREN FUER HTML UND CSS UNTER WINDOWS UND OS X 475
25.4 FTP-VEROEFFENTLICHEN VON WEBSEITEN 477
25.5 EDITOREN ZUM BEARBEITEN VON GRAFIKEN 477
25.6 REFERENZEN UND ONLINE-QUELLEN 478
25.6.1 REFERENZEN UND WEBSITES ZU HTML 478
25.6.2 REFERENZEN UND WEBSITES ZU CSS 479
INDEX 481
21
Ihr Leitfaden für die Webseitengestaltung mit CSS!
Schritt für Schritt lernen Sie, was Sie bei der modernen Webgestaltung mit CSS wissen müssen:
von den grundlegenden Prinzipien bis hin zu den neuesten Entwicklungen. Anschauliche Beispiele
können Sie leicht auf eigene Projekte anwenden. Inkl. HTML5, CSS3 und einer guten Prise Humor.
Selektoren Style
Layout BrOWSer
clear
Webseiten float
Kaskade HTML
Webfonts
Elemente Box-Modell
Eigenschaften
inline-block Navigation
Erste Schritte und Grundlagen
шншвшѕшишшшишјгт
- - :
I
Stufe 1 :
-fortiere rudi
W
к
h
desert- I
K
Wichtige Konzepte verstehen
Viele Beispiele für Ihre Website
Schritt für Schritt zur ersten Website
Jede Reise beginnt mit dem ersten Schritt und für die Gestaltung von
Webseiten sind das solide HTML-Grundkenntnisse, die Sie in diesem
Crashkurs anhand einer kleinen Beispielsite bekommen.
Schriften, Farben und Box-Modell
So gestalten Sie richtig mit CSS. Erstellen Sie
z. B.
Navigationen, Kontakt¬
formulare und eine Druckversion. Quasi nebenbei lernen Sie wichtige
Konzepte wie Selektoren, Spezifität, Box-Modell und Kaskade kennen.
Media Queries
nutzen und mehrspaltige Layouts erstellen
Erstellen Sie eine mobile Version der Beispielsite und lernen Sie an¬
schließend verschiedene Möglichkeiten zur Erstellung von mehrspal¬
tigen, floatbasierten Layouts kennen.
Auf einen Blick
Grundlagen
Schnellstart HTML und CSS
Schriften, Farben, Hyperlinks
Selektoren und Einheiten
Stylesheets
Kontaktformular und Tabellen
Konzepte
Spezifität
Box-Modelle
Kaskade und Vererbung
Positionierung
Gestaltung
Media
Queries
Layouts mit positiorrabsolute
Mehrspaltigkeit
Layouts mit
float
Navigationen |
| any_adam_object | 1 |
| author | Müller, Peter 1960- |
| author_GND | (DE-588)1013505735 |
| author_facet | Müller, Peter 1960- |
| author_role | aut |
| author_sort | Müller, Peter 1960- |
| author_variant | p m pm |
| building | Verbundindex |
| bvnumber | BV041387233 |
| classification_rvk | ST 230 ST 250 ST 252 ST 253 |
| ctrlnum | (OCoLC)864524588 (DE-599)DNB1037931475 |
| dewey-full | 006.74 |
| dewey-hundreds | 000 - Computer science, information, general works |
| dewey-ones | 006 - Special computer methods |
| dewey-raw | 006.74 |
| dewey-search | 006.74 |
| dewey-sort | 16.74 |
| dewey-tens | 000 - Computer science, information, general works |
| discipline | Informatik |
| edition | 1. Aufl. |
| format | Book |
| fullrecord | <?xml version="1.0" encoding="UTF-8"?><collection xmlns="http://www.loc.gov/MARC21/slim"><record><leader>00000nam a2200000 c 4500</leader><controlfield tag="001">BV041387233</controlfield><controlfield tag="003">DE-604</controlfield><controlfield tag="005">20200114</controlfield><controlfield tag="007">t</controlfield><controlfield tag="008">131029s2014 gw ad|| |||| 00||| ger d</controlfield><datafield tag="015" ind1=" " ind2=" "><subfield code="a">13,N33</subfield><subfield code="2">dnb</subfield></datafield><datafield tag="016" ind1="7" ind2=" "><subfield code="a">1037931475</subfield><subfield code="2">DE-101</subfield></datafield><datafield tag="020" ind1=" " ind2=" "><subfield code="a">9783836227766</subfield><subfield code="c">kart. : EUR 24.90 (DE), EUR 25.60 (AT), sfr 32.90 (freier Pr.)</subfield><subfield code="9">978-3-8362-2776-6</subfield></datafield><datafield tag="020" ind1=" " ind2=" "><subfield code="a">3836227762</subfield><subfield code="9">3-8362-2776-2</subfield></datafield><datafield tag="035" ind1=" " ind2=" "><subfield code="a">(OCoLC)864524588</subfield></datafield><datafield tag="035" ind1=" " ind2=" "><subfield code="a">(DE-599)DNB1037931475</subfield></datafield><datafield tag="040" ind1=" " ind2=" "><subfield code="a">DE-604</subfield><subfield code="b">ger</subfield><subfield code="e">rakddb</subfield></datafield><datafield tag="041" ind1="0" ind2=" "><subfield code="a">ger</subfield></datafield><datafield tag="044" ind1=" " ind2=" "><subfield code="a">gw</subfield><subfield code="c">XA-DE-NW</subfield></datafield><datafield tag="049" ind1=" " ind2=" "><subfield code="a">DE-898</subfield><subfield code="a">DE-859</subfield><subfield code="a">DE-29T</subfield><subfield code="a">DE-739</subfield><subfield code="a">DE-M347</subfield><subfield code="a">DE-83</subfield><subfield code="a">DE-573</subfield><subfield code="a">DE-863</subfield><subfield code="a">DE-92</subfield><subfield code="a">DE-1102</subfield><subfield code="a">DE-523</subfield><subfield code="a">DE-Aug4</subfield><subfield code="a">DE-473</subfield></datafield><datafield tag="082" ind1="0" ind2=" "><subfield code="a">006.74</subfield><subfield code="2">22/ger</subfield></datafield><datafield tag="084" ind1=" " ind2=" "><subfield code="a">ST 230</subfield><subfield code="0">(DE-625)143617:</subfield><subfield code="2">rvk</subfield></datafield><datafield tag="084" ind1=" " ind2=" "><subfield code="a">ST 250</subfield><subfield code="0">(DE-625)143626:</subfield><subfield code="2">rvk</subfield></datafield><datafield tag="084" ind1=" " ind2=" "><subfield code="a">ST 252</subfield><subfield code="0">(DE-625)143627:</subfield><subfield code="2">rvk</subfield></datafield><datafield tag="084" ind1=" " ind2=" "><subfield code="a">ST 253</subfield><subfield code="0">(DE-625)143628:</subfield><subfield code="2">rvk</subfield></datafield><datafield tag="084" ind1=" " ind2=" "><subfield code="a">004</subfield><subfield code="2">sdnb</subfield></datafield><datafield tag="100" ind1="1" ind2=" "><subfield code="a">Müller, Peter</subfield><subfield code="d">1960-</subfield><subfield code="e">Verfasser</subfield><subfield code="0">(DE-588)1013505735</subfield><subfield code="4">aut</subfield></datafield><datafield tag="245" ind1="1" ind2="0"><subfield code="a">Einstieg in CSS</subfield><subfield code="b">Webseiten gestalten mit HTML und CSS ; [Aktuell zu HTML5 und CSS3 ; Grundlagen: Schriften, Farben und Box-Modelle ; Konzepte: Spezifität, Kaskade und Positionierung verständlich erklärt ; Gestaltung: Navigation, mehrspaltige Layouts und Media Queries]</subfield><subfield code="c">Peter Müller</subfield></datafield><datafield tag="246" ind1="1" ind2="0"><subfield code="a">HTML 5 CSS 3 fünf drei</subfield></datafield><datafield tag="250" ind1=" " ind2=" "><subfield code="a">1. Aufl.</subfield></datafield><datafield tag="264" ind1=" " ind2="1"><subfield code="a">Bonn</subfield><subfield code="b">Galileo Press</subfield><subfield code="c">2014</subfield></datafield><datafield tag="300" ind1=" " ind2=" "><subfield code="a">487 S.</subfield><subfield code="b">Ill., graph. Darst.</subfield></datafield><datafield tag="336" ind1=" " ind2=" "><subfield code="b">txt</subfield><subfield code="2">rdacontent</subfield></datafield><datafield tag="337" ind1=" " ind2=" "><subfield code="b">n</subfield><subfield code="2">rdamedia</subfield></datafield><datafield tag="338" ind1=" " ind2=" "><subfield code="b">nc</subfield><subfield code="2">rdacarrier</subfield></datafield><datafield tag="490" ind1="0" ind2=" "><subfield code="a">Galileo Computing</subfield></datafield><datafield tag="650" ind1="0" ind2="7"><subfield code="a">Cascading Style Sheets 3.0</subfield><subfield code="0">(DE-588)7750895-6</subfield><subfield code="2">gnd</subfield><subfield code="9">rswk-swf</subfield></datafield><datafield tag="650" ind1="0" ind2="7"><subfield code="a">Webdesign</subfield><subfield code="0">(DE-588)1041632088</subfield><subfield code="2">gnd</subfield><subfield code="9">rswk-swf</subfield></datafield><datafield tag="650" ind1="0" ind2="7"><subfield code="a">HTML 5.0</subfield><subfield code="0">(DE-588)7704810-6</subfield><subfield code="2">gnd</subfield><subfield code="9">rswk-swf</subfield></datafield><datafield tag="689" ind1="0" ind2="0"><subfield code="a">Webdesign</subfield><subfield code="0">(DE-588)1041632088</subfield><subfield code="D">s</subfield></datafield><datafield tag="689" ind1="0" ind2="1"><subfield code="a">HTML 5.0</subfield><subfield code="0">(DE-588)7704810-6</subfield><subfield code="D">s</subfield></datafield><datafield tag="689" ind1="0" ind2="2"><subfield code="a">Cascading Style Sheets 3.0</subfield><subfield code="0">(DE-588)7750895-6</subfield><subfield code="D">s</subfield></datafield><datafield tag="689" ind1="0" ind2=" "><subfield code="5">DE-604</subfield></datafield><datafield tag="856" ind1="4" ind2="2"><subfield code="m">X:MVB</subfield><subfield code="q">text/html</subfield><subfield code="u">http://deposit.dnb.de/cgi-bin/dokserv?id=4397940&prov=M&dok_var=1&dok_ext=htm</subfield><subfield code="3">Inhaltstext</subfield></datafield><datafield tag="856" ind1="4" ind2="2"><subfield code="q">text/html</subfield><subfield code="u">http://www.galileocomputing.de/3545</subfield><subfield code="3">Ausführliche Beschreibung</subfield></datafield><datafield tag="856" ind1="4" ind2="2"><subfield code="m">DNB Datenaustausch</subfield><subfield code="q">application/pdf</subfield><subfield code="u">http://bvbr.bib-bvb.de:8991/F?func=service&doc_library=BVB01&local_base=BVB01&doc_number=026835101&sequence=000001&line_number=0001&func_code=DB_RECORDS&service_type=MEDIA</subfield><subfield code="3">Inhaltsverzeichnis</subfield></datafield><datafield tag="856" ind1="4" ind2="2"><subfield code="m">Digitalisierung UB Passau - ADAM Catalogue Enrichment</subfield><subfield code="q">application/pdf</subfield><subfield code="u">http://bvbr.bib-bvb.de:8991/F?func=service&doc_library=BVB01&local_base=BVB01&doc_number=026835101&sequence=000004&line_number=0002&func_code=DB_RECORDS&service_type=MEDIA</subfield><subfield code="3">Klappentext</subfield></datafield><datafield tag="943" ind1="1" ind2=" "><subfield code="a">oai:aleph.bib-bvb.de:BVB01-026835101</subfield></datafield></record></collection> |
| id | DE-604.BV041387233 |
| illustrated | Illustrated |
| indexdate | 2025-02-20T07:11:50Z |
| institution | BVB |
| isbn | 9783836227766 3836227762 |
| language | German |
| oai_aleph_id | oai:aleph.bib-bvb.de:BVB01-026835101 |
| oclc_num | 864524588 |
| open_access_boolean | |
| owner | DE-898 DE-BY-UBR DE-859 DE-29T DE-739 DE-M347 DE-83 DE-573 DE-863 DE-BY-FWS DE-92 DE-1102 DE-523 DE-Aug4 DE-473 DE-BY-UBG |
| owner_facet | DE-898 DE-BY-UBR DE-859 DE-29T DE-739 DE-M347 DE-83 DE-573 DE-863 DE-BY-FWS DE-92 DE-1102 DE-523 DE-Aug4 DE-473 DE-BY-UBG |
| physical | 487 S. Ill., graph. Darst. |
| publishDate | 2014 |
| publishDateSearch | 2014 |
| publishDateSort | 2014 |
| publisher | Galileo Press |
| record_format | marc |
| series2 | Galileo Computing |
| spellingShingle | Müller, Peter 1960- Einstieg in CSS Webseiten gestalten mit HTML und CSS ; [Aktuell zu HTML5 und CSS3 ; Grundlagen: Schriften, Farben und Box-Modelle ; Konzepte: Spezifität, Kaskade und Positionierung verständlich erklärt ; Gestaltung: Navigation, mehrspaltige Layouts und Media Queries] Cascading Style Sheets 3.0 (DE-588)7750895-6 gnd Webdesign (DE-588)1041632088 gnd HTML 5.0 (DE-588)7704810-6 gnd |
| subject_GND | (DE-588)7750895-6 (DE-588)1041632088 (DE-588)7704810-6 |
| title | Einstieg in CSS Webseiten gestalten mit HTML und CSS ; [Aktuell zu HTML5 und CSS3 ; Grundlagen: Schriften, Farben und Box-Modelle ; Konzepte: Spezifität, Kaskade und Positionierung verständlich erklärt ; Gestaltung: Navigation, mehrspaltige Layouts und Media Queries] |
| title_alt | HTML 5 CSS 3 fünf drei |
| title_auth | Einstieg in CSS Webseiten gestalten mit HTML und CSS ; [Aktuell zu HTML5 und CSS3 ; Grundlagen: Schriften, Farben und Box-Modelle ; Konzepte: Spezifität, Kaskade und Positionierung verständlich erklärt ; Gestaltung: Navigation, mehrspaltige Layouts und Media Queries] |
| title_exact_search | Einstieg in CSS Webseiten gestalten mit HTML und CSS ; [Aktuell zu HTML5 und CSS3 ; Grundlagen: Schriften, Farben und Box-Modelle ; Konzepte: Spezifität, Kaskade und Positionierung verständlich erklärt ; Gestaltung: Navigation, mehrspaltige Layouts und Media Queries] |
| title_full | Einstieg in CSS Webseiten gestalten mit HTML und CSS ; [Aktuell zu HTML5 und CSS3 ; Grundlagen: Schriften, Farben und Box-Modelle ; Konzepte: Spezifität, Kaskade und Positionierung verständlich erklärt ; Gestaltung: Navigation, mehrspaltige Layouts und Media Queries] Peter Müller |
| title_fullStr | Einstieg in CSS Webseiten gestalten mit HTML und CSS ; [Aktuell zu HTML5 und CSS3 ; Grundlagen: Schriften, Farben und Box-Modelle ; Konzepte: Spezifität, Kaskade und Positionierung verständlich erklärt ; Gestaltung: Navigation, mehrspaltige Layouts und Media Queries] Peter Müller |
| title_full_unstemmed | Einstieg in CSS Webseiten gestalten mit HTML und CSS ; [Aktuell zu HTML5 und CSS3 ; Grundlagen: Schriften, Farben und Box-Modelle ; Konzepte: Spezifität, Kaskade und Positionierung verständlich erklärt ; Gestaltung: Navigation, mehrspaltige Layouts und Media Queries] Peter Müller |
| title_short | Einstieg in CSS |
| title_sort | einstieg in css webseiten gestalten mit html und css aktuell zu html5 und css3 grundlagen schriften farben und box modelle konzepte spezifitat kaskade und positionierung verstandlich erklart gestaltung navigation mehrspaltige layouts und media queries |
| title_sub | Webseiten gestalten mit HTML und CSS ; [Aktuell zu HTML5 und CSS3 ; Grundlagen: Schriften, Farben und Box-Modelle ; Konzepte: Spezifität, Kaskade und Positionierung verständlich erklärt ; Gestaltung: Navigation, mehrspaltige Layouts und Media Queries] |
| topic | Cascading Style Sheets 3.0 (DE-588)7750895-6 gnd Webdesign (DE-588)1041632088 gnd HTML 5.0 (DE-588)7704810-6 gnd |
| topic_facet | Cascading Style Sheets 3.0 Webdesign HTML 5.0 |
| url | http://deposit.dnb.de/cgi-bin/dokserv?id=4397940&prov=M&dok_var=1&dok_ext=htm http://www.galileocomputing.de/3545 http://bvbr.bib-bvb.de:8991/F?func=service&doc_library=BVB01&local_base=BVB01&doc_number=026835101&sequence=000001&line_number=0001&func_code=DB_RECORDS&service_type=MEDIA http://bvbr.bib-bvb.de:8991/F?func=service&doc_library=BVB01&local_base=BVB01&doc_number=026835101&sequence=000004&line_number=0002&func_code=DB_RECORDS&service_type=MEDIA |
| work_keys_str_mv | AT mullerpeter einstiegincsswebseitengestaltenmithtmlundcssaktuellzuhtml5undcss3grundlagenschriftenfarbenundboxmodellekonzeptespezifitatkaskadeundpositionierungverstandlicherklartgestaltungnavigationmehrspaltigelayoutsundmediaqueries AT mullerpeter html5css3funfdrei |
Description
THWS Würzburg Zentralbibliothek Lesesaal
| Call Number: |
1000 ST 253 C18 M947 |
|---|---|
| Copy 1 | ausleihbar Available Place a Hold |