Flexible Boxes – Eine Einführung in moderne Websites

Für attraktive Webseiten auf allen Geräten
4.0 (1 rating) Instead of using a simple lifetime average, Udemy calculates a
course's star rating by considering a number of different factors
such as the number of ratings, the age of ratings, and the
likelihood of fraudulent ratings.
5 students enrolled
$120
Take This Course
  • Lectures 99
  • Length 10.5 hours
  • Skill Level All Levels
  • Languages German
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
Wishlisted Wishlist

How taking a course works

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

Learn and practice real-world skills and achieve your goals.

About This Course

Published 9/2015 German

Course Description

Sie möchten Webseiten bauen, die modernen Anforderungen an flexibles Design genügen? Der beliebte Autor und IT-Dozent Peter Müller zeigt Ihnen, wie Sie flexible Webseiten von Grund auf erstellen, die auf allen Anzeigegeräten gut aussehen und funktionieren. Egal, ob Mobile First, flexible Grids, Media Queries, HTML5 oder Gestaltung mit CSS3 – in diesem Video-Training erfahren Sie, wie Sie moderne Webtechniken und Design-Konzepte für eigene Webprojekte nutzen.

  • Eigene Websites entwickeln mit HTML5 und CSS3
  • Responsive Webdesign verstehen und einsetzen
  • Mobile Navigation, Media Queries und Gridlayouts
Peter Müller arbeitet seit vielen Jahren als IT-Dozent und versteht es, komplizierte Sachverhalte auf einfache und unterhaltsame Weise darzustellen. Er ist als Autor des CSS-Bestsellers »Little Boxes« bekannt, dessen neueste Auflage unter dem Titel »Einstieg in CSS« beim Rheinwerk Verlag erschienen ist.

What are the requirements?

  • Dies ist ein umfassender Kurs, daher sind Vorkenntnisse nicht erforderlich.
  • Konkrete Projektideen sind hilfreich, um das gelernte Wissen direkt umzusetzen.

What am I going to get from this course?

  • Desktop-PC, Smartphone, Tablet – Ihre Website soll auf allen Geräten gut aussehen. Peter Müller zeigt Ihnen in dieser umfassenden Einführung, wie Sie Webseiten responsiv gestalten und mobile Navigationen entwickeln.
  • Lernen Sie die neuen semantischen HTML5-Elemente wie zum Beispiel »nav«, »section« und »article« kennen und binden Sie Audio- und Videodateien per HTML5-Tag in Ihre Website ein.
  • Entdecken Sie die modernen Layoutmöglichkeiten von CSS3. In diesem Training erfahren Sie, wie Sie Texte und Boxen gestalten oder Farbverläufe und Schlagschatten einsetzen.

What is the target audience?

  • Jeder, der repsonsive Websites entwickeln möchte
  • Webdesigner, die HTML5 und CSS3 beherrschen möchten
  • Entwickler, die moderne Webseiten erstellen möchten

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.

Curriculum

Section 1: Was sich im Web geändert hat
00:27

In diesem Video erhalten Sie einen Überblick über die Inhalte des Kapitels. Sie erfahren, wie sich das responsive Webdesign entwickelt hat und lernen die wichtigsten Begriffe und Konzepte kennen.

03:14

Damit Sie den Überblick nicht verlieren, erklärt Ihnen Peter Müller in diesem Video zunächst den Aufbau des Lernkurses. In den nächsten Stunden befassen Sie sich mit drei Kernthemen: den Neuerungen von HTML5, der modernen Gestaltung mit CSS3 und der praktischen Umsetzung des Konzepts »Responsive Webdesign«.

04:12

Eine wichtige Grundhaltung jedes Webdesigners sollte es sein, nicht jedes Element einer Website kontrollieren zu wollen. Die Webseiten sollten so flexibel gestaltet werden, dass der Nutzer die Möglichkeit hat, stets eigene Einstellungen vorzunehmen.

04:28

Peter Müller gibt Ihnen in diesem Video einen Überblick über die verschiedenen Layouttechniken im Web. Dabei erfahren Sie, wie sich die Gestaltung von Webseiten im Laufe der Zeit gewandelt hat – von Tabellenlayouts und CSS bis hin zu den heutigen flexiblen Rasterlayouts.

05:28

Fast jedes Smartphone kann Webseiten anzeigen. Daher ist es wichtig, dass das Design nicht nur auf großen sondern auch auf kleinen Bildschirmen gut funktioniert. In diesem Video erfahren Sie, wie sich aus diesem Problem die Idee des »Responsive Webdesign« entwickelt hat.

04:40

In diesem Video erläutert Ihnen Peter Müller, welche Konzepte sich hinter dem Begriff »Responsive Webdesign« verbergen. Dabei erfahren Sie, wie eine flexible Webseite aufgebaut ist und in welchen Punkten sich responsives und adaptives Layout unterscheiden.

03:56

In diesem Video erklärt Ihnen Peter Müller, wie Sie eine Webseite nach der Progressive-Enhancement-Methode entwickeln. Dabei beginnen Sie mit einer Smartphone-Variante und erweitern Funktion und Design der Seite für alle anderen Ausgabegeräte bis hin zur Desktop-Version.

04:16

Um ein Gefühl für das spätere Aussehen und die Funktionen einer geplanten Website zu bekommen, lohnt es sich, einen Prototypen zu erstellen. Wie Sie diesen Prototypen erzeugen und welche Werkzeuge Ihnen dabei behilflich sind, zeigt Ihnen Peter Müller in diesem Video.

03:58

In diesem Video erfahren Sie, was mit dem Wort »mobil« gemeint ist und in welchen Punkten sich »stationäres« und »mobiles« Web unterscheiden. Eine Kernfrage ist dabei, wie Sie Ihr Design an wirklich alle Displaygrößen anpassen können – egal, ob Sie die Größe kennen oder nicht.

04:46

Unter Webdesignern ist nach wie vor umstritten, ob die Smartphone- oder die Desktop-Variante der Ausgangspunkt bei der Gestaltung sein sollte. Peter Müller erläutert Ihnen in diesem Video sowohl die Vor- als auch die Nachteile von »Mobile First« und »Desktop First«.

02:21

In diesem Video fasst Peter Müller zusammen, in welcher Weise sich das Web in den letzten Jahren verändert hat. Außerdem wagt er einen Ausblick auf die Zukunft des responsiven Webdesigns.

Übungsdateien zu den einzelnen Abschnitten
Article
Section 2: Neuerungen in HTML5
00:23

In diesem Video gibt Ihnen Ihr Trainer eine Übersicht über die Inhalte des Kapitels. Sie machen Sich mit der Geschichte von HTML vertraut, lernen die neuen semantischen Strukturelemente von HTML5 kennen und gestalten eine einfache Beispielseite.

14:14

HTML hat sich im Laufe der Zeit stark verändert. Werfen Sie gemeinsam mit Peter Müller einen Blick auf die Geschichte von HTML und erfahren Sie in diesem Video, wie sich HTML über XHTML bis hin zu HTML5 weiter entwickelt hat.

03:36

HTML5 bringt viele neue Technologien mit, die Ihnen helfen, zukunftssichere Websites zu entwickeln. In diesem Video erfahren Sie, welche dieser Technologien sich für flexible Webseiten eignen. Zudem werfen Sie einen umfassenden Blick auf die Möglichkeiten von HTML5.

06:16

Peter Müller stellt Ihnen in diesem Video hilfreiche Quellen und zusätzliche Dokumentationen zu HTML5 vor. Außerdem erfahren Sie, wie Sie prüfen können, ob ein HTML5-Element auch von älteren Browsern unterstützt wird.

07:20

In diesem Video zeigt Ihnen Peter Müller, wie das HTML-Grundgerüst einer Webseite aufgebaut ist. Dabei lernen Sie das HTML5-Bones-Template kennen, welches bereits alle grundlegenden HTML-Elemente für die Basisstruktur Ihrer Webseite enthält.

06:28

HTML5 bringt viele neue semantische Elemente in Form von HTML-Tags mit, die Ihnen bei der Gestaltung einer Webseite helfen. Peter Müller stellt Ihnen in diesem Video die wichtigsten Layoutelemente vor.

06:00

Zugänglichkeit und Barrierefreiheit von Webseiten werden zunehmend wichtiger. Um wichtige Navigationselemente zum Beispiel für Screenreader auszuzeichnen, können Sie sogenannte »Landmarks« setzen und diesen bestimmte Rollen zuweisen. Wie das in der Praxis aussieht, zeigt Ihnen Peter Müller in diesem Video.

06:25

In diesem Video stellt Ihnen Peter Müller ein paar ausgewählte neue semantische Strukturelemente von HTML5 vor. Sie lernen, wie Sie eine Webseite aufbauen und per HTML-Tag den Kopf, die Navigation und den Hauptinhaltsbereich definieren.

07:24

Peter Müller zeigt Ihnen in diesem Video, wie Sie die Inhalte einer Webseite in thematische Abschnitte untergliedern. Sie lernen außerdem, wie Sie den Fußbereich einrichten und eine Seitenleiste einfügen, in der Sie weitere Informationen und Infos anzeigen können.

04:49

Die neuen semantischen Strukturelemente von HTML5 werden von älteren Browsern nicht standardmäßig unterstützt. In diesem Video erfahren Sie, wie Sie mit der JavaScript-Bibliothek »HTML5 Shiv« dafür sorgen, dass auch ältere Browserversionen die HTML5-Tags interpretieren können.

08:34

In diesem Video widmet sich Peter Müller der Gestaltung einer einfachen Beispielseite auf der Basis des HTML5-Templates. Schritt für Schritt lernen Sie, wie Sie die Seite aufbauen und mithilfe von CSS-Regeln nach Ihren Wünschen gestalten.

Section 3: Neue Techniken für Formulare, Multimedia & Co.
00:22

In diesem Video gibt Ihnen Peter Müller einen Überblick über die Inhalte des Kapitels. Sie lernen neue HTML5-Elemente kennen, mit denen Sie Formulare erstellen, Bilder beschriften oder Audio- und Video-Elemente einbinden können.

06:56

Mit den neuen Elementen »figure« und »figcaption« sind Bildunterschriften kein Problem mehr. In diesem Video lernen Sie, wie Sie entweder einzelne Abbildungen oder gleich mehrere Grafiken beschriften.

07:21

In diesem Video zeigt Ihnen Peter Müller einige Änderungen an bekannten HTML5-Elementen. Sie lernen unter anderem, wie Sie Hyperlinks für Blockelemente zuweisen und festlegen, mit welcher Nummer oder welchem Buchstaben eine Liste beginnen soll.

08:49

Mit HTML-Tags können Sie Textpassagen hervorheben, indem Sie den Tag per CSS näher definieren. Dabei haben sich einige Tags bereits etabliert, um zum Beispiel Texte fett oder kursiv zu schreiben. In diesem Video lernen Sie, mit welchen Tags Sie Ihre Texte auszeichnen und gestalten können.

07:52

In diesem Video zeigt Ihnen Peter Müller, wie Sie Uhrzeit und Datum mit den Tags »date« und »datetime« für Maschinen lesbar machen. Sie lernen außerdem, wie Sie Zeitzonen definieren und verschiedene Zeitformate ausgeben.

05:37

Kontaktformulare und Eingabefelder sind ein wichtiger Bestandteil von Webseiten. Mit HTML5 sind neue Formular-Attribute hinzugekommen, die die Eingaben des Nutzers auch ohne zusätzliches JavaScript validieren. In diesem Video stellt Ihnen Peter Müller die neuen Attribute kurz vor.

06:19

In diesem Video lernen Sie einige der neuen Formularfelder von HTML5 im Detail kennen. Dabei erfahren Sie, wie Sie Felder für E-Mail-Adressen, Telefonnummern und URLs mithilfe von HTML5-Tags auszeichnen.

06:35

Peter Müller zeigt Ihnen in diesem Video, wie Sie Zahlenfelder einrichten, die Sie auf bestimmte Werte begrenzen können. Sie lernen darüber hinaus, wie Sie auch Datumsfelder definieren und festlegen, in welchem Format ein Datum ausgegeben wird.

07:16

Mit dem neuen »audio«-Element können Sie Audiodateien ohne zusätzliches Player-Plug-in direkt im Browser abspielen. In diesem Video erfahren Sie, welche Audioformate von HTML5 unterstützt werden und wie Sie mehrere Audioquellen in den HTML-Code einbinden.

07:18

Auch Videodateien lassen sich nun mit HTML5 viel einfacher im Quellcode einbinden und im Browser wiedergeben. Peter Müller zeigt Ihnen, wie Sie eigene Videos auf Ihren Seiten hinzufügen und welche Videoformate von HTML5 unterstützt werden.

Section 4: Das HTML und CSS der Beispielseiten
00:19

Peter Müller gibt Ihnen einen kurzen Überblick, was Sie in diesem Kapitel erwartet. Sie lernen, wie Sie eine Webseite grundlegend strukturieren, mit Inhalten füllen und die einzelnen Bereiche mit CSS formatieren.

05:36

In diesem Video gibt Ihnen Peter Müller einen Überblick über die Beispielseiten, die Sie in den folgenden Workshops erstellen werden. Zunächst machen Sie sich hier mit der grundlegenden HTML-Struktur der Beispielseiten vertraut.

07:48

In diesem Video verschaffen Sie sich einen Überblick über den HTML-Code der Beispielseite. Dabei erfahren Sie, welche Klassen und Attribute zum Einsatz kommen, und wie die Beispielseite im Detail strukturiert ist.

05:46

In diesem Video sehen Sie, wie Sie Bilder in eine Webseite einbinden können. Peter Müller zeigt Ihnen dabei, wie Sie Fotos und Grafiken zuerst aufbereiten und dann so optimieren, dass Sie sich flexibel verhalten.

08:10

In diesem Video lernen Sie, wie Sie die Größe eines Bildes über CSS-Eigenschaften steuern. Sie erfahren außerdem, welche Rolle die Pixeldichte dabei spielt und was Sie beachten müssen, wenn Sie Grafiken für Retina-Displays bereitstellen.

06:22

Um sicherzustellen, dass Ihre Website nachher auf allen Endgeräten einwandfrei angezeigt wird, sollten Sie das responsive Layout im Vorfeld testen. In diesem Video lernen Sie, wie Sie mit verschiedenen Werkzeugen die unterschiedlichen Displaygrößen direkt im Browser simulieren können.

07:58

Die meisten Browser integrieren eigene Stylesheets, die das Aussehen einer Webseite steuern. In diesem Video lernen Sie, wie Sie solche Grundkonfigurationen mithilfe des CSS-Templates »normalize.css« überschreiben.

08:02

Je komplexer Ihre Website wird, desto umfangreicher können die CSS-Regeln werden. Daher bietet es sich an, die CSS-Regeln auf mehrere Stylesheets zu verteilen. Dieses Video zeigt Ihnen, wie Sie diese neuen Stylesheets über eine zentrale CSS-Datei per @import-Regel ansteuern können.

07:16

In diesem Video zeigt Ihnen Ihr Trainer, wie Sie den Kopf- und Fußbereich Ihrer Beispielseite formatieren. Dabei lernen Sie, wie Sie die verschiedenen Elemente dieser beiden Layoutbereiche mit CSS einfärben können.

06:47

Der Kopf- und Fußbereich ist nun für die weitere Gestaltung vorbereitet. In diesem Video lernen Sie, wie Sie den Innen- und Außenabstand der einzelnen Elemente festlegen, Überschriften gestalten und die Hyperlinks formatieren.

07:38

In diesem Video sehen Sie, wie Sie die Navigationsleiste der Beispielseiten einrichten und gestalten. Peter Müller zeigt Ihnen unter anderem, wie Sie die einzelnen Menüpunkte gezielt anordnen und aktive Links kennzeichnen.

Section 5: Gestaltung mit CSS3
00:21

In diesem Video gibt Ihnen Ihr Trainer eine Übersicht über die Kapitelinhalte. In den folgenden Videos lernen Sie, wie Sie mit CSS3-Eigenschaften Texte formatieren, Schatteneffekte erzeugen und Farbverläufe erstellen.

08:36

In diesem Video lernen Sie das neue Schriftgrößenelement »rem« kennen. Peter Müller zeigt Ihnen, wie Sie mit »rem« die Schriftgröße definieren, den Schriftgrad pixelgenau festlegen und Schriftgrößen an andere Textelemente vererben können.

07:59

Dank Webfonts steht Ihnen die Welt der Typografie auch bei der Gestaltung von Webseiten offen. In diesem Video lernen Sie, wie Sie Schriftarten auf Ihren Seiten mitliefern, damit sie in jedem Browser richtig angezeigt werden können.

09:23

In diesem Video zeigt Ihnen Ihr Trainer, wie Sie Symbole und Social-Media-Icons per Schriftart einfügen und formatieren. Damit reduzieren Sie nicht nur die Ladezeiten Ihrer Seite, sondern können die Symbole auf diese Weise auch verlustfrei skalieren.

09:42

Mit der CSS-Eigenschaft »text-shadow« können die Texte auf Ihrer Seite mit einem Schlagschatten gestalten. Peter Müller zeigt Ihnen in diesem Video, mit welchen Attributen Sie den Schatten noch weiter gestalten können und Ihre Webseite mit modernen Texteffekten aufwerten.

10:44

Peter Müller zeigt Ihnen in diesem Video, wie Sie die Textinhalte der Beispielseiten gestalten. Sie lernen dabei, wie Sie den Zeilenabstand einrichten, Fließtexte formatieren und eine Social-Media-Leiste hinzufügen.

08:08

Mit CSS3 können Sie nicht nur Textschatten hinzufügen, sondern auch Schatteneffekte für einzelne Boxen gestalten. In diesem Video zeigt Ihnen Peter Müller außerdem, wie Sie die Ecken von Boxen abrunden.

09:01

In diesem Video zeigt Ihnen Peter Müller, wie Sie mit CSS3 lineare Farbverläufe erzeugen können. Sie erfahren dabei, wie Sie die Verlaufsrichtung ändern und den CSS-Code für einen Farbverlauf sogar online generieren lassen.

06:20

Beim klassischen Box-Modell war es nicht immer einfach, die tatsächliche Breite eines Box-Elements inklusive aller Abstände zu bestimmen. Mit dem Attribut »border-box« ist es nun möglich, Abstände auf die inneren Dimensionen einer Box umzurechnen.

06:56

In diesem Video erfahren Sie, wie Sie den Inhaltsbereich der Beispielseiten gestalten. Peter Müller erklärt Ihnen, wie Sie Bildschatten hinzufügen, die Ecken der Bilder abrunden und Überschriften formatieren.

07:19

In diesem Video zeigt Ihnen Peter Müller, wie Sie das Kontaktformular Ihrer Website formatieren und an das Design der übrigen Seiten anpassen. Sie lernen außerdem, wie Sie einen Mouse-Over-Effekt für den »Senden«-Button erstellen.

Section 6: Eine mobile Navigation erstellen
00:21

In diesem Video stellt Ihnen Peter Müller die Inhalte des Kapitels vor. Sie erfahren, wie Sie die Navigation der Website für mobile Endgeräte optimieren und mithilfe verschiedener Werkzeuge testen.

05:03

Welche Navigationsart Sie für Ihre Seite auswählen, hängt oft vom Layout und Umfang Ihrer Seiten ab. In diesem Video stellt Ihnen Peter Müller verschiedene Auswahlmenüs vor und zeigt Ihnen, wie Sie diese in Ihre Seite einbinden.

07:20

Ein weiterer beliebter Ort, wo Sie eine Navigation unterbringen können, ist der Footer. In diesem Video lernen Sie, wie Sie die Navigationsleiste im Fußbereich platzieren und mithilfe des »Footer» Ankerelements anspringen.

07:07

In diesem Video stellt Ihnen Peter Müller weitere mobile Navigationsarten vor. Sie lernen, wie Sie »Fly-Out«-Menüs gestalten und ein »Toggle«-Menü für Ihre Seite erstellen.

06:42

In diesem Video lernen Sie, wie Sie die Navigation für Ihre Beispielseiten planen und praktisch umsetzen. Dabei erfahren Sie, wie Sie die Menüstruktur per Klick ein- und ausblenden und wie Sie die Menübuttons auf allen Seiten anzeigen.

08:57

Ihr Trainer zeigt Ihnen in diesem Video, wie Sie den Menübutton für die mobile Navigation im Kopfbereich positionieren und ansprechend gestalten. Außerdem lernen Sie, wie Sie Symbole auf dem Button platzieren.

09:04

In diesem Video erfahren Sie, wie Sie die Menüpunkte umstrukturieren und visuell an die restliche Gestaltung der Seite anpassen. Außerdem sehen Sie, wie Sie die Abstände der Menüpunkte anpassen und einen Mouse-Over-Effekt einrichten.

08:06

In diesem Video lernen Sie, wie Sie neue Animationseffekte per CSS in die mobile Navigation einbauen. So können Besucher die Navigation ein- und ausblenden. Dabei kommt nicht nur die Pseudoklasse »target« zum Einsatz, sondern auch die neue CSS-Eigenschaft »transition«.

06:12

In diesem Video gibt Ihnen Peter Müller Tipps, wie Sie mobile Navigationen und Webseiten optimal testen. Neben den Testoptionen, die Ihnen die modernen Browser bereits bieten, lernen Sie weitere Simulatoren und Emulatoren kennen.

05:36

Mit dem iOS-Simulator von Xcode überprüfen Sie, wie sich Ihre Webseite auf einem iPhone verhält. In diesem Video zeigt Ihnen Ihr Trainer, wie Sie den Simulator installieren und bedienen.

Section 7: Media Queries – so werden Ihre Seiten responsiv
00:20

In diesem Video stellt Ihnen Peter Müller die Themen dieses Kapitels vor. Sie lernen Media Queries kennen, mit denen Sie das Layout Ihrer Site an verschiedene Anzeigegrößen anpassen.

07:48

In CSS2 gab es bereits die Möglichkeit, mit sogenannten Medientypen das Layout an bestimmte Ausgabegeräte anzupassen. In diesem Video stellt Ihnen Peter Müller die Medientypen »print« und »screen« genauer vor, mit denen Sie die Ausgabe auf einem Drucker oder Bildschirm ansprechen.

08:05

Mit CSS3 können Sie Ihre Webseiten noch genauer ans Ausgabemedium anpassen, indem vorhandene Features wie die Browsergröße gleich mit abgefragt werden. Außerdem lernen Sie, wann Sie weitere Media Queries setzen sollten, damit sich das Layout an die unterschiedlichen Displaygrößen anpasst.

07:26

Damit Webseiten auf Mobilgeräten optimal angezeigt werden, sollten Sie zunächst mithilfe des Meta-Viewports den Zoomfaktor der Seite anpassen. Peter Müller zeigt Ihnen in diesem Video, wie Sie den Meta-Viewport korrekt einrichten.

09:11

In diesem Video lernen Sie, wie Sie Media Queries für die Navigationsleiste der Beispielseiten einrichten. Die Menüstruktur soll dabei für drei verschiedene Browsergrößen optimiert werden.

07:57

Nachdem Sie die Navigation optimiert haben, widmen Sie sich im nächsten Schritt dem Seitenlayout. In diesem Video lernen Sie, wie Sie die Media Queries und die maximale Breite für die Website festlegen. Außerdem zeigt Ihnen Peter Müller, wie Sie eine flexible Grafik als Hintergrundbild in die Webseite einbinden.

09:13

Der Inhaltsbereich der Beispielseiten wird in diesem Video in mehrere Spalten aufgeteilt. Sie lernen, wie Sie Bilder und Grafiken nebeneinander anordnen, die Artikel optimal präsentieren und die Seitenleiste positionieren.

05:17

Peter Müller zeigt Ihnen in diesem Video, wie Sie das Kontaktformular für die Desktop-Variante optimieren. Dabei erfahren Sie, wie Sie Eingabefelder und Label nebeneinander anordnen. Für die Smartphone-Variante sollten Sie aber die Elemente wieder untereinander anordnen, um den Platz besser zu nutzen.

07:25

In diesem Video kontrolliert Peter Müller das gesamte responsive Design der Beispielseiten. Dabei fasst er alle verwendeten Techniken und Funktionen nochmals zusammen.

Section 8: Rasterlayouts und flexible Gridsysteme
00:25

Peter Müller gibt Ihnen in diesem Einleitungsvideo eine Übersicht über die Inhalte des Kapitels. In den folgenden Videos lernen Sie, wie Sie Raster einsetzen, mit denen Sie Ihre Layouts aufbauen können. Außerdem lernen Sie, wie Sie flexible Raster erstellen.

07:08

In diesem Video führt Sie Ihr Trainer in die Welt der Rasterlayouts ein. Mit einem solchen Raster sorgen sie nicht nur für eine bessere Übersicht auf Ihren Webseiten, sondern können damit auch komplexe Seitenlayouts erstellen.

05:54

Lange Zeit galten 960 Pixel als ideale Breite für ein Rasterlayout. Peter Müller zeigt Ihnen in diesem Video, wie ein 960-Pixel-Grid aufgebaut ist. Außerdem erläutert er Ihnen die Unterschiede zwischen einem Gridsystem und einem herkömmlichen Spaltenlayout.

07:01

Peter Müller zeigt Ihnen in diesem Video den Aufbau des klassischen 960px-Grids. Sie lernen dabei unter anderem, wie Sie Gridklassen definieren, die Spaltenbreiten für ein Grid festlegen und sogar die Zwischenräume der Spalten einrichten.

07:32

Nachdem Sie die Gridklassen angelegt haben, gestalten Sie die Beispielseite nach dem Rasterlayout um. In diesem Video zeigt Ihnen Ihr Trainer im Detail, wie Sie das pixelbasierte 960px-Grid übertragen.

09:45

Peter Müller zeigt Ihnen in diesem Video, wie Sie die Gridklassen den jeweiligen HTML-Elementen zuweisen. Sie erfahren darüber hinaus, wie Sie ein Grid auf Ihrer Seite einblenden, um Ihr Layout überprüfen zu können.

08:32

In diesem Video zeigt Ihnen Ihr Trainer, wie Sie ein 744px-Gridsystem gestalten. Sie lernen, wie Sie die Gridklassen anpassen, den zugehörigen Media Query einrichten und mit einem Grid-Framework arbeiten.

08:38

Da Gridklassen mit einem Pixelwert eingebunden sind, und sich somit nicht flexibel anpassen, kann es zu unschönen Umbrüchen kommen, wenn Sie die Werte für die Außenabstände verändern. Diese Probleme lassen sich vermeiden, indem Sie ein anderes Box-Modell verwenden.

10:20

Sie lernen in diesem Video, wie Sie die Pixelwerte des Gridlayouts in Prozente umrechnen. Damit schaffen Sie sich mit wenig Aufwand ein prozentbasiertes Raster, das sich stufenlos an jede Displaygröße anpasst.

06:52

Beim Gestalten der Smartphone-Variante verzichten Webdesigner gerne auf Seitenränder, um den Platz auf dem kleinen Bildschirm optimal zu nutzen. Peter Müller zeigt Ihnen in diesem Video, wie Sie dieses randlose Full-Page-Layout mit CSS umsetzen und das Hintergrundbild entfernen.

10:27

Ältere Versionen des Internet Explorers haben mitunter Probleme mit responsiven Webseiten. Daher sollten Sie testen, ob Ihre Webseite auch auf älteren Browsern gut aussieht. In diesem Video lernen Sie, welche Mittel und Wege es gibt, Ihre Webseiten im Internet Explorer zu testen.

Section 9: jQuery und »Adaptive Images«
00:20

In diesem Einleitungsvideo gibt Ihnen Peter Müller eine Übersicht über die Inhalte des Kapitels. In den folgenden Videos lernen Sie jQuery näher kennen und erfahren, wie Sie vorgefertigte JavaScript-Elemente in Ihren Webseiten integrieren.

05:18

Texte mit sehr langen Zeilen sind oft nur schlecht lesbar. Peter Müller gibt Ihnen in diesem Video einige nützliche Tipps, wie Sie die optimale Zeilenlänge finden und Umbrüche in responsiven Layouts einfügen.

05:26

jQuery ist ein JavaScript-Framework, mit dessen Hilfe Sie viele nützliche Funktionen und Steuerelemente in Ihre Webseiten integrieren können. In diesem Video erfahren Sie, wie Sie jQuery installieren und auf den Beispielseiten einbinden.

05:21

Peter Müller stellt Ihnen in diesem Video den FlexSlider vor, mit dem sich Bilder als Slideshow präsentieren lassen. Sie haben die Wahl zwischen mehreren Layout-Varianten, die sich dank jQuery problemlos in Ihre Seiten einbinden lassen.

05:02

In diesem Video lernen Sie, wie Sie den FlexSlider in Ihren Seiten integrieren. Peter Müller zeigt Ihnen darüber hinaus, wie Sie die Navigationspfeile des Sliders ausblenden, um keine störenden Elemente auf den Bildern zu haben.

07:18

Filme von verschiedenen Videoportalen werden oft mit dem HTML-Element »iframe« eingebunden. Allerdings erlaubt dieses Element nicht, dass sich die Videos flexibel an die Seitengröße anpassen. In diesem Video erfahren Sie, wie Sie mithilfe eines Skripts auch diese Videos responsiv gestalten.

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Der Rheinwerk Verlag

Wir sind Deutschlands führender Verlag für Computing, Design und Fotografie. Wir machen Bücher, E-Books und Videokurse für Einsteiger und Experten, für Entwickler, Anwender und Liebhaber, für Kreative, Neugierige und Wissensdurstige, für Ehrgeizige, Pragmatiker und Perfektionisten.

Wir machen Verlagsprodukte – wir publizieren nicht bloß. Wir hören zu, was Kunden wünschen. Wir bringen auf den Weg, wir entwerfen und gestalten, wir schaffen und ermöglichen. Wir machen die Verlagsprodukte, die Sie brauchen.

Ready to start learning?
Take This Course