Benutzerhandbuch Abbrechen

Responsive Design mithilfe von fließenden Rasterlayouts

Suchen

Zuletzt aktualisiert am 18. Februar 2022

Sie möchten Responsive Websites für mehrere Bildschirme entwickeln? Erfahren Sie hier, wie Sie mit fließenden Rastern in Dreamweaver Websites für mobile Geräte und Desktops entwerfen.

Das Layout einer Website muss sich an die Abmessungen des Geräts, auf dem sie angezeigt wird, anpassen und entsprechend dieser Abmessungen reagieren (responsives Design). Ein fließendes Rasterlayout bietet eine visuelle Möglichkeit, um unterschiedliche Layouts zu erstellen, die den verschiedenen Geräten entsprechen, auf denen die Website angezeigt wird.

Beispielsweise wird Ihre Website auf Desktop-PCs, Tablet-PCs und auf Mobiltelefonen angezeigt. Mithilfe von fließenden Rasterlayouts können Sie für jedes dieser Geräte ein anderes Layout festlegen. Abhängig davon, ob die Website auf einem Desktop-PC, einem Tablet-PC oder auf einem Mobiltelefon angezeigt wird, wird das jeweils passende Layout verwendet.

Weitere Informationen: Vergleich von Adaptive Layout und Responsive Layout

Der Prüfmodus ist für Dokumente mit fließendem Rasterlayout nicht verfügbar.

Fließende Rasterlayouts erstellen

Sie können vorhandene fließende Rasterlayouts in Dreamweaver 2017 bearbeiten. Sie können jedoch keine fließenden Rasterlayouts erstellen.

Stattdessen erstellen Sie Responsive Layouts in Dreamweaver 2017 mithilfe von Bootstrap. Weitere Informationen zu Bootstrap finden Sie unter Mit Bootstrap-Dateien arbeiten.

Wählen Sie Datei > Fließendes Raster (alt).
Der Standardwert für die Anzahl der Spalten im Raster wird in der Mitte des Medientyps angezeigt. Um die Anzahl der Spalten für ein Gerät anzupassen, bearbeiten Sie den Wert nach Bedarf.
Um die Breite einer Seite im Verhältnis zur Bildschirmgröße festzulegen, legen Sie den Wert in Prozent fest.
Sie können zusätzlich die Breite des Stegs ändern. Der Steg ist der Abstand zwischen zwei Spalten.
Legen Sie die CSS-Optionen für die Seite fest.

Wenn Sie auf Erstellen klicken, werden Sie aufgefordert, eine CSS-Datei anzugeben. Folgende Möglichkeiten stehen zur Verfügung:
- Erstellen einer neuen CSS-Datei
- Öffnen einer vorhandenen CSS-Datei
- Festlegen der CSS-Datei, die als CSS-Datei mit fließendem Raster zu öffnen ist
Standardmäßig wird das fließende Raster für Mobiltelefone angezeigt. Zudem wird das Bedienfeld „Einfügen“ für fließende Raster eingeblendet. Erstellen Sie Ihr Layout mithilfe der Optionen im Bedienfeld „Einfügen“.

Um in die Ansicht zum Entwickeln eines Layouts für andere Geräte zu wechseln, klicken Sie auf das entsprechende Symbol unter der Entwurfsansicht.
Speichern Sie die Datei. Wenn Sie die HTML-Datei speichern, werden Sie aufgefordert, abhängige Dateien wie boilerplate.css und respond.min.js in einem Ordner auf Ihrem Computer zu speichern. Geben Sie den Pfad an und klicken Sie auf „Kopieren“.

boilerplate.css basiert auf den HTML5-Grundbausteinen. Das ist ein Satz an CSS-Stilen, die sicherstellen, dass Ihre Webseite auf mehreren Geräten in gleicher Weise wiedergegeben wird. respond.min.js ist eine JavaScript-Bibliothek, die Unterstützung für Medienabfragen in älteren Versionen des Browsers bietet.

Dokumente mit fließendem Rasterlayout bearbeiten

Sie können Dokumente mit fließendem Rasterlayout direkt in der Live-Ansicht bearbeiten und dort folgende Aktionen durchführen:

HTML-Klassen und IDs mit Elementen verknüpfen. Weitere Informationen finden Sie unter Elementanzeige.
Bildattribute und Text bearbeiten. Weitere Informationen finden Sie unter Schnellansicht-Eigenschafteninspektor und Text direkt in der Live-Ansicht bearbeiten.
Neue Elemente einfügen. Weitere Informationen finden Sie unter Einfügen von fließenden Rasterelementen.

Mit der Elementschnellansicht können Sie auch die HTML-DOM-Struktur eines Dokuments mit fließendem Raster anzeigen.

Elemente in fließende Raster einfügen

Im Bedienfeld „Einfügen“ („Fenster“ > „Einfügen“) werden die Elemente aufgelistet, die in einem fließenden Rasterlayout verwendet werden können. Beim Einfügen der Elemente können Sie festlegen, ob Sie als fließende Elemente eingefügt werden sollen.

Klicken Sie im Bedienfeld „Einfügen“ auf das Element, das Sie einfügen möchten.
Klicken Sie in dem jetzt angezeigten Dialogfeld auf „Vor“, „Nach“ oder „Einbetten“, um das Element in Bezug auf das im Dokument hervorgehobene Referenzelement zu positionieren.
Wählen Sie eine Klasse aus oder geben Sie einen Wert für die ID ein. Das Klassenmenü zeigt Klassen aus der CSS-Datei an, die Sie beim Erstellen der Seite angegeben haben.
Aktivieren Sie das Kontrollkästchen „Als fließendes Element einfügen“.

Wenn Sie ein eingefügtes Element auswählen, werden die Optionen zum Ausblenden, Duplizieren oder Löschen des div-Elements angezeigt. Bei Divs, die übereinander gelagert werden, wird die Option zum Ersetzen von Divs angezeigt.

Option	Beschreibung
Div ersetzen	Ersetzt das gegenwärtig ausgewählte Element durch das darüber- oder darunterliegende Element.
Ausblenden	Blendet das Element aus.. Um ein Element wieder einzublenden, führen Sie einen der folgenden Schritte aus: Um einen ID-Selektor einzublenden, ändern Sie die Eigenschaft „display“ in der CSS-Datei in „block“. (display:block). Um Klassenselektoren einzublenden, entfernen Sie im Quellcode die angewendete Klasse (hide_<MediaType>).
Eine Zeile nach oben	Verschiebt das Objekt um eine Zeile nach oben.
Duplizieren:	Dupliziert das ausgewählte Element. CSS-Code, der mit dem Element verknüpft ist, wird ebenfalls dupliziert.
Löschen:	Löscht bei ID-Selektoren sowohl den HTML- als auch den CSS-Code. Um nur den HTML-Code zu löschen, drücken Sie die Entf-Taste. Bei Klassenselektoren wird nur der HTML-Code gelöscht.
Ausrichten	Bei Klassenselektoren fungiert die Ausrichtungsoption als Schaltfläche, die einen Rand mit dem Wert Null erzeugt. Bei ID-Selektoren richtet die Ausrichtungsoption das Element am Raster aus.

Hinweis:

Elemente auf einer Seite können über die „Nach-oben-Taste“ und die „Nach-unten-Taste“ zyklisch durchlaufen werden. Wählen Sie die Elementbegrenzung aus und drücken Sie dann die Pfeiltaste.

Verschachteln von Elementen

Um fließende Elemente innerhalb anderer fließender Elemente zu verschachteln, muss sich der Fokus innerhalb des übergeordneten Elements befinden. Fügen Sie dann das erforderliche untergeordnete Element ein.

Die verschachtelte Duplizierung wird ebenfalls unterstützt. Beim verschachtelten Duplizieren wird der HTML-Code (des ausgewählten Elements) dupliziert und der entsprechende Fließend-CSS-Code generiert. Absolute Elemente, die innerhalb des ausgewählten Elements enthalten sind, werden entsprechend platziert. Verschachtelte Elemente können auch mithilfe der Schaltfläche „Duplizieren“ dupliziert werden.

Wenn Sie ein übergeordnetes Element löschen, werden der diesem Element entsprechende CSS-Code, dessen untergeordnete Elemente sowie der zugehörige HTML-Code gelöscht. Verschachtelte Elemente können mithilfe der Schaltfläche „Löschen“ auch zusammen gelöscht werden (Tastaturbefehl: Strg+Entf).

Schneller und einfacher Hilfe erhalten

Neuer Benutzer?