i... zur Information Hinweise & typografische Konventionen ... Achtung, wichtiger Tipp! ... Vorschlag für eine Übung

Transkript

1

2 Hinweise & typografische Konventionen <Quellcode ist in dieser Schrift dargestellt. Grau dargestelltem Code brauchen Sie nicht so viel Aufmerksamkeit schenken, weil er entweder gerade nicht verändert oder in dem jeweiligen Abschnitt nicht besprochen wird. Wichtiger ist dieser farbige Teil. Rot eingefärbter Code zeigt ungültigen Code. /> i... zur Information... Achtung, wichtiger Tipp!... Vorschlag für eine Übung IE9-Script Einige der Hürden, die uns der Internet Explorer bei der Darstellung bereitet, umgehen wir mit einem Skript, welches auf Seite 97 (Browser-Weichen & Hacks) beschrieben ist. Code, der mithilfe dieses Skripts im IE dann also doch richtig dargestellt werden kann, erkennen Sie an diesem Symbol. Nur für IE! Code, den wir nur für den Internet Explorer schreiben, haben wir mit diesem Symbol gekennzeichnet.

3 CSS pur! - PDF CSS PUR! Einleitung Vorwort An wen richtet sich dieses Buch? Inhaltlicher Aufbau Browsersupport 1 GRUNDLEGENDES Das CSS-Konzept Was ist CSS? Welche CSS-Version verwenden wir? Wozu CSS? Welche Vorteile bringt die Layoutierung mit CSS? HTML, XHTML, XML was ist was? Semantisches XHTML & Mikroformate Tag-Wolke Accessibility & Usability Web für alle! Richtlinien & Levels Testen testen testen Usability Usability-Analysen & Tests Validierung Wie funktioniert es? Validierung CSS Fazit Referenzen & Ressourcen Wo nachsehen? Darstellung Medientypen Monitorauflösung Darstellung der Schriften Präsentation der Farben Vorbereitungen 1. Editoren 2. Ordnerstruktur 3. Virtuelle Testumgebung 4. Webdeveloper-Toolbar, Firebug 2 CSS-Basics

4 XHTML-Seitenstruktur Dokumenttyp-Deklaration (DTD) Struktur & Bezeichnung der Inhalte Struktureller Aufbau Prototyp 1 CSS-Maßeinheiten Grundlegendes Relative Maßeinheiten Absolute Maßeinheiten Sprachausgabesteuerung Screenreader CSS-Eigenschaften CSS einbinden Stylesheets Ursprung Autoren-Stylesheet/s einbinden 1. Externes Stylesheet 2. Internes Stylesheet 3. Direkter Eingriff ins XHTML mit dem style-attribut 4. Import CSS-Begriffe CSS-Schreibweise Selektoren & Pseudos Schreibweise & Tipps Die grundlegenden Selektoren im Detail Selektoren im Einsatz: Verschachtelungen, Kombinationen Die Pseudos : Pseudoklassen und Pseudoelemente Kaskade & Vererbung 1. Was ist die Kaskade nun genau? 2. Vererbung Dokumentstammbaum Block-Elemente Inline-Elemente Was ist was? Box-Modell Die Box und ihre Eigenschaften Die Box-Abmessungen Vertikale Außenabstände (margin-bottom, margin-top) Browser-Weichen & Hacks 1. Conditional Comments 2. Attributabhängige Browser-Weiche 3. Antiquierte Browser ausschließen 4. Hacks 5. Das IE7/IE8/IE9-Script

5 Normalisierung Und so funktioniert es Positionierung in CSS Alles fließt der Dokumentfluss Welche CSS-Attribute spielen bei der Positionierung eine Rolle? Positionierung mittels Positionieren mittels float Seitenlayouts Vorbereitung 1. Einspaltiges Layout mit fixer bzw. variabler Breite 2. Zweispaltiges Layout mit variabler bzw. fixer Breite Webseite horizontal zentrieren CSS-Datei-Aufbau Mehrere CSS-Dateien Inhaltliche Struktur 3 Prototypen Prototyp 1 CSS-Features Visitenkarten-Website Ziele einer Visitenkarten -Website Das XHMTL-Grundgerüst Branding Navi Content_main Site_info Anlegen der CSS-Dateien & Normalisieren Seitenbreite fixieren und Seite zentrieren Gestaltung des Hintergrunds Das Styling des Branding-Bereichs #branding Zweispaltiges Layout mit Das Styling der Navigation #navi Spezialeffekt: Hilfetext bei Akronymen Text & Typografie im Web Galerie: Bild&Text-Kombination in Vorher Nachher Das Design des Textes Feindesign Das Design der Seiteninformation #site_info Prototyp 2 CSS-Features Die Business-Website Typische Ziele für Business-Websites

6 Generelles zum Design von Business-Websites Einheitlichkeit Gute Fotos fürs Business Text & Schrift Überfordern Sie die Benutzer nicht... Farbgebung Visualisierung des Aufbaus Einteilung der div-container Benennung der Container Auszeichnungen der Inhalte Die Umsetzung im Detail Das XHTML-Grundgerüst Der Aufbau des XHTML die (semantische) Basis Strukturierung des Inhalts Der Branding-Bereich Der HTML-Code für den Kopfbereich blockquote und cite Der Haupt-Navigationsblock Der Aufbau des grafischen Menüs Flexibilität erhöhen oder warum man dieses Teaser-Bild nicht ins CSS packen muss (aber kann)! Die sekundäre Navigationsleiste Der Content-Bereich: Inhalte einfügen HTML für den Fließtext erstellen Lorem Ipsum-Text besorgen Der sekundäre Inhalts- und TeasingBereich Der unterstützende Inhaltsbereich Den Teaser und weitere Info-Blöcke erstellen Überschriftenrelevanz mit der Webdeveloper-Toolbar zeigen Special: Wann verwende ich welchen Überschrift-<tag>? Der Fußbereich Die Fußzeile Rechtliches zum Impressum Der vollständige HTML-Code Übersicht Der derzeitige Stand der Website im Browser Überprüfung und Validierung Fehler? Kein Problem! CSS: Die komplette Umsetzung Die grundlegende Vorgangsweise Gedanken hinter dem Design So nun aber genug der Worte legen Sie los! CSS: Layout & Positionierung Den Hauptcontainer #main zentrieren Die Hauptnavigation #navigation positionieren Stapeln von Ebenen (Z-Index-Stacks)

7 Die zweite Navigation #nav2 positionieren und ausrichten Der Content-Bereich #content Der Bereich #content_supp für Teaserboxen Aufräumen von Floats mit dem overflow-trick Die Fußzeile #footer Das komplette CSS bis dato im Überblick CSS: Styling & Design Die 10 Highlights dieser Phase Allgemeine Formatierungen Das Branding #branding gestalten Unterschiedliche Link-Farben für verschiedene Seiten bereiche definieren Die Hauptnavigation #main_nav gestalten Listen mit rechtsbündigen, wechselnden Aufzählungs zeichen CSS-Hintergrund verwenden Den Slogan stylen Der Content-Bereich #content_main Der sekundäre Inhaltsbereich #content_supp Ein kleiner Ausflug ins CSS-Boxmodell Special: Zeichen, Text und andere Inhalte mittels CSS einfügen Externe/interne Links unterschiedlich kennzeichnen Wie funktioniert NiftyCorners? Der gesamte CSS-Code im Überblick Prototyp 3 CSS-Features der Portal-Website Das Web-Portal Typische Ziele für Portale Inhalte des Portals im Überblick Der visualisierte Seitenaufbau Die Umsetzung im Detail Das XHTML-Grundgerüst Die drei Hauptcontainer Der Header #header Teaser-Bild Der Hauptcontainer HTML-Tabellen: Formulare: HTML-Code im Überblick Und so sollte die Seite nun in Ihrem Browser aussehen: Positionierung & Layout Vorbereitungen Ziele unseres Layouts Die solide Grundlage: das Basislayout Normalisierung und die Kontrolle der Seitenbreite Positionierung der Header-Elemente #header Der Hauptbereich #main Der CSS-Code für Positionierung und Layout im Überblick

8 CSS: Styling & Design Die Highlights dieser Phase Verwendete Grafiken dieser Website: Allgemeine Formatierungen Der Logo-Bereich #logo Allgemeines Styling für Überschriften und Listen Die Gästenavigation #guest-login Der aktuelle Stand was ist bis jetzt passiert? Der Inhaltsbereich #main Hauptinhalte #content und unterstützende Inhalte.supp Gestaltung der Bilderpräsentation Horizontale Navigation mit Zusatztexten gestalten (im #footer-div) Special: Cursor ändern Finalisierung Validierung Der komplette CSS-Code im Überblick YAML Layouts mit dem YAML-Builder So funktioniert das YAML-Builder-Interface Eine Website mit dem YAML-Builder erstellen 4 Anhang Visionen und Ausblicke Das Jetzt und die Zukunft Blockaden Der Browser als neues Betriebssystem Neue Standards und Visionen HTML 5.0 und XHTML 2 Die Webdesign-Revolution mit CSS3 Neue Browser CSS3 die neuen Features Was ist CSS3? CSS3 die neuen Features Was funktioniert schon? Schatten für Boxen Farbverläufe Abgerundete Ecken Transformationen Animierte Übergänge Mehrere Hintergrundbilder pro Element Berechnete Werte Spalten Korrekturen Allgemeines

9 Prototyp 2 Prototyp 3 Link-Liste Index Ins Internet: Weitere Infos zum Buch, Downloads, etc. Copyright

10 Copyright Daten, Texte, Design und Grafiken dieses ebooks, sowie die eventuell angebotenen ebook-zusatzdaten sind urheberrechtlich geschützt. Dieses ebook stellen wir lediglich als persönliche Einzelplatz-Lizenz zur Verfügung! Jede andere Verwendung dieses ebooks oder zugehöriger Materialien und Informationen, einschließlich der Reproduktion, der Weitergabe, des Weitervertriebs, der Platzierung im Internet, in Intranets, in Extranets, der Veränderung, des Weiterverkaufs und der Veröffentlichung bedarf der schriftlichen Genehmigung des Verlags. Insbesondere ist die Entfernung oder Änderung des vom Verlag vergebenen Passwortschutzes ausdrücklich untersagt! Bei Fragen zu diesem Thema wenden Sie sich bitte an: Zusatzdaten Möglicherweise liegt dem gedruckten Buch eine CD-ROM mit Zusatzdaten bei. Die Zurverfügungstellung dieser Daten auf unseren Websites ist eine freiwillige Leistung des Verlags. Der Rechtsweg ist ausgeschlossen. Hinweis Dieses und viele weitere ebooks können Sie rund um die Uhr und legal auf unserer Website herunterladen: