Geleitwort des Fachgutachters '" '" 15 Vorwort zur zweiten Auflage. 1 Philosophie guten Webdesigns 21

Transkript

1 Inhalt Geleitwort des Fachgutachters '" '" 15 Vorwort zur zweiten Auflage 17 1 Philosophie guten Webdesigns Einleitung Modernes Webdesign mit (X)HTML und CSS Arbeiten nach Webstandards Webseiten sind nicht aus Papier Alles ist variabel, nichts ist fix Trennung von Inhalt, Layout und Dynamik »Design for our future selves« Die Welt der Browser Internet Explorer 5.x und Internet Explorer 5/Mac Internet Explorer Die Mozilla-Familie: Firefox, Netscape und Co Opera Safari und Konqueror Textbasierte Webbrowser Screenreader Entwurfskonzepte zur Layouterstellung Graceful Degradation Progressive Enhancement Welcher Weg ist nun der bessere? (X)HTML und Doctype Darstellungsmodi Semantischer Code Standard-CSS der Browser Die Arbeit mit dem Buch Verwendung des Pixelrasters Aufbau der Codebeispiele Hinweise zu den Browserbug-Beispielen in Kapitel Hinweise zum YAML-Framework, Kapitel4 und Hinweise zum TYP03-Template Hinweise zur Weiterentwicklung und zur Buch-DVD 46

2 2.9 2 Der Weg zu robusten und flexiblen Layouts Der Weg ist das Ziel Strukturiertes Arbeiten mit CSS Einbinden der Stylesheets Medienspezifische Stildefinitionen Mehr Ordnung durch funktionale Gliederung Kaskade und Spezifitat Die vier Stufen der Kaskade Die Spezifitat eines Selektors CSSDOC- Ein Weg zu gut kommentierten Stylesheets Ansatz for den CSSDOC-Standard Grundlagen Obersicht der am haufigsten verwendeten Tags Reset CSS Eric Meyers Reset CSS Ein alternatives Reset CSS Fazit Das Box-Modell Das Box-Modell des Internet Explorers Der Box-Modell-Hack Anwendungsgrenzen des Box-Modell Hacks Einschrankungen des Box-Modells Das Kombinationsmodell fur flexible Breiten Die Problemstellung: Mischung von Einheiten Die t.osung: Verschachtelte Container Was andert sich mit CSS Die Elementtypen in CSS Elementtypen und ihre Eigenschaften Die CSS-Eigenschaft display Langen- und Gro~enangaben Absolute Einheiten Relative Einheiten Relative und absolute Bezuge in CSS Prozentwerte Die CSS-Eigenschaft position position:static position:relative position:absolute position:fixed position:relative + position:absolute Zwei Spalten mit absoluter Positionierung 92 6

3 Zwei Spalten mit Fu~zeile Drei Spalten mit Kopf- und Fu~zeile - ein Meilenstein Die CSS-Eigenschaft float Grundlagen im Umgangmitfloats Zwei Spalten mit Footer Drei Spalten mit Footer Globale und lokale Wirkung der Eigenschaft clear Markup-freies Clearing von floats Die Clearfix-Methode Die Overflow-Methode Clearing mittels eines zusatzlichen floats Clearing mit display:table Flexible Layouts mit floats Beeinflussung der Spaltenreihenfolge Gleichlange Spalten Strukuru nabhanglge Layoutgestaltu ng Grid Layouts - ein Gestaltungskonzept Aligemeines Flexible Grids statt fixer Breiten Fazit Gestaltung von Inhaltselementen Schriftgestaltung mit relativen Einheiten Basisschriftgrobe und Skalierung Umrechnungstabelle fur relative Schriftgrofsen Menugestaltung mit Navigationslisten Vertikale Listennavigation Horizontale Listennavigation Abseits des Standards - Umgang mit Parsing- und CSS-Bugs Browserunterstutzung fur CSS 2.x Internet Explorer und die Eigenschaften min-heightlmax-height und min-width/max-width Internet Explorer und die Pseudo-Elemente :before und :after Browserweichen,.'" Trickreiche Kommentare fur den Internet Explorer/Mac Conditional Comments Parser-Bugs des Internet Explorers. 151

4 tern-5elektor Escape-Zeichen Der Child-5elektor Gezielte Zugriffe auf aile Internet-Explorer-Versionen Anwendungsbeispiel: Browsertest haslayout - das interne Layoutkonzept des Internet Explorers Arger programmiert Grundlagen fur die Vergabe von haslayout C55-Bugs des Internet Explorers Internet Explorer - Float-Modell-Bug Internet Explorer/Win - Guillotine-Bug Internet-Explorer - Peekaboo-Bug IE/Win - Unscrollable-Content-Bug Internet-Explorer - Doubled-Float-Margin-Bug IEIWin - Escaping-Floats-Bug IE/Win - 3-Pixel-Jog-Bug IE/Win -Italics-Bug Internet Explorer - Expanding-Box-Problem IE/Win - Disappearing-List-Background-Bug Internet Explorer - Extreme-Font-5ize-Bug IE-Float-Clearing-Bug Internet Explorer 7 - overflow:auto im Print-Layout C55-Bugs in Mozilla, Opera und Co Firefox 2.x - overflow:hidden I auto im Print-Layout Mozilla und Firefox - Clearing-Bug Netscape 7: Probleme mit overflow:hidden Opera - Prozentrechnung nur mit ganzen Zahlen Opera - Weitere C55-Bugs Was bedeutet der Internet Explorer 7 fur Webentwickler? Neue Funktionen fur den Nutzer eitenzoom des Internet Explorers Anderungen in der Rendering Engine Das YAML-Framework.: : Voruberlegungen Gestaltung kontra Bugfixing L6sungen fur 5tandardaufgaben Wiederverwendbare Bausteine Freiheit und Kontrolle Die wichtigsten Features 199

5 4.3 Das Framework im Detail Der Aufbau des Download-Pakets Das XHTML-Grundgerust Die Struktur des Quelltextes Die Reihenfolge der Spalten Das Clearing von #col Grafikfreie Spaltentrennlinien und Spaltenhintergrunde im Basislayout Einbindung der CSS-Bausteine in den Skip-link-Navigation Die CSS-Bausteine Das Konzept Baustein-Klassen und Namenskonventionen. 221 XHTML-Quelltext Das zentrale Stylesheet Das Basis-Stylesheet base.css CSS-Anpassungen fur den Internet Explorer Die Erstellung des Screen-Layouts Navigationselemente Gestaltung der Inhalte Die Erstellung eines Drucklayouts Layouterweiterung: Subtemplates Struktureller Aufbau von Subtemplates Alternatives Layoutkonzept mit Subtemplates layoutentwicklung mit YAMl Konzepte der Layoutentwicklung Das Bottom-Up-Prinzip im Webdesign Das Top-Down-Prinzip des YAML-Frameworks Vom Rohbau zum fertigen Layout Empfohlene Projektstruktur Das Basislayout Festlegung einiger Bezeichnungen Vorgaben fur das Layout 3col_standard Erstellung des Screen-Layouts Gestaltung der Hauptnavigation Gestaltung der Inhalte Einbinden einer Druckvorlage Anpassungen fur den Internet Explorer Grundvariationen des Basislayouts Layoutvariationen mit drei Spalten.. 298

6 5.3.2 Layoutvariationen mit zwei Spalten Freie Verwendung der Content-Spalten Freie Spaltenanordnung Spalten in beliebiger Reihenfolge Spaltenanordnungen und Spaltenanordnungen und Spaltenanordnung und (neue Vorgehensweise) Spaltenanordnung und (alte Vorgehensweise) Das Feintuning des Layouts Festlegung der Layoutbreite Zentrierung des Layouts Festlegen der Spaltenbreiten Hinweise fur robuste und flexible Layouts Grafikfreie Gestaltung der Spalten Faux-Columns-Teehnik Grafisehe Umrandungen flexibler Layouts Ausgewahlte Beispiellayouts Layoutentwurf 2eoL/eft_seo Layoutentwurf 3eoUixed_seo Layoutentwieklung mit Subtemplates Layoutentwurf»flexible Grids« Aufbereiten der Inhalte Markup-freies float-clearing in Spalte #eol Beispiele zum Clearing mit.floatbox Optimierungen fur den Praxiseinsatz Anpassen des Quelltextes Optimieren der Stylesheets Was tun, wenn's klemmt? Valider Code Prufen von pfadangaben Kaskaden- und Spezlfttatskonflikte in den Stildefinitionen CSS-UnterstUtzung und Browser-Bugs Einbinden von YAML in ein Content-Management-System Tipps und Tricks Debugging-Stylesheet Kontrollautomatik fur iehaeks.ess Pixelraster fur Positions- und Geometriekontrolle

7 Inhalt Hervorheben von Elementen Bearbeitungshilfen fur Dreamweaver Dreamweaver MX 2004 (V7.0) Dreamweaver JavaScript-Hilfen Dynamisch generierte Blindtexte UnterstLitzung fur min-width/max-width im Internet Explorer Praktische Tipps zum Grafikeinsatz kalierbare Bilder mit ( Image-Replacement-Techniken Tipps fur Browsertests Mozilla und Firefox Netscape und Opera Internet Explorer Browsertests unter Windows Vista Tools zur Webseitenentwicklung Web Developer Extension Firebug - Das Ailround-Tool zur Webentwicklung Web Accessibility Toolbar und Developer Toolbar fur den Internet Explorer Web Developer Toolbar fur Opera 8 und Die Firefox-Erweiterung HTML-Validator creenshot-Generatoren Integration von YAML in Templavoila Begriffsbestimmungen Alles ist Template Von der HTML-Vorlage zur Datenstruktur Erzeugen der Datenstruktur (Mapping) Mapping der Header-Teile Template-Objekte Icons fur die Datenstruktur und das Ternplate-Objekt TypoScript-Bibliotheken config-array temp.buildheaderdata page-objekt lib.header lib.nav lib.teaser Iib.selectorBox

8 7.4.8 lib.submenu IibJooter Anderungen an css_styled_content Image Replacement TypoScript anpassen TypoScript Object Browser (TSOB) Elemente verandern Constant Editor YAML-Beispiele Mehrsprachigkeit Template einsprachig machen Eine Sprache aus dem Template entfernen Reihenfolge der Flaggen andern Zusatzliche Sprachen hinzufugen Asiatische, arabische und hebraische Sprachen Flexible Content-Elemente (FCE) FCEs und Mehrsprachigkeit Weitere Tips zur Verwendung von FCEs YAML und xt:commerce : Template-ErstelJung fur xt:commerce - etwas Theorie Die Template Engine Smarty Arbeiten mit Smarty Struktur von xt:commerce Templates Integration von YAML Smarty-Variablen in der Datei index.html xt:commerce-templates mit YAML erstellen Installation Bestandteile des Screenlayouts Layout anpassen Shop mit 2-Spalten-Layout Verwendung von Subtemplates im xt:commerce-template 425 Anhang.. ~ ; 439 A Inhalt der DVD-ROM 441 B Die Referenzkarte 443 Index 445