How to Position Elements in Dreamweaver to Create Three Layouts in One Fluid Grid
What makes fluid grid layouts so powerful is that you can change the position and size of elements in Dreamweaver so that they are arranged differently for each of the three layouts, creating designs that are optimized for mobile, tablet, and desktop screens. To change an element’s width or position, you use Dreamweaver’s visual tools.
How to edit the mobile layout in Dreamweaver
Dreamweaver sets up the styles in such a way that they cascade through each of the three layouts. That means you should get the mobile design the way you want it first. Then move on to the tablet layout and change only the elements that you want to appear differently on the tablet. Finally, view the desktop layout. Again, change only the elements that you want to be displayed differently.
To edit the mobile layout, follow these instructions.
Select the Mobile Size option at the bottom of the workspace.
The workspace area changes to display the page in the mobile preview, formatted with the corresponding set of styles.
Note: The three small icons at the bottom right of the workspace provide access to the mobile, tablet, and desktop previews. When you switch from one to the other, you change not only the size of the display area but also the corresponding set of styles applied to your page.
Add text and images to the elements in your fluid grid layout just as you would add content to any other page in Dreamweaver.
You can copy and paste text as well as apply HTML tags and CSS formatting.
Select an element in the design area.
The corresponding CSS style is displayed in the Selectors panel, where you can edit it.
Create, edit, and apply styles to text and images as you would in any other page design in Dreamweaver.
Styles that you want to apply to all three layouts should be created when the mobile layout is selected because these styles will apply to all three designs unless overridden by another style created in the tablet or desktop layouts.
How to edit the tablet layout in Dreamweaver
After you get the mobile layout the way you want it, move on to the tablet size layout and edit the styles that apply to that layout.
To edit the tablet layout, follow these instructions.
Select the Tablet Size option, at the bottom right of the workspace.
The workspace area changes to display the page in the tablet preview, formatted with the corresponding set of styles.
Select an element that you want to change into a column and use the handles on the right side to drag the column to the desired width.
Dreamweaver provides a collection of visual editing tools that make it easier to adjust the size and positioning of fluid grid elements.
If you drag the handle of any fluid grid element from left to right, you add margin space that forces the element to stay to the right of the layout. If you drag a handle from right to left, you resize the element.
Select a resized element that you want to reposition, and then click the Move Up a Row arrow.
The element moves up and aligns itself next to the element above it.
To move an element down, click the Starts New Row arrow.
Note: Click each of the four icons to hide an element, move it up or down, duplicate or delete it.
How to edit the desktop layout in Dreamweaver
After you get the mobile and tablet layouts the way you want them, move on to the desktop size layout and edit the styles that apply to the largest of the three layouts.
To edit the desktop layout, follow these instructions.
Select the Desktop Size option at the bottom right of the workspace.
The workspace area changes to display the page in the desktop preview, formatted with the corresponding set of styles.
Select a Swap arrow in the middle of any two elements to switch the positions of the two elements.
The Article1 and Article2 elements can be swapped by simply clicking the Swap arrow between them.
Format the text, images, and other elements as desired for the desktop design.
All other visual formatting options covered in the tablet layout, are available.
Choose File→Save All to save all the files in the fluid grid layout.
When you’re editing a fluid grid layout, you’re making changes to the HTML file as well as to an external style sheet. Using the Save All option ensures that you have saved all the necessary files before you preview them or publish your site to a web server.
How to switching among layouts in Dreamweaver
It’s good practice to design fluid grid layouts in this order: first the mobile version, then the tablet version, and finally the desktop version. You can, however, switch among these three layouts as you refine your designs.
Keep in mind the following few general rules and best practices:
Fluid grid layouts are created using media queries that act as dividers between each of the sets of styles that format the mobile, tablet, and desktop layouts.
When you edit styles, you need to take care that you’re editing the styles that correspond to the layout you want to work on.
If you view the corresponding styles that are automatically created in code view, you will see that widths and other sizes are specified to the fourth decimal point, for example, width: 48.2758%. If you change these numbers in code view, Dreamweaver will no longer automatically adjust them for you.
When you create styles that you want to apply to all three layouts, first select Any Media from the @Media panel in the CSS Designer panel,