Operation Manual

Fließende Rasterlayouts
Nach oben
Nach oben
Verwenden von fließenden Rasterlayouts
Tutorials zu fließenden Rasterlayouts
Erstellen von fließenden Rasterlayouts
Einfügen von fließenden Rasterelementen
Verschachteln von Elementen
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: Adaptive Layout versus 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.
Tutorials zu fließenden Rasterlayouts
How to Use Fluid Grid Layouts in Dreamweaver CS6 (Tutorial)
Adobe TV: Creating adaptive designs with fluid grid layouts in Dreamweaver CS6 (Video)
Getting Started with Dreamweaver CS6 Fluid Grids (Tutorial)
Erstellen von fließenden Rasterlayouts
1. Wählen Sie „Datei“ > „Neues fließendes Rasterlayout“.
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
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.
6. 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.
186