Responsive Websites mit Dreamweaver und Bootstrap

Lerne, wie Du mit der neuesten Version von Adobe Dreamweaver moderne responsive Websites erstellst.
4.8 (9 ratings) 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.
65 students enrolled
Instructed by Andreas Stocker Design / Web Design
$19
$95
80% off
Take This Course
  • Lectures 71
  • Length 9.5 hours
  • Skill Level All Levels
  • Languages German
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
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 3/2016 German

Course 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.

What are the 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.

What am I going to get from this course?

  • 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.

What is the target audience?

  • 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.

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: Einführung
04:20

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

04:06
In dieser Lektion bekommst Du eine kurze Übersicht, was dich in den einzelnen Modulen erwartet.
00:56
Hier bekommst Du eine Übersicht was dich in den Lektionen in diesem Modul erwartet.
01:48
Du erfährst in dieser Lektion, welche Voraussetzungen für diesen Kurs notwendig sind. Keine Sorge - es sind nicht viele ;-)
15: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.

10: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.

07: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.
08: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.
07: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.
01: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.
Section 2: Responsive Webdesign
01:22

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

07:15
In dieser Lektion geht es um responsive Design. Du erfährst, wie es entstanden und was es wirklich genau ist.
06:25
In dieser Lektion erfährst Du alles über Gridsysteme die die technische Basis für fast jedes responsive Design sind.
06: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.
04:16
Wir kennen jetzt Gridsystem und responsive Gridsysteme - jetzt geht es um das Bootstrap Gridsystem, das wir bei Dreamweaver praktisch einsetzen.
06:44
Ohne Media Queries, wären responsive Layouts nur schwer realisierbar. Um dieses Thema geht es in dieser Lektion.
09: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.
01: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
2 questions
Section 3: Twitter Bootstrap
01:13
Du bekommst in diesem Video ein Übersicht darüber, was du in diesem Modul lernst.
03:30
In dieser Lektion geht es um HTML, CSS und JavaScript Frameworks.
07:35
Nachdem wir wissen, was ein Web Framework ist, sehen wir uns jetzt genauer an, was Bootstrap ist.
09:27
Wir haben uns bis jetzt angesehen, was Bootstrap ist. Nun geht es etwas genauer um die Funktionen des Frameworks.
16:29
In dieser Lektionen sehen wir uns genauer an, welche CSS Elemente und Components Bootstrap für die Website Erstellung bereitstellt.
10:23

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

00:54

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

Section 4: Erste Schritte in Dreamweaver
01:10
Du bekommst in diesem Video ein Übersicht darüber, was du in diesem Modul lernst.
02:09
Du bekommst hier einen ersten Einblick was Dreamweaver kann und was für den Einsatz dieser Software spricht.
09: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.
08:58
Ich zeige Dir in diesem Video wie Du Dein erstes Projekt in Dreamweaver startest.
13:54
Du bekommst in dieser Lektion einen Überblick zur Oberfläche in Dreamweaver.
11:49
Ich erkläre dir in dieser Lektion die wichtigsten Panels, die zum Arbeiten in Dreamweaver hilfreich sind.
08:05

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

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

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

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

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

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

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

11:44
Wir setzen die Formatierung unserer Inhalte mit CSS in dieser Lektion fort.
05:33
In dieser Lektion verfeinern wir unser Layout in dem wir noch verschiedene Abstände anpassen und unsere Links formatieren.
12:09
In dieser Lektionen sehen wir uns die Layouts für Tablet und Mobile an und führen dort noch einige Anpassungen durch.
00:44
In diesem Video erhältst du eine Zusammenfassung über das, was du in diesem Modul gelernt hast.
Section 8: Testen und Finetuning
01:24

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

16:51
In dieser Lektion zeige ich dir was du tun musst, damit deine Website optimal für Suchmaschinen aufbereitet ist.
14:50
In dieser Lektion zeige ich dir, wie du mit einigen Zeilen Java Script Code nette Interaktivitäten in deine Webseite bekommst.
16:01
In diesem Video geht es darum, wie du deinem Projekt weitere Seiten hinzufügst und wie diese miteinander verlinkt werden.
16:29
In dieser Lektion zeige ich dir verschiedene Möglichkeiten, wie du dein Web Projekt testen kannst und solltest.
08: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.
00:46
In diesem Video erhältst du eine Zusammenfassung über das, was du in diesem Modul gelernt hast.
02: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.

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Andreas Stocker, Webdesigner, Webdeveloper & Trainer

Ich bin Web Designer und Web Entwickler und helfe gerne bei der Realisierung oder Verbesserung von Internet Auftritten. Egal ob als Unterstützung mit Coachings/Trainings oder als Dienstleistung für die Umsetzung.

Ich bin seit 1992 selbständig im IT-Dienstleistungsbereich tätig und beschäftige mich seit 1995 intensiv mit dem Thema Internet. Seit 1999 bin ich als Trainer und seit 2000 als Dozent an der Werbeakademie Wien tätig.

Ready to start learning?
Take This Course