!important 219* (Universalselektor) 118, 121, 222 3-Pixel-Bug (Internet Explorer) 71

Aa (Element) 197Accessibility 41:active 223:after 223Ajax 162, 356, 357, 358, 359Alternativtexte 29API 356Arbeitsumgebung 267Außenabstände

zusammenfallende 74, 239

Bbackground (Eigenschaft) 224background-attachment

(Eigenschaft) 224background-color (Eigenschaft) 224background-image (Eigenschaft)

224, 352background-position (Eigenschaft)

224background-repeat (Eigenschaft) 224Barrierefreiheit 29, 36, 40, 41, 42, 65,

157, 240Bedienungshilfen 30Braille 29, 214Braillezeile 29Farbfehlsichtigkeit 43, 133Hörbehinderung 42Internet für alle 41Kognitive Lern-, und Sprach-

behinderung 42Körperliche Einschränkungen 42Lichtempfindlichkeit 133Screenreader 11, 25, 29, 37, 40, 47,

133, 151, 152, 157, 194, 200Sehbehinderung 42, 43, 133Zugänglichkeitsrichtlinien für

Web-Inhalte 42Basisschriftgröße

im Internet Explorer 121in standardkonformen

Browsern 122

Basisschriftgröße definieren 119

Basisvorlage(X)HTML 253, 255CSS 256Druckstylesheet 261, 263Photoshop 263, 267

Basisvorlagen 12, 99, 175, 187, 190,

191, 192, 223, 253, 260, 323:before 223Beispielprojekt

Schokoladen 188, 272, 284, 287,

288, 291, 298, 305, 309, 317, 329,

331, 332, 333, 334Benutzerfreundlichkeit

→ UsabilityBilder

in elastischen Layouts 91Bildschirmauflösung 66

minimale 68Scrollbalken 68

Blindtexte 163, 173, 208, 253, 263,

316, 333, 341Blindtext-Generator 208Block-Elemente 69, 71, 74, 81, 96,

101, 121, 123, 195, 196, 242, 248blockquote (Element) 38, 196, 254body (Element) 190, 191border (Eigenschaft) 68border-collapse (Eigenschaft) 248,

250, 251border-radius (Eigenschaft) 355border-spacing (Eigenschaft) 248,

250Box-Modell 180box-sizing (Eigenschaft) 350Braille → BarrierefreiheitBraillezeile 41Brainstorming 271Breite

in em angeben 76in Pixeln angeben 75in Prozentangaben 76maximale 90

Browserältere 28Benutzerstylesheet 31, 32, 216Browserkunde 27

Browserstylesheet 29Camino 27, 134, 226, 295, 297Conditional Comments 181Firefox 27, 119, 120, 124, 135, 150,

169, 170, 171, 176, 177, 178, 179,

191, 208, 209, 237, 261, 262, 306,

307, 308, 312, 314, 322, 350, 351, 355, 357, 359

Internet Explorer 215, 223, 248Internet Explorer 5

27, 28, 72, 73, 74, 80, 151, 171, 178,

226, 231, 315Internet Explorer 5.5

28, 72, 74, 151, 231, 357Internet Explorer 6

27, 28, 29, 72, 119, 171, 227, 231, 295Internet Explorer 7

74, 119, 171, 297Multiple IE 171Netscape 27, 215Opera 27, 29, 115, 171, 297, 350, 357Opera Mini 29Safari 27, 79, 115, 119, 120, 150, 171,

172, 229, 233, 350, 351, 352, 353,

354, 355, 357Simplified Box-Model-Hack 181Standardschriftgröße 88, 118Star-HTML-Hack 181Viewport 66, 67, 84

Ccalc (Eigenschaft) 349, 351caption (Element) 207caption-side (Eigenschaft) 248CD → Corporate Design Checkliste

Eine gute Startseite 47Farbe 142Medien 157Typografie 126Webstandards, Zugänglichkeit

und Usability 48CI → Corporate Identityclass 192Collapsing Margins 74color (Eigenschaft) 224, 233column (Modul) 351

IND

EX

Index

Index | 363

column-count (Eigenschaft) 351column-gap (Eigenschaft) 351column-width (Eigenschaft) 351Conditional Comments 73, 78

→ BrowserContent Management

System 47, 191, 271, 272,

321, 342Corporate Design 19Corporate Identity 19Creative Commons 146CSS 21

abschalten 177, 311Attribut-Selektoren 226, 347Deklaration 213Druck-Stylesheet 215, 261, 263,

329, 332einbinden 214Element-Selektoren 213, 218ID-Selektoren 214, 217Klassen-Selektoren 214, 218Kommentare 219Kontextsensitive Selektoren 213Kurzschrift 22, 220LoVe-HAte 222Navigation, aktuelle Seite

hervorheben 317Ordnung im Stylesheet 220Pseudo-Klassen-Selektoren 218Pseudo-Selektoren 214Pseudoelemente 223Pseudoklassen 214, 223Rangfolge 216Rangordnungswert 218Reset Reloaded 222Selektoren 22Spezifität 217Texte formatieren 234TRouBLe 220, 222Vererbung 221Werte definieren 215

CSS-Layout 63CSS-Regel 22CSS-Sprites 246CSS 2 28, 34, 351CSS 3 13, 28, 34, 74, 95, 347, 349,

350, 351, 355Attribut-Selektor 347Deckkraft von Elementen 354Geschwisterkombinierer 347Hintergründe 352, 354runde Ecken 355Spaltensatz 351Transparenz 354, 355

Ddd (Element) 199Definitionsliste 199, 342Design 17, 18

Designgalerien 159Weniger ist mehr 45

Designprozess 18Analyse 19 Entwurf 19, 275Konzept 273Konzeptionalisierung 19Präsentation 19

Detailgehalt 163display (Eigenschaft) 69, 101, 102,

229, 238, 239, 242, 261, 292, 296,

298, 304, 306, 309, 342div (Element) 21, 70, 79, 93, 96, 100,

101, 192, 193, 228, 253, 254, 288,

294, 296, 297, 298, 300, 305, 306,

326, 327, 331, 332, 333, 334, 335,

336, 344Divitis 194dl (Element) 21, 199Doctype 48doctype (Element) 189DOM 25, 34, 357dt (Element) 199DVD zum Buch 13, 79, 99, 125, 134,

188, 234, 263, 277, 287, 291, 312, 314, 315, 317, 318, 321, 327, 361

EEditoren 163, 164, 165, 287,

322, 331CSSEdit 166Dreamweaver 163, 164,

330, 331E-Texteditor 165TextMate 165, 166, 287TopStyle Lite 165TopStylePro 165WeBuilder 164WYSIWYG 163

Elastisches Layouts 76Elemente

mit CSS positionieren 76Elemente anordnen 62em (Element) 195empty-cells (Eigenschaft) 248EPS 150Excel 156Extensis Portfolio 160Eye-Candy 357

FFarbe 129

additiv 129für Webseiten 135Farbabstufung 133Farben bestimmen 136, 278Farbfehlsichtigkeit 134, 312Farbkontrast 131, 132Farbkreis 136Farbnamen 130Farbschema 18, 135, 136, 138, 143,

256, 276, 279, 289Farbwahrnehmung 133Farbwirkung 131gesättigte Farbtöne 141Grundfarben 129, 130hexadezimal 130Komplementärfarbe 130, 132, 135Kontrast 31, 52, 60, 108, 114, 132,

135Pastelltöne 139Primärfarbe 129Sekundärfarbe 129Signalcharakter 132Signalfarbe 142subtraktiv 129Tertiärfarbe 130Trends 138Werkzeuge 136, 137, 237, 276

Fehler finden 36fieldset (Element) 205Firefox

Erweiterungen 135, 169Erweiterungen: ColorZilla 237, 307Erweiterungen: Firebug 169, 170,

178, 179Erweiterungen: ReloadEvery 170Erweiterungen: Tails 306Erweiterungen: Web Developers

Toolbar 124, 176, 177, 178, 179,

261, 308, 314, 359Fireworks 164first-child 223first-letter 214, 223, 297first-line 223Flash 48, 149, 150, 151, 152, 153Flash-Elemente 93Flexibles Layout 76float (Eigenschaft) 76, 84, 85, 86focus 223font (Eigenschaft) 233font-family 109font-family (Eigenschaft) 232, 234font-size (Eigenschaft) 232, 234

364 | Index

font-style (Eigenschaft) 232font-variant (Eigenschaft) 233font-weight (Eigenschaft) 232form (Element) 201Formulare 29, 201, 301

Gestaltung 343Kontaktformular 344Label 29Suchformular 265, 301, 323, 326,

334, 343Usability 46

Fotogestaltung 53Frameworks 65, 357, 358, 359

Thickbox (jQuery) 358Dojo 357jQuery 356, 357, 358, 359MooTools 357Prototype 357script.aculo.us 357

GGestaltgesetz

Asymmetrie 58Der goldene Schnitt 52, 53, 59,

80, 94, 95, 96, 290Drittelregel 53Erfahrung 57Figur-Trennung 52Geschlossenheit 56Gleichheit oder Ähnlichkeit 55Harmonie 57Nähe 54Symmetrie 58Visuelles Gewicht 60

Gestaltgesetze 51Gestaltpsychologie 51Gestaltung

Harmonie 52Ästhetik 52

Gestaltungsraster 65in CSS umsetzen 99Formel 97

GIF 150, 151Gimp 160Gliederungselemente

Linien 60, 61Grafik

Seitenhintergrund 99Grid-Design 96

Hh1 ... h6 (Elemente) 21, 194Hacks 180, 181

Handy 29head (Element) 190Hilfslinien 285Hintergrundbild 99hover 223hr (Element) 297, 300HTML (Element) 188, 190html (Element) 294

IIcon 60, 157id 192Image Replacement 116, 157, 240img (Element) 200, 225, 226,

258, 291Informationsarchitektur 46Inhaltsbereiche anordnen 54Initialen 296Inline-Elemente 69, 71, 75, 239Innenabstände für Textbereiche 102input (Element) 202iPhoto 160

JJavaScript 12, 25, 29, 42, 48, 178, 356,

357, 359JPEG 150, 151

KKaskade 176, 216Klassitis 194Kreativität 159

Llabel (Element) 201, 202, 203, 205,

206, 342, 343lang 223Layout 18, 26, 28, 35, 51, 61, 62, 64,

65, 66, 67, 68, 69, 75, 76, 80, 85,

86, 87, 88, 89, 90, 91, 92, 93, 95,

98, 99, 103, 104, 112, 122, 125, 137,

138, 142, 151, 177, 179, 188, 200, 271, 275, 291, 294, 307, 311, 316, 318, 321, 329, 338, 347Bilder in elastischen Layouts 91Box-Modell 68, 69, 72, 74, 86,

102, 350Box-Modell (CSS 3) 350Breite und Höhe 66Dokumentfluss 76, 93, 96dreispaltig 93elastisch 51, 75, 88, 112

Elemente 60, 63, 76, 88, 135, 143,

176, 259, 260, 263, 275, 279, 287fix 51, 75, 86, 112flexibel 51, 75, 86, 112Gestaltungsraster 65, 95, 96, 97,

99, 101, 102, 103, 104, 141, 160,

260, 267, 351hybrid 89Inhaltsbereiche 63klassische Spaltenlayouts 64mehrspaltig 65, 95Methode der grauen Box 162,

264, 274mit fester Breite 75Positionierung 51, 53, 62, 75, 76,

79, 84, 93, 96, 99, 294, 311Positionierung (absolute) 75, 76,

82, 294Positionierung: relativ 78Satzspiegel 65, 95vertikale Abstände 122Weißraum 54, 59, 64, 65, 80, 94,

96, 97, 102, 135, 141, 142, 275, 290,

295zweispaltig 93

Layout zentrieren 80legend (Element) 205Lesbarkeit 105, 107, 113, 114, 122letter-spacing (Eigenschaft) 233, 235line-height (Eigenschaft) 113, 233Linien 60link (Element) 48, 214list-style-image (Element) 241list-style-position (Element) 241list-style-type (Element) 241Listen 197Logo 39, 42, 48, 53, 63, 131, 135, 159,

272, 273, 279, 280, 283, 291, 295,

311, 332

MMakro-Weißraum 64MAMP 168, 169, 327, 328margin (Eigenschaft) 68, 95MathML 34meta (Tag) 190Microsoft Expression Media 160Mikro-Weißraum 64Mikroformate 209

hCalendar 209hCard 209, 210, 305, 306, 311, 334,

344hCard-Creator 305XFN 209

Index | 365

Mobile Geräte 29Handheld 25, 261Handy 25, 29Laptop 11

MOV 153MP3 154, 156

NNavigation 246

Klickbereiche 36, 43, 293Navigationsstatus 243Reiter-Navigation 245Sliding Doors 245

Navigationsleiste 37, 197, 241, 243,

244, 266, 282, 283, 292, 311, 312, 317horizontale 244, 245vertikale 241

Ool (Element) 21, 197OmniGraffle 161opacity (Eigenschaft) 354, 355

Pp (Element) 21, 195padding (Eigenschaft) 68, 69, 70,

72, 80, 94, 95, 103, 221, 227, 237,

239, 250, 290, 291, 292, 293, 300,

310, 350Parallels 172PDF 157, 227Photoshop 160, 164, 263

Ebenenstile 279, 280Hilfslinien 285, 291HTML Stamps 266Muster festlegen 283

Photoshop Lightroom 160phpMyAdmin

Datenbank anlegen 328Piktogramme 57Pixelschrift 106Pixelwerte

in em-Werte umrechnen 88PNG 150, 151, 228, 231, 272, 291, 295

transparent 228, 231, 295Podcast 146, 156Polaritätsprofil 108position (Eigenschaft) 69, 76, 81, 82,

83, 230, 294, 311Positionierung

→ LayoutPowerpoint 161Print- versus Webdesign 26

QQuickTime 153

MOV einbinden 156

RRaster → LayoutRaster errechnen 96Rastergrafik 150RGB-System 129Rich Internet Applications 357RSS-Feed 47

SScalabe Vector Graphics 93Schreibschrift 106Schrift

Ausrichtung 110für das Web 109Farbe 114Formatierungsmöglichkeiten

117Kontrast 114Maßeinheiten 117

Schriftartenauf PC und Mac 109Verbreitung 109

Schriftfamilien 109Schriftgröße

em (Maßeinheit) 117festlegen 116Pixel 117Prozent (Maßeinheit) 118Punkt 117

Schriftklassifikation 106Schriftschnitt 106Screencast 146Scrollbalken 76Selektor 347Selektoren 213, 217Semantik 34, 35, 37, 38,

40, 42Hauptlayoutelemente 39

semantisches Markup 37Serifen 106Silbentrennung 111Sliding-Doors → NavigationSpaltenanzahl 75speak-header (Eigenschaft) 248Sperrung 106Sprechende URLs 340strong (Element) 195, 304Subversion 168Suchmaschinen 35

Superspalten 100SVG 34, 150SVG → Scalabe Vector GraphicsSymbole 57

TTabellen 207tabindex (Attribut) 205, 206table (Element) 21, 207, 248Tag-Soup 32Template 47Tests

Browsercam 172Browserpool 172Browsershots 172Color Oracle 134Colour Contrast Check 135CSS Analyser 135Dokumentgrößen 314Ladezeiten 314Testbrowserpaket 176Vischeck 134

text-align (Eigenschaft) 226, 233text-decoration (Eigenschaft) 233text-indent (Eigenschaft) 233text-shadow (Eigenschaft) 233text-transform (Eigenschaft) 233, 236textarea (Element) 204Textausrichtung 110TIFF 150title (Tag) 190Typografie 12, 20, 49, 64, 66, 88, 105,

106, 115, 118, 141, 142, 160, 163Anführungszeichen 126Antiqua 106Arial 109Bankleitzahlen 126Basisschriftgröße 116, 121Blocksatz 110Durchschuss 113Flattersatz 110Gemeine 106große Schriftgrade im Web 116Groteske 106Groteskschriften 113inverse Darstellung 115Klammern 126Lucida Grande 109Minuskelziffern 106römische Ziffern 106Satzarten 111Schriftempfinden 107, 108Schriften für das Web 109Schriftfamilie 106

366 | Index

Schriftformatierung für das Web 115

Schriftgewicht 115Schriftglättung 117, 119Schriftmischung 108Serifenschriften 113Standardschriftgröße 118Telefon-, Fax- und Postfach-

nummern 126Times New Roman 109Trebuchet MS 109Trennstriche 125Versalien 106Versalziffern 106vertikaler Rhythmus 122, 308Zeilenabstand 113, 114Zeilenbreite 110Zeilenhöhe 113Ziffern 106

Uul (Element) 21, 197Usability 43, 65

Informationsarchitektur 46

Konventionen 45Navigation 44Scrollen 45Seitenleiste 44Startseite 44, 46, 190

Testing 45User Experience 46

User-Stylesheet 13, 216

VValidator 36 Validierung 36

FEED Validator 37Markup Validation Service 37Validator 37, 42, 177, 341Validome 37W3C CSS Validation

Service 37vCalendar 209Vektorgrafik 150Virtualisierungsumgebung 172VirtualPC 172Visio 161:visited 223VMWare 172Vorlage 47, 175, 187, 253, 272, 323,

324, 325, 327, 329, 333, 335, 339,

340

WW3C → World Wide Web Consortium Wahrnehmung 51, 52Web 2.0 13, 142, 356Webdesign 17, 18

Definition Dokument 24Die gedruckte Seite 24Navigation 48Prinzipien 23, 35

Webdesigner 17Weblog 12, 17, 43, 44, 321, 342, 357Webseite

Aufbau 21, 63Inhalte 21Inhaltsbereiche 63strukturieren 21

Website 17Website-Layout

Elemente 62Webstandards 12, 17, 27, 28, 29, 32,

33, 34, 36, 46, 48, 62, 104, 194, 197,

208, 321, 345Prinzipien 34Vorteile 34

Weißraum → Layoutwhite-space (Eigenschaft) 112, 233Wireframes 161, 162, 174, 264, 274WMV 153Word 156word-spacing (Eigenschaft) 233WordPress 12, 272, 321, 322, 323, 324,

325, 327, 328, 329, 331, 333, 336,

337, 339, 340, 341Administrationsmenü 329, 337,

340, 341, 344aktuelle Seite hervorheben

330Codex 325Conditional Tags 325, 340Häufige Templates 323Hooks 325installieren 327Loop 326, 327Plug-ins 340Seiten anlegen 337Stylesheet 323, 324, 329, 342Template-Tags 333Theme 322, 325, 327, 329, 333, 337,

338, 345Widgets 333

Wordpress (Plug-ins)CForms II 343o42-clean-umlauts 340

PXS Mail Form 340, 341Text Control 340, 341

Workflow 12, 122, 167, 172, 173, 272World Wide Web Consortium 33Wortumbruch 112

XXAMPP 168, 169, 322, 327Xpath 357(X)HTML 21, 32

Attribut 21Element 21Tag 21versus XHTML 188

(X)HTML-Kommentare 192

YYAML 65

Zz-index (Eigenschaft) 229, 230, 294,

311Zeilenbreite

im Layout umsetzen 112Zeilenumbruch verhindern 112zentriertes Layout 80Zugänglichkeit 41Zugänglichkeitsrichtlinien 42

Index | 367