Hier befreien Sie die Beispieldatei von überflüssigem Markup, korrigieren falsch verwendete HTML-Elemente und erstellen ein semantisch korrektes Dokument.
Bitte registrieren Sie sich, um die Lesezeichen zu nutzen.
Kauf dieses Trainings oder eines Abos erforderlich
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.
Hier befreien Sie die Beispieldatei von überflüssigem Markup, korrigieren falsch verwendete HTML-Elemente und erstellen ein semantisch korrektes Dokument.
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.
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.
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.
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.
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.
Ihrer Webseite fehlt noch eine direkte Kaufaufforderung. Fügen Sie diese mithilfe einer Linkgrafik ein. Erfahren Sie außerdem, wie Sie Zeilenumbrüche verhindern.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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 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.
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!
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.
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.
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.
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'.
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.
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.
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.
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!
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.
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.
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.
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.
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.
Durch die gleichmäßige Wiederholung grafischer Elemente erzeugen Sie einen visuellen Rhythmus. Damit können Sie steuern, wie der Betrachter die Inhalte aufnimmt.
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.
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.
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.
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.
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.
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.
Ebenso wie in gedruckten Werken kommen 'schöne Webseiten' nicht ohne Gestaltungsraster aus. Diese Lektion zeigt Ihnen einige Herangehensweisen an diese Herausforderung.
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.
„ Sehr gut. Ich denke, dieses Video-Training wird mich richtig weiterbringen. Das Abo war ein toller Tipp! “
DVD- Training
Online-Training
Trainings Abo
