Jetzt lerne ich CSS Design

Start ohne Vorwissen

CSS hat das Webdesign revolutioniert. Sites werden dank CSS standardardkonform und barrierefrei, für Programmierer leichter zu pflegen und für Anwender schneller zu laden. CSS eröffnet aber auch neue Möglichkeiten, die längst begonnen haben, das Aussehen des Web zu revolutionieren.

Ihr(e) Trainer: Helge Maus

ISBN-Nummer: 978-3-8272-0762-3

Erscheinungsdatum: 07.12.2005

Downloads

Auf die Merkliste Tell-A-Friend Feedback verfassen

Ähnliche Video-Trainings

Bonusmaterial

In diesem kleinen Film wird auf ein paar grundsätzliche Regeln im Umgang mit CSS hingewiesen. Die Benennung der Selektoren ist hier ein gutes Beispiel, da keine Sonderzeichen und auch keine Umlaute im Namen vorkommen dürfen.

Benennungsregeln

03:39
Alle bisher kennen gelernten Textformatierungen in einer einzigen Zeile? Wenn Sie glauben, dass das gar nicht möglich ist, lassen Sie sich am Besten mit diesem Film vom Gegenteil überzeugen.

Kurzschreibweise

04:56
Hier wird erklärt, wie man HTML Elemente sichtbar und unsichtbar schaltet. Ein gutes Beispiel für die sinnvolle Nutzung sind Rollover-Effekte, bei denen beliebige Elemente erst nachträglich angezeigt werden.

Sichtbarkeit

02:06

Sie haben zwar schon von CSS gehört, sind aber noch nicht so richtig auf den Geschmack gekommen? Lassen Sie sich vom Autor ganz einfach auf eine Reise durch die Argumente für diese Technik mitnehmen.

Willkommen bei CSS

ca.44 min
- Auf alle Anfänger in diesem Bereich wartet hier eine kleine Einführung in die CSS Welt. Ob ruhig, ausgefallen, verspielt oder klassisch - mit der vorgestellten Technik zum Designen von Webseiten ist alles möglich.
  
  Willkommen bei CSS
  
  08:44
- Werfen Sie einen Blick auf die Geschichte und Entwicklung des World Wide Web. Gerade in Hinblick auf CSS ist es interessant, sich auf das Konzept dahinter zu besinnen.
  
  Entwicklung des Webs
  
  10:28
- 'Pi-Mal-Daumen-Design' mit HTML Tags und Argumenten? Anhand zweier Beispiele wird der problematische Ansatz klassischen Webdesigns besprochen.
  
  Das klassische Webdesign
  
  13:42
- Konkrete Probleme im Einsatz veralteter Techniken im Webdesign, sowie Ideen und Lösungsansätze kommen hier zur Sprache.
  
  Probleme klassischen Webdesigns
  
  05:44
- Die logische Konsequenz liegt auf der Hand: CSS bietet alle Funktionalitäten an, die früher komplizierter Konstrukte bedurften! Eine Motivation, die Technik in Folge auch wirklich genauer kennenzulernen ...
  
  Verwendung von CSS
  
  04:59
Kein Ergebnis ohne Grundlagen! Der Autor schlägt gekonnt die Brücke zwischen trockener Syntax (Sprachregeln) und spannender Anwendung im Webbrowser Ihrer Wahl.

CSS Grundlagen

ca. 178 min
- Hier erfahren Sie, was Sie für die Verwendung von CSS benötigen - vom einfachen Werkzeug eines Texteditors bis zum Verständnis für die Arbeitsweise mit verschiedenen Browsern.
  
  Ihre Arbeitsumgebung
  
  05:33
- Nun geht es los mit den Cascading Stylesheets, kurz CSS. Helge Maus zeigt Ihnen auf anschauliche Weise die ersten Schritte in dieser Technologie.
  
  Erste Schritte in CSS
  
  09:45
- Erlangen Sie hier Grundkenntnisse zu Aufbau und Schreibweise von CSS, und wie man die darin vorkommenden Elemente benennt. In kürzester Zeit werden Sie selbst komplexe Strukturen durchblicken ...
  
  Anatomie einer CSS-Anweisung
  
  05:43
- Der CSS Code kann auch in einer oder mehreren seperaten Dateien abgelegt werden. Dann gilt es nur noch, diese korrekt in der zu formatierenden Seite zu referenzieren. Gewusst wie, klappt es auch bei Ihnen!
  
  CSS einbinden
  
  14:08
- Eine 'alternative CSS Datei' ermöglicht es, im Browser von einer auf eine andere CSS Datei umzuschalten, um die Standarddarstellung zu verändern. Wo und wie das klappt, zeigt Ihnen Helge Maus in diesem Film.
  
  Alternative CSS Datei
  
  04:57
- Sie lernen hier, wie sich HTML Dokumente zueinander verhalten und wie strukturiert sie aufgebaut sind. Dieses Wissen wird für die nächsten Lektionen über so genannte Selektoren sehr nützlich sein.
  
  Dokumentenbaum
  
  11:28
- Bei Selektoren handelt es sich um bestimmte HTML Attribute, auf die CSS individuell zugreifen und damit Inhalte formatieren kann. Daher nennt man diesen Vorgang auch Individualformatierung. Also, ab ins Formatierungsabenteuer ...
  
  Selektoren
  - Den Element-Selektor zu verwenden ist zwar die einfachste Methode, allerdings nicht immer sinnvoll. Wo es Sinn macht und an welche Grenzen man stößt, wird Ihnen in dieser Lektion demonstriert ...
    
    Element-Selektor I
    
    09:36
  - ... und auch der zweite Teil des Workshops zu dieser Technik bietet umfassende Anwendungsbeispiele, die ganz einfach Lust auf den Einsatz des Element-Selektors machen.
    
    Element-Selektor II
    
    09:34
  - Auch auf mehrere HTML Elemente gleichzeitig kann zugegriffen werden. Eine einfache Trennung mit Beistrichen erzeugt eine Gruppe an Formatierungsvorgaben, die Sie in Folge komfortabel verwenden können.
    
    Gruppierte Selektoren
    
    03:13
  - Der am häufigsten verwendete Selektor ist der Klassen-Selektor. Hier lernen Sie, wie man beliebige HTML Tags mit einem Namen versieht, um diese mittels CSS formatieren zu lassen - und zwar nur diese.
    
    Klassen Selektoren
    
    10:25
  - Der ID Selektor unterscheidet sich deutlich vom Klassen Selektor. Ein wichtiger Punkt ist, dass es nur ein ID Attribut innerhalb der HTML Seite geben darf! Wofür das sinnvoll ist, sehen Sie sogleich ...
    
    ID Selektoren
    
    02:42
  - Der nächste Schritt sind verschachtelte Selektoren. Es ist also möglich zu definieren, dass zum Beispiel nur kursive Texte bei der CSS Formatierung betroffen sind, die sich wiederum in einer Überschrift ersten Grades befinden müssen.
    
    Kombinierte Selektoren
    
    04:21
  - Ähnlich wie bei den kombinierten Selektoren werden diesmal nur Unterelemente formatiert, welche direkt auf ein bestimmtes Eltern-Element folgen. Kaskadierung mal von einer anderen Seite ...
    
    Der Kind-Selektor
    
    04:41
  - Mit Hilfe des Folge-Element-Selektors lassen sich HTML Elemente formatieren, welche auf ein bestimmtes 'Schwestern-Element' folgen. Lernen Sie also fast die ganze Familie von Selektoren kennen!
    
    Folge-Element-Selektor
    
    04:26
  - In diesem Film lernen Sie die wichtigen Unterschiede zwischen <div> und <span> Tag kennen. Wann welches dieser beiden - zugegeben recht ähnlichen - Tags verwendet werden sollte und wie diese mit CSS behandelt werden wird ebenso ausführlich erläutert.
    
    div und span
    
    11:35
  - Hier erfahren Sie, wie Sie per CSS auf beliebige HTML Attribute zugreifen und die Attributswerte verschieden anzeigen lassen können. In diesem Beispiel werden zwei Sprachen in unterschiedlichen Farben dargestellt und später nur eine der beiden Sprachen eingeblendet.
    
    Attribute Selektor
    
    09:51
  - CSS kann auch zusätzlichen Content in die Seite einbinden, indem man entweder vor oder nach einem HTML Tag einen einzufügenden Text angibt. Aber nicht nur Text lässt sich einfügen ...
    
    Content-Generierung per CSS
    
    05:37
  - Wie man aktive, also angeklickte Links gestalten oder Rollover Effekte erstellen kann und ähnliche Pseudo-Elemente verarbeitet, ist Inhalt dieser ausführlichen Lektion.
    
    Pseudo Elemente
    
    12:30
- Dieser Film handelt vom Umgang mit CSS und Vererbungen und wie die bevorzugte Rangfolge aussieht, wenn man mehrere Selektoren auf das selbe HTML Element anwendet.
  
  Rangfolge und Kaskadierung
  
  14:18
- Es gibt mehrere Schreibweisen, wie Farbwerte einzelner Elemente in CSS angegeben werden können. Außer der üblichen hexadezimalen Schreibweise gibt es noch die Möglichkeit, den RGB Farbwert in Dezimal oder Prozenten anzugeben.
  
  Das CSS Farbmodell
  
  09:31
- Ein großes Ziel: HTML Dokumente so korrekt wie möglich zu halten! Lernen Sie, wie HTML und CSS auf der W3C Website validiert werden, um Fehler aufzustöbern - auch wenn diese auf den ersten Blick keinen Unterschied bei der Anzeige des Browsers hervorrufen würden.
  
  Fallen des CSS-Designs
  
  09:59
Typografie im Web? Ja, genau! CSS macht endlich all das möglich, was mit der Formatierung in HTML nur sehr kompliziert zu bewerkstelligen war. Kommen Sie mit auf eine Reise durch eine Welt voller Buchstaben und Absätze.

Typografische Funktionen

ca. 80 min
- Lassen Sie sich zeigen, wie man dem Text eine Schriftart zuweisen kann. Darüber hinaus ist auch die Verwendung von Schrifttypen wie serif und sans-serif möglich. Es gibt da allerdings noch weitere interessante Optionen, die auf Sie warten ...
  
  Die Schriftfamilie
  
  06:50
- In dieser Lektion wird Ihnen näher gebracht, den Textfluss innerhalb von Absätzen schöner zu gestalten, also einen Text unter anderem fett, kursiv oder als Kapitälchen zu formatieren.
  
  Der Schriftschnitt: Stil-Varianten
  
  07:52
- Schriftgrößen lassen sich in CSS in vielerlei Maßen angeben. Hierbei unterscheidet man zwischen absoluten und relativen Angaben, was bei der Bildschirmausgabe eine nicht unwesentliche Rolle spielt.
  
  Schriftgröße, Abstände und Einheiten
  
  04:59
- Nicht nur als reine Notwendigkeit sondern durchaus als Stilement bei der Gestaltung von Seiten zu verstehen, bieten diese Formatierungsoptionen den notwendigen Spielraum für kreativen Umgang mit Textblöcken.
  
  Ausrichtung, Einzüge und Leerzeichen
  
  09:29
- Selbst die Anpassung der Laufweite von Texten - auch Kerning genannt - ist mit CSS ohne weiteres realisierbar. Lernen Sie in dieser Lektion, wie man richtig vorgeht.
  
  Abstände steuern
  
  02:09
- Unter Text-Decorations in CSS versteht man die Art der Unterstreichung von Texten. Dies ist auch besonders nützlich bei der Formatierung von Links, welche standardmäßig bereits unterstrichen sind, in Ihrem Design aber anders formatiert werden können.
  
  Text-Decoration
  
  04:43
- Das Umwandeln von Buchstaben am Wortanfang in Groß- oder Kleinschreibung ist das zentrale Thema dieses Films. Staunen Sie über Automatisierungen, die früher nur mit sehr viel mehr Tippaufwand möglich waren ...
  
  Texte transformieren
  
  02:12
- Mit soviel CSS Wissen gewappnet fühlen Sie sich bestimmt bereit für einen Intensiv-Workshop. Anhand der bereits bekannten Kaffeehaus-Seite zeigt Ihnen der Autor die Anwendung so mancher Formatierungen.
  
  Workshop Texte und Links
  - Im ersten Teil des Workshops geht es um die Formatierung von Überschriften und Absätzen. Ziel ist es, die Seite ansprechender zu gestalten und schließlich ...
    
    Texte und Links I
    
    12:53
  - ... Hyperlinks anders als gewohnt zu formatieren. Selbst Rollovers - also Veränderungen bei Mauszeigerkontakt - sind dabei sogar recht einfach zu verwirklichen ...
    
    Texte und Links II
    
    12:37
  - ... um letztendlich noch mehr aus CSS herauszuholen. Beispielsweise können durch Selektionen mit Bedingungen direkt auf eine Überschrift folgende Absätze angesprochen werden. Viel effizienter als der jeweilige Verweis in der HTML Datei!
    
    Texte und Links III
    
    10:28
Wagen Sie einen Blick hinter die Kulissen der Browserdarstellungen und entdecken Sie CSS als genialen Regisseur. Ausgestattet mit sovielen Möglichkeiten werden Sie schnell die Vorzüge der Technologie für das Seitenlayout schätzen lernen ...

CSS Layout

ca. 73 min
- Diese Lektion dient als wichtige Basis zur Erklärung der CSS-Möglichkeiten für Inhalte in Rahmen. Lernen Sie die verschiedenen Bezeichnungen kennen, und wie Sie diese konkret auf ein Beispiel anwenden.
  
  Das CSS-Box-Modell
  
  08:14
- Unter margins versteht man Einzüge. So kann man eine Stelle definieren, ab welcher der Seitenrand oder der Rand eines Elements beginnen soll und wie weit er auf der anderen Seite reichen darf.
  
  Die Ränder (margins)
  
  06:33
- Helge Maus erklärt Ihnen, wie Sie Innenabstände definieren können. Diese Abstände reichen vom Rahmen eines beliebigen Element bis zu dessen Inhalt und werden auch als 'padding' bezeichnet.
  
  Die Innenabstände (padding)
  
  04:13
- Um Konturen oder Rahmen per CSS zu erstellen, gibt es unzählige Möglichkeiten zur Definition. Wenn Sie diese beherrschen, erlangen Sie somit viele neue Gestaltungsmöglichkeiten.
  
  Konturen - borders
  
  08:55
- Ob gewollt oder nicht - Scrollbalken ermöglichen selbst winzigen Boxen, auf Webseiten längeren Inhalt darzustellen. Lernen Sie in diesem Film gekonnt mit Breite und Höhe von Boxen umzugehen.
  
  Breiten und Höhen
  
  09:03
- Eine mächtige Fähigkeit von CSS ist die pixelgenaue Positionsangabe von beliebigen Elementen, da dies mit HTML alleine nicht möglich wäre. Möglichkeiten und Problematik werden in dieser Lektion angesprochen und erläutert.
  
  Positionierung
  
  14:17
- Bild über Bild über Text? Reiner Text über Bild? Funktioniert das? Ja, auch das stapelweise Anordnen von Elementen übereinander ist mit CSS recht gut zu bewerkstelligen.
  
  Stapelreihenfolge
  
  08:13
- Freigestellte Bilder und Text rundherum? Lernen Sie zu verstehen, wie die Umfließung von verschiedenen Elementen funktioniert und welche Möglichkeiten es hierfür gibt.
  
  Floats verstehen
  
  07:30
- Die Umfließung ist eingerichet. Doch was, wenn Sie an einem bestimmten Platz einfach nicht passt? Neben der Umfließung kann man die Floats auch unterbrechen, um sich einen bestimmten Bereich frei zu halten.
  
  Floats unterbrechen
  
  03:50
Listen, Bilder, Formulare, Grundlayouts und Co. geben sich in diesem Abschnitt Ihr Stelldichein mit der CSS Technologie. Dabei setzt der Autor stets den Fokus auf das Ergebnis, das man damit erreichen kann.

Design mit CSS

ca. 60 min
- Sozusagen das Handwerkszeug für CSS Designer erhalten Sie in diesem Abschnitt über Grundlayouts in der Webtechnologie. Dieses Wissen werden Sie in diesem Bereich noch sehr oft benötigen ...
  
  Grundlayouts mit CSS
  - Ab durch die Mitte? Eine oft gewünschte Funktion wird in dieser Lektion gründlich erläutert: wie nämlich per CSS der Inhalt der Seite zentriert werden kann.
    
    Auf der Seite zentrieren
    
    04:32
  - In diesem Film sehen Sie, wie eine herkömmliche Navigationsleiste per CSS erstellt wird - allerdings entsprechend effizienter und sauberer als natürlich in der 'HTML-only Variante'.
    
    Eine Navigationsleiste
    
    06:08
  - In diesem Beispiel arbeiten wir mit drei Spalten. Je nachdem wie weit man das Browserfenster aufzieht, soll die Breite der mittleren Spalte variieren, damit die äußeren beiden immer gleich breit und hoch sein können.
    
    Dreispaltiges Layout
    
    04:54
  - Die Skalierung des Browserfensters kann den Inhalt anpassen? Ist das möglich? Selbstverständlich! Den Beweis treten wir am Beispiel mit drei Spalten, die per CSS konfiguriert wurden, an.
    
    Drei flexible Spalten
    
    01:57
  - Einmal mehr bestätigen sich hier die Definitionen aus den ersten Kapiteln dieses Video-Trainings: CSS ersetzt in vielen Bereichen die altbewährten HTML <tags> gemäß der Vorgabe der Trennung zwischen Inhalt und Grafik.
    
    Workshop: CSS ersetzt Tabellen
    
    07:49
- Auch wenn es nur extern eingebundene Objekte sind, steht und fällt das Design einer modernen Webseite zumeist mit dem Einsatz guter und plakativer Bilder. Informationen dazu halten die folgenden Workshops bereit.
  
  Mit Bildern arbeiten
  - Der Autor verrät Ihnen die Möglichkeiten zur Platzierung von Bildern mittels Anweisungen im CSS - und selbstverständlich auch Ausblicke auf alternative Arten und Möglichkeiten, diese in Webseiten einzubinden.
    
    Bilder platzieren
    
    02:41
  - Bei Hintergrundbildern kann man bekanntlich einstellen, wie sie angeordnet werden sollen. Das ist allerdings noch lange nicht alles. Wie fixierte Hintergründe funktionieren, bringen Sie in diesem Film in Erfahrung.
    
    Hintergrundbilder einbauen
    
    08:18
  - Grafisch anspruchsvolle Seiten basieren oftmals auf Bildern, die in die Überschrift eingebunden sind - ein nicht unwichtiges Problem für Suchmaschinen. Hier verrät Ihnen Helge Maus den Trick, dennoch sauber aufgelistet zu werden.
    
    Suchmaschinenfreundliche Grafiken
    
    06:15
- Auch Auflistungen können per CSS formatiert werden. Sehen Sie - als Basis für Ihre eigenen Experimente - wie Texte beispielsweise mit griechischen Zeichen aufgelistet werden.
  
  Listen mit CSS
  
  04:34
- Formulare gehören zum täglichen Aufgabenbereich jedes Webdesigners. Einmal erfasst, werden Sie sehen, wie schnell diese mit CSS erstellt oder formatiert werden können.
  
  Formulare mit CSS
  - Wie Sie beim Erstellen der Formulare zur Positionierung ohne Tabellen auskommen, wird Ihnen hier vermittelt. Lernen Sie im Nu die saubere Art und Weise - eine interessante Alternative!
    
    Tabellen ersetzen
    
    07:18
  - Hier wird nocheinmal auf das vorangehende Beispiel eingegangen und das Anzeigeergebnis dementsprechend verbessert. Weiters wird das HTML Tag <label> vorgestellt.
    
    Formulare in CSS aufbauen
    
    02:58
  - Natürlich kann es auch bei Formularfeldern nicht schaden, diese gestalterisch ein wenig zu verändern, um Sie ins Design einer Seite einzupassen. Innerhalb weniger Minuten lernen Sie, wie das funktioniert!
    
    Formularfelder gestalten
    
    02:56
'Aus der Praxis in die Praxis' lautet das Motto in diesem Kapitel. Der Autor zeigt problematische Verhaltensweisen von Browsern im Zusammenhang mit CSS - und wie man diese umgeht.

CSS Praxis

ca. 9 min
- Nicht genormte Spezifikationen der Umsetzung von CSS in verschiedenen Browsern machen sogenannte Browser Hacks notwendig. Der Autor zeigt Ihnen diese Prinzipien innerhalb des MS Internet Explorers.
  
  Der Box Model Hack
  
  04:19
- Inhalt dieses Films ist die Erstellung einer Browserweiche zum Einbinden von CSS Dateien - und zwar unter Anwendung der Tatsache, dass gängige Browser mit der 'import' Anweisung unterschiedlich umgehen.
  
  Die 'import' Weiche
  
  02:36
- Der 'Flash of unstyled' Effekt ist ein Problem, welches der Internet Explorer 6 mit sich bringt. Durch einen Browser Hack lässt sich dieser zum Glück vermeiden. Mehr dazu erfahren Sie gleich hier ...
  
  Flash of unstyled
  
  02:00

Ob Sie Ihre alte Website auf CSS umstellen oder vom Start weg CSS-basiert programmieren möchten: Mit diesem Videotraining gelangen Sie in zehn Lektionen ans Ziel. Nach einem Einstieg in die Grundlagen erlernen Sie fortgeschrittenere Techniken etwa zur Browser-kompatiblen CSS-Programmierung. Im dritten Schritt erstellen Sie schon Mehrspalten-Layouts und erfahren im vierten Schritt am Beispiel eines konkreten Projekts, wie Sie klassische Praxisprobleme (Druckansicht, Programmierfehler etc.) lösen.

Oft fehlt einfach die Zeit, sich notwendiges Wissen mühsam aus Büchern oder in teuren Schulungen anzueigen. Dieses CSS-Video-Training geht einen neuen Weg: Es ist Ihr ganz persönliches Training zuhause am Rechner. Sie selbst bestimmen das Lerntempo und entscheiden, welche Funktionen von CSS Sie kennen lernen möchten. Sie können das Video-Training Lektion für Lektion durcharbeiten oder gezielt jene Kapitel anspringen, die Sie bei der Erstellung Ihrer Projekte am meisten interessieren.

Empfehlenswert

Sven Zockoll

Das Videotraining ist sehr für die leute zu empfehlen die sich mit CSS beschäftigen und lernen wollen. In dem Video wird von der Pike auf alles rund um die Syntax erklärt. Dabei bleibt der Spass von dem DVD Sprecher nicht aus. Gruß Sven Z.

Jetzt lerne ich CSS Design

Anselm Rapp

Ich hatte bereits fundierte HTML-Kenntnisse, war in CSS aber noch blutiger Laie und musste diese Lücke dringend schließen, um up to date zu bleiben. Aufgrund meiner guten Erfahrungen mit video2brain habe ich hier Ausschau gehalten und prompt ein Video-Training gefunden, das Einsteiger in gewohnter Qualität Schritt für Schritt zu Profis macht. Ich kann es sehr empfehlen.

Lernsoftware vom feinsten

Christiana Kohn

Als Geschenk meiner Freundin, fand diese DVD den Weg in unser Haus. Seit dem bin ich begeistert von dieser Lernsoftware. Kein Lehrer hat diese Geduld, auf Wunsch, immer wieder Inhalte zu wiederholen wie eine solche DVD. Kein Lehrer hat so viel Zeit, immer wieder benötigte Pausen zu machen, und notfalls sogar in der Nacht zu lehren, wie diese DVD. Sechs verschiedene Lern-DVDs habe ich mir jetzt bereits zugelegt und nicht einen Euro bereut. Danke auf diesem Wege, allen Autoren und Sprechern.

Jetzt lerne ich CSS...

jutta parra-kussauer

ich bin begeistert, sehr gelungen, wie auch schon vorher Adobe GoLive CS2, diese beiden Videos und Ihr Buch Einstieg in Adobe Golive CS2 sind eine perfekte Grundlage, um eine eigene Webseite zu erstellen. AUch als Laie, mehr braucht man eigentlich nicht.... Gratulation!