Responsive Websites mit Dreamweaver und Bootstrap

Lerne, wie Du mit der neuesten Version von Adobe Dreamweaver moderne responsive Websites erstellst.

Highest Rated

Created byAndreas Stocker

Last updated 3/2022

German

What you'll learn

Die Prinzipien von responsive Webdesign zu verstehen und anwenden zu können.
Eigene Ideen in eine moderne funktionierende Website umzuwandeln.
Ein responsive Projekt von der Planung bis zur Fertigstellung Wirklichkeit werden zu lassen.
Dreamweaver als Tool für die praktische Umsetzung zu beherrschen.

Course content

9 sections • 74 lectures • 10h 16m total length

Willkommen4:20
In diesem Video erhältst Du eine Übersicht, was Dich in diesem Kurs erwartet.
Übersicht der Module4:06
In dieser Lektion bekommst Du eine kurze Übersicht, was dich in den einzelnen Modulen erwartet.
Übersicht Lektionen in diesem Modul0:56
Hier bekommst Du eine Übersicht was dich in den Lektionen in diesem Modul erwartet.
Welche Vorrausetzungen notwendig sind1:48
Du erfährst in dieser Lektion, welche Voraussetzungen für diesen Kurs notwendig sind. Keine Sorge - es sind nicht viele ;-)
Von der Idee zur Planung15:13
In dieser Lektion lernst du den ersten Teil meines responsive Web Design Workflows kennen. Diese vereinfachte Form zeigt dir die wichtigsten Schritte um ein responsive Projekt auf wirklich erfolgreich realisieren zu können. Im ersten Teil geht es vor allem um die Planungsphase. Du lernst dabei kennen, wie Du von der Idee beginnend die Seite planst und vorbereitest, damit die praktische Umsetzung möglichst einfach wird.
Vom Plan zur Umsetzung10:00

In dieser Lektion lernst du den zweiten Teil meines responsive Web Design Workflows kennen. Jetzt 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.
Warum HTML und CSS7:17
Nach dieser Lektion weisst Du, warum du dich trotz eines visuellen Tools wie Dreamweaver ein wenig mit den Grundlagen von HTML und CSS beschäftigen solltest.
HTML Grundlagen8:35
In dieser Lektion bekommst Du eine Einführung in HTML und weisst dann, wie du mit HTML Elementen und Tags umgehst und wie du über den DOM auf die Elemente zugreifst.
CSS Grundlagen7:07
Nach dieser Lektion kennst du die Grundlagen von CSS. Du weisst wozu CSS benötigt wird und wie eine CSS Regel aufgebaut ist. Du kennst die Begriffe Klassen und IDs und weisst, wie man diese in CSS Regeln anwendet.
Zusammenfassung Modul 11:47
In dieser Lektion bekommst Du eine Zusammenfassung, was Du in diesem Modul gelernt hast. Im nächsten Modul werden wir uns dann näher dem Thema responsive Design widmen.

Übersicht Lektionen in diesem Modul1:22

In diesem Video erhältst Du einen Überblick zu den Lektionen in diesem Modul.
Was ist responsive Webdesign7:15
In dieser Lektion geht es um responsive Design. Du erfährst, wie es entstanden und was es wirklich genau ist.
Was sind Gridsysteme6:25
In dieser Lektion erfährst Du alles über Gridsysteme die die technische Basis für fast jedes responsive Design sind.
Responsive Design und Gridsyststeme6:52
Wir haben in der letzten Lektion erfahren, wie ein statisches Gridsystem arbeitet. In dieser Lektion möchte ich näher auf responsive Gridsysteme eingehen.
Gridsysteme + Bootstrap Grid4:16
Wir kennen jetzt Gridsystem und responsive Gridsysteme - jetzt geht es um das Bootstrap Gridsystem, das wir bei Dreamweaver praktisch einsetzen.
Was sind Media Queries6:44
Ohne Media Queries, wären responsive Layouts nur schwer realisierbar. Um dieses Thema geht es in dieser Lektion.
Media Queries in DW20159:24
Nachdem wir jetzt Media Queries als Basis für responsive Design kennen, sehen wir uns einmal kurz an, wie diese in Dreamweaver definiert werden.
Zusammenfassung Modul 21:03
In dieser Lektion bekommst Du eine Zusammenfassung, was Du in diesem Modul gelernt hast. Im nächsten Modul werden wir uns dann näher dem Bootstrap Framework widmen.
Abschluss Quiz für Modul 2

Übersicht Lektionen in diesem Modul1:13
Du bekommst in diesem Video ein Übersicht darüber, was du in diesem Modul lernst.
Was ist ein HTML/CSS/JS Framework3:30
In dieser Lektion geht es um HTML, CSS und JavaScript Frameworks.
Was ist Bootstrap7:35
Nachdem wir wissen, was ein Web Framework ist, sehen wir uns jetzt genauer an, was Bootstrap ist.
Was kann Twitter Bootstrap9:27
Wir haben uns bis jetzt angesehen, was Bootstrap ist. Nun geht es etwas genauer um die Funktionen des Frameworks.
Die Bootstrap Elemente16:29
In dieser Lektionen sehen wir uns genauer an, welche CSS Elemente und Components Bootstrap für die Website Erstellung bereitstellt.
Bootstrap Integration in Dreamweaver10:23
Jetzt geht es darum wie das Bootstrap Framework in Dreamweaver einsetzt wird.
Zusammenfassung Modul 30:54
In diesem Video erhältst du eine Zusammenfassung über das, was du in diesem Modul gelernt hast.

Übersicht Lektionen in diesem Modul1:10
Du bekommst in diesem Video ein Übersicht darüber, was du in diesem Modul lernst.
Was ist und was kann Dreamweaver2:09
Du bekommst hier einen ersten Einblick was Dreamweaver kann und was für den Einsatz dieser Software spricht.
Die Siteverwaltung – Umgang mit Dateien9: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.
Projekt Start8:58
Ich zeige Dir in diesem Video wie Du Dein erstes Projekt in Dreamweaver startest.
Die Dreamweaver Oberfläche13:54
Du bekommst in dieser Lektion einen Überblick zur Oberfläche in Dreamweaver.
Panels in Dreamweaver11:49
Ich erkläre dir in dieser Lektion die wichtigsten Panels, die zum Arbeiten in Dreamweaver hilfreich sind.
Die Views in Dreamweaver8:05
Jetzt bekommst Du eine Übersicht der verschiedenen Views und für welchen Einsatzbereich diese geeignet sind.
Arbeiten mit HTML Code in Dreamweaver7:03
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.
Elemente einfügen7:01
Jetzt geht es darum, wie man Elemente in Dreamweaver einfügen kann.
Texte und Bilder einfügen9:07
Jetzt geht es darum, wie man richtig Texte einfügt, vor allem, wenn man die semantic korrekt beachten will.
Bootstrap Elemente einfügen8:24
Jetzt geht es um das Einfügen der speziellen Bootstrap Elemente.
Zusammenfassung Modul 41:13
In diesem Video erhältst du eine Zusammenfassung über das, was du in diesem Modul gelernt hast.

Übersicht Lektionen in diesem Modul1:03
Du bekommst in diesem Video ein Übersicht darüber, was du in diesem Modul lernst.
Das Layout in der Übersicht12:42
In dieser Lektion zeige ich dir das fertige Layout und wir analysieren die Seite an Hand der Wireframes.
Bootstrap Container5:23
In dieser Lektion zeige ich dir die verschiedenen Varianten von Bootstrap Containern und wir sehen und an, wie man diese einfügt.
Reihen und Spalten einfügen10:45
Ich zeige dir in diesem Video die verschiedensten Varianten, wie man Bootstrap Reihen und Spalten in ein Projekt einfügt und bearbeitet.
Projekt Start6:08
In dieser Lektion definieren wir unsere Site und starten unsere praktische Projekt Übung.
Die Seite zusammenstellen17:56
Ohne Media Queries, wären responsive Layouts nur schwer realisierbar. Um dieses Thema geht es in dieser Lektion.
Responsive Layout einrichten6:25
In dieser Lektion definieren wir die beiden noch fehlenden Layouts für Tablet und Mobile.
Zusammenfassung Modul 50:50
In diesem Video erhältst du eine Zusammenfassung über das, was du in diesem Modul gelernt hast.

Übersicht Lektionen in diesem Modul1:04
Du bekommst in diesem Video ein Übersicht darüber, was du in diesem Modul lernst.
Grundlagen Bilder im Web13:05
In dieser Lektionen erfährst du die Grundlagen über die Verwendung von Bildern für Webseiten. Du erfährst dabei welche Bildformate es gibt und welche Eigenschaften, Vor- und Nachteile diese haben.
Bilder vorbereiten19:33
In dieser Lektion erfährst du, mit welchen Methoden du deine Bilder für deine Website generieren kannst. Ich zeige dir das an Hand von Adobe Photoshop.
Text und Bild Inhalte einfügen21:14
In diesem Video geht um das Einfügen von Bild und Text Inhalten in deine Website.
Formular Elemente und iFrames12:48
In dieser Lektion erfährst du, wie man Formular Elemente, Buttons und fremde Inhalte mit iFrames einbaut.
Verschachtelte Reihen14:33
In dieser Lektion sehen wir uns an, wie man verschachtelte Reihen verwendet und welche Layout Möglichkeiten der Einsatz bietet.
Zusammenfassung Modul 60:54
In diesem Video erhältst du eine Zusammenfassung über das, was du in diesem Modul gelernt hast.

Übersicht Lektionen in diesem Modul1:19
Du bekommst in diesem Video eine Übersicht darüber, was du in diesem Modul lernst.
Der CSS Designer10:05
In dieser Lektion stelle ich dir den CSS Designer von Dreamweaver vor, der das Tool für das Arbeiten mit CSS ist.
Selektoren ermitteln12:41
In diesem Video zeige ich dir, wie Du die richtigen Selektoren für deine CSS Regeln findest.
Inhalte und Layout aus Photoshop8:26
In dieser Lektion zeige ich dir, wie du aus deinem Visual Design in Photoshop einfach CSS Inhalte bekommst.
Bootstrap Regeln verändern13:07
Ich zeige dir hier, wie man am besten bestehende Bootstrap CSS Regeln verändert und wie man Selektoren von bestehenden Elementen ermittelt.
Bootstrap Menü anpassen15:05
In diesem Video zeige ich dir einige Methoden, wie du schnell und einfach dein Menü erstellen und formatieren kannst.
WICHTIGER Hinweis: Ab DW 2018 wurde Bootstrap 4 eingeführt. Dabei hat sich einiges im Bereich der Navigation geändert. Die Änderungen und eine Erklärung, wie man die Navigation erstellen und gestalten kann sind in einem eignen Abschnitt am Ende des Kurses in 3 Video Lektionen eingefügt.
Text und Bilder formatieren Teil 118:00
In dieser Lektion geht es darum die Inhalte unseres Beispiel Projektes mittels CSS zu formatieren.
Text und Bilder formatieren Teil 211:44
Wir setzen die Formatierung unserer Inhalte mit CSS in dieser Lektion fort.
Abstände und Links formatieren5:33
In dieser Lektion verfeinern wir unser Layout in dem wir noch verschiedene Abstände anpassen und unsere Links formatieren.
Layout für andere Größen12:09
In dieser Lektionen sehen wir uns die Layouts für Tablet und Mobile an und führen dort noch einige Anpassungen durch.
Zusammenfassung Modul 70:44
In diesem Video erhältst du eine Zusammenfassung über das, was du in diesem Modul gelernt hast.

Übersicht Lektionen in diesem Modul1:24
Du bekommst in diesem Video ein Übersicht darüber, was du in diesem Modul lernst.
SEO Suchmaschinenoptimierung16:51
In dieser Lektion zeige ich dir was du tun musst, damit deine Website optimal für Suchmaschinen aufbereitet ist.
Interaktivität für unsere Seite14:50
In dieser Lektion zeige ich dir, wie du mit einigen Zeilen Java Script Code nette Interaktivitäten in deine Webseite bekommst.
Weitere Seiten anlegen16:01
In diesem Video geht es darum, wie du deinem Projekt weitere Seiten hinzufügst und wie diese miteinander verlinkt werden.
Seiten Testen16:29
In dieser Lektion zeige ich dir verschiedene Möglichkeiten, wie du dein Web Projekt testen kannst und solltest.
Inhalte ins Netz stellen8:16
Nachdem unser Web Projekt nun fertig und getestet ist, geht es in dieser Lektion darum, wie das Projekt am einfachsten ins Internet gestellt werden kann.
Zusammenfassung Modul 80:46
In diesem Video erhältst du eine Zusammenfassung über das, was du in diesem Modul gelernt hast.
Danke2:30
Du hast es geschafft und den Kurs abgeschlossen. In diesem Video fasse ich noch einmal kurz zusammen, was du in diesem Kurs gelernt hast.

Bootstrap 4 Navigation (Navbar) erstellen und verstehen13:28
Mit der Bootstrap Navbar kann man schnell und einfach responsive Navigationen erstellen.
In diesem Video erkläre ich dir den Aufbau und die Funktion der einzelnen Navigations Elemente.
Egal, ob du deine Website direkt mit HTML umsetzt oder Tools wie Dreamweaver verwendest, das Verständnis der Elemente und Klassen hilft dir sicher weiter dein Wunsch Menü selbst umzusetzen.
Bootstrap 4 Navigation (Navbar) mit Dreamweaver erstellen10:52
Die Navigation hat sich mit Bootstrap 4 im Gegensatz zu Bootstrap 3 doch etwas verändert. Dadurch gibt es auch Änderungen in neueren Dreamweaver Versionen ab Dreamweaver 2018, da ab dieser Version Bootstrap 4 eingesetzt wird.
Da meine bisherigen Dreamweaver Video auf Dreamweaver 2015 aufbauen, möchte ich dir jetzt erklären, wie eine Navigation in neueren Versionen einzubauen ist.
Im nächsten Video zeige ich dir dann, wie man die Bootstrap 4 Navigation gestalten kann.
Bootstrap 4 Navigation (Navbar) gestalten19:19
Da sich in Bezug auf die Navigation mit Bootstrap 4 einiges gegenüber Bootstrap 3 geändert hat, zeige ich dir in diesem Video, wie du die Navigation mit Bootstrap 4 gestalten kannst.
Das Video ist für jene interessant, die direkt mit HTML und CSS Code arbeiten oder neuere Dreamweaver Versionen ab Dreamweaver CC 2018 verwenden.
Wenn dich interessiert, wie eine Bootstrap 4 Navigation aufgebaut ist oder wie man diese in Dreamweaver ab CC 2018 einbaut, dann sieh dir auch meine anderen beiden Videos zu diesem Thema an.

Requirements

PC oder MAC und eine aktuelle Version Adobe Dreamweaver (ab CC2015) sollte vorhanden sein. Es kann auch eine 30 Tage Testversion verwendet werden.
Etwas Erfahrung mit HTML, CSS und Dreamweaver sind vorteilhaft, aber nicht notwendig. Die notwendigen Grundlagen werden in diesem Kurs erklärt.

Description

Du möchtest gerne selbst eine eigene responsive Website nach Deinen eigenen Vorstellungen mit Adobe Dreamweaver erstellen.

Deine Website soll die modernen Anforderungen einer modernen Website erfüllen und Du möchtest verstehen, wie sich die einzelnen Elemente zu einer kompletten Seite zusammenfügen.

Du möchtest in der Lage sein eine ansprechende Website mit einem modernen Web Framework (Twitter Bootstrap) zu erstellen und zu warten.

Du möchtest eine grundlegende Ahnung von HTML und CSS haben um selbst leicht Anpassungen vornehmen zu können.

Wenn Du das gerne lernen möchtest, dann ist dieser Kurs der Richtige für dich.

Who this course is for:

Jeder der den Begriff responsive Webdesign verstehen und praktisch anwenden will.
Jeder der gerne wissen möchte wie responsive Websites praktisch umgesetzt werden.
Jeder, der gerne eigene moderne responsive Webseiten erstellen möchte.
Jeder der Dreamweaver dazu nutzen möchte um seine Vorhaben zu realisieren.
Der Kurs ist sowohl für Anfänger, die noch keine Erfahrung in der Erstellung von Webseiten haben, als auch für fortgeschrittene User, die wissen wollen, wie responsive Designs mit Dreamweaver und Bootstrap erstellt werden.

Responsive Websites mit Dreamweaver und Bootstrap

What you'll learn

Explore related topics

Course content

Einführung10 lectures • 1hr 1min

Responsive Webdesign8 lectures • 43min

Twitter Bootstrap7 lectures • 50min

Erste Schritte in Dreamweaver12 lectures • 1hr 29min

Das Seiten Layout8 lectures • 1hr 1min

Website Inhalte7 lectures • 1hr 23min

Inhalte formatieren11 lectures • 1hr 49min

Testen und Finetuning8 lectures • 1hr 17min

Update Dreamweaver 20203 lectures • 44min

Requirements

Description

Who this course is for: