Dirk Jesse. CSS-Layouts. Praxislösungen mityaml. Galileo Press

Transkript

1 Dirk Jesse CSS-Layouts Praxislösungen mityaml Galileo Press

2 Geleitwort des Fachgutachters 15 Vorwort 17 Was erwartet Sie in diesem Buch? 17 Softlinks 18 Ein großes Dankeschön 18 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 Die Welt der Browser Internet Explorer 5.x und Internet Explorer 5/Mac Internet Explorer Die Mozilla-Familie: Firefox und Netscape & Co Opera Safari und Konqueror Textbasierte Webbrowser Screenreader (X)HTML und Doctype Darstellungsmodi Semantischer Code Browserweichen Trickreiche Kommentare für den IE/Mac Conditional Comments Parser-Bugs des Internet Explorers Stern-Selektor Escape-Zeichen Der Kind-Selektor Gezielte Zugriffe auf alle Internet Explorer Versionen... 43

3 1.7 Die Arbeit mit dem Buch Die Verwendung des Pixelrasters Aufbau der Codebeispiele Hinweise zu den Browserbug-Beispielen in Kapitel Hinweise zum YAML-Framework Hinweise zum TYPO3-Template 49 2 Der Weg zu robusten, flexiblen Layouts Der Weg ist das Ziel Strukturiertes Arbeiten mit CSS Einbindung der Stylesheets Medienspezifische Stil-Definitionen Mehr Ordnung durch funktionale Gliederung Kaskade und Spezifität Die vier Stufen der Kaskade Die Spezifität eines Selektors Browserunterstützung für CSS 2.x IE und die Eigenschaften min-/max-height und min-/max-width IE und die Pseudo-Elemente :before und :after Das Box-Modell Das Box-Modell des Internet Explorers Der Box-Modell-Hack Anwendungsgrenzen des Box-Modell Hacks Limitierungen des Box-Modells Das Kombinationsmodell für flexible Breiten Die Problemstellung: Mischung von Einheiten Die Lösung: Verschachtelte Container Was ändert sich mit CSS3? Die Elementtypen in CSS Elementtypen und ihre Eigenschaften Die CSS-Eigenschaft display Längen- und Größenangaben Absolute Einheiten Relative Einheiten Relative und Absolute Bezüge in CSS Prozentwerte [%] Die CSS-Eigenschaft position position:static position:relative 80

4 2.9.3 position:absolute position:fixed position:relative + position:absolute Zwei Spalten mit absoluter Positionierung Zwei Spalten mit Fußzeile Drei Spalten mit Kopf- und Fußzeile - ein Meilenstein Die CSS-Eigenschaft float Grundlagen im Umgang mit floats Zwei Spalten mit Footer Drei Spalten mit Footer Globale und lokale Wirkung der Eigenschaft clear Markupfreies Clearen von floats Die Clearfix-Methode Die Overflow-Methode Clearing mittels eines zusätzlichen Floats Flexible Layouts mitfloats Beeinflussung der Spaltenreihenfolge Gleichlange Spalten Strukturunabhängige Layoutgestaltung CSS-Bugs des Internet Explorers haslayout - das interne Layoutkonzept des Internet Explorers le/win-guillotine-bug le-peekaboo-bug le/win - Unscrollable-Content-Bug le-doubled-float-margin-bug le/win - Escaping-Floats-Bug IE/Win-3-Pixel-Jog-Bug le/win-ltalics-bug IE - Expanding Box Problem le/win - Disappearing-List-Background-Bug IE - Extreme-Font-Size-Bug le-float-clearing-bug Was bringt der Internet Explorer 7? Neuerungen der Rendering Engine CSS-Bugs im IE CSS-Bugs in Mozilla, Opera & Co Mozilla und Firefox - Clearing-Bug Netscape 7: Probleme mit overflow:hidden Opera-Bugs 141

5 2.16 Gestaltung von Grundelementen Schriftgestaltung mit relativen Einheiten Basisschriftgröße und Skalierung Umrechnungstabelle für relative Schriftgrößen Menügestaltung mit Navigationslisten Vertikale Listennavigation Horizontale Listennavigation 149 Das YAML-Framework Vorüberlegungen Gestaltung kontra Bugfixing Lösungen für Standardaufgaben Wieder verwendbare Bausteine Freiheit und Kontrolle Die wichtigsten Features 155 Flexibilität in der Layoutgestaltung 155 Robustheit im Code 155 Browserkompatibilität 155 Funktional gegliederte Stylesheets Der Aufbau des Frameworks Die Verzeichnisstruktur 157 Verzeichnis: artikel 157 Verzeichnis: css 157 Verzeichnis: css/explorer 157 Verzeichnis: css/main 158 Verzeichnis: css/modifications 158 Verzeichnis: css/navigation 159 Verzeichnis: css/print 159 Verzeichnis: Hilfsmittel 159 Verzeichnis: layout_storage Das XHTML-Grundgerüst Die Struktur des Quelltexts Die Reihenfolge der Spalten Das Clearing von #col3 166 Globales Clearing macht #col3 zur längsten Spalte 166 Eine spezielle Clearing-Lösung für den Internet Explorer 167 Anwendungsgrenzen für das le-clearings Grafikfreie Trennlinien und Spaltenhintergründe im Basis-Layout 172

6 3.4.5 Skip-Link Navigation 173 Skip-Link Navigation im Basis-Layout 173 Unsichtbar und barrierefrei Das CSS-Konzept Einbindung des Layouts in den Quelltext 177 Einbindung des zentralen Stylesheets 177 Einbindung der CSS-Anpassungen für den Internet Explorer Das zentrale Stylesheet Das Basis-Stylesheet base.css 179 Einheitliche Ausgangsbedingungen schaffen 179 Der Rohbau des Basis-Layouts 181 Standardvorgaben für Listen und Zitate 185 Weitere Bestandteile CSS-Anpassungen für den Internet Explorer 186 Einbindung der CSS-Anpassungen in das YAML-Layout 187 Layoutunabhängige Anpassungen im Detail 189 Layoutabhängige Anpassungen im Detail Die Erstellung des Screenlayouts 201 Die Funktion der basemod-stylesheets 201 Das Layoutkonzept von Navigationselemente 203 Horizontale Listen navigation»sliding Door«204 Horizontale Listennavigation»Shiny Buttons«209 Vertikale Listennavigation»vlist« Gestaltung der Inhalte 218 Auszeichnung externer Hyperlinks Die Erstellung eines Drucklayouts 220 Typographische Anpassungen 221 Anpassung des Layouts 221 Spalten für den Druck auswählen 222 Linearisierung der Spalten 222 Kennzeichnung der Spalten (optional) 223 Auszeichnung von Akronymen, Abkürzungen und externen Link-URLs Layouterweiterung: Subtemplates Struktureller Aufbau 226 Der Container.subcolumns 227 Die Raumaufteilung über DIV-Blöcke 228

7 Die Inhaltscontainer 229 CSS-Anpassungen für Subtemplates im Internet Explorer Alternatives Layoutkonzept mit Subtemplates Hilfsmittel Stylesheets für den Dreamweaver JavaScriptftod.js JavaScript minmax.js Layoutentwicklung mit YAML Konzepte der Layoutentwicklung Das Bottom-Up-Prinzip im Webdesign Das Top-Down-Prinzip des YAML-Frameworks Vom Rohbau zum fertigen Layout Einbau der Grundbausteine Einheitliche Bezeichnungen Vorgaben für das Layout»3col_vlines« Gestaltung der Hauptnavigation Erstellung des Screenlayouts Gestaltung der Inhalte Einbindung einer Druckvorlage Anpassungen für den Internet Explorer Grundvariationen des Basis-Layouts Layoutvariationen mit 3 Spalten Layoutvariationen mit 2 Spalten Freie Verwendung der Content-Spalten Freie Spaltenanordnung Spalten in beliebiger Reihenfolge Die Klassiker und Die natürliche Ordnung und Der Einfluss negativer margins und Das Feintuning des Layouts Festlegung der Layoutbreite Zentrierung des Layouts Festlegung der Spaltenbreiten Hinweise für robuste flexible Layouts Grafikfreie Spaltentrenner Faux Columns-Technik Grafische Umrandungen flexibler Layouts

8 4.6 Ausgewählte Beispiellayouts Layoutentwurf»2col_left_vlines« Layoutentwurf»2col_right_vlines« Weitere Kombinationen für 2-Spalten-Layouts Layoutentwurf»3col_fixed« Aufbereitung der Inhalte Markupfreies float-clearing in Spalte #col Beispiele zum Clearing mit.floatbox Layouten mit Subtemplates Layoutentwurf»Subtemplates #1« Optimierung für den Praxiseinsatz Anpassung des Quelltexts Optimierung der Stylesheets Was tun, wenn's klemmt? ValiderCode Prüfung von Pfadangaben Kaskaden- und Spezifitätskonflikte in den Stil-Definitionen CSS-Unterstützung und Browser-Bugs Einbindung von YAML in ein CMS Tipps BHMiflHBflMMflBHflflBHHBEHEHEH^H und Tricks Praktische Tipps zum Grafikeinsatz Skalierbare Bilder mit CSS Image Replacement Techniken Tipps für Browsertests Mozilla und Firefox Netscape und Opera Internet Explorer Tools zur Webseitenentwicklung Werkzeugleisten für Webentwickler Die Erweiterung HTML-Validator Die Erweiterung View formatted Source Screenshot-Generatoren 321 j 6 YAML und TYPO3 - die Theorie Begriffe Was isttyposcript? Die beiden Template-Varianten

9 6.3.1 Die importierbare t3d Datei Das Komplettpaket Von der HTML-Vorlage zum TYPO3-Template Arbeitsteilung Arbeitsablauf TYPO3 Extensions Notwendige Extensions Optionale Extensions (empfohlen) Der Extension-Manager Vorbereitungen Backend-Sprachen auswählen und Übersetzungen herunterladen Extensions installieren Fehlermeldungen beim Installieren von Extensions TYPO3 Templates Statische Templates Das statische Template css_styled_content Eine eigenes TYPO3-Template erstellen Die HTML-Vorlage Der Autoparser Das default PAGE-Objekt Das TEMPLATE cobject Inhalt des cobjects TEMPLATE auf die Seite kopieren Der Template Selector Das Haupt-Template Erweiterungs-Templates Der SysOrdner Template Storage Der Constant Editor TSconfig YAAAL und TYPO3 in der Praxis Eine neue Seite anlegen Seiteninhalt anlegen Der Rieh Text Editor (RTE) Die wichtigsten Bedienelemente Besonderheiten Bilder und Grafiken im RTE Das Inhaltselement»Text mit Bild« Arbeiten mit Benutzergruppen und Redakteuren Dateifreigabe einrichten

10 7.4.2 Benutzergruppen anlegen und Rechte definieren Backend Benutzer anlegen und Gruppenzugehörigkeit festlegen Zugriffsrechte für die Seiten setzen YAAAL und xt:commerce 8.1 Template-Erstellung mit xtcommerce - etwas Theorie Die Template Engine Smarty Verzeichnisstruktur Überlegungen zur Integration von YAML lnlinephp-codeinderdateiindex.html Praktische Überlegungen 398 Anhang A Inhalt der CD-ROM 403 B Die Referenzkarte 405 Index 407