Design
Web Design
Responsive Design
Responsive Websites mit Dreamweaver und Bootstrap
4.6 (22 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
119 students enrolled

Responsive Websites mit Dreamweaver und Bootstrap

Lerne, wie Du mit der neuesten Version von Adobe Dreamweaver moderne responsive Websites erstellst.
Bestseller
4.6 (22 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
119 students enrolled
Created by Andreas Stocker
Last updated 5/2020
German
Preview this course
Responsive Websites mit Dreamweaver und Bootstrap
Price: $94.99
Buy now
30-Day Money-Back Guarantee
This course includes
  • 9.5 hours on-demand video
  • 9 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
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.
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.
Course content
Expand all 71 lectures 09:33:04
+ – Einführung
10 lectures 01:01:09

In diesem Video erhältst Du eine Übersicht, was Dich in diesem Kurs erwartet.

Willkommen
Preview 04:20
In dieser Lektion bekommst Du eine kurze Übersicht, was dich in den einzelnen Modulen erwartet.
Übersicht der Module
Preview 04:06
Hier bekommst Du eine Übersicht was dich in den Lektionen in diesem Modul erwartet.
Übersicht Lektionen in diesem Modul
Preview 00:56
Du erfährst in dieser Lektion, welche Voraussetzungen für diesen Kurs notwendig sind. Keine Sorge - es sind nicht viele ;-)
Welche Vorrausetzungen notwendig sind
01:48

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.

Von der Idee zur Planung
15:13

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.

Vom Plan zur Umsetzung
10:00
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.
Warum HTML und CSS
07:17
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.
HTML Grundlagen
Preview 08:35
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.
CSS Grundlagen
07:07
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.
Zusammenfassung Modul 1
01:47
+ – Responsive Webdesign
8 lectures 43:21

In diesem Video erhältst Du einen Überblick zu den Lektionen in diesem Modul.

Übersicht Lektionen in diesem Modul
Preview 01:22
In dieser Lektion geht es um responsive Design. Du erfährst, wie es entstanden und was es wirklich genau ist.
Was ist responsive Webdesign
07:15
In dieser Lektion erfährst Du alles über Gridsysteme die die technische Basis für fast jedes responsive Design sind.
Was sind Gridsysteme
06:25
Wir haben in der letzten Lektion erfahren, wie ein statisches Gridsystem arbeitet. In dieser Lektion möchte ich näher auf responsive Gridsysteme eingehen.
Responsive Design und Gridsyststeme
06:52
Wir kennen jetzt Gridsystem und responsive Gridsysteme - jetzt geht es um das Bootstrap Gridsystem, das wir bei Dreamweaver praktisch einsetzen.
Gridsysteme + Bootstrap Grid
Preview 04:16
Ohne Media Queries, wären responsive Layouts nur schwer realisierbar. Um dieses Thema geht es in dieser Lektion.
Was sind Media Queries
06:44
Nachdem wir jetzt Media Queries als Basis für responsive Design kennen, sehen wir uns einmal kurz an, wie diese in Dreamweaver definiert werden.
Media Queries in DW2015
09:24
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.
Zusammenfassung Modul 2
01:03
Abschluss Quiz für Modul 2
2 questions
+ – Twitter Bootstrap
7 lectures 49:31
Du bekommst in diesem Video ein Übersicht darüber, was du in diesem Modul lernst.
Übersicht Lektionen in diesem Modul
Preview 01:13
In dieser Lektion geht es um HTML, CSS und JavaScript Frameworks.
Was ist ein HTML/CSS/JS Framework
03:30
Nachdem wir wissen, was ein Web Framework ist, sehen wir uns jetzt genauer an, was Bootstrap ist.
Was ist Bootstrap
07:35
Wir haben uns bis jetzt angesehen, was Bootstrap ist. Nun geht es etwas genauer um die Funktionen des Frameworks.
Was kann Twitter Bootstrap
09:27
In dieser Lektionen sehen wir uns genauer an, welche CSS Elemente und Components Bootstrap für die Website Erstellung bereitstellt.
Die Bootstrap Elemente
16:29

Jetzt geht es darum wie das Bootstrap Framework in Dreamweaver einsetzt wird.

Bootstrap Integration in Dreamweaver
10:23

In diesem Video erhältst du eine Zusammenfassung über das, was du in diesem Modul gelernt hast.

Zusammenfassung Modul 3
00:54
+ – Erste Schritte in Dreamweaver
12 lectures 01:28:41
Du bekommst in diesem Video ein Übersicht darüber, was du in diesem Modul lernst.
Übersicht Lektionen in diesem Modul
Preview 01:10
Du bekommst hier einen ersten Einblick was Dreamweaver kann und was für den Einsatz dieser Software spricht.
Was ist und was kann Dreamweaver
02:09
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.
Die Siteverwaltung – Umgang mit Dateien
09:48
Ich zeige Dir in diesem Video wie Du Dein erstes Projekt in Dreamweaver startest.
Projekt Start
08:58
Du bekommst in dieser Lektion einen Überblick zur Oberfläche in Dreamweaver.
Die Dreamweaver Oberfläche
13:54
Ich erkläre dir in dieser Lektion die wichtigsten Panels, die zum Arbeiten in Dreamweaver hilfreich sind.
Panels in Dreamweaver
11:49

Jetzt bekommst Du eine Übersicht der verschiedenen Views und für welchen Einsatzbereich diese geeignet sind.

Die Views in Dreamweaver
08:05
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.
Arbeiten mit HTML Code in Dreamweaver
07:03
Jetzt geht es darum, wie man Elemente in Dreamweaver einfügen kann.
Elemente einfügen
Preview 07:01
Jetzt geht es darum, wie man richtig Texte einfügt, vor allem, wenn man die semantic korrekt beachten will.
Texte und Bilder einfügen
09:07
Jetzt geht es um das Einfügen der speziellen Bootstrap Elemente.
Bootstrap Elemente einfügen
08:24
In diesem Video erhältst du eine Zusammenfassung über das, was du in diesem Modul gelernt hast.
Zusammenfassung Modul 4
01:13
+ – Das Seiten Layout
8 lectures 01:01:12
Du bekommst in diesem Video ein Übersicht darüber, was du in diesem Modul lernst.
Übersicht Lektionen in diesem Modul
Preview 01:03
In dieser Lektion zeige ich dir das fertige Layout und wir analysieren die Seite an Hand der Wireframes.
Das Layout in der Übersicht
12:42
In dieser Lektion zeige ich dir die verschiedenen Varianten von Bootstrap Containern und wir sehen und an, wie man diese einfügt.
Bootstrap Container
05:23
Ich zeige dir in diesem Video die verschiedensten Varianten, wie man Bootstrap Reihen und Spalten in ein Projekt einfügt und bearbeitet.
Reihen und Spalten einfügen
10:45
In dieser Lektion definieren wir unsere Site und starten unsere praktische Projekt Übung.
Projekt Start
06:08

Ohne Media Queries, wären responsive Layouts nur schwer realisierbar. Um dieses Thema geht es in dieser Lektion.

Die Seite zusammenstellen
17:56
In dieser Lektion definieren wir die beiden noch fehlenden Layouts für Tablet und Mobile.
Responsive Layout einrichten
06:25
In diesem Video erhältst du eine Zusammenfassung über das, was du in diesem Modul gelernt hast.
Zusammenfassung Modul 5
00:50
+ – Website Inhalte
7 lectures 01:23:11
Du bekommst in diesem Video ein Übersicht darüber, was du in diesem Modul lernst.
Übersicht Lektionen in diesem Modul
Preview 01:04
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.
Grundlagen Bilder im Web
13:05
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.
Bilder vorbereiten
19:33
In diesem Video geht um das Einfügen von Bild und Text Inhalten in deine Website.
Text und Bild Inhalte einfügen
21:14
In dieser Lektion erfährst du, wie man Formular Elemente, Buttons und fremde Inhalte mit iFrames einbaut.
Formular Elemente und iFrames
12:48
In dieser Lektion sehen wir uns an, wie man verschachtelte Reihen verwendet und welche Layout Möglichkeiten der Einsatz bietet.
Verschachtelte Reihen
14:33
In diesem Video erhältst du eine Zusammenfassung über das, was du in diesem Modul gelernt hast.
Zusammenfassung Modul 6
00:54
+ – Inhalte formatieren
11 lectures 01:48:53

Du bekommst in diesem Video eine Übersicht darüber, was du in diesem Modul lernst.

Übersicht Lektionen in diesem Modul
Preview 01:19
In dieser Lektion stelle ich dir den CSS Designer von Dreamweaver vor, der das Tool für das Arbeiten mit CSS ist.
Der CSS Designer
10:05
In diesem Video zeige ich dir, wie Du die richtigen Selektoren für deine CSS Regeln findest.
Selektoren ermitteln
12:41
In dieser Lektion zeige ich dir, wie du aus deinem Visual Design in Photoshop einfach CSS Inhalte bekommst.
Inhalte und Layout aus Photoshop
Preview 08:26
Ich zeige dir hier, wie man am besten bestehende Bootstrap CSS Regeln verändert und wie man Selektoren von bestehenden Elementen ermittelt.
Bootstrap Regeln verändern
13:07
In diesem Video zeige ich dir einige Methoden, wie du schnell und einfach dein Menü erstellen und formatieren kannst.
Bootstrap Menü anpassen
15:05

In dieser Lektion geht es darum die Inhalte unseres Beispiel Projektes mittels CSS zu formatieren.

Text und Bilder formatieren Teil 1
18:00
Wir setzen die Formatierung unserer Inhalte mit CSS in dieser Lektion fort.
Text und Bilder formatieren Teil 2
11:44
In dieser Lektion verfeinern wir unser Layout in dem wir noch verschiedene Abstände anpassen und unsere Links formatieren.
Abstände und Links formatieren
05:33
In dieser Lektionen sehen wir uns die Layouts für Tablet und Mobile an und führen dort noch einige Anpassungen durch.
Layout für andere Größen
12:09
In diesem Video erhältst du eine Zusammenfassung über das, was du in diesem Modul gelernt hast.
Zusammenfassung Modul 7
00:44
+ – Testen und Finetuning
8 lectures 01:17:07

Du bekommst in diesem Video ein Übersicht darüber, was du in diesem Modul lernst.

Übersicht Lektionen in diesem Modul
Preview 01:24
In dieser Lektion zeige ich dir was du tun musst, damit deine Website optimal für Suchmaschinen aufbereitet ist.
SEO Suchmaschinenoptimierung
16:51
In dieser Lektion zeige ich dir, wie du mit einigen Zeilen Java Script Code nette Interaktivitäten in deine Webseite bekommst.
Interaktivität für unsere Seite
14:50
In diesem Video geht es darum, wie du deinem Projekt weitere Seiten hinzufügst und wie diese miteinander verlinkt werden.
Weitere Seiten anlegen
16:01
In dieser Lektion zeige ich dir verschiedene Möglichkeiten, wie du dein Web Projekt testen kannst und solltest.
Seiten Testen
16:29
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.
Inhalte ins Netz stellen
Preview 08:16
In diesem Video erhältst du eine Zusammenfassung über das, was du in diesem Modul gelernt hast.
Zusammenfassung Modul 8
00:46
Du hast es geschafft und den Kurs abgeschlossen. In diesem Video fasse ich noch einmal kurz zusammen, was du in diesem Kurs gelernt hast.
Danke
02:30