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.
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.
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.
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.
4. Erste Schritte in Dreamweaver
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.
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.
5. Seiten Layout
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.
6. Website Inhalte
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.
7. Inhalte formatieren
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.
8. Finetuning, Testen und Online stellen
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
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
