Björn Seibert Manuela Hoffmann. Professionelles Webdesign I mit (X)HTML und CSS [

Transkript

1 Björn Seibert Manuela Hoffmann Professionelles Webdesign I mit (X)HTML und CSS [

2 Inhalt Vorwort 11 Über das Buch 11 Über die Autoren 12 Teil I Bevor es losgeht Einfach moderne Websites Auf dem Weg zur schlanken Website Eine gute, zugängliche und zukunftsfähige Website Struktur und Inhalte Semantik CSS Zugänglichkeit Suchmaschinenoptimierung Qualität Zukunftsfähigkeit Webstandards und Validierung Thema, Zielgruppe, Stil und erste Vorbereitungen 39 2 Die Sprachen (X)HTAAL und CSS (X)HTML Die XHTML-Syntax und Kennzeichnung der Inhalte DTD - Dokumenttypangaben Content-Type Header CSS CSS in die Seite einbinden Verschiedene Ausgabemedien Verschiedene Selektoren in CSS Vererbung (engl.: Inheritance) Kaskade (engl.: Cascade) Block-Level-Elemente Inline-Elemente Listen-Elemente 62

3 Teil II Struktur und Design 63 3 Struktur und semantischer Quellcode - (X)HTML und ein wenig CSS Bereiche- DIV Überschriften-H1 bis H Texte - P, Betonungen und Zitate Textabsätze Textpassagen betonen oder hervorheben - <em> und <strong> Zitate: Das blockquote-element Zitate: Das q-element Zitate: cite Praxis 3 - Startseite mit Inhalten füllen Links-A Standardlinks Alternative Möglichkeiten zur Verlinkung Praxis 4 - Textlinks Listen - UL, OL, DL UL - Ungeordnete Listen (unordered Lists) OL-geordnete Listen (ordered Lists) DL- Definitionslisten Praxis 5 - Listenmenü Tabellen -TABLE Tabellenelemente im Überblick und CSS für Tabellen Praxis 6 - eine Tabelle mit allen Elementen Formulare- FORM Formularelemente Praxis 7 - ein modernes, übersichtliches Kontaktformular Eine Kontaktseite Einbettung interaktiver Inhalte Abbau von Barrieren Vorurteile und Märchen Hilfsmittel und -gerate Grafiken und Bilder Links und Verknüpfungen Textlinks Navigationsmenüs Grafische Links Access Keys Tab-Index Skiplinks und Sprungmarken Inhalt

4 4.5 Überschriften Schriftgrößen Styleswitcher Sprache Abkürzungen und Akronyme Tabellen Formulare Flash & Co Fazit Webdesign: Farbe, Grafik, Typografie und CSS Die Planung einer Webpräsenz Welche Rolle spielt Grafik im Webdesign? Navigationselemente Informationselemente Schmuckelemente Farbe und Webdesign Die Grundregeln der Farbenlehre Die Erstellung von Farbschemata für Webseiten Farbgebung und die Zugänglichkeit von Webseiten Farben für Webseiten definieren Mehr Abstand, bitte! - Rahmen und Ränder definieren Das Box-Modell Exkurs: das Box-Modell und der Internet Explorer Praxis: Fotorahmen und Fotogalerien Die Verwendung von Bildern für die Gestaltung von Webseiten Hintergrundbilder verwenden Praxis: eine Einkaufsliste Eine Alternative zu der Verwendung von Hintergrundbildern in Listen: list-style-image Praxis: Navigationsleisten Typografie im Web Die Wahl der passenden Schriftart Die Schriftgröße Die Eigenschaft Font im Überblick Texteigenschaften Die Ausrichtung von Texten Zahlen Finetuning: Innen-und Außenabstände für Textelemente Exkurs: Sonderzeichen im Web Exkurs: Kleine Fallen der deutschen Typografie Fazit: Weniger ist mehr! 288 Inhalt 7

5 6 Das Design der Website Die Sitemap Die Designskizze Dateivorbereitung Das Stylesheet Die (X)HTAAL-Datei Farbschemabestimmung der Website zum Buch Das Designmodell und dessen Umsetzung in CSS Der Seitenhintergrund Die Gestaltung des Kopfbereichs Die Navigation Der Inhaltsbereich Der Seitenfuß Optimierung für alle Browser und Hack-Management »Hack«-Management 316 Teil IM Tipps und Ausblicke Im Schnelltest: Webseiten auf Fehler und Barrieren testen Die Werkzeuge Web Developer Extension für Firefox und Mozilla Internet Explorer Developer Der W3C Markup Validation Service und der W3C CSS Validator Browser-Screenshots Die Tests CSS abschalten Bilder abschalten Schriftgröße erhöhen JavaScript und Plugin-Unterstützung abschalten Tab-Index und Access Keys Die Unterstützung alter Browser Fehler aufspüren und beseitigen Inhalt

6 8 Ein Blick in die Zukunft Informationsfutter- Feeds, RSS und Atom Interaktion - AJAX Das denken die Experten 335 Index 341 Inhalt 9