Kaufen

TopStyle Lite – kurzes Tutorial

aus: Little Boxes

Dieses Video ist nur für Käufer des Video-Trainings, sowie video2brain Abonnenten zugänglich.

Holen Sie sich jetzt dieses Video-Training und starten Sie ins Lernvergnügen!

Kaufen

Über dieses Video

"TopStyle Lite" ist ein CSS-Editor und die kostenlose Schnupperversion von TopStyle Pro. Das Video zeigt ein kurzes Tutorial für die Arbeit mit dem Programm.

Sie möchten Webseiten erstellen? Standkonform, barrierefrei und ohne Tabellen? Dann ist "Little Boxes" genau richtig für Sie. Als Praxisleitfaden durch das Labyrinth von (X)HTML und CSS führt es Sie von den ersten Schritten bis zur professionell gestalteten Website. Unterwegs helfen Ihnen zahlreiche praktische Übungen zu allen wichtigen Themen, das Erlernte zu festigen und zu vertiefen.

EUR 39,95

Kaufen

Ähnliche Video-Trainings

Bonusmaterial

"TopStyle Lite" ist ein CSS-Editor und die kostenlose Schnupperversion von TopStyle Pro. Das Video zeigt ein kurzes Tutorial für die Arbeit mit dem Programm.

TopStyle Lite – kurzes Tutorial

06:39
Zwischen den Tabs der horizontalen Navigation ist eine mysteriöse Lücke von genau 5px. Woher diese Lücke kommt – und wie Sie sie beseitigen (könnten) –, zeigt dieses Video.Zwischen den Tabs der horizontalen Navigation ist eine mysteriöse Lücke von genau 5px. Woher diese Lücke kommt – und wie Sie sie beseitigen (könnten) – zeigt dieses Video.

Horizontale Navigation – lückenlos

05:56
Der HTML-Quelltext kann durch ein paar zusätzliche Überschriften und eine neue Klasse ".versteckmich" ohne viel Aufwand besser strukturiert werden.

Optimierung des HTML-Quelltextes

04:05

In diesem Kapitel geht es um den Unterschied zwischen Web- und Papierseiten. Natürlich würde niemand ernsthaft behaupten, das Web sei aus Papier, aber die Unterschiede sind weitreichender, als man denkt.

Das Web ist nicht aus Papier

ca. 17 min
- Das Web ist nicht aus Papier und Webseiten verhalten sich anders als Papierseiten. Wer das nicht weiß, wird beim Umgang mit Webseiten unweigerlich Enttäuschungen erleben.
  
  Enttäuschte Erwartungen
  
  02:43
- Auf Papierseiten kontrolliert der Autor das Aussehen, auf Webseiten kann er nur Wünsche äußern. Der Betrachter bestimmt letztendlich, wie die Seite in seinem Browser aussieht.
  
  Der Autor hat keine Kontrolle
  
  02:51
- Der Browser bekommt vom Webserver nicht die fertige Webseite, sondern nur den Quelltext: eine Art Bauplan, der je nach Umgebung unterschiedlich dargestellt wird.
  
  Webseiten sehen immer anders aus
  
  02:29
- Die Zeitung: in der Straßenbahn klein, auf dem Schreibtisch groß und abends mit Sütterlin. Webseiten sind von Natur aus flexibel und verlieren das nur durch falsche Gestaltung – oder im Druck.
  
  Papierseiten sind starr – Webseiten flexibel
  
  01:57
- Webseiten bestehen aus Schichten: HTML für den Inhalt, CSS zur Gestaltung und JavaScript für das Verhalten. Eine Webseite muss nicht überall gleich aussehen, sondern überall – schlicht – funktionieren.
  
  Mediengerechte Webseiten
  
  04:28
- Wenn mediengerechte Webseiten so toll sind, warum hat man dann früher mit HTML-Tabellen gelayoutet? Ein kurzer historischer Rückblick zeigt den Weg zum modernen Webdesign
  
  Von Layout-Tabellen zu CSS
  
  02:09
HTML ist einfach, aber wichtig: Es erstellt die rechteckigen Kästchen auf den Webseiten, die später mit CSS gestaltet werden. In diesem Kapitel sehen Sie, wie HTML funktioniert und wie man die wichtigsten Elemente korrekt einsetzt.

HTML – Kisten erstellen

ca. 86 min
- In diesem Video installieren Sie zwei nützliche Erweiterungen (Add-Ons) für den Mozilla Firefox: "View Source Chart", das den Seitenquelltext als Kästchen formatiert anzeigt, und die "Web Developer Toolbar", die zahlreiche nützliche Werkzeuge bereitstellt.
  
  Zwei Erweiterungen für Firefox installieren
  
  05:21
- Sie erfahren in diesem Abschnitt, was HTML bedeutet und wie das Grundgerüst aussieht, das jede Webseite wie ein Skelett zusammenhält.
  
  So funktioniert HTML
  - Webseiten bestehen aus rechteckigen Kästchen, die mit HTML erstellt und mit CSS gestaltet werden. HTML ist (sehr) frei übersetzt eine "HyperText-Etiketten-Dranklebe-Sprache".
    
    HTML – Hypertext und Etiketten
    
    06:24
  - Jede Webseite hat ein aus vier Teilen bestehendes Grundgerüst: "DocType", "html", "head" (inklusive "title") und "body". In diesem Video erstellen Sie ein komplettes Grundgerüst, das der Trainer detailliert erklärt.
    
    Das HTML-Grundgerüst
    
    10:55
- HTML ist im Vergleich zu Englisch oder Kisuaheli eine einfache Sprache. Es gibt insgesamt nur etwa 85 verschiedene Elemente, von denen Sie die wichtigsten in diesem Abschnitt kennenlernen.
  
  Die wichtigsten HTML-Elemente
  - Eine typische Webseite besteht aus einem Kopfbereich, einem Navigationsbereich, dem Inhaltsbereich und einem Fußbereich. Zusätzlich umschließt ein fünfter Bereich alle anderen Elemente wie ein Schutzumschlag. Alle diese Bereiche erstellen Sie mit dem Element "div".
    
    Seiten in Bereiche einteilen mit "div"
    
    06:35
  - Webseiten werden oft mehr überflogen als gelesen. Überschriften, Absätze, gezielte Hervorhebungen und Listen helfen, den Text zu strukturieren und aufzulockern. In diesem Video geht es um Überschriften und Absätze.
    
    Überschriften und Absätze
    
    04:42
  - Mit den Elementen "strong" und "em" heben Sie Textpassagen auf Webseiten hervor. Sonderzeichen wie die deutschen Umlaute müssen Sie kodieren, damit sie jeder Browser weltweit korrekt darstellt.
    
    Text hervorheben und Sonderzeichen
    
    06:23
  - Es gibt zwei Arten von rechteckigen Kästchen, die sich unterschiedlich verhalten: Block- und Inline-Elemente. Der Browser gestaltet diese Kästchen, sofern nichts anderes definiert wurde, anhand seines eingebauten Stylesheets.
    
    Block- und Inline-Elemente
    
    05:33
  - Geordnete und ungeordnete Listen sind ein wichtiges Stilmittel zur Strukturierung von Text. Sie unterbrechen den Textfluss und die Aufzählungspunkte bieten dem Auge des Betrachters "Landeplätze" beim Überfliegen der Webseite.
    
    Aufzählungen und Nummerierungen
    
    03:19
  - Listen dürfen ineinander verschachtelt werden. Dabei ist es wichtig, die korrekte Grammatik einzuhalten. Dieses Video zeigt, wie das geht.
    
    Verschachtelte Listen
    
    03:29
  - Hyperlinks sind das "Hyper" in Hypertext. Das Element, mit dem Sie einen Hyperlink definieren, heißt schlicht und einfach "a".
    
    Hyperlinks: das Besondere am WWW
    
    04:36
  - Im Quelltext einer Webseite steht nur die Wegbeschreibung zur Grafik, die mit dem Element "img" vorgegeben ist. Webseite und Grafik bleiben also – anders als bei Papierseiten – getrennt und werden erst im Browser-Fenster verbunden.
    
    Die Wegbeschreibung zur Grafik: "img"
    
    06:21
  - Der Fußbereich einer Webseite ist bestens geeignet für Informationen über die Site oder das Unternehmen – zum Beispiel die Kontaktadresse.
    
    Die Kontaktadresse im Fußbereich
    
    04:44
- Eine Navigation ist im Prinzip nichts anderes als eine Aufzählung von Hyperlinks; sie ist deshalb meist als ungeordnete Liste notiert.
  
  Eine Navigation erstellen
  
  03:18
- Skip bedeutet im Deutschen Sprung: Ein Skip-Link springt an eine andere Stelle – weiter unten oder oben – auf derselben Webseite.
  
  Skip-Links: Hyperlinks auf derselben Seite
  
  04:04
- Nach Abschluss der Arbeit am HTML-Quelltext bedienen Sie sich der Hilfe eines amtlich geprüften Grammatikspezialisten: der Validator des W3C.
  
  HTML überprüfen mit dem Validator
  
  05:13
- In diesem Video erstellen Sie eine zweite Webseite. Mit der integrierten Navigation springen Sie zwischen beiden Seiten hin und her.
  
  Die Kontaktseite: von der Seite zur Site
  
  05:02
Mit CSS gestalten Sie die mit HTML erstellten Boxen. Bis zum Ende dieses Kapitels bauen Sie eine einfache, mediengerechte Website mit horizontaler Registernavigation und funktionierendem Kontaktformular.

CSS-Grundlagen – Kisten gestalten

ca. 186 min
- Sie erstellen ein leeres Stylesheet, schreiben einen Kommentar hinein und verbinden es mit den beiden Webseiten "index.html" und "kontakt.html".
  
  Das erste eigene Stylesheet
  
  03:57
- Zunächst gestalten Sie Schriften und Farben, machen die Hyperlinks ansehnlich und blenden den Skip-Link aus. Zum Abschluss lernen Sie den ersten Teil der Kaskade kennen.
  
  Schriften und Farben gestalten
  - In diesem Video definieren Sie die Hintergrund- und Schriftfarben für "body", "#wrapper", den Kopfbereich und das Logo der Seite.
    
    Hintergrund- und Schriftfarben gestalten
    
    05:46
  - Das Gestalten von Schriftart- und Schriftgröße für die gesamte Webseite erledigen Sie mit wenigen Anweisungen.
    
    Schriftart und -größe gestalten
    
    06:49
  - Hyperlinks zu setzen, ist ein wichtiges Thema. In diesem Video entfernen Sie die Unterstreichung der Links und geben besuchten und unbesuchten Links verschiedene Farben.
    
    Hyperlinks gestalten, Teil 1
    
    03:53
  - Hyperlinks kennen besondere Zustände, die alle gesondert gestaltet werden können: wenn der Mauszeiger über dem Link schwebt, wenn der Link per Tastatur angewählt wurde oder wenn er gerade angeklickt wird.
    
    Hyperlinks gestalten, Teil 2
    
    04:49
  - Da der Skip-Link ganz oben auf der Seite in erster Linie für Bildschirmlesegeräte dient, blenden Sie ihn mit CSS für das normale Bildschirmlayout aus.
    
    Skip-Link ausblenden
    
    03:53
  - Es gibt drei Möglichkeiten, CSS-Anweisungen zu speichern: in einer externen Datei, im Element "style" zwischen "<head>" und "</head>" einer Webseite oder im Attribut "style" unmittelbar in einem Element.
    
    Die Kaskade, Teil 1: Styles speichern
    
    05:32
- Der effektive Umgang mit Selektoren ist beim Gestalten mit CSS die halbe Miete. Der richtige Einsatz von Maßeinheiten und Farben ist ebenfalls wichtig. Beides lernen Sie in diesem Abschnitt kennen.
  
  Selektoren, Einheiten und Farben
  - CSS kennt wie jede Sprache Vokabeln: "Selektor", "Deklaration", "property" und "value" veranschaulicht dieses Video.
    
    Style: der Aufbau einer CSS-Regel
    
    05:23
  - Mit verschachtelten Selektoren (auch Nachfahrenselektoren oder kontextuelle Selektoren genannt) beschränken Sie die Gestaltung auf bestimmte Bereiche einer Webseite.
    
    Verschachtelte Selektoren
    
    05:37
  - IDs und Klassen erlauben es Ihnen, HTML-Elemente individuell zu benennen. Dieses Video erklärt die Unterschiede zwischen den Attributen "id" und "class".
    
    Namen vergeben mit "id" und "class"
    
    03:56
  - Spezifität ist ein komplizierter Name für das an sich einfache Punktesystem für Selektoren. Jeder Selektor bekommt eine bestimmte Punktanzahl, anhand derer der Browser entscheidet, wie ein Element aussehen soll.
    
    Die Kaskade, Teil 2: Spezifität
    
    06:15
  - CSS kennt jede Menge verschiedener Maßeinheiten. Besonders am Anfang wird die Wahl leicht zur Qual werden, deshalb gibt dieser Film eine kleine Übersicht zu "px", "em", "%" und Co.
    
    Einheiten in CSS: die Qual der Wahl
    
    05:42
  - Der Bildschirm mischt alle Farben aus Rot, Grün und Blau. Für die Definition der Farbanteile haben Sie verschiedene Möglichkeiten – die wichtigsten zeigt dieser Film. Außerdem gibt es einige Tipps zur Erstellung von Farbschemata.
    
    Farben definieren und auswählen
    
    05:50
- Das Box-Modell ist eine der wichtigsten Grundlagen für das Gestalten mit CSS. Neben "padding", "border" und "margin" erfahren Sie noch einiges über das Einbinden von Hintergrundgrafiken.
  
  Das Box-Modell: Abstände gestalten
  - Webseiten bestehen aus rechteckigen Kästchen ("Boxes"), die alle nach demselben Schema aufgebaut sind, dem Box-Modell. Dieses Box-Modell erklärt der Trainer hier, inklusive der etwas gewöhnungsbedürftigen Berechnung der Gesamtbreite.
    
    Das Box-Modell in der Übersicht
    
    06:21
  - Alle Browser haben ein eingebautes Stylesheet mit zum Teil unterschiedlichen Vorgaben für "padding" und "margin". Setzen Sie die Vorgaben auf null und restaurieren Sie sie anschließend: Beides zusammen ist die "Kalibrierung".
    
    Kalibrierung: Abstände auf null
    
    04:25
  - In diesem Film bekommen Sie eine leichte Design-Hilfe: Mit "width" geben Sie einem Element eine feste Breite und mit "margin" können Sie es zentrieren.
    
    Seite zentrieren mit "width" und "margin"
    
    02:38
  - Mit "border" definieren Sie eine Rahmenlinie für ein Element. Mit "padding" und "margin" bestimmen Sie die Abstände nach innen und nach außen.
    
    Eine Rahmenlinie erstellen: "border"
    
    02:48
  - In diesem Video wird der Abstand zwischen den vier Layoutbereichen und dem umgebenden Wrapper definiert. Nebenbei lernen Sie die Kurzschreibweise für "padding" kennen (die übrigens auch für "margin" gilt).
    
    Der Innenabstand: "padding"
    
    05:31
  - Bei der farblichen Gestaltung einer Webseite ist das Box-Modell besonders wichtig. Hier eine kleine Zusammenfassung am Beispiel der Logo-Grafik im Kopfbereich.
    
    Box-Modell und farbliche Gestaltung
    
    02:29
  - Dekorative Grafiken sollten im CSS als Hintergrundgrafik eingebunden werden. Sie erstellen in diesem Video eine Farbverlaufsgrafik, die Sie dann im Editor einbinden.
    
    Die Hintergrundgrafik "background-image"
    
    04:42
  - Eine Hintergrundgrafik wird horizontal und vertikal so oft wiederholt ("gekachelt"), bis die zur Verfügung stehende Fläche gefüllt ist. Mit "background-repeat" kontrollieren Sie dieses Verhalten.
    
    Eine Hintergrundgrafik kacheln
    
    03:47
- Ordnung ist das halbe Leben und bei CSS manchmal auch mehr als das. Dieser Abschnitt enthält einige Anregungen zur Organisation Ihrer Stylesheets. Nach dem Aufräumen validieren Sie Ihr CSS.
  
  Ordnung halten im Stylesheet
  - Das Stylesheet wird immer länger und damit unübersichtlicher. Bereiten Sie das Aufräumen vor: Kopieren Sie das Stylesheet und teilen Sie es in Abschnitte.
    
    Das Stylesheet in Abschnitte unterteilen
    
    04:47
  - In diesem Video sehen Sie, wie Sie die Styles von der Kopie in die vorbereitete Originaldatei kopieren und dabei sortieren.
    
    Das Stylesheet aufräumen
    
    05:55
  - Nach dem Aufräumen ist die beste Zeit, um die Styles vom CSS-Validator auf Grammatik- und Flüchtigkeitsfehler überprüfen zu lassen. Vorher müssen Sie noch eine springende Bildlaufleiste im Mozilla Firefox mit einem einfachen Style zur Raison bringen ...
    
    Das Stylesheet validieren
    
    02:55
- Grundlage einer Navigation ist oft nur eine ungeordnete Liste. Wie einfach Sie aus einer normalen Liste eine ansprechende und benutzerfreundliche Navigation erstellen, erfahren Sie in diesem Abschnitt.
  
  Eine horizontale Navigation erstellen
  - Firebug ist eine Erweiterung für den Firefox-Browser, die beim Analysieren von Fehlern ("Bugs") auf Webseiten fast unentbehrlich wird.
    
    Firebug installieren
    
    04:41
  - Per "display:inline" platzieren Sie die Listenelemente der Navigation nebeneinander. Anschließend beseitigen Sie mithilfe von Firebug ein paar kleinere Abstandsprobleme.
    
    Eine einfache, horizontale Navigation
    
    06:52
  - Aus der einfachen, horizontalen Navigation bauen Sie eine Navigation mit Registerkarten ("Tabs"). In diesem Video sehen Sie die nötigen Vorbereitungen.
    
    "Tabbed Navigation" vorbereiten
    
    03:06
  - Die Navigationspunkte gestalten Sie so, dass sie wie eine Registerkarte aussehen. Diese soll sich nach unten hin öffnen, wenn der Mauszeiger darüber fährt.
    
    "Tabbed Navigation" erstellen
    
    05:11
  - Durch eine geschickte Kombination von IDs erreichen Sie, dass der Besucher eine Anzeige erhält, auf welcher Seite er sich gerade befindet.
    
    "Sie sind hier": aktuelle Seite hervorheben
    
    05:40
- Von der Wiege bis zur Bahre – Formulare, Formulare. Damit Ihre Besucher Sie problemlos erreichen, erstellen und gestalten Sie ein voll funktionsfähiges Kontaktformular.
  
  Ein Formular für die Kontaktseite
  - Im Web basieren alle Benutzerinteraktionen auf Formularen. Mit diesem Video erstellen Sie auf der Kontaktseite ein einfaches HTML-Formular.
    
    Das Kontaktformular erstellen
    
    06:50
  - Mit ein paar einfachen CSS-Regeln gestalten Sie das Formular, so dass es viel ansprechender aussieht. Wie das geht, zeigt dieser Film.
    
    Das Kontaktformular gestalten
    
    06:40
  - Ein JavaScript-Einzeiler positioniert den Cursor beim Laden der Kontaktseite im ersten Formularfeld: Auf diese Weise kann der Benutzer sofort mit der Eingabe beginnen.
    
    Den Cursor in das erste Feld setzen
    
    02:59
  - Das Kontaktformular bekommt ein Reiseziel für die Formulardaten sowie die E-Mail-Adresse des Empfängers. Ein Test zeigt, ob alles funktioniert.
    
    Das fertige Kontaktformular testen
    
    07:30
- CSS gestaltet Webseiten nicht nur für den Bildschirm, sondern auch für die Ausgabe auf einen Drucker. Was Sie dabei beachten müssen, zeigt dieser Abschnitt.
  
  Eine Druckversion für die Webseiten
  - Mit CSS können Sie Webseiten nicht nur für den Bildschirm gestalten, sondern auch für die Ausgabe auf einen Drucker. In diesem Video erstellen Sie ein neues Stylesheet und verbinden es mit den HTML-Seiten.
    
    Stylesheet für die Druckversion erstellen
    
    04:13
  - Bei der Gestaltung der Druckversion nutzen Sie zur Schriftgestaltung wie etwa in Word die Einheit "pt". Außerdem blenden Sie Skip-Link und Navigation aus, denn auf Papier brauchen Sie die nicht.
    
    Die Druckversion gestalten
    
    06:19
- Die Kaskade gibt den "Cascading Style Sheets" den Namen. Sie erfahren, wie Browser eine Webseite sehen und wonach sie entscheiden, wie die Boxen aussehen.
  
  Kaskade, Vererbung und Standardwert
  - Eine Webseite ist eine hierarchische Verschachtelung von HTML-Elementen. Aus dem Quelltext erstellt der Browser zunächst ein Modell: Begutachten Sie dieses "Document Object Model" mit dem Firefox.
    
    Der DOM-Inspector
    
    03:14
  - Auf der Suche nach einer Gestaltungsanweisung prüft der Browser drei Schemen der Reihe nach durch: Kaskade, Vererbung und Standardwert. Das Beispiel zeigt, wie die Navigationsliste zu einem Wert für "margin-bottom" kommt.
    
    Kaskade, Vererbung und Standardwert
    
    08:37
Um mehrspaltige Layouts zu erstellen, müssen Sie die Kisten auf der Seite hin- und herschieben. In diesem Kapitel lernen Sie verschiedene Methoden kennen, um mehrspaltige Webseiten aufzubauen.

CSS-Layout – Kisten positionieren

ca. 154 min
- Dieser Abschnitt zeigt Ihnen die Geheimnisse des "Flow" sowie der relativen und absoluten Positionierung von Elementen. Außerdem erfahren Sie, weshalb selbst die absolute Positionierung ziemlich flexibel ist.
  
  Der "Flow" und die Positionierung
  - Die Elemente auf einer Webseite folgen von Natur aus dem "document flow", dem "Fluss des Dokuments". Das Prinzip und die daran orientierte relative Positionierung stellt dieses Video vor.
    
    Let it flow: der normale Fluss der Boxen
    
    07:04
  - Absolute Positionierung nimmt einzelne Elemente vollständig aus dem Fluss heraus. Alle anderen Elemente auf der Seite verhalten sich so, als wäre das absolut positionierte Element gar nicht vorhanden.
    
    Absolute Positionierung
    
    03:46
  - Der Inhalt dieses Films: Positionieren Sie den Slogan "Webseiten gestalten mit CSS. Grundlagen." absolut – und zwar relativ zum Kopfbereich.
    
    Den Slogan im Kopfbereich positionieren
    
    06:13
- "Float" ist die grundlegende Technik hinter vielen modernen Weblayouts. In diesem Abschnitt erfahren Sie das Wichtigste über die Grundlagen von schwebenden Boxen.
  
  "Float": schwebende Boxen
  - Alles im Fluss: "Floating Elements" erheben sich aus dem Fluss, schweben nach oben und driften dann nach rechts oder links. Das klassische Einsatzgebiet ist die Positionierung von Grafiken im Fließtext.
    
    Text um Bilder fließen lassen
    
    06:00
  - Für einen ersten Entwurf mögen in Elemente eingebaute Inline-Styles genügen. Gerade unter dem Aspekt der Wiederverwendbarkeit sind Klassen jedoch viel effektiver. In diesem Video erstellen Sie zwei Klassen zum "Floaten" von Bildern nach links und rechts.
    
    Klassen für den Float: links und rechts
    
    03:38
  - Um nachfolgende Elemente unterhalb einer gefloateten Box beginnen zu lassen, nutzen Sie die Eigenschaft "clear": "Clearen" Sie eine eigene Klasse.
    
    Float beenden mit "clear"
    
    05:18
  - Die Übungen in diesem Film helfen Ihnen, das manchmal unerwartete Verhalten beim Floaten mit mehreren Boxen besser zu verstehen.
    
    Floaten mit mehreren Boxen
    
    06:20
- Das Beispiel einer einfachen Galerie demonstriert eines der größten Probleme beim Umgang mit "Float" – zeigt aber auch gleich ein paar Lösungswege.
  
  Floats umschließen
  - Float bereitet beim Layouten manchmal Probleme, weil ein gefloatetes Element von seinem Eltern-Element nicht automatisch umschlossen wird. Dieses Video zeigt die Ausgangsposition für eine kleine Galerie mit zwei Landschaftsbildern.
    
    Problem mit gefloateten Elementen
    
    05:57
  - Dieses Video zeigt drei Möglichkeiten, gefloatete Elemente zu umschließen. Die einfachste: Das umgebende Element bekommt die Anweisung "overflow:hidden".
    
    Lösung: Elemente umschließen
    
    07:55
  - Die Galerie ist so angelegt, dass sie problemlos in die Beispielsite integriert werden kann. In diesem Video sehen Sie die dazu notwendigen Schritte.
    
    Die Galerie in die Site einbauen
    
    07:13
  - Gestalten Sie die Galerie ein wenig ansprechender, bekommt der Internet Explorer 6 plötzlich Probleme bei der Darstellung. Keine Sorge: Erklärung und Patch folgen auf dem Fuße.
    
    Die Galerie verschönern
    
    06:44
- Die klassischen Mehrspaltenlayouts nutzen absolute Positionierung. Vor- und Nachteile sowie Beispiele für zwei- und dreispaltige Layouts zeigt dieser Abschnitt.
  
  Mehrspaltig – absolute Positionierung
  - Die aktuelle CSS-Version 2.1 sieht keine mehrspaltigen Layouts vor, doch findige Webdesigner haben Umgehungen erdacht. Die erste basiert auf "position:absolute", kombiniert mit einem großen "margin". Beginnen Sie mit einem einfachen, zweispaltigen Layout!
    
    Zweispaltiges Layout
    
    05:57
  - Das einfache zweispaltige Layout bekommt einen durchgehenden Kopfbereich. Den realisieren Sie auf zwei verschiedene Arten …
    
    Durchgehender Kopfbereich
    
    05:44
  - Erweitern Sie das zweispaltige Layout ganz einfach auf drei Spalten. Ein durchgehender Fußbereich und absolut positioniertes Layout passen hingegen nicht zuverlässig zusammen.
    
    Drei Spalten – ohne Fußbereich
    
    05:23
- So wird Ihr Mehrspaltenlayout stabil, einfach und vielseitig: mit durchgehender Kopf- und Fußzeile und einer farbigen Seitenspalte. Das alles in zwei oder drei Spalten.
  
  Mehrspaltig mit "float" und "margin"
  - Seit es brauchbare Lösungen gibt, gefloatete Elemente zu umschließen, nutzen immer mehr Webdesigner "float" als Basis für mehrspaltige Layouts. In diesem Video erstellen Sie den ersten Teil eines zweispaltigen Layouts mit "float" und "margin".
    
    Zweispaltiges Layout, Teil 1
    
    04:26
  - In diesem Film, dem zweiten Teil für Ihr Zweispaltenlayout, gestalten Sie die Hyperlinks in der Navigationsspalte. So wird’s gemacht!
    
    Zweispaltiges Layout, Teil 2
    
    04:25
  - Mit Tricks zum Ziel: "Faux columns" heißt die Technik, die mithilfe einer Hintergrundgrafik optisch eine Spalte vortäuscht.
    
    Zweispaltiges Layout, Teil 3
    
    04:34
  - Das zweispaltige Layout auf der Basis von "float" und "margin" lässt sich leicht in ein dreispaltiges Layout verwandeln. Genau darum geht es in diesem Video.
    
    Dreispaltiges Layout
    
    05:54
  - Ein potenzielles Problem bei mehrspaltigen Layouts mit float und margin ist die globale Wirkung von "clear". Dieses Problem veranschaulicht dieses Video.
    
    Die globale Wirkung von "clear"
    
    04:38
- "Opposing floats" sind die Alternative zu "float" und "margin". Lernen Sie die Vor- und Nachteile der beiden Methoden kennen.
  
  Entgegengesetzte Floats
  - Eine weitere Methode für mehrspaltige Layouts sind entgegengesetzte Floats ("opposing floats"): Ein Bereich floatet nach links, der andere nach rechts.
    
    Zweispaltiges Layout
    
    05:57
  - Für die Erweiterung von zwei auf drei Spalten müssen Sie bei "opposing floats" auf jeder HTML-Seite den Quelltext umschreiben.
    
    Dreispaltiges Layout
    
    07:08
- Zum Abschluss machen Sie einen kurzen Ausflug in die Welt der flexiblen Layouts: Lernen Sie ein paar Quellen für fertige Layoutvorlagen kennen.
  
  Layouts für Fortgeschrittene
  - Bisher haben Sie alle Layouts mit festen Pixelbreiten erstellt. Bevor Sie Breitenangaben in "%" und "em" kennenlernen, zeigt Ihnen dieser Film das unterschiedliche Zoomverhalten der Browser. Denn bei einem Seitenzoom ist auch ein pixelbasiertes Layout flexibel.
    
    Text-Zoom und Page-Zoom
    
    04:29
  - Auf Basis des zweispaltigen Layouts mit "float" und "margin" zeigt dieses Video, wie Sie durch geschickte Kombination von "%" und "em" ein flexibles und doch stabiles Layout schaffen.
    
    Flexibles zweispaltiges Layout
    
    05:24
  - Im weiten Web bieten viele Seiten fertige CSS-Designs zum Download an – und das sogar kostenlos. Einige davon stellt dieses Video vor.
    
    Fertige CSS-Layouts
    
    07:08
- Die Welt von CSS ist heil – die der Browser aber nicht. Erfahren Sie das Wichtigste über Patches, Hacks und Browser-Weichen.
  
  Patches: Flicken im CSS
  - Auch die Browser haben erst im Laufe der Jahre CSS gelernt. Dieses Video zeigt, wie Sie herausfinden, welcher Browser welche Eigenschaften unterstützt. Außerdem entdecken Sie einige Quellen für CSS-Patches.
    
    Browsercharts und Patches
    
    06:24
  - Der Internet Explorer ist – in seinen verschiedenen Versionen – das Hauptziel des CSS-Patchwork. Das Video zeigt einen kurzen Überblick über seine Entwicklung und die Lösung für die Patch-Probleme.
    
    IE und Conditional Comments
    
    03:48
  - Das Beispiel einer horizontalen Navigation zeigt, wie Sie dem Internet Explorer 7 per "Conditional Comment" einen passenden Patch für den Page-Zoom liefern.
    
    Conditional Comments in Aktion
    
    06:30

TopStyle Lite – kurzes Tutorial

aus: Little Boxes

Über dieses Video

Auszug aus: Little Boxes

Bonusmaterial

Filminformationen