Fließendes Rasterlayout – ein Beispiel aus der Praxis

In meinem vorherigen Video-Training habe ich ja bereits die Einstellungen der Funktion „Fließendes Rasterlayout“ in Dreamweaver CS6 erläutert. Bei dem Beispiel habe ich mich an einen einfachen Standard-Webseiten-Aufbau gehalten. In diesem Video-Training möchte ich den Grundaufbau von Webdesign-Podcast.de zeigen. In der vierteiligen Video-Trainingsreihe erkläre ich den kompletten Aufbau von Webdesign-Podcast.de, dadurch haben wir an dieser Stelle einen sehr guten Vergleich, wie schnell und einfach das Ganze hier mit der Funktion „Fließendes Rasterlayout“ in Dreamweaver CS6 funktioniert.

Einziges Problem ist die teils etwas mürrische Positionierung des Cursors, wenn man neue DIV-Tags für das fließende Raster an der richtigen Stelle anlegen will.

Wir empfehlen:
Dreamweaver-Video-Training
In diesem Tutorial möchte ich dir erklären, wie du ganz einfach und komfortabel mit dem Adobe Dreamweaver CS6 fließende Rasterlayouts erstellen kannst.

Schritt 1

Der normale Dialog über Datei>Neu ist soweit ja bekannt.

Schritt 2

In CS6 gibt es jetzt eine neue Funktion, die lässt sich entweder über den Bereich Neues Dokument ansteuern, …

Schritt 3

… in der Seitenauswahl Fließendes Rasterlayout oder …

Schritt 4

… auch direkt bei Datei>Neues>Fließendes Rasterlayout.

Schritt 5

Hier bekommen wir jetzt eine Übersicht mit den gängigen Optimierungsschritten. Das heißt, wir haben hier einmal die Einstellungsmöglichkeiten für die Mobil-Geräte, für Tablet-Geräte und für Desktop-Computer.

Schritt 6

Als Erstes geben wir die Gesamtweite des Rasters an, das heißt, wie viel Abstand wir quasi an den Seiten haben. Wenn wir hier eine Weite von 90% haben, dann bedeutet dies im Umkehrschluss, dass wir links und rechts jeweils 5% der Bildschirmgröße als Abstand haben.

Schritt 7

Wir können hier einstellen, wie viele Spalten wir in unserem Rasterlayout haben; dasselbe gilt für die Tabletgröße und auch für die mobilen Einstellungen.

Schritt 8

Als DocType wählen wir HTML 5

Schritt 9

… und es besteht die Möglichkeit, weitere CSS-Dateien anzufügen. Das brauchen wir in diesem Moment aber erst mal nicht. Wir belassen die Einstellungen hier auf den Standardwerten.

Schritt 10

Falls dieser verstellt worden sein sollte, weil ihr bereits damit herumgespielt habt, dann ist hier natürlich noch relativ präsent der Button Auf Standard zurücksetzen.

Schritt 11

Also das Ganze wie gesagt im Standard belassen und auf Erstellen klicken.

Schritt 12

Daraufhin wird uns der Dreamweaver dazu auffordern, die CSS-Datei zu speichern. Hierfür habe ich mir einen Ordner angelegt und habe den einfach „dw“ genannt und werde die CSS-Datei einfach als „style.css“ speichern.

Schritt 13

Daraufhin öffnet sich jetzt der Entwurfsmodus des Dreamweavers und wir haben hier die Smartphone-Ansicht unseres Rasterlayouts.

Schritt 14

Bevor wir jetzt Änderungen durchführen, werden wir als Erstes die Dateien speichern. Entweder über den Shortcut CMD+S beziehungsweise Strg+S oder über Datei>speichern.

Schritt 15

Die HTML-Dateien speichern wir im selben Ordner wie auch die CSS-Datei. Wir können hier natürlich auch mit Unterordnern arbeiten. Für dieses einfache Beispiel ist es hier an der Stelle allerdings egal. Ich speichere das Ganze jetzt unter „index.html“ ab.

Schritt 16

Danach müssen noch boilerplate.css und respond.min.js kopiert werden.

Schritt 17

Hier unten über die kleinen Buttons in der Statusleiste lässt sich zwischen verschiedenen Ansichtsmodi hin- und herswitchen.

Schritt 18

Das Grundraster werden wir jetzt hier erst mal in der Desktop-Ansicht fertigstellen.

Schritt 19

Dazu lösche ich sämtliche Inhalte raus.

Schritt 20

Wir erstellen uns hier das Grundgerüst in Form von Div-Tags. Das heißt, wir haben hier als Erstes den Header der Webseite.

Schritt 21

Unter dem Header kommt der main Content, den fügen wir jetzt ein über den Bereich Einfügen und dann Div-Tag des fließenden Rasterlayouts.

Schritt 22

LayoutDiv2, den können wir natürlich auch umbenennen, in dem Fall lassen wir hier die Standard-ID und fügen diesen Div ein und …

Schritt 23

… schieben ihn über die Ankerfüße am Ende zusammen, und zwar auf 7 Spalten.

Schritt 24

Wir nennen diesen Div „Das hier ist der Hauptcontent unserer Webseite“. Und um genau das, was wir gerade geschrieben haben, handelt es sich bei diesem Div auch. Es ist der Hauptcontent der Webseite.

Schritt 25

Das heißt, wir hätten hier oben noch eine Überschrift.

Schritt 26

Wir können sie als solche auch deklarieren und …

Schritt 27

… darunter dann den entsprechenden Text.

Schritt 28

Was benötigen wir dann für unsere Webseite noch? Klar, eine Sidebar. Auch hier gehen wir wieder über Div-Tag des fließenden Rasterlayouts und …

Schritt 29

… ziehen das Ganze wieder zusammen.

Schritt 30

Wir haben jetzt hier neben dem mainContent noch drei Spalten Platz. Also muss das Ganze auf 3 Spalten runtergezogen werden.

Schritt 31

Und über den kleinen Pfeil, den wir jetzt hier haben, …

Schritt 32

… können wir das Ganze neben den Hauptcontent-Container setzen.

Schritt 33

Das hier ist unsere Sidebar.

Schritt 34

Dann brauchen wir natürlich noch einen Footer.

Schritt 35

Das hier ist der Footer unserer Webseite.

Schritt 36

Damit haben wir im Prinzip das Grundlayout unserer Webseite fertig. Jetzt muss das Ganze noch angepasst werden für Tablet und mobile Geräte.

So sieht das Ganze standardmäßig aus:

Schritt 37

Auf den Tablet-Computern haben wir etwas mehr Platz, deswegen müssen wir hier noch nicht so vorgehen, dass wir alles untereinander haben. Rutschen mit dem Hauptcontent einfach etwas zusammen.

Schritt 38

Wir schieben die Sidebar auf zwei Spalten und …

Schritt 39

… setzen sie an der Stelle entsprechend daneben.

Schritt 40

Dann kommen wir zu der Smartphone-Ansicht und hier macht es schon eher Sinn, alles untereinander zu positionieren, da ansonsten später kaum Platz da ist, wenn wir das Ganze hier auch noch auf die rechte Seite packen würden.

Schritt 41

Im Prinzip hat der Dreamweaver für uns jetzt hier sämtliche Einstellungen vorgenommen über Media Queries, die wir brauchen, um unser eigentliches Layout zu erstellen.

Das heißt, wir könnten jetzt theoretisch einfach in den Code gehen oder …

Schritt 42

… auch über die Entwurf-Ansicht oder wie du sonst am liebsten arbeitest.

Schritt 43

Und dann hier die entsprechenden Div-Tags mit Inhalten, Bildern und den eigentlichen Layoutelementen füllen.

Schritt 44

Wenn man das Ganze dann auf den eigentlichen Endgeräten betrachtet, wird sich das Raster immer entsprechend anpassen, was natürlich sehr komfortabel ist.

Schritt 45

Um das jetzt etwas besser zu demonstrieren, öffne ich die Datei …

Schritt 46

… jetzt einfach noch mal im Safari.

Schritt 47

Hier sehen wir jetzt unser Layout genauso, wie wir es für die Desktop-Variante erstellt haben. Oben haben wir den Header-Bereich, den Content-Bereich, rechts daneben die Sidebar und darunter den Footer.

Schritt 48

Jetzt ziehen wir das Ganze einfach noch mal zusammen und dann bricht es in die entsprechenden Größen einfach um.

Tablet

Schritt 49

Mobil

Das Ganze geht ohne Probleme mit und auf der Basis lassen sich extrem einfach fließende Rasterlayouts und damit gutes Responsive Webdesign machen.

Wir empfehlen:
PHP-Workshop-DVD - Basics & Tricks

Unsere Empfehlung für dich

Grundlagen HTML, CSS und JavaScript

Grundlagen HTML, CSS und JavaScript

Die drei wichtigsten Säulen des Webs – HTML, CSS und JavaScript. Wer die Grundlagen kennt, navigiert mit klarer Sicht durchs Netz und ist zudem in der Lage, ganz einfach selbst in die Programmzeilen einzugreifen.

  • 62 Lektionen in über acht Stunden Video-Training zum Einstieg in HTML, CSS und JavaScript
  • Einfach Grundlagenkenntnisse erwerben und in inklusiven Übungen direkt ausprobieren
  • Von Jan Brinkmann, einem Web-Entwickler aus Leidenschaft mit über 15 Jahren Erfahrung

Zum Training