Inhalt. Vorwort 13. Teil I CSS kennenlernen: Einstieg in XHTML und CSS

Transkript

1 Inhalt Vorwort 13 Teil I CSS kennenlernen: Einstieg in XHTML und CSS 1 Auf die Plätze Wozu CSS lernen? Wem nützt dieses Buch? Wie funktioniert dieses Buch? 19 2 Was Sie wissen sollten Was sind Webstandards? Was ist das W3C? Was ist eine Webseite? Was ist HTML? WasistXHTML? WasistCSS? Was bedeutet Browserkompatibilität? Was versteht man unter Usability? Wie sorgt man für Accessibility? Wozu tabellenfreies Design? 31 3 Was Sie können sollten HTML-Grundlagen Upload von Dateien - FTP Grundkenntnisse in Englisch 35 4 Was Sie verwenden sollten Editoren Browser-Erweiterungen Foren 40 5 Was Sie verstehen sollten Der Aufbau einer XHTML-Datei 42

2 5.2 Die wichtigsten Regeln für XHTML HTML-Elemente Schreibweisen in (X)HTML Der Aufbau einer CSS-Datei Die wichtigsten Regeln für CSS CSS-Selektoren Schreibweisen in CSS Verkürzte Schreibweise von Eigenschaften XHTML und CSS miteinander verbinden 56 Teil II CSS verstehen: Eine Webseite mit XHTML und CSS erstellen 6 Der erste Entwurf Die XHTML-Datei-Struktur und Inhalt der Webseite Die CSS-Datei - Formen und Farben der Webseite Browsercheck-ganz schnell Lorem ipsum - provisorischer Inhalt 75 7 Die drei Säulen von CSS: 1. Die Selektoren Der Universal-Selektor Typ-Selektoren (Element-Typ-Selektoren, auch HTML- Selektoren) ID-Selektoren Klassen-Selektoren Pseudoklassen Pseudoelemente Attribut-Selektoren Kombinatoren Gruppieren von Deklarationen Gruppieren von Selektoren Klassennamen und ID-Namen Spanitis, Divitis, Klassitis - gefürchtete Seuchen 90 8 Die drei Säulen von CSS: 2. Das Boxmodell Block-Element versus Inline-Element 95

3 8.2 Das IE 5-Boxmodell display- Element-Anzeige ändern Die drei Säulen von CSS: 3. Positionierung position: static; Normal Flow top, right, bottom, left position: relative; position: absolute; position: fixed; z-index float und clear clear Die Grundeinstellungen Browser-Stylesheets ganz einfach anpassen Scrollbalken erzwingen Bereiche einteilen und floaten Seite zentrieren in drei Schritten Die Navigation Navigation horizontal Menü vertikal fönt-schriften benutzerfreundlich voreinstellen background - Farben und Bilder als Hintergrund Mehr Design mit CSS Bilder einsetzen und gestalten Inhalte strukturieren und formatieren fönt, text, paragraph - Schriften und Text anchor-links im Text gestalten h1 bis h6-noch mehr Design für Überschriften strong, em - fett und betont span-das Inline-Pendant zu div 165

4 14.6 ol und li - nummerierte Listen blockquote, cite - Textkästchen mit Quelle definition, sample - Zitat, Definition, Beispiel dl - noch mehr Listen horizontal rule - horizontale Linie Tabellen für Zahlen und Daten Formulare formschön gestalten CSS und Medien: Ein Stylesheet für den Druck Verknüpfung von Media-Stylesheets Stylesheets für Medientypen Checkliste für Druck-Stylesheets Kaskade, Spezifität und Vererbung - die lieben Verwandten Kaskade - wer kommt zuerst? Spezifität - wer gewinnt? Vererbung-und wer erbt was? 210 Teil III CSS anwenden: Seitenvorlagen für jeden Bedarf 19 Grundsätzliche Überlegungen Usability-seien Sie freundlich zu Ihren Besuchern! Schriften unter der Lupe? Fix oder Flex? Design - die Kunst liegt im Weglassen! Eine Basisvorlage für alle Fälle Der Basis-HTML-Code häppchenweise Der Basis-CSS-Code häppchenweise Variante mit flexibler Breite Vorlage #1: Eine Spalte Variante mit fixer Breite 236

5 21.2 Designvorschläge Variante mit flexibler Breite Anwendungsbeispiele für einspaltige Layouts Navigieren mit Tabs Einfache Tab-Leiste mit Rollover-Effekt Einfache Tab-Leiste mit Verlauf und Rollover Tab-Leiste mit Pfeil für Rollover Anwendungsbeispiele für Tab-Navigation Vorlage #2: Zwei Spalten Menü rechts Menü links Ein einfacher Style-Switcher Variante mit Navigation Variante Menüpunkte Variante mit Hintergrundbildern Anwendungsbeispiele für ein 2-Spalten-Layout Vorlage #3: Drei Spalten mit Textboxen Varianten für Textboxen Variante mit drei Spalten, alle fluid Variante mit schmalen Spalten rechts Anwendungsbeispiele für 3-Spalten-Layouts Vorlage #4: Vier Spalten Variante mit drei Spalten rechts fix, Textspalte links fluid Anwendungsbeispiele für 4-Spalten-Layouts Vorlage #5: Drei Spalten mit Galerie Vorlage #6: Frames oben und links Varianten für das Design 309

6 28 Vorlage #7: Formular in Spalten Modul 1: Namen und Adresse - Radio-Buttons und Textfelder Modul 2: Gemischte Daten - Radio-Buttons und Checkboxen Modul 3: Nachrichtenfeld und Senden - Textarea und Submit-Button Elemente zentrieren Elemente horizontal zentrieren Elemente vertikal zentrieren CSS-Code optimieren Vor der Erstellung von Stylesheets Nach dem Anlegen Ihres Projektes Tools zur Optimierung von CSS-Code CSS-Code validieren und Fehlersuche W3C-Validatoren Firefox-Erweiterung Web Developer Web Development Bookmarklets Browserkompatibilität testen Was tun gegen Browserbugs? Hacks, Workarounds, Filter-die Begriffe Das Problem mit Hacks und dergleichen Grundsätzliche Überlegungen Vorgehen bei einem vermeintlichen Bug Conditional Comments Der Star-Selektor-Hack 372

7 Teil IV CSS nachschlagen: Kurzreferenz und praktische Tipps 34 CSS-Eigenschaften A-Z CSS: Maßeinheiten und Werte Schlüsselbegriffe Längenangaben Farben Nützliche Checklisten Checkliste für die Webproduktion Checkliste der»beliebtesten«fehler in (X)HTML Checkliste der»beliebtesten«fehler in CSS Meine liebsten Tools CSS-Frameworks und YAML Was sind CSS-Frameworks? WasistYAML? Andere CSS-Frameworks Vor-und Nachteile von CSS-Frameworks Die wichtigsten»pros und Contras« CSS-Frameworks-ganz persönlich betrachtet 428 Inhalt der DVD-ROM 431 Index 435