Webdesign - Webseiten planen, gestalten - Free-Hack Library

Abbildungsverzeichnis
Abbildungsverzeichnis
1. Vorbemerkung ...............................................................................13
Abb. 1a: Zitat Tim Berners-Lee (Grafik: Bensmann) ............................................................................13
Abb. 1.1.1a: Kapitelaufbau (Grafik: Hammer / Bensmann) ................................................................14
Abb. 1.1.1b: Startseite der Web Design Gazette (Design: Bensmann) ................................................15
2. Einführung......................................................................................17
Abb. 2a: Zitat Bill Clinton (Grafik: Bensmann) ...................................................................................17
3. Grundlagen des Webdesigns ........................................................31
Abb. 3a: Zitat Antoine de Saint-Exupéry (Grafik: Bensmann) .............................................................31
Abb. 3.2a: Von der Aufmerksamkeit zur Aktion (Grafik: Hammer) ......................................................32
Abb. 3.3.1a: Der Acid-Test, durchgeführt mit 6 gängigen Browsern . .................................................33
Abb. 3.3.2a: Sichere Webfonts (Grafik: Bensmann) ...........................................................................36
Abb. 3.4.1a: ABES Public Design (www.abes-online.de ) ...................................................................38
Abb. 3.4.2a: Online-Angebot der Wochenzeitung „Die Zeit“ (http://www.zeit.de) .............................39
Abb. 3.4.3a: Vorzeige-Webshop: Amazon.de (http://www.amazon.de) ..............................................40
Abb. 3.4.3b: Bestellvorgang bei Amazon.de (http://www.amazon.de) ...............................................42
Abb. 3.4.4a: Beispiel für ein Auktionshaus im World Wide Web: hood.de (http://www.hood.de) ........42
Abb. 3.4.5a: Das Browser-Game Wurzelimperium (http://www.wurzelimperium.de) ..........................43
Abb. 3.4.6a: Das Lernmodul „Webdesign“ (http://www.mediendesign-online.net) ............................44
Abb. 3.5.1a: Die Howatec-Website (http://www.howatec-online.de.de) .............................................44
Abb. 3.5.1b: Erinnerung an Zomtec (http://www.zomtec.de) .............................................................45
Abb. 3.5.2a: Das Portal von rewirpower.de (http://www.rewirpower.de) ............................................45
Abb. 3.5.2b: Wikipedia ist das wohl bekannteste Wiki weltweit. (http://de.wikipedia.org)..................46
Abb. 3.5.3a: Das WM-Team stellt sich vor. (http://www.wmteam.de) .................................................47
4. Technische Grundlagen .................................................................51
Abb. 4a: Anonymes Zitat (Grafik: Bensmann) ....................................................................................51
Abb. 4.3.1a, b: Valider HTML4-Quelltext im Vergleich zu validem XHTML1-Quelltext ........................54
Abb. 4.3.2a: XML- und DOCTYPE-Deklaration ..................................................................................55
Abb. 4.3.2b: HTML5 benötigt keine XML-Deklaration, HTML5- DOCTYPE-Deklaration . .....................55
Abb. 4.3.2c, d: Das -Element beherbergt Kopf- und Seitenbereich der Website. .....................56
Abb. 4.3.2e: Das title-Element im -Bereich des Quelltextes ...................................................56
Abb. 4.3.2f, g: Ansicht des Quelltextes und der Datei im Browser ......................................................57
Abb. 4.3.3a, b: Valide Anordnung von Elementen (Grafik: Bensmann) ...............................................59
Abb. 4.3.3c: Ungültige Anordnung von Elementen (Grafik: Bensmann)..............................................59
Abb. 4.3.4a: Eine Auswahl von HTML-Entities ...................................................................................59
Abb. 4.3.7a: Drei verschiedene -Elemente ..................................................................................60
Abb. 4.3.7b: Einbinden eines Stylesheets ..........................................................................................60
Abb. 4.3.13a: Die neuen Elemente und im Einsatz: .............................................64
Abb. 4.4.1a: Teilnahme am CSS Naked Day ......................................................................................65
Abb. 4.4.1b: So sieht die Seite normalerweise aus.............................................................................65
Tab. 4.4.2a, b: Beispiele für einen Universal- und einen Typselektor ...................................................67
Tab. 4.4.2c: Beispiele für einen Klassen- und einen ID-Selektor .........................................................68
Tab. 4.4.2d: Beispiele für Attributselektoren ......................................................................................69
Tab. 4.4.2e: Beispiele für kombinierte Selektoren ..............................................................................70
Tab. 4.4.2f: Beispiele für Pseudoelemente .........................................................................................71
Tab. 4.4.2g: Beispiele für Pseudoklassen ...........................................................................................72
Abb. 4.4.3a: Die per @font-face eingebetteten Schriften im Browser ................................................76
Abb. 4.4.3b: Ihren korrekten Namen verrät Ihnen die Schrift selber....................................................77
Abb. 4.4.3c: Das Google font directory .............................................................................................77
Abb. 4.4.3d: @font-face funktioniert in allen gängigen Browsern. ....................................................77
Abb. 4.4.3e, f: CSS Media Queries-Beispiel .......................................................................................78
Abb. 4.4.3g-j: Auswirkungen der Media Queries ...............................................................................79
Abb. 4.4.4a: DOM-Tree Ihrer XHTML-Übungsaufgabe .......................................................................80
Abb. 4.4.4b, c: Vererbung in CSS ......................................................................................................80
Abb. 4.4.5a: Das Boxmodell von CSS ................................................................................................83
Abb. 4.4.5b: margin-collapse bei angrenzenden und bei ineinander verschachtelten Boxen ...............83
Abb. 4.4.6a: CSS Farbdefinitionen ....................................................................................................84
Abb. 4.4.6b: Appearance Values .......................................................................................................85
N. Hammer, K. Bensmann, Webdesign für Studium und Beruf,
DOI 10.1007/978-3-642-17069-0, © Springer-Verlag Berlin Heidelberg 2011
335