CSS in der Praxis
In 9 Stunden CSS verstehen und beherrschen lernen - mit vielen Praxislösungen für Design und Layout
1st Edition
Published on 28. May 2011
Software
DVD-ROM
978-3-8362-1723-1 (ISBN)
Description
Wer sich heutzutage ernsthaft mit Webdesign beschäftigt, braucht solide CSS-Kenntnisse. Das Training des beliebten Trainers Bernhard Stockmann ist geeignet sowohl für Einsteiger wie auch für Fortgeschrittene und vermittelt zunächst leicht verständlich alle Grundlagen zu CSS, wie die Trennung von Form und Inhalt, das Zusammenspiel von HTML und CSS, Wissenswertes zu Typografie und Design oder das Prinzip der Kaskadierung. In den weiteren Kapiteln wird das Wissen konkret in praxisnahen Projekten eingesetzt und vertieft. Sie erhalten zahlreiche Lösungen für einfache und komplexe Websites, Tipps zur Gestaltung für mobile Endgeräte wie etwa iPhone oder iPad, den Einsatz von Effekt-Bibliotheken. Schließlich gewährt Ihnen Bernhard Stockmann noch einen Blick in die zukünftigen Möglichkeiten des Webdesigns mit dem neuen Standards CSS 3.
Aus dem Inhalt:
* CSS-Grundlagen richtig verstehen
* Komplette Websites von A bis Z aufbauen
* iPad, iPhone, Handy - CSS für Mobilgeräte
* Die richtige Navigationslösung auswählen
* Mehrspaltige Layouts leicht gemacht
* Benutzerfreundliche Web-Formulare
* Websites barrierefrei gestalten
* Dynamische Effekte mit Mootools
* CSS3 - Die Zukunft beginnt jetzt
Das Training hat eine Gesamtspielzeit von 11 Stunden.
Dieses Video-Training ist lauffähig ohne Installation auf folgenden Systemen:
- Windows
- Mac
- Linux
Für das Betrachten der Videos empfehlen wir eine Monitorauflösung von mindestens 1024 x 768 Pixel. Das Training wird auf einer DVD ausgeliefert, alternativ stellen wir es Ihnen auch gern zum Download bereit. Für weitere Informationen helfen wir Ihnen gerne weiter unter videotraining@galileo-press.de oder 01802.768921 (werktags 10-17 Uhr, zum Ortstarif).
Aus dem Inhalt:
* CSS-Grundlagen richtig verstehen
* Komplette Websites von A bis Z aufbauen
* iPad, iPhone, Handy - CSS für Mobilgeräte
* Die richtige Navigationslösung auswählen
* Mehrspaltige Layouts leicht gemacht
* Benutzerfreundliche Web-Formulare
* Websites barrierefrei gestalten
* Dynamische Effekte mit Mootools
* CSS3 - Die Zukunft beginnt jetzt
Das Training hat eine Gesamtspielzeit von 11 Stunden.
Dieses Video-Training ist lauffähig ohne Installation auf folgenden Systemen:
- Windows
- Mac
- Linux
Für das Betrachten der Videos empfehlen wir eine Monitorauflösung von mindestens 1024 x 768 Pixel. Das Training wird auf einer DVD ausgeliefert, alternativ stellen wir es Ihnen auch gern zum Download bereit. Für weitere Informationen helfen wir Ihnen gerne weiter unter videotraining@galileo-press.de oder 01802.768921 (werktags 10-17 Uhr, zum Ortstarif).
Reviews / Votes
»Sie lernen jede Menge über CSS - und das ziemlich gut. Bernhard Stockmann erläutert die Technologien und zeigt das Ergbenis dann direkt im Browser. Es eignet sich für Einsteiger und Fortgeschrittene. «More details
Person
Bernhard Stockmann hat sich in Workshops als Trainer für Photoshop und GIMP sowie mit dem Titel »Webseiten erstellen für Anfänger« verdient gemacht. Er ist Betreiber des GIMP Community-Portals »gimpusers.de«, wo er einige kreative Tutorials veröffentlicht hat, in denen er die Möglichkeiten von GIMP eindrucksvoll unter Beweis stellt. Des Weiteren bietet er in seiner Firma »bitfire it services« Lösungen in den Bereichen Webdesign, Webmarketing und Webprogrammierung an. Als Trainer ist er bei Kunden beliebt für seine Art, gründlich und besonders verständlich zu erklären.
Content
1. CSS-Grundlagen verstehen und anwenden [01:10 Std.]
. 1.1. Einleitung [00:22 Min.]
. 1.2. Die Trennung von Inhalt und Design [04:38 Min.]
. 1.3. Die Arbeitsumgebung einrichten [09:02 Min.]
. 1.4. Wichtige HTML-Grundlagen [09:12 Min.]
. 1.5. Die Verbindung zwischen HTML und CSS [07:04 Min.]
. 1.6. Selektoren - A und O der Stylesheets [09:18 Min.]
. 1.7. Kaskadierung und Vererbung verstehen [14:46 Min.]
. 1.8. Kind- und Nachbar-Selektoren einsetzen [07:57 Min.]
. 1.9. Die Pseudoklassen nutzen [04:01 Min.]
. 1.10. CSS in CSS einbetten [03:11 Min.]
2. Typografie mit CSS gestalten [01:04 Std.]
. 2.1. Einleitung [00:22 Min.]
. 2.2. Tipps zu Gestaltung und Typografie [10:12 Min.]
. 2.3. Die offiziellen Spezifikationen des W3C [03:25 Min.]
. 2.4. Die grundlegenden Texteigenschaften in CSS [07:47 Min.]
. 2.5. Die verschiedenen Maßeinheiten richtig einsetzen [07:24 Min.]
. 2.6. Mit Schriftstapeln arbeiten [08:06 Min.]
. 2.7. Externe Schriftarten einbetten [06:27 Min.]
. 2.8. Das Schriftbild mit Initialen auflockern [07:12 Min.]
. 2.9. Zitate mit Anführungszeichen kennzeichnen [06:33 Min.]
. 2.10. Externe Hyperlinks umformatieren [03:47 Min.]
. 2.11. Alternierende Farben in Listen erzeugen [03:01 Min.]
3. Mit CSS zum perfekten Layout [01:27 Std.]
. 3.1. Einleitung [00:27 Min.]
. 3.2. Den Dokumentenfluss verstehen [03:02 Min.]
. 3.3. Inhalte in Containern verschachteln [05:07 Min.]
. 3.4. Das Box-Modell verstehen [13:23 Min.]
. 3.5. Kollabierende Außenabstände nutzen [03:14 Min.]
. 3.6. Minimale und maximale Breiten verwenden [03:12 Min.]
. 3.7. Inline- und Block-Elemente unterscheiden [08:06 Min.]
. 3.8. Hintergründe positionieren [05:06 Min.]
. 3.9. Positionieren mit 'float' und 'clear' [07:24 Min.]
. 3.10. Alles fließt - Die Eigenschaft 'overflow' [06:52 Min.]
. 3.11. Ausrichten und positionieren mittels 'position' [12:06 Min.]
. 3.12. Eine zentrierte Webseite mit zwei Spalten [05:56 Min.]
. 3.13. Eine zentrierte Webseite mit drei Spalten [06:59 Min.]
. 3.14. Eine dehnbare Webseite mit drei Spalten [06:31 Min.]
4. Navigationsmenüs erstellen [00:52 Std.]
. 4.1. Einleitung [00:26 Min.]
. 4.2. Listen richtig einsetzen [04:07 Min.]
. 4.3. Vertikale Navigationsmenüs erstellen - Teil 1. [09:37 Min.]
. 4.4. Vertikale Navigationsmenüs erstellen - Teil 2. [09:19 Min.]
. 4.5. Ein horizontales Breadcrumbs-Menü [08:18 Min.]
. 4.6. Ein horizontales Aufklapp-Menü - HTML [09:12 Min.]
. 4.7. Ein horizontales Aufklapp-Menü - CSS [11:31 Min.]
5. Praxis-Workshop: Die Präsentations-Website [00:48 Std.]
. 5.1. Einleitung [00:22 Min.]
. 5.2. Die Gestaltungsvorlage [03:04 Min.]
. 5.3. Die grafischen Elemente der Website [03:18 Min.]
. 5.4. Das HTML-Grundgerüst [02:05 Min.]
. 5.5. Die Layout-Elemente positionieren [09:49 Min.]
. 5.6. Schriftbild, Absätze und Überschriften gestalten [09:07 Min.]
. 5.7. Das Navigationsmenü gestalten [07:23 Min.]
. 5.8. Die Fußzeile als Zitat kennzeichnen [06:05 Min.]
. 5.9. Verfeinerung und Abschlussarbeiten [03:40 Min.]
. 5.10. Conditional Comments für Internet Explorer 7 [03:25 Min.]
6. Praxis-Workshop: Die Firmen-Website [01:02 Std.]
. 6.1. Einleitung [00:22 Min.]
. 6.2. Layoutvorlage und Einzelelemente im Überblick [04:06 Min.]
. 6.3. Das HTML-Grundgerüst der Seite [02:37 Min.]
. 6.4. Das Basis-Layout umsetzen [09:25 Min.]
. 6.5. Schriftbild, Absätze und Überschriften gestalten [10:60 Min.]
. 6.6. Die Hauptnavigation gestalten [13:23 Min.]
. 6.7. Der letzte Feinschliff [09:58 Min.]
. 6.8. Anpassung an Internet Explorer 7 [11:02 Min.]
7. Praxis-Workshop: Die komplexe Portal-Website [01:43 Std.]
. 7.1. Einleitung [00:28 Min.]
. 7.2. Der Seitenaufbau im Überblick [09:46 Min.]
. 7.3. Die grafischen Elemente im Detail [05:55 Min.]
. 7.4. Den Seitenaufbau umsetzen in HTML und CSS [10:31 Min.]
. 7.5. Die rechte Inhaltsspalte aufteilen [09:11 Min.]
. 7.6. Das Schriftbild gestalten [04:27 Min.]
. 7.7. Das Navigationsmenü umsetzen [12:14 Min.]
. 7.8. Die Nachrichten-Übersicht gestalten [12:06 Min.]
. 7.9. Vorlage für ein optionales Zwei-Spalten-Layout [07:19 Min.]
. 7.10. Die Überschriften formatieren [04:36 Min.]
. 7.11. Der Sprechblasen-Stil [10:37 Min.]
. 7.12. Zweispaltiger Bilderfluss mit 'float' [10:06 Min.]
. 7.13. Die Fehlernachricht gestalten [05:20 Min.]
8. Blog-Seiten mit CSS anpassen [00:45 Std.]
. 8.1. Einleitung [00:19 Min.]
. 8.2. WordPress - Wo fange ich an? [02:24 Min.]
. 8.3. Eine eigene Stilvorlage anlegen [04:26 Min.]
. 8.4. Der HTML- und CSS-Aufbau des Themas [08:17 Min.]
. 8.5. Farben, Abstände und Rahmen anpassen [11:07 Min.]
. 8.6. Die Website mit Firebug analysieren [09:58 Min.]
. 8.7. Das Navigationsmenü positionieren [08:56 Min.]
9. CSS für Druck und mobile Endgeräte [00:21 Std.]
. 9.1. Einleitung [00:20 Min.]
. 9.2. Medientypen unterscheiden [02:06 Min.]
. 9.3. Die Website für den Druck optimieren [07:40 Min.]
. 9.4. Websites für mobile Endgeräte aufbereiten [11:02 Min.]
10. Barrierefreie Webseiten gestalten [00:21 Std.]
. 10.1. Einleitung [00:24 Min.]
. 10.2. Zugänglichkeit von Webinhalten - Die Richtlinien [05:53 Min.]
. 10.3. HTML-Grundlagen für Barrierefreiheit [06:26 Min.]
. 10.4. Die Zoom-Funktion im Browser unterstützen [03:45 Min.]
. 10.5. Grenzen der Wahrnehmung beachten [04:30 Min.]
11. Formulare mit CSS aufwerten [00:31 Std.]
. 11.1. Einleitung [00:23 Min.]
. 11.2. Formulare in HTML aufbauen [04:38 Min.]
. 11.3. Eingabefelder gestalten [02:16 Min.]
. 11.4. Unterschiedliche Eingabefelder selektieren [03:33 Min.]
. 11.5. Eingabefelder ausrichten [09:35 Min.]
. 11.6. Feldersätze verwenden [05:38 Min.]
. 11.7. Schaltflächen grafisch aufwerten [04:33 Min.]
12. Animationen mit JavaScript-Bibliotheken [00:40 Std.]
. 12.1. Einleitung [00:21 Min.]
. 12.2. Überblick über Effektbibliotheken [01:51 Min.]
. 12.3. MooTools laden und einbinden [02:57 Min.]
. 12.4. Eine einfache Hover-Überblendung [07:32 Min.]
. 12.5. Eine fortgeschrittene Hover-Überblendung [06:47 Min.]
. 12.6. Animationen verketten [03:24 Min.]
. 12.7. Eine Animation mehrfach zuweisen [05:56 Min.]
. 12.8. Das MooTools-Plug-In 'Accordion' einbinden [02:44 Min.]
. 12.9. Den Akkordeon-Effekt anwenden [08:54 Min.]
13. CSS3 - Die Zukunft im Blick [00:29 Std.]
. 13.1. Einleitung [00:26 Min.]
. 13.2. Was Sie jetzt schon testen können [04:36 Min.]
. 13.3. Altlasten: Texte mit Schatten [01:50 Min.]
. 13.4. Neu: Abgerundete Ecken [02:57 Min.]
. 13.5. Neu: Transformationen [03:14 Min.]
. 13.6. Neu: Dynamische Übergänge [03:02 Min.]
. 13.7. Neu: Mehrfache Hintergründe [03:28 Min.]
. 13.8. Neu: Berechnungen [03:10 Min.]
. 13.9. Neu: Mehrspaltiger Aufbau [03:19 Min.]
. 13.10. Neu: Moderne Bildergalerien [02:59 Min.]
. 1.1. Einleitung [00:22 Min.]
. 1.2. Die Trennung von Inhalt und Design [04:38 Min.]
. 1.3. Die Arbeitsumgebung einrichten [09:02 Min.]
. 1.4. Wichtige HTML-Grundlagen [09:12 Min.]
. 1.5. Die Verbindung zwischen HTML und CSS [07:04 Min.]
. 1.6. Selektoren - A und O der Stylesheets [09:18 Min.]
. 1.7. Kaskadierung und Vererbung verstehen [14:46 Min.]
. 1.8. Kind- und Nachbar-Selektoren einsetzen [07:57 Min.]
. 1.9. Die Pseudoklassen nutzen [04:01 Min.]
. 1.10. CSS in CSS einbetten [03:11 Min.]
2. Typografie mit CSS gestalten [01:04 Std.]
. 2.1. Einleitung [00:22 Min.]
. 2.2. Tipps zu Gestaltung und Typografie [10:12 Min.]
. 2.3. Die offiziellen Spezifikationen des W3C [03:25 Min.]
. 2.4. Die grundlegenden Texteigenschaften in CSS [07:47 Min.]
. 2.5. Die verschiedenen Maßeinheiten richtig einsetzen [07:24 Min.]
. 2.6. Mit Schriftstapeln arbeiten [08:06 Min.]
. 2.7. Externe Schriftarten einbetten [06:27 Min.]
. 2.8. Das Schriftbild mit Initialen auflockern [07:12 Min.]
. 2.9. Zitate mit Anführungszeichen kennzeichnen [06:33 Min.]
. 2.10. Externe Hyperlinks umformatieren [03:47 Min.]
. 2.11. Alternierende Farben in Listen erzeugen [03:01 Min.]
3. Mit CSS zum perfekten Layout [01:27 Std.]
. 3.1. Einleitung [00:27 Min.]
. 3.2. Den Dokumentenfluss verstehen [03:02 Min.]
. 3.3. Inhalte in Containern verschachteln [05:07 Min.]
. 3.4. Das Box-Modell verstehen [13:23 Min.]
. 3.5. Kollabierende Außenabstände nutzen [03:14 Min.]
. 3.6. Minimale und maximale Breiten verwenden [03:12 Min.]
. 3.7. Inline- und Block-Elemente unterscheiden [08:06 Min.]
. 3.8. Hintergründe positionieren [05:06 Min.]
. 3.9. Positionieren mit 'float' und 'clear' [07:24 Min.]
. 3.10. Alles fließt - Die Eigenschaft 'overflow' [06:52 Min.]
. 3.11. Ausrichten und positionieren mittels 'position' [12:06 Min.]
. 3.12. Eine zentrierte Webseite mit zwei Spalten [05:56 Min.]
. 3.13. Eine zentrierte Webseite mit drei Spalten [06:59 Min.]
. 3.14. Eine dehnbare Webseite mit drei Spalten [06:31 Min.]
4. Navigationsmenüs erstellen [00:52 Std.]
. 4.1. Einleitung [00:26 Min.]
. 4.2. Listen richtig einsetzen [04:07 Min.]
. 4.3. Vertikale Navigationsmenüs erstellen - Teil 1. [09:37 Min.]
. 4.4. Vertikale Navigationsmenüs erstellen - Teil 2. [09:19 Min.]
. 4.5. Ein horizontales Breadcrumbs-Menü [08:18 Min.]
. 4.6. Ein horizontales Aufklapp-Menü - HTML [09:12 Min.]
. 4.7. Ein horizontales Aufklapp-Menü - CSS [11:31 Min.]
5. Praxis-Workshop: Die Präsentations-Website [00:48 Std.]
. 5.1. Einleitung [00:22 Min.]
. 5.2. Die Gestaltungsvorlage [03:04 Min.]
. 5.3. Die grafischen Elemente der Website [03:18 Min.]
. 5.4. Das HTML-Grundgerüst [02:05 Min.]
. 5.5. Die Layout-Elemente positionieren [09:49 Min.]
. 5.6. Schriftbild, Absätze und Überschriften gestalten [09:07 Min.]
. 5.7. Das Navigationsmenü gestalten [07:23 Min.]
. 5.8. Die Fußzeile als Zitat kennzeichnen [06:05 Min.]
. 5.9. Verfeinerung und Abschlussarbeiten [03:40 Min.]
. 5.10. Conditional Comments für Internet Explorer 7 [03:25 Min.]
6. Praxis-Workshop: Die Firmen-Website [01:02 Std.]
. 6.1. Einleitung [00:22 Min.]
. 6.2. Layoutvorlage und Einzelelemente im Überblick [04:06 Min.]
. 6.3. Das HTML-Grundgerüst der Seite [02:37 Min.]
. 6.4. Das Basis-Layout umsetzen [09:25 Min.]
. 6.5. Schriftbild, Absätze und Überschriften gestalten [10:60 Min.]
. 6.6. Die Hauptnavigation gestalten [13:23 Min.]
. 6.7. Der letzte Feinschliff [09:58 Min.]
. 6.8. Anpassung an Internet Explorer 7 [11:02 Min.]
7. Praxis-Workshop: Die komplexe Portal-Website [01:43 Std.]
. 7.1. Einleitung [00:28 Min.]
. 7.2. Der Seitenaufbau im Überblick [09:46 Min.]
. 7.3. Die grafischen Elemente im Detail [05:55 Min.]
. 7.4. Den Seitenaufbau umsetzen in HTML und CSS [10:31 Min.]
. 7.5. Die rechte Inhaltsspalte aufteilen [09:11 Min.]
. 7.6. Das Schriftbild gestalten [04:27 Min.]
. 7.7. Das Navigationsmenü umsetzen [12:14 Min.]
. 7.8. Die Nachrichten-Übersicht gestalten [12:06 Min.]
. 7.9. Vorlage für ein optionales Zwei-Spalten-Layout [07:19 Min.]
. 7.10. Die Überschriften formatieren [04:36 Min.]
. 7.11. Der Sprechblasen-Stil [10:37 Min.]
. 7.12. Zweispaltiger Bilderfluss mit 'float' [10:06 Min.]
. 7.13. Die Fehlernachricht gestalten [05:20 Min.]
8. Blog-Seiten mit CSS anpassen [00:45 Std.]
. 8.1. Einleitung [00:19 Min.]
. 8.2. WordPress - Wo fange ich an? [02:24 Min.]
. 8.3. Eine eigene Stilvorlage anlegen [04:26 Min.]
. 8.4. Der HTML- und CSS-Aufbau des Themas [08:17 Min.]
. 8.5. Farben, Abstände und Rahmen anpassen [11:07 Min.]
. 8.6. Die Website mit Firebug analysieren [09:58 Min.]
. 8.7. Das Navigationsmenü positionieren [08:56 Min.]
9. CSS für Druck und mobile Endgeräte [00:21 Std.]
. 9.1. Einleitung [00:20 Min.]
. 9.2. Medientypen unterscheiden [02:06 Min.]
. 9.3. Die Website für den Druck optimieren [07:40 Min.]
. 9.4. Websites für mobile Endgeräte aufbereiten [11:02 Min.]
10. Barrierefreie Webseiten gestalten [00:21 Std.]
. 10.1. Einleitung [00:24 Min.]
. 10.2. Zugänglichkeit von Webinhalten - Die Richtlinien [05:53 Min.]
. 10.3. HTML-Grundlagen für Barrierefreiheit [06:26 Min.]
. 10.4. Die Zoom-Funktion im Browser unterstützen [03:45 Min.]
. 10.5. Grenzen der Wahrnehmung beachten [04:30 Min.]
11. Formulare mit CSS aufwerten [00:31 Std.]
. 11.1. Einleitung [00:23 Min.]
. 11.2. Formulare in HTML aufbauen [04:38 Min.]
. 11.3. Eingabefelder gestalten [02:16 Min.]
. 11.4. Unterschiedliche Eingabefelder selektieren [03:33 Min.]
. 11.5. Eingabefelder ausrichten [09:35 Min.]
. 11.6. Feldersätze verwenden [05:38 Min.]
. 11.7. Schaltflächen grafisch aufwerten [04:33 Min.]
12. Animationen mit JavaScript-Bibliotheken [00:40 Std.]
. 12.1. Einleitung [00:21 Min.]
. 12.2. Überblick über Effektbibliotheken [01:51 Min.]
. 12.3. MooTools laden und einbinden [02:57 Min.]
. 12.4. Eine einfache Hover-Überblendung [07:32 Min.]
. 12.5. Eine fortgeschrittene Hover-Überblendung [06:47 Min.]
. 12.6. Animationen verketten [03:24 Min.]
. 12.7. Eine Animation mehrfach zuweisen [05:56 Min.]
. 12.8. Das MooTools-Plug-In 'Accordion' einbinden [02:44 Min.]
. 12.9. Den Akkordeon-Effekt anwenden [08:54 Min.]
13. CSS3 - Die Zukunft im Blick [00:29 Std.]
. 13.1. Einleitung [00:26 Min.]
. 13.2. Was Sie jetzt schon testen können [04:36 Min.]
. 13.3. Altlasten: Texte mit Schatten [01:50 Min.]
. 13.4. Neu: Abgerundete Ecken [02:57 Min.]
. 13.5. Neu: Transformationen [03:14 Min.]
. 13.6. Neu: Dynamische Übergänge [03:02 Min.]
. 13.7. Neu: Mehrfache Hintergründe [03:28 Min.]
. 13.8. Neu: Berechnungen [03:10 Min.]
. 13.9. Neu: Mehrspaltiger Aufbau [03:19 Min.]
. 13.10. Neu: Moderne Bildergalerien [02:59 Min.]