Exercise: Building a Responsive Page with the Fluid Grid Layout Feature Now that you know the basic principles of responsive web design CSS3 Media Queries, fluid images and media, and fluid grids, you ll build a simple page from the assets in the portfolio exercise folder. Defining the Site Extract the exercise files from the zip file in the portfolio and put the folder in a convenient location on your computer. 1. Define a site based on the exercise folder. You will only need to provide a Site Name and point to the location of the exercise files for the Local Site Folder. The exercise files include a folder of images, a folder of videos, and a text document with copy for the page. Next you will use Dreamweaver s visual tool for creating responsive web pages. Creating the Fluid Grid Layout 1. Select File > New. 2. Select Fluid Grid Layout on the left. 1
3. You can set columns, gutters, and percent of window for each phone, tablet, and desktop. For this exercise, leave all values at their defaults. 4. Select HTML5 as the DocType and click Create. 5. Dreamweaver will display a dialog box and ask you to name the automatic CSS document it creates for you. You can select a name or use layout.css and then click the Save button. 2
6. Save the HTML file with a name such as index.html 7. Dreamweaver warns you that it is going to write dependent files boilerplate, responsive, and basic styles to the site. These files would need to be uploaded to the server along with the page. 8. Click OK. You should take a moment to look at the layout.css document to examine how the base styles work. As you add elements to the page, Dreamweaver will continue to write styles to this style sheet to ensure that the layout work as you expect. Setting Up the Page Structure Notice that the HTML page opens to mobile first phone view. 1. Switch to Dreamweaver s Split View. 2. Delete first nested Div (with an id of div1 ) inside <div class="gridcontainer clearfix"> so we can give it a more semantic name. 3
3. Use the Structure category of the Insert panel to insert Header. 4. Type header in the Class field of the Insert Header dialog box. 5. Leave the checkbox to Insert as a Fluid Element checked. (Do this from now on with all elements.) 4
6. Click OK. 7. Click the Div element in the Insert panel and give the Div a class of sidebar1 in the Class field of the Insert Div dialog box. 8. Click OK. 9. Click the Div element in the Insert panel and give the div a class of content in the Class field of the Insert Div dialog box. 10. Click OK. 11. Click the Div element in the Insert panel and give the Div a class of sidebar2 in the Class field of the Insert Div dialog box. 12. Click OK. 13. Use the Insert panel to insert Footer. 14. Type footer in the Class field of the Insert Footer dialog box. 15. Click OK. Your Design View should look like the image below. Modifying the Tablet and Desktop Views Adjusting for Tablet and Desktop Views You re going to leave the structure as single stacked columns in phone view. You are going to rearrange the structure for the tablet and desktop views. 1. Switch to tablet view using the icon at the bottom of the Document Window. 5
2. Select and then resize the sidebar1 and content divs so that they re four columns each. You drag from the right side to do this. 3. Select the content div and use the up arrow icon to move it next to the sidebar1 div. 4. Click the eye icon to hide the sidebar2. 5. Switch to the desktop view icon in the Document Window. 6. Resize all three Divs to four columns each: sidebar1, content, and sidebar2. 7. Use the up arrow icon to position them side-by-side. NOTE: If you drag from the LEFT, you will be adding left margins. Before you start adding content to the page, take a look at the CSS Dreamweaver just wrote for you. 6
Adding Content to the Page 1. Return to Phone View. 2. Delete the placeholder text in the header. 3. Insert > Image > Image. 4. Navigate to the logo.jpg image. Notice that Dreamweaver leaves height and width out of the HTML code. This is because the style sheet sets the width to a max-width of 100% (and a width of 100% for older versions of Internet Explorer) 5. Add alt text such as Strings Pedagogy Class Page. 6. Open copy.txt from the Files panel. 7. Copy the footer text. 8. Delete the footer placeholder text and paste in the footer text. 9. Apply paragraph formatting to the footer text. 7
10. Copy the content text. 11. Delete the content placeholder text and paste in the content text. 12. Apply H2 to the title and paragraph to the paragraph text. 13. Under the H2 add an HTML5 video by going to Insert > HTML5 video. 14. Fill out values in the Properties Inspector as follows: For source browse for schumann.mp4 in the Media folder. For Poster, browse for schumann.jpg in the Media folder. For Flash fallback, browse for schumann.flv in the Media folder. If you want, you can remove the width and height. The style sheet will size the video to 100% of its container to fit the width of the device. You can also add fallback text if you like. 8
15. Delete the placeholder text in sidebar2. 16. From the Insert panel, add a fluid aside with a class of aside. 17. Copy the college bookstore text. 18. Paste in the college bookstore text. 19. Format the title as h2 and the text as a paragraph. 20. Under the aside add the napa_valley.jpg image that is in the images folder of the site. 21. Give it alt text of Napa Valley Orchestra. 22. Delete the placeholder text in sidebar1. 23. From the Insert panel, add a fluid article with a class of article. 24. Delete the article placeholder text. 25. Copy and paste the sightreading text. 26. Format the title as h2, and the text as a paragraph. 27. Format the tips as an ordered or unordered list. 9
28. In Code View, place your cursor right after the opening fluid sidebar1 tag. 29. From the Insert panel add a fluid unordered list with a class name of nav. 30. Copy the navigation links from copy.txt and paste them between the opening and closing ul tags. Preview the page in the browser and resize the window to see how the content rearranges itself. Notice that sidebar2 hides when you size to tablet width. Modify the CSS 1. Make sure that the CSS Designer panel is open. 2. Click layout.css under Sources. 3. Click Global under @media. 4. Select.header under Selectors. You can hover over the.header selector to see a tool tip that assures you that it is a global selector. 10
5. Select the Background icon under Properties. 6. Navigate for the strings_header.jpg in the images folder of the site. 7. Set the repeat to repeat-x. 11
8. Make sure that layout.css is still set under Sources and Global under @media. 9. Select.footer under Selectors. 10. Select the Background icon under Properties. 11. Click the Color Picker swatch next to the Background-color property. 12. Select the Eye Dropper tool at the bottom right of the color panel. 13. Sample a brown color out of the header logo and background image. 14. Select the Text icon. 15. Click the Color Picker swatch next to the Background-color property. 16. Select the Eye Dropper tool at the bottom right of the color panel. 17. Sample a gold color out of the header text. 12
18. In Code View move header and footer outside the fluid container by selecting and dragging before its opening and closing div tags. This will enable the header and footer to stretch to the entire window width. The header should go just after the opening body tag: <body> <header class="fluid header"> <img src="images/logo.jpg" alt="strings Pedagogy Class"/></header> <div class="gridcontainer clearfix"> The footer should go just before the closing body tag: </div> <footer class="fluid footer"> <p>strings Pedagogy Class: Dr. Joseph German, faculty artist</p> </footer> </body> 19. Make sure that layout.css is still set under Sources and Global under @media. 20. Click the plus icon on the right side of the Selectors panel. 21. Begin to type body and select body when the code hints appear. 22. Click return. 23. Select the Text icon. 24. Change the font-family to a sans-serif stack. 25. Select the Background icon. 26. Click the square to the right of gradient. 27. Select each stop on the gradient slider to select your gradient colors. 13
28. Now go into the code view of layout.css by selecting it from the Related Files toolbar at the top of the Document Window. 29. Locate the last rule before the Tablet rules begin. 30. Press the return key. 31. Now you can paste the rules from copy.txt into the global section of layout.css. Calculating a Fluid Header Margin You can prototype a fluid grid layout in Fireworks, Photoshop, or, most recently, Edge Reflow. If you look at the simple prototype for this exercise, you ll see that the width of the canvas is 1232. That is the max-width of the desktop view of the layout. You will also see that in the prototype the logo begins 50 pixels in from the left edge of the header. Let s plug these numbers into our formula: target / context = result 50/1232 = 4.05844% (after moving the decimal point over two places) Now we ll add this to the layout: 1. Click on the logo in the header so that Dreamweaver will see what selector you re trying to write. 14
2. Click layout.css under Sources. 3. Click Global under @media. 4. Click the plus icon on the right side of the Selectors panel. Dreamweaver should write the correct selector for you. 5. Select the Layout icon. 6. In the Margin visual interface, for left margin, select % as the unit of measurement. 7. Type in 4.05844. Where to Go From Here Once you have the global styles in place, you ll want to adjust various rules for the tablet and phone devices. To do this, just select layout.css and then in @media panel, select the media query you want to modify: only screen and (min-width: 481) for tablets and only screen and (min-width: 769) for desktop. 15
One exercise might be to reduce margins between the h2 and p in the various Divs. 16