CHIP Communications GmbHCHIP Communications GmbH

Seiten Layout

Zusammenfassung Kapitel 5

49,90 €
inkl. MwSt.
Eine kurze Zusammenfassung über den Inhalt von Kapitel 5

Details zu „Responsive Websites mit Dreamweaver und Bootstrap“

In diesem Kurs lernen Sie alle notwendigen Funktionen von Adobe Dreamweaver kennen, die notwendig sind, um eine eigene responsive Website umzusetzen und diese fit für mobile Geräte zu machen. Sie erfahren, wie Sie einen Web-Auftritt richtig konzipieren, realisieren und im Internet veröffentlichen.

Dazu verwenden Sie neben den gängigen Sprachen des Webs wie HTML und CSS und JavaScript – ganz einfach über das weit verbreitete und kostenlose Framework Bootstrap.

Selbst Einsteiger lernen von Grund auf, wie man eine Website plant und entwickelt - einfach und verständlich, aber dennoch umfangreich erklärt. Lernen Sie alle wichtigen Werkzeuge kennen, mit denen Sie Ihren eigenen Internet-Auftritt bauen, erfahren Sie, was ein Gridsystem ist und wie Sie es richtig einsetzen.

Hinweis

Sie benötigen für diesen Kurs Adobe Dreamweaver, zudem nutzt der Dozent Adobe Photoshop - was aber nicht zwingend notwendig ist.

Kurs-Inhalte im Überblick

1. Einführung
05:06
In dieser Lektion bekommen Sie eine kurze Übersicht, was Sie in den einzelnen Modulen erwartet.
01:56
Hier bekommen Sie eine Übersicht, was Sie in den Lektionen in diesem Modul erwartet.
02:49
Sie erfahren in dieser Lektion, welche Voraussetzungen für diesen Kurs notwendig sind. Keine Sorge - es sind nicht viele
16:14
In dieser Lektion lernen Sie den ersten Teil eines responsive Web Design Workflows kennen. Diese vereinfachte Form zeigt die wichtigsten Schritte um ein responsive Projekt auf wirklich erfolgreich realisieren zu können. Im ersten Teil geht es vor allem um die Planungsphase. Sie lernen dabei, wie Sie von der Idee beginnend die Seite planen und vorbereiten, damit die praktische Umsetzung möglichst einfach wird.
10:00
In dieser Lektion geht es darum, den Plan aus dem ersten Teil in ein visuell Design und anschliessend in einen HTML Prototypen zu verwandeln. Dieser dient als Basis, um die echte Seite umzusetzen.
08:18
Nach dieser Lektion wissen Sie, warum Sie sich trotz eines visuellen Tools wie Dreamweaver ein wenig mit den Grundlagen von HTML und CSS beschäftigen sollten.
09:36
In dieser Lektion bekommen Sie eine Einführung in HTML
08:07
Nach dieser Lektion kennen Sie die Grundlagen von CSS: Wie ist eine CSS Regel aufgebaut, was sind Klassen und IDs und wie wendet man eine CSS-Regeln an
02:48
In dieser Lektion bekommen Sie eine Zusammenfassung, was Sie in diesem Modul gelernt haben. Im nächsten Modul werden wir uns dann näher dem Thema responsive Design widmen.
2. Responsive Design
02:22
In diesem Video erhalten Sie einen Überblick zu den Lektionen in diesem Kapitel.
08:16
In dieser Lektion geht es um responsive Design. Sie erfahren, wie es entstanden und was es wirklich genau ist.
07:26
In dieser Lektion erfahren Sie alles über Gridsysteme, die die technische Basis für fast jedes responsive Design sind.
07:52
Wir haben in der letzten Lektion erfahren, wie ein statisches Gridsystem arbeitet. Diese Lektion geht näher auf responsive Gridsysteme ein.
05:17
Jetzt geht es um das Bootstrap Gridsystem, das Dreamweaver einsetzt.
07:45
Ohne Media Queries wären responsive Layouts nur schwer realisierbar. Um dieses Thema geht es in dieser Lektion.
10:25
So werden Media Queries in Dreamweaver definiert.
01:54
In dieser Lektion bekommen Sie eine Zusammenfassung über den Inhalt des Kapitels Im nächsten Kapitel geht es um das Bootstrap Framework
3. Twitter Bootstrap
02:13
Dieses Video bietet ein Übersicht darüber, um was es in dem Kapitel geht
04:30
In dieser Lektion geht es um HTML, CSS und JavaScript Frameworks.
08:36
Nachdem wir wissen, was ein Web Framework ist, sehen wir uns jetzt genauer an, was Bootstrap ist.
10:27
Wir haben uns bis jetzt angesehen, was Bootstrap ist. Nun geht es etwas genauer um die Funktionen des Frameworks.
17:29
In dieser Lektionen sehen wir uns genauer an, welche CSS Elemente und Components Bootstrap für die Website Erstellung bereitstellt.
11:23
Jetzt geht es darum wie das Bootstrap Framework in Dreamweaver einsetzt wird.
01:54
Eine kurze Zusammenfassung über den Inhalt von Kapitel 3
4. Erste Schritte in Dreamweaver
02:11
Das kommt alles in Kapitel 4
03:09
Hier gibt es einen ersten Einblick was Dreamweaver kann und was für den Einsatz dieser Software spricht.
10:48
Für ein erfolgreiches Projekt ist es wichtig zu wissen, wie man am besten mit Dateien in einem Projekt umgeht. Darum geht es in dieser Lektion.
09:59
Erfahren Sie in diesem Video wie Sie Ihr erstes Projekt in Dreamweaver starten.
14:54
Diese Lektion liefert einen Überblick zur Oberfläche in Dreamweaver.
12:50
Erfahren Sie in dieser Lektion die wichtigsten Panels, die zum Arbeiten in Dreamweaver hilfreich sind.
09:06
Her bekommen Sie eine Übersicht der verschiedenen Views und für welchen Einsatzbereich diese geeignet sind.
08:04
Wir sehen uns genauer an, wie man in Dreamweaver mit HTML-Code arbeitet und wie wir einfach auf das schon bekannte DOM zugreifen können.
08:02
Jetzt geht es darum, wie man Elemente in Dreamweaver einfügen kann.
10:08
Hier geht es darum, wie man richtig Texte einfügt, vor allem, wenn man die Semantik korrekt beachten will.
09:24
Nun geht es um das Einfügen der speziellen Bootstrap Elemente.
02:14
Eine kurze Zusammenfassung über den Inhalt von Kapitel 4
5. Seiten Layout
02:03
Das kommt alles in Kapitel 5
13:43
In dieser Lektion zeige ich das fertige Layout und analysiere die Seite an Hand der Wireframes.
06:24
In dieser Lektion zeige ich die verschiedenen Varianten von Bootstrap-Containern und wir sehen uns an, wie man diese einfügt.
11:46
Ich zeige dir in diesem Video die verschiedensten Varianten, wie man Bootstrap Reihen und Spalten in ein Projekt einfügt und bearbeitet.
07:08
In dieser Lektion definieren wir unsere Site und starten unsere praktische Projekt Übung.
18:57
Jetzt geht es darum, das Grundlayout zusammen zustellen und das Desktop Layout zu definieren.
07:25
In dieser Lektion definieren wir die beiden noch fehlenden Layouts für Tablet und Mobile.
01:50
Eine kurze Zusammenfassung über den Inhalt von Kapitel 5
6. Website Inhalte
02:04
Das kommt alles in Kapitel 6
14:06
"In dieser Lektionen erfahren Sie die Grundlagen über die Verwendung von Bildern für Webseiten.Sie erfahren dabei welche Bildformate es gibt und welche Eigenschaften, Vor- und Nachteile diese haben.
20:34
In dieser Lektion erfahren Sie, mit welchen Methoden Sie Bilder für die eigene Website erstellen können. Wir machen das mit Adobe Photoshop.
22:14
In diesem Video geht um das Einfügen von Bild und Text Inhalten in deine Website.
13:49
So baut man Formular Elemente, Buttons und fremde Inhalte mit iFrames ein
15:34
In dieser Lektion sehen wir uns an, wie man verschachtelte Reihen verwendet und welche Layout Möglichkeiten der Einsatz bietet.
01:54
Eine kurze Zusammenfassung über den Inhalt von Kapitel 6
7. Inhalte formatieren
02:19
Das kommt alles in Kapitel 7
11:06
In dieser Lektion stelle ich den CSS Designer von Dreamweaver vor, der das Tool für das Arbeiten mit CSS ist.
13:41
In diesem Video zeige ich, wie Sie die richtigen Selektoren für CSS Regeln finden.
09:26
In dieser Lektion zeige ich, wie man aus den Visual Design in Photoshop einfach CSS Inhalte bekommt.
14:08
Ich zeige hier, wie man am besten bestehende Bootstrap CSS Regeln verändert und wie man Selektoren von bestehenden Elementen ermittelt.
16:05
In diesem Video zeige ich einige Methoden, wie Sie schnell und einfach Menüs erstellen und formatieren können
19:01
In dieser Lektion geht es darum, die Inhalte unseres Beispiel Projektes mittels CSS zu formatieren.
12:45
Wir setzen die Formatierung unserer Inhalte mit CSS in dieser Lektion fort.
06:34
In dieser Lektion verfeinern wir unser Layout in dem wir noch verschiedene Abstände anpassen und unsere Links formatieren.
13:09
In dieser Lektionen sehen wir uns die Layouts für Tablet und Mobile an und führen dort noch einige Anpassungen durch.
01:45
Eine kurze Zusammenfassung über den Inhalt von Kapitel 7
8. Finetuning, Testen und Online stellen
02:24
Das kommt alles in Kapitel 8
17:52
In dieser Lektion zeige ich, wie Sie eine Website optimal für Suchmaschinen aufbereiten
15:51
In dieser Lektion zeige ich, wie Sie mit einigen Zeilen JavaScript-Code tolle Interaktivitäten in Ihre Webseite bekommen
17:02
In diesem Video geht es darum, wie Sie Ihrem Projekt weitere Seiten hinzufügen und wie diese miteinander verlinkt werden.
17:29
In dieser Lektion zeige ich verschiedene Möglichkeiten, wie Sie Ihr Web-Projekt testen können - und sogar sollten
09:16
Nachdem unser Web Projekt nun fertig und getestet ist, geht es in dieser Lektion darum, wie das Projekt am einfachsten ins Internet kommt
01:47
Eine kurze Zusammenfassung über den Inhalt von Kapitel 8
03:30
Abschließende Worte und ein Dankeschön
Andreas Stocker
Dozent
Online-Coach und IT-Consult
Mehr erfahren

Technische Voraussetzungen

Informationen: Sie erhalten unsere Kurse als Online-Stream und können direkt nach dem Kauf darauf zugreifen - ganz ohne Wartezeiten. Daher ist ein DSL-Anschluss nötig, wir empfehlen 2 Mbit/s.

 

Unser Tipp: Falls Sie sich nicht sicher sind, ob Ihre Hardware oder Internetverbindung ausreicht, schauen Sie einfach eines der vielen kostenlosen Probevideos an, die es in jedem Kurs gibt. Wenn das Probevideo läuft, sollten Sie auch keine Probleme beim Abspielen der Kursinhalte haben.

 

Zugang: Login notwendig

Zugangs-Voraussetzung: Internet-Browser wie Chrome, Firefox, Safari oder Internet Explorer - idealerweise in der aktuellen Version

Internet-Verbindung: Für das Streaming der Videos notwendig

Geografische Einschränkung: keine

Digitale Rechte: Die Kurse stehen jederzeit als Streaming zur Verfügung - ohne Gerätebegrenzung

Updates: Je nach Bedarf nehmen wir Aktualisierungen der Inhalte vor

Tracking: Eingeschränktes Tracking

Hard- und Software: Internet-Anschluss; PC, Tablet oder Smartphone 

Das Zertifikat
chip academy
Wir belohnen die erfolgreiche Teilnahme: Wenn Sie einen kompletten Kurs schauen, erhalten Sie unser offizielles Academy-Zertifikat - für Ihre Bewerbungsunterlagen
Mehr erfahren