Für attraktive Webseiten auf allen Geräten

Trailer Einführung ins Video-Training

Flexible Boxes

Das Praxis-Training. Eine Einführung in moderne Websites

€ 39,90

Sofort verfügbar

€ 39,90

Vergriffen

Video-Training, , Spielzeit 10:30 Stunden,
Windows, Mac, Linux, iOS (App erhältlich im App Store)
ISBN 978-3-8362-2854-1
Video-Training, , Spielzeit 10:30 Stunden,
Windows, Mac, Linux, iOS (App erhältlich im App Store)
ISBN 978-3-8362-3549-5

Sie wollen 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

Blicke ins Training

    Peter Müller arbeitet seit vielen Jahren als IT-Dozent und ist erfolgreicher Autor. Er versteht es, selbst die kompliziertesten Sachverhalte einfach und unterhaltsam darzustellen.

    Der Trainer
    • 02:03
      Trailer
    • 06:56
      3.2 Abbildungen beschriften mit »figure« und »figcaption«
    • 08:10
      4.5 Flexible Grafiken einbinden
    • 09:11
      7.5 Die Navigation wird responsiv
    • 09:44
      8.6 Die Beispielseiten mit dem Grid gestalten
    • 07:18
      9.6 Flexible Videos mit »FitVids.js«

    Was möchten Sie lernen?

    1. Mobile Websites entwickeln

      Desktop-PC, Smartphone, Tablet – Ihre Website soll auf allen Geräten gut aussehen. Peter Müller zeigt Ihnen, wie Sie Webseiten responsiv gestalten und mobile Navigationen entwickeln.

    2. Inhalte auszeichnen mit HTML5

      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.

    3. Moderne Layouts mit CSS3

      Entdecken Sie die modernen Layout-möglichkeiten von CSS3. In diesem Training erfahren Sie, wie Sie Texte und Boxen gestalten oder Farbverläufe und Schlagschatten einsetzen.

    Inhaltsverzeichnis

    • 1. Was sich im Web geändert hat
      00:41 Std.
      • 1.1 Einleitung00:27 Min.
      • 1.2 Aufbau und Ziel des Trainings03:14 Min.
      • 1.3 »A Dao of Web Design«04:12 Min.
      • 1.4 Von HTML-Tabellen zu 960px-Grid-Frameworks04:28 Min.
      • 1.5 Geschichte des responsiven Webdesigns05:27 Min.
      • 1.6 Die Konzepte des »Responsive Design«04:40 Min.
      • 1.7 Progressive Enhancement03:56 Min.
      • 1.8 Prototypen im Browser04:16 Min.
      • 1.9 Das Web wird »mobil« – bei Arbeit, Sport und Spiel03:58 Min.
      • 1.10 »Mobile First« oder »Desktop First«?04:46 Min.
      • 1.11 Das Web verändert sich ständig02:21 Min.
    • 2. Neuerungen in HTML5
      01:11 Std.
      • 2.1 Einleitung00:23 Min.
      • 2.2 Die Geschichte von HTML14:14 Min.
      • 2.3 Das HTML5-Universum03:36 Min.
      • 2.4 Nützliche Quellen zu HTML506:16 Min.
      • 2.5 HTML5 Bones, DOCTYPE und Meta-Viewport07:20 Min.
      • 2.6 Die neuen semantischen Strukturelemente06:28 Min.
      • 2.7 Die »ARIA Landmark Roles«06:00 Min.
      • 2.8 Die Elemente »header«, »nav« und »main«06:25 Min.
      • 2.9 Die Elemente »section«, »article«, »aside« und »footer«07:24 Min.
      • 2.10 Semantische Strukturelemente im Praxiseinsatz04:49 Min.
      • 2.11 Die HTML5 Bones-Beispielseite08:33 Min.
    • 3. Neue Techniken für Formulare, Multimedia & Co.
      01:04 Std.
      • 3.1 Einleitung00:22 Min.
      • 3.2 Abbildungen beschriften mit »figure« und »figcaption«06:56 Min.
      • 3.3 Änderungen an Hyperlinks und Nummerierungen07:21 Min.
      • 3.4 Textelemente hervorheben08:49 Min.
      • 3.5 Datumsangaben mit »time«07:52 Min.
      • 3.6 Formulare in HTML5 – die neuen Attribute05:37 Min.
      • 3.7 Die Formularfelder »email«, »url«, »tel« und »search«06:19 Min.
      • 3.8 Formularfelder für Zahlen, Datum und Zeit06:35 Min.
      • 3.9 Sounds im Browser abspielen mit »audio«07:16 Min.
      • 3.10 Videos einbinden mit »video«07:18 Min.
    • 4. Das HTML und CSS der Beispielseiten
      01:11 Std.
      • 4.1 Einleitung00:19 Min.
      • 4.2 Die Beispielseiten im Überblick05:36 Min.
      • 4.3 Der HTML-Code im Detail07:48 Min.
      • 4.4 Bilder für responsive Webseiten05:46 Min.
      • 4.5 Flexible Grafiken einbinden08:10 Min.
      • 4.6 Den Viewport ändern06:22 Min.
      • 4.7 Normalisierung statt Reset: »normalize.css«07:58 Min.
      • 4.8 Die Stylesheets zentralisieren08:02 Min.
      • 4.9 Grundformatierung von Kopf- und Fußbereich07:16 Min.
      • 4.10 Die Elemente im Kopf- und Fußbereich gestalten06:47 Min.
      • 4.11 Die Navigation formatieren07:38 Min.
    • 5. Gestaltung mit CSS3
      01:24 Std.
      • 5.1 Einleitung00:21 Min.
      • 5.2 Die Schriftgröße definieren08:36 Min.
      • 5.3 Die Schriftart gleich mitliefern07:59 Min.
      • 5.4 Skalierbare Symbole mit Iconfonts09:23 Min.
      • 5.5 Schlagschatten für Text hinzufügen09:42 Min.
      • 5.6 Textformatierung der Beispielseite10:44 Min.
      • 5.7 Schatten und runde Ecken08:08 Min.
      • 5.8 Lineare Farbverläufe erstellen09:01 Min.
      • 5.9 Boxen wie im wahren Leben: »box-sizing: border-box«06:20 Min.
      • 5.10 Inhalte der Beispielseite gestalten06:55 Min.
      • 5.11 Das Kontaktformular gestalten07:19 Min.
    • 6. Eine mobile Navigation erstellen
      01:04 Std.
      • 6.1 Einleitung00:21 Min.
      • 6.2 Die Navigation als »Select«-Menü05:03 Min.
      • 6.3 Die Navigation im Footer platzieren07:20 Min.
      • 6.4 »Toggle«- und »Fly-Out«-Menüs07:07 Min.
      • 6.5 Die Navigation für die Beispielseite06:42 Min.
      • 6.6 Den Menübutton gestalten und positionieren08:57 Min.
      • 6.7 Navigationsbereiche gestalten09:04 Min.
      • 6.8 »Right on :target« – die mobile Navigation in Aktion08:06 Min.
      • 6.9 Testen, testen, testen06:12 Min.
      • 6.10 iPhone und iPad mit dem iOS-Simulator simulieren05:36 Min.
    • 7. Media Queries – so werden Ihre Seiten responsiv
      01:02 Std.
      • 7.1 Einleitung00:20 Min.
      • 7.2 CSS2 – Medientypen definieren das Ausgabemedium07:48 Min.
      • 7.3 CSS3 – Media Queries ergänzen die Medientypen08:05 Min.
      • 7.4 Meta-Viewport und responsives Webdesign07:26 Min.
      • 7.5 Die Navigation wird responsiv09:11 Min.
      • 7.6 Das Layout wird responsiv07:57 Min.
      • 7.7 Der Inhaltsbereich wird responsiv09:13 Min.
      • 7.8 Ein flexibles Kontaktformular05:17 Min.
      • 7.9 Die responsiven Beispielseiten im Überblick07:25 Min.
    • 8. Rasterlayouts und flexible Gridsysteme
      01:22 Std.
      • 8.1 Einleitung00:25 Min.
      • 8.2 Rasterlayouts – Gestaltung mit Grids07:08 Min.
      • 8.3 Gridlayouts im Web05:53 Min.
      • 8.4 960px-Grid mit zwölf Spalten07:01 Min.
      • 8.5 Der Code für das 960px-Grid07:32 Min.
      • 8.6 Die Beispielseiten mit dem Grid gestalten09:44 Min.
      • 8.7 Das 744px-Grid ergänzen08:32 Min.
      • 8.8 Ein stabileres Grid erstellen mit »border-box«08:38 Min.
      • 8.9 Das Grid wird flexibel10:20 Min.
      • 8.10 Ein Full-Page-Layout erzeugen06:52 Min.
      • 8.11 Responsive Seiten im Internet Explorer10:27 Min.
    • 9. jQuery und »Adaptive Images«
      00:37 Std.
      • 9.1 Einleitung00:20 Min.
      • 9.2 Die Zeilenlänge optimieren05:18 Min.
      • 9.3 jQuery installieren und einbinden05:26 Min.
      • 9.4 »FlexSlider 2« – ein responsiver Slider05:20 Min.
      • 9.5 »FlexSlider 2« einbinden05:02 Min.
      • 9.6 Flexible Videos mit »FitVids.js«07:18 Min.
      • 9.7 Adaptive Images – kleine Bilder für kleine Geräte08:30 Min.
    • 10. Responsive Frontend-Frameworks im Überblick
      00:54 Std.
      • 10.1 Einleitung00:19 Min.
      • 10.2 Vorteile von CSS- und Frontend-Frameworks08:22 Min.
      • 10.3 Das responsive CSS-Grid-Framework »Unsemantic«09:32 Min.
      • 10.4 Die Beispiel-Webseite mit »Unsemantic« nachbauen08:23 Min.
      • 10.5 »YAML4« und »Thinkin' Tags«09:58 Min.
      • 10.6 Das »Foundation«-Framework08:20 Min.
      • 10.7 Das »Bootstrap«-Framework09:04 Min.
    ZIP-Datei zum Download (2,2 GB). 102 Videos, gegliedert in 10 Kapitel, Spielzeit 10 Stunden. Mit allen HTML-, CSS- und Codebeispielen aus dem Training zum Mitprogrammieren. HD-Auflösung (1280 x 720 Pixel). Vollbild- und Fenstermodus, komfortable Navigation, Unterteilung in übersichtliche Lernschritte, mit Lesezeichen, Suchfunktion und Index zum Nachschlagen. Für Windows (10, 8, 7, Vista), OS X (Intel) und Linux. Alle Videos lauffähig auf Android, iPad und iPhone.
    DVD-ROM mit 102 Videos, gegliedert in 10 Kapitel, Spielzeit 10 Stunden. Mit allen HTML-, CSS- und Codebeispielen aus dem Training zum Mitprogrammieren. HD-Auflösung (1280 x 720 Pixel). Vollbild- und Fenstermodus, komfortable Navigation, Unterteilung in übersichtliche Lernschritte, mit Lesezeichen, Suchfunktion und Index zum Nachschlagen. Für Windows (10, 8, 7, Vista), OS X (Intel) und Linux. Alle Videos lauffähig auf Android, iPad und iPhone.

    Download

    € 39,90 inkl. MwSt.

    Sofort verfügbar

    DSAG Mitglieder
    Der Rabatt wird im Warenkorb sichtbar

    DVD

    € 39,90 inkl. MwSt.

    Vergriffen

    Kostenloser Versand für Deutschland und Österreich

    DSAG Mitglieder
    Der Rabatt wird im Warenkorb sichtbar

    Kostenloser Versand
    Deutschland und Österreich
    Bequem zahlen
    Kreditkarte, PayPal, Rechnung oder Bankeinzug
    Schnelle Lieferung
    Auch per Express
    Wir sind gerne für Sie da
    Hilfe zur Bestellung

    Montag bis Freitag,
    09:00 bis 17:30 Uhr
    +49 228 42150-0

    service@rheinwerk-verlag.de