Share
Lesezeichen setzen
CSS pur!
Ultimative Weblösungen mit Stil
Notizen
Melde dich an um eine Notiz hinzuzufügen
- CSS PUR! - Ultimative Weblösungen mit Stil
- + Inhaltsverzeichnis
-
+
1 Grundlegendes
-
+
2 CSS-Basics
- + XHTML-Seitenstruktur
- Struktureller Aufbau Prototyp 1
- + CSS-Maßeinheiten
- + Sprachausgabesteuerung
- + CSS einbinden
- + CSS-Begriffe
- + Selektoren & „Pseudos“
- + Kaskade & Vererbung
- + Block-Elemente – Inline-Elemente
- + Box-Modell
- + Browser-Weichen & Hacks
- + Normalisierung
- + Positionierung in CSS
- + Seitenlayouts
- + CSS-Datei-Aufbau
-
+
3 Prototypen
-
+
Prototyp 1 - Visitenkarten-Website
-
+
Das XHMTL-Grundgerüst
- Und so sieht es bis jetzt im Browser aus:
- Anlegen der CSS-Dateien & Normalisieren
- Seitenbreite fixieren und Seite zentrieren
- Gestaltung des Hintergrunds
- + Das Styling des Branding-Bereichs #branding
- + Zweispaltiges Layout mit float
- + Das Styling der Navigation #navi
- Spezialeffekt: Hilfetext bei Akronymen
- Galerie: Bild&Text-Kombination in
- Überschrift <h3> verstecken
- Überschrift <h4> einrücken
- Text neben Bild
- + Das Design des Textes
- + Feindesign
- + Das Design der Seiteninformation #site_info
-
+
Das XHMTL-Grundgerüst
-
+
Prototyp 2 - Die Business-Website
- + Generelles zum Design von Business-Websites
- + Das XHTML-Grundgerüst - Die Umsetzung im Detail
- + Der Branding-Bereich
- + Der Haupt-Navigationsblock
- Die sekundäre Navigationsleiste
- + Der Content-Bereich: Inhalte einfügen
- + Der sekundäre Inhalts- und Teasing-Bereich
- + Der Fußbereich
- + Der vollständige HTML-Code
- + Überprüfung und Validierung
- + CSS: Die komplette Umsetzung
-
+
CSS: Layout & Positionierung
- Den Hauptcontainer #main zentrieren
- + Die Hauptnavigation #navigation positionieren
- Stapeln von Ebenen (Z-Index-Stacks)
- 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 Seitenbereiche 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
- Externe/interne Links unterschiedlich kennzeichnen
- + Wie funktioniert NiftyCorners?
- Der gesamte CSS-Code im Überblick
-
+
Prototyp 3 - Das Web-Portal
- Inhalte des Portals im Überblick
-
+
Das XHTML-Grundgerüst - Die Umsetzung im Detail
- Die größte Herausforderung ...
- Die Einteilung der Haupt-div-Container
- Die drei Hauptcontainer
- + Der Header #header
- Teaser-Bild
-
+
Der Hauptcontainer #main
- Inhaltsbereich
- Die Zimmersuche #room-search mit form und table
- Der Infobereich #info
- Der Hauptinhaltsbereich #content
- Unterstützender Inhalt: Zitate, Hotels in der Nähe, Kleine Info (.supp)
- Der zentrale Inhalt #property-general: Beschreibung, Galerie und Adresse
- Der Adressenblock mit dem Mikroformat hCard
- Die Fußzeile #footer
- HTML-Code im Überblick
- Und so sollte die Seite nun in Ihrem Browser aussehen:
- + Positionierung & Layout
-
+
CSS: Styling & Design
- Die Highlights dieser Phase
- + Allgemeine Formatierungen
- Der Logo-Bereich #logo
- Allgemeines Styling für Überschriften und Listen
- Die Gästenavigation #guest-login
- + Der Inhaltsbereich #main
- + Hauptinhalte #content und unterstützende Inhalte .supp
- Gestaltung der Bilderpräsentation
- Horizontale Navigation mit Zusatztexten gestalten (im #footer-div)
- Finalisierung
- Validierung
- Der komplette CSS-Code im Überblick
-
+
YAML
-
+
Prototyp 1 - Visitenkarten-Website
-
+
Anhang
- + Index
- Copyright
- Referenzkarte
In der professionellen Gestaltung von Websites kommt niemand mehr um Cascading Style Sheets herum. Erst mit dem Einsatz von CSS ist eine Trennung von Layout und Design möglich. Die Vorteile liegen auf der Hand: Suchmaschinenoptimierung, rasche Umsetzung von Designänderungen, Umsetzung von Templates für Content Management Systeme und Barrierefreiheit. Das Buch CSS in der Praxis gibt einen umfassenden Überblick in die umfangreiche Welt der Cascading Style Sheets. Zu Beginn erhalten Sie fundiertes Wissen zu CSS, Sie lernen die Grundlagen auf einem lösungsorientierten Anwender-Level, perfekt erklärt für Einsteiger und Fortgeschrittene! Dieses Wissen hilft Ihnen den weiteren großen Praxis-Teil des Buchs noch besser zu verstehen. Anhand von drei kompletten Websites sehen Sie wie Sie CSS problemlos einsetzen um unterschiedliche Designwünsche zu realisieren. Jedes dieser Designs hat einen anderen Grundaufbau und andere Lösungen bei der Umsetzung, die verständlich erklärt werden. Viele der CSS-Elemente lassen sich untereinander kombinieren sodass sich unzählige Möglichkeiten und Wege zur Umsetzung von Websites eröffnen!
Teste die Closed Alpha von paperc.com
Book Details
Autoren
Bettina K. Lechner und Bernhard Stockmann
Reihe
DPI Grafik
Kategorien
Computer & Internet > Web 2.0 > Allgemein
Verlage
Erscheinungsjahr : 2009
Lizenz: Alle Rechte vorbehalten ©
Gelesen: 14.288 mal
