Operation Manual

Responsives Design mithilfe von fließenden Rasterlayouts
Hinweis:
Nach oben
Nach oben
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.
Verwenden von fließenden Rasterlayouts
Erstellen von fließenden Rasterlayouts
Bearbeiten von Dokumenten mit fließendem Rasterlayout
Einfügen von fließenden Rasterelementen
Verschachteln von Elementen
Siehe auch:
Erstellen von Medienabfragen
Verwenden von fließenden Rasterlayouts
In diesem Videotutorial erfahren Sie, wie Sie fließende Rasterlayouts einsetzen: Erforschen von fließenden
Rasterlayouts (auf Englisch).
Erstellen von fließenden Rasterlayouts
1. Wählen Sie Datei > Fließendes Raster (alt).
2. 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.
3. Um die Breite einer Seite im Verhältnis zur Bildschirmgröße festzulegen, legen Sie den
Wert in Prozent fest.
4. Sie können zusätzlich die Breite des Stegs ändern. Der Steg ist der Abstand zwischen
zwei Spalten.
5. 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
222