Wählen Sie Datei > Fließendes Raster (alt).
Zuletzt aktualisiert am
20. Dezember 2021
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.
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 |
Tausche das aktuell ausgewählte Element mit dem Element darüber oder darunter aus. |
|
Ausblenden |
Blendet das Element aus. |
|
Eine Zeile nach oben |
Verschiebt das Element um eine Zeile nach oben |
|
Duplizieren |
Dupliziert das ausgewählte Element. Das mit dem Element verknüpfte CSS wird ebenfalls dupliziert. |
|
Löschen |
Löscht bei ID-Selektoren sowohl den HTML- als auch den CSS-Code. Um nur HTML zu löschen, drücke Entf. |
|
Ausrichten |
Bei Klassen-Selektoren fungiert die Option Ausrichten als Button ohne Randabstand. |
Anmerkung
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).
Ähnliche Themen
Erstellen ansprechender Websites in Dreamweaver
Entwirf, code und verwalte dynamische Websites mit einem leistungsstarken All-in-one-Tool.
