Webdesign - Webseiten planen, gestalten - Free-Hack Library

336
Abbildungsverzeichnis
Abb. 4.4.8a: Wirkweise der Parameter bei Rahmen- und Abstandsangaben ......................................88
Abb. 4.4.9a: Standardmäßig werden die HTML-Elemente im Textfluss positioniert ............................91
Abb. 4.4.9b: Relative Positionierung .................................................................................................93
Abb. 4.4.9c: Absolute Positionierung ................................................................................................94
Abb. 4.4.9d, e: Fixierte Positionierung...............................................................................................94
Abb. 4.4.9f: Schwebende Elemente. ..................................................................................................95
Abb. 4.5a: Startseite der Web Design Gazette mit Blindtext ..............................................................97
Abb. 4.5.1a: Strukturierung der Seite mit Hilfe von Textauszeichnungen ............................................98
Abb. 4.5.2a: Die in HTML realisierte Seite .......................................................................................100
Abb. 4.5.3a: Weiter gehende Struktur mit -Containern ..........................................................101
Abb. 4.5.3b: Die eingefügten Container wurden hier farbig markiert ...............................................103
Abb. 4.5.4a: Auswirkungen des Stylesheets auf das -Element ............................................104
Abb. 4.5.6a: Die Positionierung von 3 Spalten mittels float. ............................................................105
Abb. 4.5.5a: Der die gesamte Seite umfassende Container wurde formatiert ...................................105
Abb. 4.5.6b: Die fertig positionierten Spalten..................................................................................107
Abb. 4.5.7a: Der fertige Kopfbereich ...............................................................................................108
Abb. 4.5.8a: Mögliche Lösung der HTML/CSS Übungen ..................................................................110
Abb. 4.6a: Beispiel für ein Tabellenlayout mit transparenten GIFs: Die Amazon-Startseite ................111
Abb. 4.7.8a: Die fertige Startseite der Web Design Gazette .............................................................119
Abb. 4.7.9a, b: Beispiel für eine Ajax-Webanwendung (http://maps.google.com) ............................120
Abb. 4.7.9c: Die mit HTML umgesetzte Klappliste ...........................................................................121
Abb. 4.7.9c: Die fertige Ajax-Anwendung .......................................................................................123
Abb. 4.7.10a: Der Google Reader: Ansicht auf einem Mobiltelefon .................................................123
Abb. 4.7.10b: Der Google Reader: Ansicht im Browser (http://reader.google.de) ..............................123
Abb. 4.8.1a-d: Beispiele für Web 2.0-Angebote Flickr, Gliffy, kuler, Aviary (http://flickr.com/, ............125
http://www.gliffy.com/, http://kuler.adobe.com/, http://aviary.com/) .................................................125
Abb. 4.9.3a: Silbentrennung im Browser mit ­ (Grafik: Bensmann) ...........................................129
Abb. 4.10.1a-c: Indizierte GIF-Bilder (Foto: Bensmann) ...................................................................130
Abb. 4.10.1d: Banding-Effekt (Foto: Bensmann) .............................................................................131
Abb. 4.10.1e, f: Indiziertes Bild mit und ohne Dithering (Foto: Bensmann) .......................................131
Abb. 4.10.2a: Artefaktbildung mit abnehmender Bildqualität (Grafik: Bensmann) ............................132
Abb. 4.10.3a: In Photoshop gespeicherte PNG-Dateien (oben: 24-bit, unten: 8-bit). ........................133
Abb. 4.10.4a: Beispiel für eine SVG-Grafik (Quelle: Wikipedia) ........................................................133
Abb. 4.12.1a: Editor mit Syntax-Highlighting ..................................................................................137
Abb. 4.13.2a: Monitorauflösungen Mitte 2010 (Quelle: http://marketshare.hitslink.com/) ................140
Abb. 4.13.2b: Monitorscreen und Browserfläche ............................................................................140
Abb. 4.16a: Vorlage Tragamin Webseite ..........................................................................................145
Siteplanung
5. ..................................................................................147
Abb. 5a: Zitat Douglas Adams (Grafik: Bensmann) ..........................................................................147
Abb. 5.3.1a: Formblatt für eine Briefing-Checkliste (Quelle: hammer.runge) ....................................149
Abb. 5.3.1b: Inhalt einer Briefing-Checkliste ...................................................................................150
Abb. 5.3.3a: Projektplan Webdesign (Beispiel: Eschenröder, Ausschnitt aus MS Project) ...................152
Abb. 5.3.4a: Angebotsbeispiel (Quelle: hammer.runge) ...................................................................154
Abb. 5.4.2a: Polaritätenprofile (Grafik: Klettke) ...............................................................................156
Abb. 5.4.2: Mögliche Fragestellungen für eine Online-Umfrage (Beispiel: Hammer) .........................157
Abb. 5.4.4a: Logo, Farben und Hausschrift der Deutschen Post AG .................................................158
Abb. 5.5.1a: Top-Level-Domains weltweit (Design: John Yunker) .....................................................160
Abb. 5.6.1a: Navigationsbegriffe (http://www.manufactum.de) .......................................................164
Abb. 5.6.2a,b: Linearstruktur (Grafik: Ruske) ...................................................................................165
Abb. 5.6.2c, d: Leiterstruktur (Grafik: Ruske) ...................................................................................166
Abb. 5.6.2e, f: Baumstruktur (Grafik: Ruske) ...................................................................................166
Abb. 5.6.2g, h: Matrixstruktur (Grafik: Ruske, Screenentwurf: Jägers) ..............................................167
Abb. 5.6.2i, j: Netzstruktur (Grafik: Ruske) ......................................................................................168
Abb. 5.6.2k, l: Mischform aus den o. g. Strukturmodellen (Grafik: Ruske) ........................................168
Abb. 5.6.3a: Grafisches Strukturlayout (Grafik: Hammer) .................................................................169
Abb. 5.6.3b,c: Strukturlayouts als Mindmap und als Strukturkaskade (Grafik: Hammer) ...................170
Abb. 5.7a: Seitentitel, Dateiname auf der Website von Manufactum (http://www.manufactum.de) ..171
Abb. 5.7.1a: Interaktionselemente (Websiteentwurf FH-Gelsenkirchen, Projektteam Märdian,
Gessner, Bellendorf, Leitung Prof. Dr. Hammer) ................................................................................172
Abb. 5.7.1b, c: Vorseitennavigation auf älteren Webseiten .............................................................173