Suchen und Finden
Webdesign für Studium und Beruf - Webseiten planen, gestalten und umsetzen
von: Norbert Hammer, Karen Bensmann
Springer-Verlag, 2011
ISBN: 9783642170690 , 350 Seiten
2. Auflage
Format: PDF, OL
Kopierschutz: Wasserzeichen
Preis: 29,99 EUR
Vorwort
5
Vorwort zur 2. Auflage
6
IInnhhaalltt
7
Vorbemerkug 1
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
Alle Preise verstehen sich inklusive der gesetzlichen MwSt.