Mit Bootstrap in Dreamweaver arbeiten

Name: Mit Bootstrap in Dreamweaver arbeiten
Author: Patti Scully-Lane

HTML- und CSS-Kenntnisse sind keine Voraussetzung für die Verwendung von Dreamweaver. Es ist jedoch empfehlenswert. In diesem Modul machen Sie sich mit der…

Preview the first lesson free — get full access to all 5 lessons.

Demo anfragen Anmelden

Kurs: On-Demand

In dieser Lektion werden Sie lernen So erstellen Sie eine neue leere Seite unter Verwendung des Bootstrap-Frameworks. Nun, das erste, was wir tun müssen Bevor wir mit der Verwendung von Bootstrap beginnen, erstellen Sie eine Website. Also gehen wir zum Site-Menü, Wir werden eine neue Website erstellen und wir werden auf diesen Ordner klicken. Und ich habe die Unterrichtsdateien gespeichert für dieses Modul auf meinen Desktop. Und so gehe ich hinein und ich wähle Modul zwei, Lektion eins und das wird mein Ordner sein. Und für unseren Seitennamen, Ich werde einfach mit Bootstrap arbeiten und speichern eingeben. Wenn wir uns also unser Dateifenster ansehen Wir können sehen, dass es einen Bilderordner gibt, einen Medienordner und einen Ordner für Sonstiges. In unserem Ordner befinden sich noch keine HTML-Dateien. Daher ist es wichtig zu verstehen, welche Ordner wir haben denn in einer minute, wenn wir unsere Seite mit Bootstrap erstellen, Dream Weaver wird automatisch erstellen noch ein paar Ordner für uns. Also gehen wir zum Dateimenü auf neu und wenn wir unser neues HTML-Dokument erstellen, die HTML-Dokumente, die wir von Grund auf neu erstellt haben habe das Framework von none verwendet aber dieses Mal werden wir das Bootstrap-Framework verwenden. Was genau ist Bootstrap? Nun, Bootstrap ist das, was wir ein Framework nennen. Das ist eine Gruppe vorgefertigter Komponenten die Sie verwenden können, um die Seiten einfacher zu erstellen Ihrer Website. Auf all diesen Komponenten wird nun aufgebaut, das neue HTML-5-Markup, und sie verwenden CSS drei, die neuesten Cascading Stylesheets. Jetzt hat Bootstrap nicht nur HTML fünf und CSS drei aber es verwendet auch JavaScript. Und so, wenn Sie Ihre erste Seite erstellen basierend auf diesem Bootstrap-Framework, Dream Weaver wird zusätzliche Ordner erstellen unser CSS sowie unser JavaScript zu halten. Also werden wir auf die Schaltfläche "Erstellen" klicken und wenn wir das tun, können Sie in unserem Dateibereich sehen Wir haben einen CSS-Ordner und einen JavaScript-Ordner. Und in unserem JavaScript Wir haben drei verschiedene JavaScript-Dateien, in unserem CSS haben wir eine CSS-Datei, und wir werden zum Dateimenü gehen und wir werden dieses Dokument jetzt speichern und wir werden es Indexpunkt-HTML nennen und speichern. Ich möchte ein wenig über die zugehörige Datei sprechen hier oben auf unserer Seite haben wir also unseren Quellcode und wenn wir oben auf diesen Code-Button klicken Wir können sehen, dass dies der Quellcode für unsere Seite ist. Und derzeit gibt es hier wirklich nichts aber wir haben einen Kommentar, der besagt, dass der Text hier eingefügt wird. Aber wir haben unsere Links hier drin eingerichtet, Wir haben also diesen Link zur Bootstrap-Datei, wir haben auch einen Link zu den drei JavaScript-Dateien. Also in jeder der Komponenten, die wir verwenden, einige der interaktiven Komponenten, die wir haben, Sie basieren auf dieser Technologie, Diese JavaScript-Technologie ist also bereits auf unserer Seite. Und wenn wir nach oben schauen das sind alle Dateien die wir verwenden können. Und wenn Sie ein wenig von HTML und CSS verstehen Sie können hineingehen und diese Dateien anpassen. Und wie gesagt, es ist eine gute Idee. Wenn Sie mit Bootstrap arbeiten, Es ist eine gute Idee, Grundkenntnisse in HTML und CSS zu haben in der Lage zu sein, sich Code anzusehen und Änderungen vorzunehmen zum Code, wo nötig. Mit diesen zugehörigen Dateien Ich möchte Sie darauf aufmerksam machen die beiden Bootstrap-Dateien sind Bootstrap 4.4 0.1. Dies ist eine Technologie, die 2019 herauskam, Es ist also nicht die neueste Version von Bootstrap. Dream Weaver funktioniert nicht mit der neuesten Version aber es ist immer noch eine sehr stabile Version von Bootstrap zu beginnen. Wenn wir jetzt zu unserer Registerkarte "Einfügen" gehen Wir haben auf der Registerkarte Einfügen verschiedene Dropdowns und eines dieser Dropdowns sind Bootstrap-Komponenten. Von hier aus können wir hinzufügen viele verschiedene vorgefertigte Layouts auf unserer Seite und wie das geht, lernen wir in den folgenden Lektionen. Aber im Moment werden wir nur einen Container hineinstellen. Und Sie werden feststellen, ich habe die Live-Ansicht hier oben ausgewählt. Wenn Sie mit Bootstrap arbeiten, Das Arbeiten in der Live-Ansicht ist eigentlich eine bessere Idee als in der Entwurfsansicht zu arbeiten. Stellen Sie sicher, dass wir unseren Cursor in unserem Körper haben. Hier drüben links, da klicken wir rein und wir werden auf diesen Container klicken. Und jetzt haben wir in unserem Körper einen Behälter und in diesen Behälter werden wir es tun alle anderen Komponenten unserer Seite. Also gehen wir einfach zum Dateimenü und speichern das und wir haben jetzt eine Seite mit einem Container darauf bereit für uns, unsere Inhalte zu platzieren. In dieser Lektion haben Sie also gelernt, wie Sie eine Seite erstellen mit dem Bootstrap-Framework in Adobe Dream Weaver.

Mittelstufe Anbieter : Patti Scully-Lane 5 Lektionen · 39m auf Arabisch, Deutsch, Englisch, Spanisch, Französisch, Portugiesisch, Urdu, Chinese

Kursbeschreibung

HTML- und CSS-Kenntnisse sind keine Voraussetzung für die Verwendung von Dreamweaver. Es ist jedoch empfehlenswert. In diesem Modul machen Sie sich mit der Tag-Struktur einer HTML-Seite vertraut und erfahren, wie Dreamweaver das Erlernen von HTML bei der Erstellung von Seiten über die Code-Ansicht erleichtert. Sie lernen die Funktionen des Bootstrap-Frameworks kennen und anwenden, um auf einfache Weise neue Seiten hinzuzufügen und Elemente in diese einzufügen.

Lernziele

Was Sie lernen werden

HTML-Syntax erkennen und verwenden, während Sie in der Codeansicht von Dreamweaver arbeiten
Eine neue leere Seite mit dem Bootstrap-Framework erstellen
Navigation und Fotogalerien in eine Seite mit Bootstrap einfügen
Zeilen und Spalten mit Bootstrap in eine Seite einfügen
Eine Seite auf Basis einer Bootstrap-Methode erstellen
Mit Codeansicht in Dreamweaver arbeiten, um HTML zu erlernen und zu bearbeiten

Wichtige Erkenntnisse

HTML und CSS zu verstehen ist nicht erforderlich, um Dreamweaver zu verwenden, wird aber empfohlen.
Dreamweaver's Codeansicht macht es einfach, HTML zu erlernen, während Sie Seiten erstellen.
Das Bootstrap-Framework ermöglicht es Ihnen, neue Seiten zu erstellen und Elemente leicht in sie einzufügen.
Bootstrap kann verwendet werden, um Navigation, Fotogalerien, Zeilen und Spalten in eine Seite einzufügen.

Häufig gestellte Fragen

Muss ich HTML und CSS verstehen, bevor ich diesen Kurs belege?

Nein. HTML und CSS zu verstehen ist keine Voraussetzung für die Verwendung von Dreamweaver, wird aber empfohlen. Der Kurs hilft Ihnen, sich mit der Tag-Struktur einer HTML-Seite mit Dreamweaver's Codeansicht vertraut zu machen.

Was kann ich mit Bootstrap in diesem Kurs erstellen?

Sie lernen, eine neue leere Seite mit Bootstrap zu erstellen und Navigation, eine Fotogalerie und Zeilen und Spalten in eine Seite einzufügen, sowie eine Seite basierend auf einer Bootstrap-Methode zu erstellen.

Welche Fähigkeiten werden in diesem Kurs behandelt?

Der Kurs behandelt Adobe Dreamweaver, das Bootstrap-Frontend-Framework, das Bootstrap-Protokoll und HTML-Skripterstellung und bezieht sich auf Adobe Dreamweaver und Dreamweaver MX-Zertifizierung.

Für wen ist dieser Kurs gedacht?

Es ist für Lernende geeignet, die sich mit der Tag-Struktur einer HTML-Seite vertraut machen möchten und die Funktionen des Bootstrap-Frameworks in Dreamweaver anwenden, um neue Seiten zu erstellen und Elemente in diese einzufügen.