Designing Responsive Web Pages Using a Fluid Grid Layout in Adobe Dreamweaver CS6
Note: This excerpt is from the forthcoming book Adobe Creative Suite 6 Design and Web Premium Classroom in a Book, ISBN 9780321822604.
From the book
From the book
Designing responsive web pages using a fluid grid layout
In the following exercises you’ll work on two pages of a prototype website in Adobe Dreamweaver. You’ll learn how to quickly set up a web page layout that adapts to different screen sizes, and preview the design in a web browser.
- Start Dreamweaver, and in the Welcome Screen click Fluid Grid Layout.
- Leave the defaults and click Create.
- In the Save Style Sheet File As dialog box that appears, browse to select the CSS folder inside the Lesson05 folder. With the CSS subfolder selected, name the new CSS file fluid.css, and click Save.
- Choose File > Save. Name the file fluid.html, and save the new HTML5 file. Be sure to save it at the top level of Lesson05 folder, alongside the CSS subfolder.
- In the Copy Dependent Files dialog box that appears, click Copy to save the two listed files (which are required) automatically to the proper subfolder inside your Lesson05 folder.
- Click the Split button at the top left of the document window. Now you can see Code view and Design view at the same time. If you edit either view, both views update. If you prefer, you can show just the code or just the design.
- In Design view, click inside the green default div container to select it. A div is a layer in an HTML page.
- In the HTML section of the Properties inspector at the bottom of the window, select the existing div container’s name in the ID field (LayoutDiv1) and rename it Header.
- Click to the right of the bottom-right corner of the existing green gridContainer div element. In Code view on the left, verify that the cursor’s insertion point is located after the closing </div> tag of the default gridContainer layer.
- In the Layout category of the Insert panel, click Insert Fluid Grid Layout Div Tag.
- In the ID field of the Insert Fluid Grid Layout Div Tag dialog box, name the second div tag Nav.
- Add four more divs by repeating steps 10 and 11, and name the new divs Intro, Main, Aside, and Footer.
- In the Resolution Switcher, click the largest icon (Desktop Size) to see how the layout changes.
- Click the Magnification pop-up menu and choose Fit All so that you can see the entire layout, and then click the Tablet Size and Mobile Size buttons in the Resolution Switcher to see how the current layout adjusts to each size. When you’re done, choose 100% from the Magnification pop-up menu.
- Click the Live button at the top of the document window. This changes the Design view to Live view, which previews your site using WebKit so that it accurately appears as it would on WebKit-based web browsers.
- Click the Tablet button, and as needed, adjust the width of the Design view by dragging the separator in the middle of the window so that you can see the entire width of the Tablet size at 100% magnification.
- Drag the handle in the middle of the right edge of the Aside div element and make it four columns wide. Notice that the width automatically snaps to the column grid. Adjust the width of the Main layer in the same way.
- Select the Aside layer and click the Move Up a Row button. Now the Main and Aside layers are on the same row, which makes sense on the greater screen width of a tablet.
- Use the Resolution Switcher to switch between the Mobile and Tablet sizes, and view the different layouts you’ve assigned to each size. Feel free to experiment further with the layouts for the three sizes.
- Close the fluid.html file, and save changes if asked.
)
In the New Document dialog box, the number inside each screen-size graphic is the number of columns across the design, and the percentage below each graphic is the percentage of the width of the screen used for the body of the page.
Now you’ll save the page for the first time. This happens in two stages: Saving a CSS file and then an HTML file. The CSS file defines the page’s styles and layout, while the HTML file describes what’s included in the file. In other words, for a web page, CSS defines form and HTML defines content.
)
)
)
)
At the bottom of the window is the Resolution Switcher with three icons and a pop-up menu. The three icons are presets for previewing mobile, tablet, and desktop sizes in Design view, and the pop-up menu lets you set up custom sizes. It’s recommended that you start designing for the smallest screen size you want your site to support.
)
To the left of the Resolution Switcher is a magnification pop-up menu. It’s enabled when Design view is active.
)
Now you can see that for a small mobile screen, the content of every layer (div) becomes a row taking up the entire width of the screen and spanning all of the columns displayed in pink.
)
)
So far you’ve adjusted two different layouts for mobile and tablet screen sizes. Let’s see how such a design could look in finished form.