Wählen Sie „Datei“ > „Neues fließendes Rasterlayout“.
Zuletzt aktualisiert am
30. April 2021
Das Layout einer Website muss sich an die Abmessungen des Geräts, auf dem sie angezeigt wird, anpassen und entsprechend dieser Abmessungen reagieren. Fließende Rasterlayouts bieten eine visuelle Möglichkeit, um unterschiedliche Layouts zu erstellen, die den 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
Die Dreamweaver 12.2 Creative Cloud-Version enthält viele Verbesserungen für fließende Rasterlayouts, wie etwa die Unterstützung struktureller HTML 5-Elemente und eine einfache Bearbeitung verschachtelter Elemente. Eine vollständige Liste der Verbesserungen finden Sie hier.
Hinweis:
Für Dokumente mit fließendem Rasterlayout ist in Dreamweaver ab Version 13.1 kein Prüfmodus mehr verfügbar.
Verwenden von fließenden Rasterlayouts
In diesem Videotutorial erfahren Sie, wie Sie fließende Rasterlayouts einsetzen: Exploring fluid grid layouts.
Erstellen von fließenden Rasterlayouts
-
-
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 „Einfügen“-Bedienfeld 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.
Einfügen von fließenden Rasterelementen
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.
-
Wählen Sie im Bedienfeld „Einfügen“ die Elemente aus, die Sie einfügen möchten.
-
Wählen Sie in dem Dialogfeld, das angezeigt wird, 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, Sperren oder Löschen des Divs angezeigt. Bei Divs, die übereinander gelagert werden, wird die Option zum Ersetzen von Divs angezeigt.
Option Beschriftung Beschreibung A Div ersetzen Ersetzt das gegenwärtig ausgewählte Element durch das darüber- oder darunterliegende Element.
B 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 in der in der CSS-Datei die Eigenschaft „display“. (display:block)
Um Klassenselektoren einzublenden, entfernen Sie im Quellcode die angewendete Klasse(hide_<Medientyp>).
C Eine Zeile nach oben Verschiebt das Objekt um eine Zeile nach oben.
D Duplizieren Dupliziert das ausgewählte Element. CSS-Code, der mit dem Element verknüpft ist, wird ebenfalls dupliziert.
E 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.
F Sperren Konvertiert das Element in ein absolut positioniertes Element.
G 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:Fließende Elemente auf einer Seite können mithilfe der linken und rechten Pfeiltaste 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).
