Wie Elemente in Dreamweaver Position in einem Fluid Grid zu erstellen Drei Layouts

Was Fluid Grid Layouts macht so mächtig ist, dass Sie die Position und Größe der Elemente in Dreamweaver ändern können, so dass sie für jeden der drei Layouts unterschiedlich angeordnet sind, zu schaffen Designs, die für mobile, Tablet optimiert sind, und Desktop-Bildschirme. Um ein Element der Breite oder Position zu ändern, verwenden Sie visuelle Tools Dreamweaver.

Wie das mobile Layout in Dreamweaver bearbeiten

Dreamweaver stellt die Stile so hoch, dass sie durch jede der drei Layouts kaskadieren. Das bedeutet, dass Sie das mobile Design zunächst so, wie Sie es wünschen bekommen sollte. Gehen Sie dann auf dem Tablet-Layout auf und ändern nur die Elemente, die Sie anders auf dem Tablet angezeigt werden soll. Schließlich sehen die Desktop-Layout. Auch hier ändern sich nur die Elemente, die Sie anders angezeigt werden soll.

Um das mobile Layout zu bearbeiten, befolgen Sie diese Anweisungen.

1. Wählen Sie die Mobile Größe Option am unteren Rand des Arbeitsbereichs.

   Die Arbeitsbereich ändert die Seite in der mobilen Vorschau angezeigt werden, mit dem entsprechenden Satz von Formatvorlagen formatiert.

   Hinweis: Die drei kleinen Symbole unten rechts neben dem Zugang Arbeitsplatz bieten zu den mobilen, Tablet und Desktop-Vorschau. Wenn Sie von einem zum anderen wechseln, ändern Sie nicht nur die Größe des Anzeigebereichs, sondern auch die entsprechende Menge von Arten auf Ihre Seite angewendet.

   

2. Fügen Sie Text und Bilder zu den Elementen in Ihrem Fluid Grid Layouts genauso wie Sie Inhalte auf einer anderen Seite in Dreamweaver hinzufügen würde.

   Sie können HTML-Tags und CSS-Formatierung Text kopieren und einfügen sowie anzuwenden.

3. Wählen Sie ein Element im Designbereich.

   Der entsprechende CSS-Stil ist in der Selektoren-Panel angezeigt, wo Sie sie bearbeiten können.

4. Erstellen, bearbeiten und anwenden Stile auf Text und Bilder, wie Sie es in einer anderen Seite Design in Dreamweaver.

   

   Stile, die Sie auf alle drei Layouts bewerben möchten, müssen erstellt werden, wenn das mobile Layout ausgewählt ist, weil diese Stile für alle drei Ausführungen gelten, es sei denn durch einen anderen Stil in den Tablet oder Desktop-Layouts erstellt überschrieben.

Wie Sie das Tablet-Layout in Dreamweaver bearbeiten

Nachdem Sie das mobile Layout so, wie Sie es wollen, zu erhalten, gehen Sie zum Tablettengröße Layout und die Stile zu bearbeiten, die zu diesem Layout anwenden.

Um das Tablet-Layout zu bearbeiten, befolgen Sie diese Anweisungen.

1. Wählen Sie die Tablettengröße Option, an der rechten unteren Ecke des Arbeitsbereichs.

   Die Arbeitsbereich ändert die Seite in der Tablet-Vorschau angezeigt werden, mit dem entsprechenden Satz von Formatvorlagen formatiert.

2. Wählen Sie ein Element, das Sie in einer Spalte ändern möchten, und verwenden Sie die Griffe auf der rechten Seite die Spalte auf die gewünschte Breite ziehen.

   Dreamweaver bietet eine Sammlung von visuellen Editing-Tools, die es einfacher zu passen Sie die Größe und Positionierung von Fluidgitterelemente machen.

   

   Wenn Sie den Griff jedes Fluid Gitterelement ziehen von links nach rechts, Sie Randraum hinzufügen, die das Element zwingt, sich zu der rechten Seite des Layout zu bleiben. Wenn Sie einen Griff von rechts nach links ziehen, vergrößern, verkleinern Sie das Element.

3. Wählen Sie eine Größe verändert Element, das Sie verschieben möchten, und klicken Sie dann auf die Move Up eine Reihe Pfeil.

   Das Element bewegt sich nach oben und richtet sich neben dem Element darüber.

   

4. Um ein Element nach unten zu verschieben, klicken Sie auf die Starts Neue Zeile Pfeil.

   Hinweis: Klicken Sie auf jede der vier Symbole ein Element zu verbergen, verschieben Sie es nach oben oder unten, zu vervielfältigen oder zu löschen.

Wie die Desktop-Layout in Dreamweaver bearbeiten

Nachdem Sie das Handy bekommen und Tablet-Layouts, wie Sie es möchten, gehen Sie zu dem Desktop Size-Layout und die Stile zu bearbeiten, die zu den größten der drei Layouts anwenden.

Um den Desktop-Layout zu bearbeiten, gehen Sie folgendermaßen vor.

1. Wählen Sie die Größe Desktop-Option an der rechten unteren Ecke des Arbeitsbereichs.

   Die Arbeitsbereich ändert die Seite in der Desktop-Vorschau angezeigt werden, mit dem entsprechenden Satz von Formatvorlagen formatiert.

2. Wählen Sie eine Swap Pfeil in der Mitte von zwei Elementen, die Positionen der beiden Elemente zu wechseln.

   Die Article1 und Article2 Elemente können durch einfaches Anklicken der Swap-Pfeil zwischen ihnen ausgetauscht werden.

   

3. Formatieren Sie den Text, Bilder und andere Elemente, wie bei der Desktop-Design gewünscht.

   Alle anderen visuellen Formatierungsoptionen in der Tablet-Layout bedeckt, stehen zur Verfügung.

4. Wählen Sie Datei-Speichern Alles, um alle Dateien im Fluid Grid-Layout zu speichern.

   Wenn Sie mit der Bearbeitung eines Fluid Grid Layouts, sind Sie Änderungen an der HTML-Datei zu machen sowie zu einem externen Stylesheet. Alle speichern Option wird sichergestellt, dass Sie alle notwendigen Dateien gespeichert haben, bevor Sie sie oder veröffentlichen Sie Ihre Website auf einem Web-Server eine Vorschau.

Wie unter Layouts in Dreamweaver Schalt

Es ist eine gute Übung Fluid Grid Layouts in dieser Reihenfolge zu entwerfen: zuerst die mobile Version, dann die Tablet-Version und schließlich die Desktop-Version. Sie können jedoch wechseln zwischen diesen drei Layouts, wie Sie Ihre Entwürfe zu verfeinern.

Beachten Sie die folgenden einige allgemeine Regeln und Best Practices in den Sinn:

• Fluid Grid Layouts erstellt Medienabfragen verwenden, die als Teiler zwischen jedem der Sätze von Arten handeln, die die Handy, Tablet-Format und Desktop-Layouts.

• Wenn Sie Stile bearbeiten, müssen Sie darauf achten, dass Sie die Stile gerade bearbeiten, die arbeiten wollen, um das Layout Sie entsprechen.

• Wenn Sie die entsprechenden Arten, die automatisch in der Codeansicht erstellt werden, sehen Sie, dass Breiten und andere Größen zur vierten Dezimalstelle angegeben werden, zum Beispiel, Breite: 48,2758%. Wenn Sie diese Zahlen in der Codeansicht wechseln, wird Dreamweaver nicht mehr automatisch, sie für Sie anpassen.

• Wenn Sie Stile erstellen, die Sie für alle drei Layouts anwenden möchten, zunächst das noch von der @media Panel in der CSS-Designer-Panel auswählen,