Klicken Sie auf Datei > Neu.
Für eine Responsive-Website mit Priorisierung von Mobilgeräten können Sie in Dreamweaver Bootstrap-Startvorlagen und Bootstrap-Komponenten mit Unterstützung für Drag & Drop verwenden.
Bootstrap ist ein populäres kostenloses HTML-, CSS- und JavaScript-Framework zum Entwickeln von Responsive-Websites mit Priorisierung von Mobilgeräten. Das Framework enthält Responsive-CSS- und -HTML-Vorlagen für Schaltflächen, Tabellen, Navigation, Bildkarussells und andere Elemente, die Sie auf der Webseite verwenden können. Es sind einige optionale JavaScript-Plug-ins verfügbar, die selbst Entwicklern mit lediglich grundlegenden Codierungskenntnissen das Entwickeln großartiger Responsive-Websites ermöglichen.
Mit Dreamweaver können Sie Bootstrap-Dokumente erstellen und außerdem vorhandene Webseiten bearbeiten, die mit Bootstrap erstellt wurden. In Dreamweaver können Sie fertige Bootstrap-Dateien und vorläufige Designs bearbeiten und dabei nicht nur Codeänderungen vornehmen, sondern auch visuelle Bearbeitungsfunktionen verwenden, z. B. die Bearbeitung in der Live-Ansicht, den visuellen CSS-Designer, visuelle Medienabfragen und „Extract“, um Änderungen am Design vorzunehmen.
Zurzeit werden die Bootstrap-Versionen 4.4.1 und 3.4.1 unterstützt.
Beim Erstellen von Dokumenten mit fließendem Rasterlayout wurden die entsprechenden Klassen für das Responsive-Layout Ihrer Webseiten von Dreamweaver automatisch angewendet. So konnten Sie sich auf Ihre Inhalte konzentrieren und mussten nur festlegen, wie das Layout in den verschiedenen Formfaktoren umbrochen werden sollte.
In Bootstrap-Dokumenten konzentrieren Sie sich ebenfalls auf Inhalt und Design und Dreamweaver kümmert sich um das Responsive-Layout Ihrer Webseite. Dazu ist es eng mit dem Bootstrap-Framework integriert.
Dreamweaver unterstützt derzeit die Bootstrap-Versionen 3.4.1 und 4.4.1:
„Bootstrap 3.4.1 umfasst ein fließendes Rastersystem mit einem für Mobilgeräte optimierten Responsive Design, das entsprechend der Geräte- oder Viewport-Größe auf bis zu 12 Spalten skaliert werden kann. Außerdem sind Klassen für benutzerfreundliche Layout-Optionen sowie leistungsstarke Mixins zum Generieren von semantischen Layouts enthalten.“ – Bootstrap-Dokumentation.
„Bootstrap 4.4.1 weist grundlegende Änderungen auf, z. B. ein vielseitiges Flexbox-Raster mit Priorisierung von Mobilgeräten, mit dem Sie Layouts in beliebiger Form und jeder Größe erstellen können. Ermöglicht wird dies durch ein zwölfspaltiges System, fünf Responsive-Standardebenen, Sass-Variablen und Mixins sowie Dutzende vordefinierte Klassen.“ – Bootstrap-Dokumentation.
Für den Einstieg in Bootstrap-Dokumente mit Dreamweaver sollten Sie die Bootstrap-Startvorlagen verwenden. Dreamweaver enthält eine Reihe von Vorlagen für verschiedene Arten von häufig erstellten Websites, z. B. für E‑Commerce oder Portfolios.
Wenn Sie ein Bootstrap-Dokument von Grund auf neu erstellen möchten, finden Sie weitere Informationen im Abschnitt Bootstrap-Dokumente erstellen.Nein, es gibt kein direktes Verfahren zum Konvertieren von vorhandenen Dokumenten mit fließendem Rasterlayout in Bootstrap-Dokumente. Bootstrap-Dokumente werden in Dreamweaver jedoch ähnlich wie Dokumente mit fließendem Rasterlayout erstellt. Sie können z. B. zunächst ein Bootstrap-Dokument direkt über das Dialogfeld Neues Dokument erstellen. Während Dokumente mit fließendem Rasterlayout für drei grundlegende Formfaktoren erstellt werden (Mobilgeräte, Tablets und Desktop), erstellen Sie für Bootstrap zunächst ein Dokument für Standard-Bildschirmgrößen – klein, mittel, groß und sehr groß. Die Optionen zur Layoutbearbeitung, die beim Klicken auf Elemente in Bootstrap-Dokumenten angezeigt werden, sind ebenfalls mit den Optionen für Dokumente mit fließendem Rasterlayout vergleichbar.
Ja, Sie können alte Sites in der neuesten Version von Dreamweaver importieren. Dabei sucht Dreamweaver im Ordner Stammordner der Site/css/ nach der Bootstrap-CSS-Datei.
Beginnen Sie mit dem Entwurf Ihrer Bootstrap-Website, indem Sie eine der folgenden Optionen im Dialogfeld Neues Dokument wählen:
Mit Bootstrap-Startvorlagen können Sie in wenigen einfachen Schritten Webseiten in vielen beliebten Layouts erstellen. Alle abhängigen Dateien im Framework werden automatisch gespeichert.
Klicken Sie auf Datei > Neu.
Klicken Sie im Dialogfeld Neues Dokument auf Startvorlagen und wählen Sie aus der Liste der Bootstrap-Vorlagen die gewünschte Vorlage.
Klicken Sie auf Erstellen.
Es wird eine HTML-Seite erstellt, die auf der gewählten Vorlage basiert. Sie können die Seite jetzt bearbeiten, indem Sie Komponenten hinzufügen oder löschen und nach Bedarf Text oder Elemente ändern.
Sie können ein auf dem Bootstrap-Framework basierendes HTML-Dokument als Ausgangspunkt für Ihre Responsive-Website verwenden. Dabei können Sie angeben, ob Sie einen neuen Satz Bootstrap-Framework-Dateien erstellen oder die vorhandenen Dateien verwenden möchten. Nachdem das Dokument erstellt wurde, können Sie über das Bedienfeld „Einfügen“ in Dreamweaver zusätzliche Bootstrap-Komponenten wie Akkordeons oder Karussells hinzufügen. Wenn Sie mit Photoshop-Kompositionen arbeiten, können Sie mit Extract Bilder, Schriften, Stile, Text und weitere Inhalte in das Bootstrap-Dokument einfügen.
Klicken Sie auf Datei > Neu.
Das Dialogfeld Neues Dokument wird angezeigt. Klicken Sie auf Neues Dokument > HTML und klicken Sie dann auf die Registerkarte Bootstrap.
Um eine neue Datei „bootstrap.css“ (und zugehörige Bootstrap-Dateien) zu erstellen, führen Sie die folgenden Schritte aus:
Geben Sie an, ob Sie ein neues Bootstrap-CSS erstellen oder ein vorhandenes CSS verwenden möchten.
Wenn Sie ein neues CSS erstellen, wird im Stammverzeichnis der Site ein Ordner mit dem Namen „css“ erstellt und die Datei „bootstrap.css“ wird in den neuen Ordner kopiert. Wenn Sie ein vorhandenes CSS verwenden, geben Sie den entsprechenden Pfad an oder suchen Sie nach der CSS-Datei.
Klicken Sie auf Neu erstellen.
(Optional) Wenn Sie ein anderes CSS an Ihr Dokument anhängen möchten, klicken Sie im Abschnitt CSS anfügen auf das Symbol . Das Dialogfeld Externes Stylesheet anfügen wird angezeigt. Geben Sie die gewünschten Einstellungen an und klicken Sie auf OK.
Mit der Option „Vordefiniertes Layout einbinden“ wird eine grundlegende Bootstrap-Dokumentstruktur bereitgestellt.
Wenn das Dokument keine grundlegende Struktur enthalten soll und Sie mit einem leeren Dokument beginnen möchten, deaktivieren Sie die Option Vordefiniertes Layout einbinden.
(Optional) Das Standardlayout enthält 12 Spalten mit einer Stegbreite von 30 px. Die Standardbildschirmgrößen sind 576 px, 768 px, 992 px und 1200 px.
Wenn Sie diese Einstellungen ändern möchten, klicken Sie auf Anpassen. Die Datei „bootstrap.css“ wird entsprechend geändert.
Bei Bootstrap 3.4.0 sind die Standardbildschirmgrößen 768 px, 992 px und 1200 px.
Wählen Sie Seite mit Extract aus Photoshop-Kompositionen erstellen, wenn das Bedienfeld „Extract“ geöffnet werden soll (falls es geschlossen ist). Auf diese Weise können Sie sofort beginnen, Elemente aus Photoshop-Kompositionen direkt zu extrahieren.
In der Standardeinstellung wird eine neue Site mit der Bootstrap-Version 4.4.1 erstellt. Nach dem Erstellen des Dokuments befinden sich die Ordner „css“ und „js“ im Stammordner der Site. Wenn Sie die Site jedoch mit der Bootstrap-Version 3.4.1 erstellen möchten, wählen Sie Site > Sites verwalten. Wählen Sie den Stammordner der Site aus. Klicken Sie auf Erweiterte Einstellungen > Bootstrap. Wählen Sie im Dropdown-Menü Bootstrap-Version die Version 3.4.1 aus. Bei der Bootstrap-Version 3.4.1 finden Sie die Ordner „css“, „js“ und „fonts“ im Stammordner der Site.
Wenn Sie eine Seite mit Bootstrap 4.4.1 erstellen, wird jQuery in der Version 3.4.1 unterstützt. Die Bootstrap-Startvorlagen werden für die Verwendung von Bootstrap 4.4.1 aktualisiert.
Wenn Sie Bootstrap-Komponenten zu einer Bootstrap-Seite hinzufügen, können Sie mit Bootstrap 4.0.0 erstellte Seiten auf Bootstrap 4.4.1 und die jQuery-Version auf 3.4.1 aktualisieren. Klicken Sie, wenn Sie Bootstrap-Komponenten in eine Seite einfügen, im angezeigten Dialogfeld auf Ja.
Wenn Sie eine Site mit Bootstrap 4.0.0 importieren oder eine Site von einer vorigen Version zur nächsten Version von Dreamweaver migrieren, wird die Bootstrap-Version unter Site-Definition > Erweiterte Einstellung > Bootstrap auf 4.4.1 festgelegt.
Bei Bootstrap 4.3.1 wurde die Höhe einer Rasterzeilenspalte von 1 px in 0 px geändert. Damit diese in der Live-Ansicht zu sehen ist, fügen Sie der Rasterzeilenspalte Inhalt hinzu.
Wenn Sie vorhandene Bootstrap-Framework-Dateien verwenden möchten, führen Sie die folgenden Schritte aus:
Klicken Sie auf Vorhandene verwenden und geben Sie den Pfad zur Datei „bootstrap.css“ an. Alternativ können Sie nach dem Speicherort der CSS-Datei suchen.
(Optional) Wenn Sie ein anderes CSS an Ihr Dokument anhängen möchten, klicken Sie im Abschnitt CSS anfügen auf das Symbol . Geben Sie im Dialogfeld Externes Stylesheet anfügen die gewünschten Einstellungen an und klicken Sie auf OK.
Mit der Option Vordefiniertes Layout einbinden wird eine grundlegende Bootstrap-Dokumentstruktur bereitgestellt. Wenn das Dokument keine grundlegende Struktur enthalten soll und Sie mit einem leeren Dokument beginnen möchten, deaktivieren Sie die Option Vordefiniertes Layout einbinden.
Klicken Sie auf Erstellen.
Die erstellte Datei „bootstrap.css“ ist schreibgeschützt. Daher können diese Stile nicht mit dem CSS Designer bearbeiten; das Eigenschaftenfenster im CSS Designer ist für Bootstrap-Dateien deaktiviert.
Wenn Sie die Stile des Bootstrap-Dokuments bearbeiten möchten, erstellen Sie eine andere CSS-Datei, in der Sie die vorhandenen Stile überschreiben, und fügen Sie die Datei an das Dokument an.
Es wird empfohlen, Dokumente, die in Bootstrap ab Version 3 erstellt wurden, in Dreamweaver zu öffnen und zu bearbeiten.
Sie können Bootstrap-Dateien mit einer der folgenden Methoden öffnen:
Beim Öffnen einer Bootstrap-HTML-Datei in Dreamweaver:
Dreamweaver erkennt die CSS-Dateien, die mit einer Bootstrap-HTML-Datei verknüpft sind, wenn der CSS-Dateiname „bootstrap“ enthält. Als Verweis auf eine CSS-Datei kann jeder der folgenden Verweise verwendet werden:
Die minimierte oder nicht minimierte CSS-Datei ist lokal gespeichert. Beispiel:
<link href="css/bootstrap.css" rel="stylesheet"> oder
<link href="css/bootstrap.min.css" rel="stylesheet">
Eine minimierte oder nicht minimierte Remote-CSS-Datei. Beispiel:
<link href="http://somewebsite.com/css/bootstrap.css" rel="stylesheet">
<link href="http://somewebsite.com/css/bootstrap.min.css" rel="stylesheet">
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/<Bootstrap-Versionsnummer>/css/bootstrap.min.css" rel="stylesheet">
In Dreamweaver werden Bootstrap-Stylesheets in link- und import-Tags unterstützt. Ein verschachtelter Import (eine Verknüpfung mit einem Stylesheet, in das wiederum ein anderes Stylesheet importiert wird) wird jedoch nicht unterstützt.
In einigen Fällen sollen bestimmte Elemente nur in einem Viewport angezeigt werden und in anderen Viewports aus Designgründen nicht sichtbar sein.
Um ein Bootstrap-Element auszublenden, klicken Sie mit der rechten Maustaste darauf und wählen Sie „Element ausblenden“. Das Element wird vorübergehend ausgeblendet.
Um ausgeblendete Elemente einzublenden, klicken Sie mit der rechten Maustaste darauf und wählen Sie „Ausgeblendete Elemente verwalten“. Die ausgeblendeten Elemente werden mit grau schraffiertem Hintergrund angezeigt. Klicken Sie auf das Augensymbol, um das Element einzublenden.
Mit der Option „Bootstrap-Komponenten“ im Bedienfeld Einfügen werden alle Bootstrap-Komponenten aufgeführt, die Sie der Webseite in Dreamweaver hinzufügen können. Welche Komponenten im Bedienfeld Einfügen aufgeführt werden, hängt von der Bootstrap-Version in der Datei „bootstrap.css“ ab, die mit der HTML-Seite verknüpft ist. Für Bootstrap 4.0.0 werden z. B. zusätzliche Komponenten wie Karten und Badges aufgeführt. Komponenten wie Glyphicons, Bedienfelder, Wells und Miniaturansichten sind nur in Bootstrap 3.3.7 verfügbar. Abhängig von der Bootstrap-Version werden die entsprechenden Komponenten im Bedienfeld Einfügen angezeigt. Außerdem ist die Spinners-Komponente nur in Bootstrap v4.4.1 verfügbar.
Die Komponenten im Bedienfeld Einfügen werden anhand folgender Kriterien ausgefüllt:
Um eine Komponente hinzuzufügen, ziehen Sie sie aus dem Bedienfeld auf die Webseite. Bevor Sie die Komponente einfügen, beachten Sie auch die visuellen Hilfsmittel, z. B. Live-Hilfslinien, die Funktion zum präzisen Einfügen (mit DOM) und den Positionierungsassistenten. Mit diesen Hilfsmitteln können Sie die Komponenten schnell und genau auf der Seite einfügen. Weitere Informationen zum Einfügen von Elementen auf der Webseite finden Sie unter Überblick über das Bedienfeld „Einfügen“.
Klicken Sie auf die gewünschte Zeile, nach der Sie die neue Zeile einfügen möchten. Klicken Sie dann auf „Neue Zeile hinzufügen“. Es wird eine Bootstrap-Zeile zusammen mit zwei untergeordneten Spaltenelementen mit jeweils sechs Spalten hinzugefügt.
Der Code für die hinzugefügte Zeile lautet wie folgt:
<div class="row">
<div class="col-*-6"></div>
<div class="col-*-6"></div>
</div>
Dabei stellt „*“ die aktuelle Bildschirmgröße in Dreamweaver dar.
Wählen Sie die gewünschte Spalte aus und klicken Sie dann auf das Symbol „Neue Spalte hinzufügen“. Die ausgewählte Spalte wird ohne ihre untergeordneten Elemente dupliziert.
Allen leeren Spalten wird eine Mindesthöhe von 20 px zugewiesen. Diese Höhe wird jedoch nicht wirklich der Seite hinzugefügt. Sie wird nur in der Live-Ansicht angezeigt, um Elemente einfacher in die Spalten einfügen zu können.
Klicken Sie auf die Zeile oder Spalte, die Sie duplizieren wollen, und klicken Sie dann rechts unten auf das Symbol zum Duplizieren. Die gesamte Zeile bzw. Spalte wird zusammen mit ihrem Inhalt kopiert.
Mit der Option zum Hinzufügen von Zeilen oder Spalten wird die Zeile bzw. Spalte mit den Klassen, aber ohne den Inhalt dupliziert.
Das Ändern der Größe von Spalten und das Anwenden eines Offsets auf Spalten sind zwingend erforderlich, insbesondere beim Erstellen von Responsive Designs für verschiedene Viewports.
Klicken Sie auf die gewünschte Spalte und ziehen Sie den Griff, um die Größe zu ändern. Wenn Sie bei einem Bootstrap 4.0.0-Dokument die Größe einer Spalte ändern, wird die Klasse „col-*-n“ hinzugefügt. Dabei stellt „*“ die aktuelle Medienabfrage dar („sm“, „md“, „lg“ oder „xl“) und „n“ stellt die Anzahl der eingenommenen Spalten dar. Bei der Bildschirmgröße Sehr klein wird die Klasse „col-n“ hinzugefügt.
Wenn Sie bei einem Bootstrap 3.3.7-Dokument die Größe einer Spalte ändern, wird die Klasse col-*-n hinzugefügt. Dabei stellt „*“ die aktuelle Medienabfrage dar („xs“, „sm“, „md“ oder „lg“) und „n“ stellt die Anzahl der eingenommenen Spalten dar.
Dreamweaver erkennt die aktuelle Bildschirmgröße und fügt die entsprechende Klasse hinzu. Um die Spaltengröße an bestimmte Viewports anzupassen, ändern Sie die Viewport-Größe mit den Optionen in der rechten unteren Ecke oder in der Navigationsleiste. Ändern Sie dann die Größe der Spalten nach Bedarf.
Klicken Sie auf die gewünschte Spalte und ziehen Sie den Griff nach links, um einen Offset auf die Spalte anzuwenden. Der Offset wird als schraffierter Bereich angezeigt. Wenn Sie bei einem Bootstrap 4.0.0-Dokument einen Offset auf die Spalte anwenden, wird die Klasse „offset-*-n“ hinzugefügt. Dabei stellt „*“ die aktuelle Medienabfrage dar („sm“, „md“, „lg“ oder „xl“) und „n“ stellt die Anzahl der eingenommenen Spalten dar.
Wenn Sie bei einem Bootstrap 3.3.7-Dokument einen Offset auf die Spalte anwenden, wird die Klasse „col-*-offset-n“ hinzugefügt. Dabei stellt „*“ die aktuelle Medienabfrage („xs“, „sm“, „md“ oder „lg“) dar und „n“ stellt die Anzahl der Spalten dar, um die die Spalte verschoben wird.
Dreamweaver erkennt die aktuelle Bildschirmgröße und fügt die entsprechende Klasse hinzu. Um den Offset von Spalten an bestimmte Viewports anzupassen, ändern Sie die Viewport-Größe mit den Optionen in der rechten unteren Ecke oder in der Navigationsleiste. Wenden Sie dann nach Bedarf einen Offset auf die Spalten an.
Bei Ihrem Konto anmelden