Challenge #3 In class for two people
Create a fluid grid layout using Dreamweaver and Photoshop to help build your assets.
This follows the viewing last week: http://www.youtube.com/watch?v=gEb2hBNNAv8 (Fluid Grid Layout
with Dreamweaver CS6)
What you need for content. A banner logo 400 w x 100 h and 4 pics for the articles 166x128.
Dreamweaver
1. Open Dreamweaver CS6. Create a new file by clicking More under Create New and selecting
Fluid Grid Layout at the left. Notice you have mobile, tablet and desktop.
2. Set each width to 95% as it is in the video. Set the number of columns to 8 for cell phone, 10 for
tablet and 16 for computer. Click Create.
3. You will be prompted for a style sheet name. Create a folder named fluid to store your files in.
Name the style sheet fluid.css and put it in a styles folder in fluid.
4. Dreamweaver should display a layout with pink columns and instructions for inserting div tags.
Notice at the lower part of the work area that you can see 3 different views for cell, tablet and
computer. Notice also that at the upper-left of the screen, you’ve got 4 files. Untitled1,
boilerplate.css, fluid.css and respond.min.js.
5. Save your file as home.html in the fluid folder. Dreamweaver will prompt you to save
boilerplate and respond in the same folder….click copy.
6. If you want the pink columns to disappear, there is an icon directly over the work area that looks
like an eye. Click the drop arrow and select Fluid Grid Layout Guides to toggle the guides on and
off.
7. Define a new site in Dreamweaver so you can easily manipulate your assets.
a. Click the site pull down menu and new Site.
b. Give the site a name.
c. Navigate to your fluid folder and select it.
d. Click Save. You should see your site with four files.
8. Look at the source code for home.html or look at the elements at the bottom of the work area.
Clicking on div#LayoutDiv1 selects the entire div, shown by a blue line around it. That div is
contained in another div called gridContainer that operates the fluid layout. gridContainer is like
your wrapper.
9. Look at the css fluid.css. You will see 3 different gridContainers for the different screen sizes.
The styles you define will be for each gridContainer. You should start with the phone one (the
top) and then it’s styles propagate to the others.
10. The layout we’re creating looks like this…with a footer that got cut off. We’re going to replicate
this layout with your own images. The tutorial had them canned and ready to go.
11. The above figure is 5 horizontal blocks and several divs. In the content div, there are 4 articles.
The footer div isn’t shown in the image.
12. To add divs, open the Layout panel. If you don’t see it Window > Workspace Layout > Fluid
Layout. Or select Insert > Layout Object > Fluid Grid Div.
13. Give the new div an ID of ‘banner’ and leave the box checked to create a new row. Make sure
you are inserting the new div within the container.
14. Add 4 more divs for menus, subbanner, articles and footer. Keep the ‘start new row’ box
checked.
15. Inside the article div, nest four sub-articles named article1, article2, article3 and article4.
Remove the check from the ‘start new row’ box.
It should look like this:
16. Look at the styles contained in fluid.css now. A style is written for each div under each screen
size.
17. Now we’re ready to add content and style.
18. Banner – Use the styles panel, or hand code.
a. Type some text and make it h1.
b. Insert a non-repeating picture as the banner as a background image.
19. Menu http://www.w3schools.com/css/tryit.asp?filename=trycss_navbar_horizontal_float_advanced
If you search for w3schools horizontal nav bar, you will find this page. Click on fullystyled
horizontal nav bar to get the code.
a. Create a new css file in Dreamweaver. Paste the styles into it. Save the page as nav.css.
Link the style sheet to your home.html page using the styles panel (link icon) or hard
coding it.
b. Paste the unordered list into the div for the menus and leave the link names the same
for now.
20. Sub-banner - Type text in for the sub-banner. Make it h2.
21. In each article div, insert another regular div. Each should contain a h3 header with a person’s
name. A picture (166x128) and loremipsum text.
22. Check each screen size and see how it looks.
23. Now we need to resize things to fit in the different screen sizes. Click on the screen size for the
computer screen…the biggest of the icons at the bottom right of the work area.
24. We want four articles across the top. It helps to have the guides on a bit. So, turn them on if
you need them.
25. Click on the Div for Article 1. A blue outline and handles will appear around the div. Drag the
div from the right and make it roughly ¼ screen. If you drag the div from the left, it increases
the margin.
26. Do the same for the other divs so that 4 are in a row across the screen.
27. Click the icon for the tablet view. Notice that nothing has changed. Resize the divs so that they
fit 2 in a row.
28. Click the icon for the phone view. Notice that nothing has changed. Resize the divs so they fit
in a 1 column view.
Preview the page and if we’re lucky, the screen will change the layout based upon the browser size.