| Vorwort | 5 |
| Vorwort zur 2. Auflage | 6 |
| IInnhhaalltt | 7 |
| Vorbemerkug1 | 13 |
| 1.1 Überblick | 13 |
| 1.1.1 Inhalte und Ziele | 13 |
| 1.1.2 Voraussetzungen | 16 |
| Einführung 2 | 17 |
| 2.1 Lernziele | 17 |
| 2.2 Design-Begriffsexkurs | 18 |
| 2.3 Das Arbeitsfeld Webdesign | 22 |
| 2.3.1 Vom Print- zum Webdesign | 22 |
| 2.3.2 Was umfasst Webdesign? | 24 |
| 2.4 Das World Wide Web | 26 |
| 2.4.1 Entwicklung des World Wide Web | 26 |
| 2.4.2 Das WWW als Mitmach-Medium | 29 |
| 2.5 Resümee | 30 |
| Grundlagen des Webdesigns 3 | 31 |
| 3.1 Lernziele | 31 |
| 3.2 Einleitung | 31 |
| 3.3 Technik und Design | 32 |
| 3.3.1 Webtechnologien | 32 |
| 3.3.2 Webdesign, ein Kompromissdesign | 34 |
| 3.4 Websitestrategien | 37 |
| 3.4.1 Unternehmensrepräsentation | 37 |
| 3.4.2 Informationsplattformen | 38 |
| 3.4.3 Online-Shops | 39 |
| 3.4.4 Auktionsplattformen | 42 |
| 3.4.5 Unterhaltung | 43 |
| 3.4.6 E-Learning | 43 |
| 3.5 Websitetypen | 44 |
| 3.5.1 Statische Website | 44 |
| 3.5.2 Content-basierte dynamische Website | 45 |
| 3.5.3 Rich Internet Applications | 46 |
| 3.6 Resümee | 47 |
| 3.7 Quiz zu „Grundlagen des Webdesigns“ | 48 |
| Technische Grundlaen 4 | 50 |
| 4.1 Lernziele | 50 |
| 4.2 Einleitung | 51 |
| 4.3 HTML | 52 |
| 4.3.1 HTML oder XHTML? | 52 |
| 4.3.2 Struktur eines HTML-Dokuments | 53 |
| 4.3.3 Die Webseite mit Inhalten füllen | 57 |
| 4.3.4 Sonderzeichen in Textinhalten | 58 |
| 4.3.5 Überschriften | 58 |
| 4.3.6 Absätze und Zeilenumbrüche | 59 |
| 4.3.7 Links | 59 |
| 4.3.8 Bilder | 59 |
| 4.3.9 Textauszeichnungen | 60 |
| 4.3.10 Listen | 61 |
| 4.3.11 Tabellen | 61 |
| 4.3.12 Zitate | 62 |
| 4.3.13 Struktur für das Dokument | 62 |
| 4.3.14 HTML-Übung | 63 |
| 4.4 CSS | 64 |
| 4.4.1 CSS in die Website einbinden | 64 |
| 4.4.2 Regeln und Selektoren | 65 |
| 4.4.3 @-Regeln | 71 |
| 4.4.4 V ererbung und K askaden | 78 |
| 4.4.5 Das B oxmodell | 82 |
| 4.4.6 F arben in CSS | 82 |
| 4.4.7 Absolute und relative Maßeinheiten | 85 |
| 4.4.8 CSS-Eigenschaften | 86 |
| 4.4.9 Positionierung mit CSS | 89 |
| 4.5 Schritt für Schritt zur HTML-Seite mit Stylesheet | 96 |
| 4.5.1 Schritt 1: Seite strukturieren | 96 |
| 4.5.2 Schritt 2: Den HTML-Code mit Textauszeichnungerstellen | 97 |
| 4.5.3 Schritt 3: Strukturierende Container | 99 |
| 4.5.4 Schritt 4:-Element formatieren | 103 |
| 4.5.5 Schritt 5: Der umgebende Container | 103 |
| 4.5.6 Schritt 6: Den Inhaltsbereich formatieren | 104 |
| 4.5.7 Schritt 7: Kopfbereich gestalten | 107 |
| 4.5.8 Schritt 8: Der Navigationsbereich | 108 |
| 4.6 Alte versus neue Technologien | 110 |
| 4.7 Weiterführende Technologien | 111 |
| 4.7.1 Flash | 111 |
| 4.7.2 Silverlight | 111 |
| 4.7.3 JavaFX | 111 |
| 4.7.4 Das | 111 |
| 4.7.5 XML | 112 |
| 4.7.6 Serverseitige Programmiersprachen | 112 |
| 4.7.7 Clientseitige Programmiersprachen | 114 |
| 4.7.8 Datenbanken und SQL | 114 |
| 4.7.9 Ajax | 119 |
| 4.7.10 Abonnementendienste | 122 |
| 4.8 Aktuelle Trends im World Wide Web | 124 |
| 4.8.1 Das Web 2.0 | 124 |
| 4.8.2 Semantisches Web | 125 |
| 4.9 Das World Wide Web der Zukunft | 126 |
| 4.9.1 HTML5 | 126 |
| 4.9.2 CSS Level 3 | 126 |
| 4.9.3 Silbentrennung | 128 |
| 4.10 Bildformate für das WWW | 129 |
| 4.10.1 GIF | 129 |
| 4.10.2 JPEG | 130 |
| 4.10.3 PNG | 131 |
| 4.10.4 S VG | 132 |
| 4.10.5 Formatentscheidungen | 132 |
| 4.11 Plugins | 133 |
| 4.11.1 Adobe Flash | 133 |
| 4.11.2 Microsoft Silverlight | 134 |
| 4.11.3 Java | 134 |
| 4.11.4 X3D | 134 |
| 4.11.5 PDF | 135 |
| 4.12 Entwicklerwerkzeuge | 135 |
| 4.12.1 HTML-Editoren | 135 |
| 4.12.2 Content-Management-Systeme | 136 |
| 4.12.3 Bildbearbeitungssoftware | 137 |
| 4.12.4 Toolbars und Browsertools | 137 |
| 4.13 Entwickeln für den unbekannten Anwender | 138 |
| 4.13.1 Plattformen, Browser und Toolbars | 138 |
| 4.13.2 Monitore und A uflösungen | 139 |
| 4.14 Resümee | 140 |
| 4.15 Quiz zu „Technische Grundlagen“ | 141 |
| 4.15.1 Ein HTML-Element wird normalerweise definiert | 141 |
| 4.15.2 Wie schreiben Sie in XHTML ein img-Element? | 141 |
| 4.15.3 An welche Stelle eines XHTML-Dokuments mussdie XML-Deklaration geschrieben werden? | 141 |
| 4.15.4 Wo wird der XML-Namensraum festgelegt? | 141 |
| 4.15.5 Welche der folgenden Aussagen ist/sind richtig?(mehrere Nennungen möglich) | 141 |
| 4.15.6 Worauf sollten Sie achten, wenn Sie in IhremHTML-Dokument Überschriften verwenden? | 142 |
| 4.15.7 Welches Attribut definiert in einem -Elementdas Verweisziel? | 142 |
| 4.15.8 Wie schreiben Sie eine CSS-Regel in einemStylesheet? | 142 |
| 4.15.9 Wie definieren Sie einen Inline-Style für eineinzelnes Element? | 142 |
| 4.15.10 Wie binden Sie ein externes Stylesheet in einHTML-Dokument ein? | 142 |
| 4.15.11 Können Sie in CSS für eine Gruppe von Elementengleichzeitig denselben Style zuweisen? | 142 |
| 4.15.12 Welche Regeln gelten für die Vererbung vonStyles? | 143 |
| 4.15.13 Sortieren Sie die folgenden GIF-Grafiken nachaufsteigender Dateigröße. | 143 |
| 4.15.14 Ordnen Sie das jeweils geeignete Bildformat denAbbildungen zu. | 143 |
| 4.16 Übung: „Tragamin“ Webseite aufbauen | 144 |
| Siteplanung 5 | 145 |
| 5.1 Lernziele | 145 |
| 5.2 Einleitung | 146 |
| 5.3 Briefing und Projektplanung | 146 |
| 5.3.1 Kundenanforderungen | 147 |
| 5.3.2 Main Idea | 149 |
| 5.3.3 Ablauf- und Projektplanung | 149 |
| 5.3.4 Angebot / Kostenplanung | 151 |
| 5.4 Information und Analysen | 153 |
| 5.4.1 Zielgruppenanalyse | 153 |
| 5.4.2 Websiteanalysen | 154 |
| 5.4.3 Materialsichtung | 155 |
| 5.4.4 Corporate-Design-Vorgaben | 156 |
| 5.4.5 Überarbeitete Projektformulierung | 157 |
| 5.5 Technische Vorplanung | 157 |
| 5.5.1 Domains | 157 |
| 5.5.2 Webhosting | 159 |
| 5.5.3 Webserver | 161 |
| 5.6 Strukturdesign | 162 |
| 5.6.1 Inhaltlicher Aufbau | 162 |
| 5.6.2 Sitestrukturmodelle | 163 |
| 5.6.3 Strukturlayout | 166 |
| 5.7 Interaktionsdesign | 168 |
| 5.7.1 Navigationskonzept | 169 |
| 5.7.2 Persistente Navigation | 172 |
| 5.7.3 Dynamisch generierte Navigation | 173 |
| 5.7.4 Zielgruppenorientierte Navigation | 173 |
| 5.7.5 Teaser und A nkerlinklisten | 174 |
| 5.7.6 Quicklinks | 175 |
| 5.7.7 Verzeichnisse und Sitemaps | 175 |
| 5.7.8 Breadcrumbtrail | 176 |
| 5.7.9 Suchfunktionen | 177 |
| 5.7.10 Hilfe und Guided Tour | 177 |
| 5.7.11 Slider, Carousel etc. | 178 |
| 5.7.12 Das Navigationslayout | 179 |
| 5.8 Projektorganisation | 183 |
| 5.8.1 Arbeitsserver | 183 |
| 5.8.2 Namenskonventionen | 183 |
| 5.8.3 Projektdokumentation | 184 |
| 5.9 Resümee | 185 |
| 5.10 Quiz zu „Siteplanung“ | 185 |
| 5.11 Übung: Siteplanung der „pixographen“-Site | 187 |
| Designentwurf 6 | 190 |
| 6.1 Lernziele | 190 |
| 6.2 Einleitung | 191 |
| 6.3 Look & Feel | 192 |
| 6.4 Usability | 194 |
| 6.4.1 Typografie am Bildschirm | 196 |
| 6.4.2 Farbe am Bildschirm | 199 |
| 6.5 Accessibility | 200 |
| 6.6 Screendesign | 204 |
| 6.6.1 Was umfasst Screendesign? | 204 |
| 6.6.2 Designstil | 204 |
| 6.6.3 Bildsprache und Metaphern | 206 |
| 6.6.4 Seitenunterteilung / Raster | 207 |
| 6.6.5 Seitenkomposition | 209 |
| 6.6.6 Bildkonzept | 211 |
| 6.7 Interfacedesign | 213 |
| 6.7.1 Was umfasst Interfacedesign? | 213 |
| 6.7.2 Orientierung | 214 |
| 6.7.3 Farbkodierung | 215 |
| 6.7.4 Navigationskonventionen | 217 |
| 6.7.5 Navigationsmenüs | 219 |
| 6.7.6 Bildbuttons | 222 |
| 6.7.7 Navigationskulissen | 224 |
| 6.7.8 Bilder als Schaltflächen | 225 |
| 6.7.9 Textlinks | 226 |
| 6.7.10 Favorite-Icons | 228 |
| 6.8 Designarbeitsschritte | 229 |
| 6.8.1 Scribble, Vorentwurf | 229 |
| 6.8.2 Basic Photoshop-Layout | 230 |
| 6.8.3 Rasterentwicklung | 231 |
| 6.8.4 Detailentwurf | 233 |
| 6.9 Präsentation grafischer Prototyp | 234 |
| 6.10 Resümee | 235 |
| 6.11 Quiz zu „Designentwurf“ | 236 |
| 6.12 Übung: Screenund Interfacedesign der„pixographen“-Site | 238 |
| Prototyping 7 | 240 |
| 7.1 Lernziele | 240 |
| 7.2 Einleitung | 241 |
| 7.3 HTML-Prototyp | 241 |
| 7.3.1 Grundsätzlicher Aufbau der Seiten, HTML-Layout | 241 |
| 7.3.2 Der HTML-Quelltext | 242 |
| 7.3.3 Organisieren des Stylesheets | 243 |
| 7.3.4 Grafiken | 244 |
| 7.3.5 Browseranpassung | 245 |
| 7.3.6 Browser-Reset | 246 |
| 7.3.7 Code Reviews | 247 |
| 7.4 Styleguide | 248 |
| 7.5 Freigabe zur Umsetzung | 250 |
| 7.6 Resümee | 252 |
| 7.7 Quiz zur „Technischen Umsetzung“ | 252 |
| 7.8 Übung: Prototyping der „pixographen“-Site | 254 |
| Assetdesign 8 | 256 |
| 8.1 Lernziele | 256 |
| 8.2 Einleitung | 257 |
| 8.3 Storyboard und Dokumentation | 257 |
| 8.4 Texte im Web | 259 |
| 8.4.1 Text erstellen | 259 |
| 8.4.2 Text gestalten | 261 |
| 8.5 Bildtypografie | 263 |
| 8.5.1 Bildheadlines | 264 |
| 8.5.2 Semantikbezug in Bildheadlines | 265 |
| 8.6 Grafiken und Bilder im Web | 266 |
| 8.6.1 Funktionen von Bildern | 267 |
| 8.6.2 Bilddefinitionen | 269 |
| 8.6.3 Bildoptimierung | 273 |
| 8.6.4 Freistellen | 274 |
| 8.6.5 B ildrandgestaltung | 277 |
| 8.6.6 S inguläre Hintergrundbilder | 280 |
| 8.6.7 Bildkacheln | 281 |
| 8.6.8 Headerbilder | 285 |
| 8.6.10 Weitere Bildbearbeitungsmethoden | 287 |
| 8.7 Multimediainhalte | 287 |
| 8.7.1 Über Animation | 287 |
| 8.7.2 Bildplayer / Diashow | 288 |
| 8.7.3 Animierte GIFs | 289 |
| 8.7.4 RIA-Animationen | 289 |
| 8.7.5 Filme / Videos | 289 |
| 8.7.6 Musik / Audio | 290 |
| 8.7.7 Sonstige Multimediaanwendungen | 290 |
| 8.8 Resümee | 290 |
| 8.9 Quiz zu „Assetdesign“ | 291 |
| 8.10 Übung: Storyboard und Assetdesign der „pixographen“-Site | 294 |
| Technische Umsetzung 9 | 295 |
| 9.1 Lernziele | 295 |
| 9.2 Einleitung | 295 |
| 9.3 Vom Prototyp zur fertigen Website | 296 |
| 9.3.1 Dynamischer Content | 296 |
| 9.3.2 Skripte und Multimediainhalte | 297 |
| 9.3.3 Grafiken optimieren | 297 |
| 9.4 Informationsdarstellung auf anderen Medien | 297 |
| 9.4.1 Druckversion | 297 |
| 9.4.2 Mobile Endgeräte | 303 |
| 9.5 Interaktion mit dem Benutzer | 305 |
| 9.5.1 Formulare | 305 |
| 9.5.2 Cookies und Sessions | 306 |
| 9.6 Suchmaschinenoptimierung | 307 |
| 9.6.1 Seiteninhalt und Relevanz | 307 |
| 9.6.2 Meta-Tags | 308 |
| 9.7 Resümee | 309 |
| 9.8 Quiz zu „Technische Umsetzung“ | 309 |
| 9.9 Übung: Technische Umsetzung der „pixographen“-Site | 310 |
| Tests und Launch 10 | 312 |
| 10.1 Lernziele | 312 |
| 10.2 Einleitung | 313 |
| 10.3 Testphasen | 313 |
| 10.3.1 Dokumententests | 313 |
| 10.3.2 Funktionstests | 314 |
| 10.3.3 Usability Testing | 316 |
| 10.3.4 Accessibility Testing | 320 |
| 10.3.5 Security Testing | 320 |
| 10.4 Veröffentlichung der Website | 321 |
| 10.5 Die Website bekannt machen | 322 |
| 10.6 Wartung und Pflege | 323 |
| 10.7 Auswertung der Logfiles | 324 |
| 10.8 Resümee | 326 |
| 10.9 Quiz zu „Tests und Launch“ | 327 |
| 10.10 Übung: Testen der „pixographen“-Site | 328 |
| Abbildungsverzeichnis | 330 |
| Linkverzeichnis | 336 |
| Literaturverzeichnis | 338 |
| Index | 339 |
| Quizlösungen | 346 |
| Lösungen aller Quizfragen | 346 |
| Online-Material | 349 |
| Die Autoren | 350 |
