Jetzt kommt Ordnung rein

aus: Die Kunst des CSS Designs

Kaufen

Jetzt abonnieren!

Über dieses Video

Eine Webseite weist in der Regel unterschiedliche Funktionsbereiche auf: Kopfbereich mit Logo, Footer, Navigation(en), Zusatzinformationen und die Hauptinhalte. Hier erfahren Sie, wie Sie das Dokument am besten strukturieren.

Kaufen

Jetzt abonnieren!

Auszug aus:

Die Kunst des CSS Designs

€ 39,95

Ähnliche Video-Trainings

Gutes CSS-Design gelingt nur, wenn der semantische Aufbau und die Struktur des Dokuments stimmig sind. Worauf Sie achten müssen, zeigt die Autorin Ihnen anhand eines Beispiels.

CSS und Webstandards

ca. 84 min
- Anhand eines Beispiels zeigt Ihnen die Autorin einige typische Fehler beim Aufbau eines HTML-Dokuments. Erstellen Sie ein semantisch korrektes und strukturiertes Dokument, welches Sie anschließend mit CSS in Form bringen. Hier erfahren Sie auch, wo Sie mehr über Webstandards erfahren können.
  
  Einführung
  
  02:26
- Hier befreien Sie die Beispieldatei von überflüssigem Markup, korrigieren falsch verwendete HTML-Elemente und erstellen ein semantisch korrektes Dokument.
  
  Übergabe: Besenrein
  
  10:41
- Hier zeigt Ihnen die Autorin, was Sie bei der Wahl des Document Types beachten müssen, sowie weitere wichtige Einstellungen und die Planung der Seitenstruktur.
  
  Strikte Entwicklung und gute Planung
  
  03:42
- Eine Webseite weist in der Regel unterschiedliche Funktionsbereiche auf: Kopfbereich mit Logo, Footer, Navigation(en), Zusatzinformationen und die Hauptinhalte. Hier erfahren Sie, wie Sie das Dokument am besten strukturieren.
  
  Jetzt kommt Ordnung rein
  
  06:21
- Hier erfahren Sie unter anderem, wie Sie grundlegende Elemente und Einstellungen mit Hilfe von CSS festlegen, einen Stylesheet einbinden, ältere Browser mit media="screen, projection" ausschließen und mit einem Sternchen-Selektor browsereigene Formatierungen überschreiben.
  
  Mit CSS layouten: Die Basics
  
  06:21
- Schauen Sie der Autorin über die Schulter, wie Sie den Kopfbereich gestaltet und eine rechts fließende Spalte anlegt. Erfahren Sie auch, wie Sie innerhalb der Spalte ein ansprechendes Layout erzielen können.
  
  Mit CSS layouten: Alles fließt ...
  
  13:35
- Nun müssen Sie noch Inhalte, Navigation und Footer gestalten. Die Autorin zeigt Ihnen hier unter anderem, wie Sie die Navigation nach oben setzen und anpassen können.
  
  Unser erstes Layout wird fertig
  
  13:19
- Ihrer Webseite fehlt noch eine direkte Kaufaufforderung. Fügen Sie diese mithilfe einer Linkgrafik ein. Erfahren Sie außerdem, wie Sie Zeilenumbrüche verhindern.
  
  Noch ein paar Ergänzungen
  
  05:28
- Hier zeigt Ihnen die Autorin, wie schnell sich ein CSS-Layout ändern lässt, indem der Webseite neue Linien und Farben zugewiesen werden.
  
  In wenigen Minuten ändern
  
  07:53
- Sie können an dieser Stelle eine zentrierte Variante Ihrer Webseite erstellen. Erfahren Sie alles über absolute und relative Positionierung. Außerdem lernen Sie, wie Sie Linkgrafiken in älteren Versionen des Internet Explorer korrekt anzeigen können.
  
  Eine zentrierte Variante
  
  05:27
- Zu guter Letzt gestalten Sie noch ein Printstyle, um eine druckerfreundliche Version Ihrer Webseite zu erzeugen. Die Autorin zeigt Ihnen hier, was Sie dabei beachten müssen.
  
  Papier ist geduldig
  
  08:24
Anstatt Ihnen eine Reihe verschiedener Layout-Modelle vorzustellen und zu besprechen, behandelt die Autorin hier lieber ein Basis-Layout, das nicht nur sehr solide sondern auch sehr flexibel einsetzbar ist.

Qualität statt Quantität

ca. 19 min
- Das HTML-Grundgerüst ändert sich nicht oder nur wenig für die verschiedenen Layouts, die Ihnen die Autorin hier vorstellen wird.
  
  Einführung
  
  06:38
- Hier erstellen Sie ein erstes Basis-Layout für einen flexiblen Dreispalter. Erfahren Sie, wie Sie Hintergrundbilder positionieren, eine floatende Spalte erzeugen und wie Sie den so genannten Pekaboo Bug umgehen können.
  
  Flexibles Basis-Layout als 3-Spalter
  
  14:13
Hier zeigt Ihnen die Autorin, wie Sie ausgehend von einem Basis-Layout mittels Stylesheets unterschiedliche Designs gestalten können.

Fallbeispiele

ca. 77 min
- Robin Preston, Post Production Digital Artist, stellt Bildmaterial für Beispiel-Layouts zur Verfügung. Dieses Material ist unsere Grundlage zur Umsetzung am konkreten Projekt.
  
  Einführung
  
  04:13
- Häufig setzen Auftraggeber enge Grenzen, innerhalb derer neue Designs entwickelt werden müssen. Eine 1:1-Umsetzung vom Tabellendesign zum CSS-Design ist selten sinnvoll und nicht immer zu 100% möglich.
  
  Tabellen-Design versus CSS-Design
  
  04:35
- Ein HTML-Template für alle Designs - das fordert auch dieser Kunde. Hier zeigt Ihnen Cornelia Lange, wie das gelingen kann.
  
  CSS Zengarden auf anderem Niveau
  
  10:55
- Hier zeigt Ihnen die Autorin, welche ersten Schritte Sie für das Layout Ihrer Webseite setzen können, um zum Beispiel die Hintergrundfarbe an das Bild anzupassen.
  
  Von der Idee zum Entwurf
  
  04:22
- Erstellen Sie nun die Navigation der Webseite. Mehrere Aspekte müssen berücksichtigt werden: Die Zugänglichkeit, Benutzerführung und stimmige Integration in das Bildmaterial.
  
  Bestimmen Sie die Führung - Teil I
  
  12:06
- Der 'topnavi' genannte Bereich der Beispielseite enthält eine Liste mit Menüeinträgen. Die Formatierung dieser Liste muss auch in älteren IE-Versionen korrekt dargestellt werden - mit einem Hack können Sie das sicherstellen.
  
  Bestimmen Sie die Führung - Teil II
  
  08:54
- Wenn das Logo mit dem Bildhintergrund eine Komposition bildet, ist es häufig besser, für die Druckausgabe gleich das offizielle Drucklogo einzubinden. Auch in nicht CSS-fähigen Browsern ist das von Vorteil.
  
  Ein kleines Versteckspiel
  
  08:46
- Trotz aller guten Vorsätze kommt man manchmal nicht daran vorbei, einfache Tabellen für Layoutzwecke einzusetzen. Erfahren Sie hier, was Sie dabei beachten und welche Fehler Sie vermeiden sollten.
  
  Wenn schon Tabelle, dann richtig ...
  
  03:37
- Hier stellt Ihnen Cornelia Lange das Layout der Webseite noch ohne Inhalte vor. Sie sehen, welche Bereiche sich wo befinden und was Sie beachten müssen, damit alle Bereiche korrekt angezeigt werden.
  
  Layoutbesprechung
  
  07:19
- Manchmal sind es Kleinigkeiten, die am meisten aufhalten – die Autorin zeigt Ihnen hier ein Positionierungsproblem und verschiedene Lösungsansätze, damit Sie die Seite in allen Browsern problemlos betrachten können.
  
  Problem an unerwarteter Stelle
  
  09:52
- Zum Schluss erfolgt noch eine kurze Gegenüberstellung des erstellten Designs mit dem Original-Autrado-Design. Nur die Betrachtung ohne Styles enthüllt die Übereinstimmung der Dokumente.
  
  Ein Körper, zwei Gesichter
  
  01:21
Was Sie in diesem Kapitel erwartet ist die Erstellung eines einzigen, über alle Filme durchgehenden Sitedesigns. Schauen Sie Cornelia Lange über die Schulter, während die Siteelemente entstehen und später nacheinander in Form gebracht werden.

Tiefer in die Praxis

ca. 120 min
- Hier erstellen Sie wieder ein Design basierend auf der Grundlage von Autrado. Diesmal zeigt Ihnen die Autorin den gesamten Designprozess.
  
  Einführung
  
  01:07
- Designentwürfe gelingen nicht immer auf Anhieb. Häufig nähert man sich dem Endergebnis Schritt für Schritt. Hier sehen Sie, welche Vorbereitungen Sie für Ihr Design treffen müssen.
  
  Ein erster Versuch
  
  07:49
- Dieser Film beginnt mit der Platzierung der Kopfgrafik(en) und macht mit der Definition der rechten Spalte als 'float' weiter. Ebenso können Sie das Entstehen der Navigationsmenüs verfolgen.
  
  Ein erster Versuch - Fortsetzung
  
  08:32
- Ein paar Schritte mehr und schon sieht die Sache ganz ordentlich aus. Schauen sie Cornelia Lange über die Schulter, wenn sie einige Anpassungen am Design vornimmt, um das Ganze ansprechender zu gestalten.
  
  Mühsam nährt sich das Eichhörnchen ...
  
  09:21
- Nach der Formatierung der Überschrift in der zweiten Ebene (diese wird verkleinert und farblich angepasst) können Sie in diesem Film die Platzierung der Login-Box am rechten Rand verfolgen - und dass eine 'absolute' Positionierung nicht ganz so absolut ist wie vielleicht angenommen!
  
  Die Inhalte in Form bringen - Teil I
  
  08:35
- Über den Kontext-Selektor bringt Cornelia Lange nicht nur die Eingabefelder, sondern sogar den 'Absenden'-Button des Login-Blocks in Form - per CSS!
  
  Die Inhalte in Form bringen - Teil II
  
  11:16
- Probleme beim Skalieren sieht man häufig, wenn absolut positionierte Bereiche an ungünstigen Stellen im normalen Dokumentenfluss stehen. Diese Probleme sind durchaus lösbar, obwohl auch hier Grenzen gesetzt sind. Cornelia Lange zeigt Ihnen, wie Sie diese Probleme in den Griff bekommen.
  
  Absolut überlegen
  
  06:02
- Wenn die Worte in schmalen gefloateten Spalten zu breit werden, werden andere Inhaltsbereiche im IE nach unten verdrängt. Wie können Sie dagegen steuern? Die Autorin zeigt Ihnen wie's geht.
  
  Spalte gegen Inhalt
  
  12:35
- Tabellen als Gestaltungraster sind sehr verbreitet - bieten aber nur sehr eingeschränkt Flexibilität. Hier sind Listen eindeutig flexibler als linearisierte Tabellen! Dieser Film zeigt die Wandlung einer solchen Tabelle und macht Unterschiede sichtbar.
  
  Tabelle oder Liste?
  
  13:46
- Wir bringen nun das Design in die endgültige Form: Das beginnt mit der Nutzung eines etwas dunkleren Hintergrunds - was umfangreiche Änderungen an verschiedenen anderen Stellen nach sich zieht - und geht weiter zur Gestaltung des 'Footers'.
  
  Finales Design
  
  14:24
- Das Grundkonzept ist fertig, die Seitenelemente sind vorhanden. Was nun folgt, wird vom Zeitaufwand her ständig unterschätzt: die Anpassung der Elemente bis hin zum gewünschten Aussehen.
  
  Es geht noch besser!
  - ALLE Schriftgrößen der Site in 'em' zu formatieren, ist den meisten Webentwicklern ein Gräuel. Dabei ist es eigentlich ganz einfach, wenn man einige Regeln befolgt, die die Autorin Ihnen in diesem Film anhand mehrerer Sites demonstriert.
    
    Zentrales Schriftgrößenkonzept - Teil I
    
    09:28
  - In diesem Film können Sie verfolgen, wie die empfehlenswerte Technik, CSS-Formate zunächst allgemein zu definieren und erst später die Formate für spezielle Zusammenhänge wieder zurückzusetzen, die Ausgabe immer näher dem gewünschten Ergebnis kommen lässt.
    
    Zentrales Schriftgrößenkonzept - Teil II
    
    09:29
  - Wenn es um Zugänglichkeit bzw. Barrierefreiheit geht, werden hohe Anforderungen an die verwendete Technik gestellt, um Grafiken als Überschriften einzusetzen. Im Film lernen Sie eine der möglichen Methoden kennen, wie Sie Texte relativ frei von Nachteilen durch Grafiken ersetzen können.
    
    Image-Replacement-Techniken
    
    04:02
  - Technisch gesehen ist es der pure Wahnsinn: In diesem Film lernen Sie, wie Sie ohne den Einsatz von Grafiken abgerundete Ecken für Ihren Layer erzielen können: Der raffinierte Einsatz von CSS reicht!
    
    CSS-Rounded Corner - ohne Grafiken!
    
    05:27
  - Dass sogar komplexe Imagemaps mit eingefügten Zusatzinformationen allein mit CSS realisierbar sind, zeigt Ihnen dieser Film. Schritt für Schritt erweitert die Autorin dabei die HTML- und CSS-Definitionen und nähert sich klar nachvollziehbar ihrem Ziel an.
    
    CSS-Image-Map - Teil I
    
    11:00
  - Dieser Abschnitt zeigt die Implementierung ausführlicher Informationstexte zwischen einem Standort-Menü und der Standorte-Landkarte bis hin zur möglichst browserunabhängigen Anpassung per CSS.
    
    CSS-Image-Map - Teil II
    
    09:13
Die ersten Schritte im Design eines Projekts sind die schwersten: Man weiß weder, wo das Element platziert, noch in welcher Farbe es erstellt werden soll! Hier greift dieses Kapitel mit seinen Ausführungen zur Gestaltung und der Farbpädagogik, gefolgt von technischen 'Basics' und 'beliebten' Fehlern.

Zusatzinformationen zu Webgestaltung

ca. 79 min
- Mediengestaltung wird oft mit dem Beherrschen von Photoshop & Co. gleichgesetzt. Doch mindestens genauso wichtig ist das Beherrschen grundlegender Gestaltungsregeln, die wir Ihnen in diesem Kapitel näher bringen wollen.
  
  Gestaltgesetze
  - Ordnung oder Chaos? Das Gesetz der räumlichen Nähe lässt uns automatisch einen Zusammenhang zwischen nahe beieinander liegenden Elementen herstellen. Diese Lektion zeigt gängige Anwendungen.
    
    Räumliche Nähe
    
    04:11
  - Der Groß-Klein-Kontrast ist wichtig für die Bewertung von Information. Auch beim Entwurf von grafischen Elementen ist er von zentraler Bedeutung. In dieser Lektion erfahren Sie mehr zu diesem wichtigen Gestaltgesetz.
    
    Groß-Klein-Kontrast
    
    04:20
  - Auch grafische Elemente haben ein (visuelles) Gewicht. In dieser Lektion vermitteln wir Ihnen, was 'leicht' und 'schwer' im gestalterischen Kontext bedeuten. Damit erwerben Sie wichtiges Know-how für die Gestaltung eigener Layouts.
    
    Leicht und schwer
    
    04:02
  - Durch die gleichmäßige Wiederholung grafischer Elemente erzeugen Sie einen visuellen Rhythmus. Damit können Sie steuern, wie der Betrachter die Inhalte aufnimmt.
    
    Rhythmus und Wiederholung
    
    01:56
  - Mit Hilfe von Hell-Dunkel-Kontrasten können einzelne Elemente ebenfalls visuell hervorgehoben werden.
    
    Helligkeitskontrast
    
    02:07
  - Jetzt kommt Farbe ins Spiel! In dieser Lektion behandeln wir die Grundlagen der Farbauswahl und erklären, wie Sie die bisher erlernten Kontrastkonzepte auf den Einsatz von Farben übertragen.
    
    Farbkontrast
    
    06:01
  - Muster ergeben sich durch die regelmäßige Anordnung von zahlreichen grafischen Elementen, Permutationen bringen kreatives Chaos in allzu langweilige Muster. In dieser Lektion verraten wir Ihnen, was Sie beim Einsatz von Mustern beachten müssen.
    
    Struktur und Permutation
    
    03:45
  - Wie nimmt der Betrachter eigentlich mein Layout wahr? In dieser Lektion beschäftigen wir uns mit Blickrichtungen und der Wahrnehmungsreihenfolge. Lernen Sie, diese Gesetzmäßigkeiten zu Ihrem Nutzen einzusetzen.
    
    Räumliche Anordnung
    
    01:49
  - Der goldene Schnitt ist das wichtigste Proportionsgesetz in der Mediengestaltung. Er definiert beispielsweise das Seitenverhältnis vieler Papierformate. Lernen Sie die Anwendung des goldenen Schnitts anhand zahlreicher Beispiele.
    
    Goldener Schnitt
    
    07:33
- Farben sind nicht bloß bunt, sondern haben auch bestimmte Bedeutungen - etwa das 'kühle' Blau oder das 'feurige' Rot. In dieser Lektion geben wir Ihnen Einblick in die kulturelle Geschichte der Farbe. Sie können daraus wertvolle Inspirationen für die eigene gestalterische Arbeit ziehen.
  
  Farbgeschichte
  
  11:31
- Reine Informations- oder Verkaufsseite? Forum oder Blog? Lernen Sie eine Möglichkeit der Kategorisierung von Webseiten und ihre Eigenschaften näher kennen. Diese hilft Ihnen unter anderem auch dabei, Ihr eigenes Projekt genauer zu definieren.
  
  Typentscheidung Webseite
  
  14:11
- Ebenso wie in gedruckten Werken kommen 'schöne Webseiten' nicht ohne Gestaltungsraster aus. Diese Lektion zeigt Ihnen einige Herangehensweisen an diese Herausforderung.
  
  Layout und Gestaltungsraster
  
  10:10
- Usability - also die Benutzbarkeit der Webseite - sollte sowohl für Auftraggeber und Konzepter als auch für Entwickler eine wichtige Rolle spielen. In diesem Workshop zeigen wir Ihnen ein paar negative Beispiele, aus denen Sie bestimmt lernen können, wie Sie es besser machen können.
  
  Die Top 5 der Usability-Sünden
  
  06:38

Jetzt kommt Ordnung rein

aus: Die Kunst des CSS Designs

Über dieses Video

Auszug aus:

Filminformationen

Herzlich Willkommen bei video2brain!

Other sites. Otros sitios. Autres sites.