Creating a Liquid Layout in CSS in Dreamweaver

Starting a Web site in Dreamweaver

  1. On your computer, create a new folder that will contain your Web site files. (In class: Title this folder liquid).
  2. Create an images folder inside the Web folder.
  3. Define your folder as a Web site in Dreamweaver.
  4. Export the site definition into the Web site folder.

Remember these important concepts as you work in Dreamweaver:

Setting up <div> elements

  1. On the File menu, click New.
  2. Click Blank Page; under Page Type, click HTML; and then under Layout, click None.
  3. In the DocType list, click XHTML 1.0 Transitional or XHTML 1.0 Strict, and then click Create.
  4. On the Layout tab, click Insert Div Tag.
  5. In the Insert list, make sure At insertion point is selected, and then in the ID box, type header. (An ID can be used only once per page, making it an appropriate attribute for a div element used to divide a page into sections.)
  6. On the Layout tab, click Insert Div Tag.
  7. In the Insert list, click After tag, and then in the ID box, type nav.
  8. Repeat steps 6 and 7 to create Divs with IDs of content and footer respectively.
  9. Save the page to your Web folder as index.html.

Adding content

When creating your own site

  1. In the Title box, type the title of your Web page.
  2. In the content <div>, over the placeholder text, type your page heading.
  3. Under the page heading, type your page content.
  4. Mark the content up as appropriate. For example, apply the Heading 1 style to your page heading, Heading 2 styles to subheadings, and so on.

When completing the in-class exercises

  1. In the Title box, type Working with Liquid Layouts in Dreamweaver.
  2. In the content <div>, over the placeholder text, type Working with Liquid Layouts in Dreamweaver. (Page headings and titles often share the same names.)
  3. Visit the following Web site: www.lipsum.com, and generate 1 paragraph of Lorem Ipsum text.
  4. Select the Lorem Ipsum text, and then press CTRL+C to copy the text.
  5. In Dreamweaver, on the Edit menu, click Paste Special.
  6. Paste the text as Text Only.
  7. Press ENTER.
  8. Type Setting up the Page Divisions, and then assign a Heading 2 style to the paragraph.
  9. Press ENTER.
  10. Using the lipsum.com site, insert 50 words of Lorem Ipsum text.
  11. Press ENTER.
  12. Type Setting up the Style Sheet, and then assign a Heading 2 style to the paragraph.
  13. Press ENTER.
  14. Type The following is an example of CSS code: .
  15. Type h1 { font-family: Arial; } .
  16. Type Here is another example of CSS code: .
  17. Type h2 { font-size: 120%; } .
  18. Click the Preview/Debug in browser button to test the page in a Web browser.

Creating a style sheet and linking it to your Web page

  1. On the File menu, click New.
  2. Click Blank Page; under Page Type, click CSS; and then click Create.
  3. Save your new CSS file in the Web folder with a file name of styles.css.
  4. Open your index.html page.
  5. In the CSS panel, click the Attach Style Sheet button.
  6. Click the Browse button, click the styles.css file, and then click OK.
  7. In the Media list, click Screen, and then click OK.

Styling the <body>

When creating your own site

  1. In the CSS panel, click the New CSS Rule button.
  2. Under Selector Type, click Rule; and then in the Selector list, click body. (Remember that the body rule styles all the page content because all other style rules are based off the body rule.)
  3. Click OK.
  4. Set any style rules that you want to apply to all the text and background of the pages in your Web site.

When completing the in-class exercises

  1. In the CSS panel, click the New CSS Rule button.
  2. Under Selector Type, click Tag; and then in the Selector list, click body.
  3. Click OK.
  4. In the Type category, in the Font family list, do one of the following:

    Click an appropriate font family. (Verdana, Arial, Helvetica, sans-serif is a good default choice.)

    -or-

    Click Edit Font List; under Available fonts, click a font you want to use; click the << button to move the font to the Chosen fonts list, and then click OK. (Remember to use sans-serif fonts for screen text, and always end your font list with the generic sans-serif font.)
  5. In the Type category, in the Font size list, type or select a relative font size. (Either 85% or small are good default choices.)
  6. In the Background category, in the Background color box, type or select an appropriate light background color, if desired. Remember that all colors must begin with a number sign (#), or the color won't apply. (Use the color selections link on my Web site, note the hex color, and type it in the box. I used #fcede0.)
  7. Optional: In the Box category, under Margin, clear the Same for all check box; in the Top box, type 0; and in the Left box, type 0.
  8. Click OK.

Styling the <h1> in the content div

When creating your own site

  1. In the CSS panel, click the New CSS Rule button.
  2. Under Selector Type, click Advanced; and then in the Selector list, type #content h1. (Remember that different divisons can have different Heading 1s, so we have to specify. Otherwise, because of inheritance, all Heading 1s, regardless of division, would look the same.)
  3. Click OK.
  4. Using good style decisions and taste as your guiding force, format your Heading 1 using the different options in the CSS Rule dialog box.

When completing the in-class exercises

  1. In the CSS panel, click the New CSS Rule button.
  2. Under Selector Type, click Advanced; and then in the Selector list, type #content h1.
  3. Click OK.
  4. In the Type category, in the Font size box, type 150%. (Remember that headings need at least a 20% difference in size in order to detect the difference.)
  5. In the Type category, in the Font family list, click a different font family only if you want a heading font that differs from the body. (On Web sites, headings and body text are usually the same.)
  6. In the Type category, in the Color box, type or select a color for your Heading 1. (Again, use the color resources on my Web site. I used #000099.)
  7. In the Border category, clear the Same for all check boxes.
  8. Under Style, in the Bottom list, click a border style. (Solid or Dotted are good default selections.)
  9. Under Width, in the Bottom list, type 1, and make sure px is selected as the unit of measure.
  10. Under Color, in the Bottom box, type or select a border color.
  11. In the Box category, under Padding, clear the Same for all check box.
  12. In the Bottom box, type a value to separate the border from the heading. (For starters, try 2px.)
  13. Click OK.

Styling the <h2> in the content div

When creating your own site

  1. In the CSS panel, click the New CSS Rule button.
  2. Under Selector Type, click Advanced; and then in the Selector list, type #content h2.
  3. Click OK.
  4. Using good style decisions and taste as your guiding force, format your Heading 2 using the different options in the CSS Rule dialog box.

When completing the in-class exercises

  1. In the CSS panel, click the New CSS Rule button.
  2. Under Selector Type, click Advanced; and then in the Selector list, type #content h2.
  3. Click OK.
  4. In the Type category, in the Font size box, type 125%.
  5. In the Type category, in the Font family list, click a different font family only if you want a heading font that differs from the body. (Change the Heading 2 font only if you changed the Heading 1 font.)
  6. In the Type category, in the Color box, type or select a color for your Heading 2. (Again, use the color resources on my Web site. I used #336699.)
  7. In the Box category, under Margin, clear the Same for all check box.
  8. In the Bottom box, type 0. (Setting the bottom margin to 0 has no apparent effect because the margins collapse. The paragraph still has a default top margin; thus, we won't see a change until we alter that setting. Often removing the margins in this fashion is desirable to help achieve a "chunking" effect.)
  9. Click OK.

Styling the <p> in the content div

  1. In the CSS panel, click the New CSS Rule button.
  2. Under Selector Type, click Advanced; and then in the Selector list, type #content p. (Remember that you don’t need to set the font, font size, and so forth because the body rule passes these attributes to the paragraph text via inheritance.)
  3. Click OK.
  4. In the Box category, under Margin, clear the Same for all check box.
  5. In the Top box, type 0; and then in the Bottom box, type 0.
  6. In the Type category, in the Line height box, type a value for the leading, or the space between lines. (Try 1.5em as a starting point.)
  7. Click OK.

Working with classes

When creating your own site

  1. In the CSS panel, click the New CSS Rule button.
  2. Under Selector Type, click Class; and then in the Selector list, type a period followed by the class name. (Remember that you invent your own class names. Using lowercase names is generally a good idea, and spaces aren't permitted.)
  3. Click OK.

Use classes to format recurring bits of text that can't be formatted through already defined CSS tags.

When completing the in-class exercises

  1. In the CSS panel, click the New CSS Rule button.
  2. Under Selector Type, click Class; and then in the Selector list, type .codes .
  3. Click OK.
  4. Under Type, in the Font family list, click Courier New, Courier, monospace.
  5. Click OK.
  6. On the Web page, select h1 { font-family: Arial; } .
  7. In the Properties panel, in the Class list, click .codes .
  8. On the Web page, select h2 { font-size: 120%; } .
  9. In the Properties panel, in the Class list, click .codes .
  10. In the CSS panel, double-click the .codes rule to edit it.
  11. In the Box category, under Margin, clear the Same for all check box.
  12. In the Left box, type a value by which to indent the code samples. (Try 2em and then try 3em.)
  13. Click OK.

Working with classes for images

  1. Copy any images you plan to use into the mages folder of your Web site. (In class: Go to the Missouri State University home page, click Current Students, right-click the photo, click Save Image As, and then save the photo to the images folder of the liquid site.)
  2. Click at the position where you would like the image to appear. (In class: Click before the word Lorem in the first paragraph.)
  3. On the Insert menu, click Image.
  4. Navigate to the images folder, click the image you want to insert, and then click OK.
  5. When prompted to type an alternative representation for your image, type a meaningful description that would benefit a person who listens to the page through a screen-reading program.
  6. In the CSS panel, click the New CSS Rule button.
  7. Under Selector Type, click Class; and then in the Selector list, type .imgleft.
  8. Click OK.
  9. In the Box category, in the Float list, click Left.
  10. In the Box category, under Margin, clear the Same for all check box.
  11. In the Right box, type a value to help space the image away from the text. (In class: Type 5px.)
  12. Click OK.
  13. On the Web page, select the image.
  14. In the Properties panel, in the class list, click imgleft to apply the style to the image.
  15. In the CSS panel, right-click the .imgleft rule, and then click Duplicate.
  16. Under Selector Type, click Class; and then in the Selector list, type .imgright.
  17. In the Box category, in the Float list, click Right.
  18. In the Box category, in the Right box, delete the current value.
  19. In the Left box, type a value to help space the image away from the text. (In class: Type 5px.)
  20. Click OK.
  21. If desired, select the image and apply the .imgright class.

Creating the footer content

When creating your own site

When completing the in-class exercises

  1. In the footer <div>, over the placeholder text, type the current year and your name.
  2. Click before the current year, and on the Insert toolbar, click the Text tab.
  3. Click the arrow on the Characters button, and then click the Copyright symbol.
  4. Move the cursor to the end of the line, and then press ENTER.
  5. Type Send e-mail to the Webmaster, and then select the word Webmaster.
  6. In the Properties panel, in the Link box, type mailto: followed by your e-mail address, and then press ENTER. (Be sure not to space after the colon.)
  7. Click after the word Webmaster, and then press ENTER.
  8. Type Last updated on followed by a space.
  9. On the Insert menu, click Date.
  10. In the Date format list, click March 4, 1974, and then select the Update automatically on save check box.
  11. Click OK.

Styling the footer

When creating your own site

  1. In the CSS panel, click the New CSS Rule button.
  2. Under Selector Type, click Advanced; and then in the Selector list, type #footer .
  3. Click OK.
  4. Style the footer to your taste. Applying a background color or top border or both is common.

When completing the in-class exercises

  1. In the CSS panel, click the New CSS Rule button.
  2. Under Selector Type, click Advanced; and then in the Selector list, type #footer .
  3. Click OK.
  4. In the Border category, clear the Same for all check boxes.
  5. Under Style, in the Top list, click a border style. (Solid is a good default.)
  6. Under Width, in the Top list, type 1, and make sure px is selected as the unit of measure.
  7. Under Color, in the Top box, type or select a border color. (Black, with a hex code of #000000, is a good default choice.)
  8. In the Box category, under Padding, clear the Same for all check box.
  9. In the Top box, type a value to separate the border from the heading. (For starters, try 1em.)
  10. Click OK.

Styling the footer paragraphs

When creating your own site

  1. In the CSS panel, click the New CSS Rule button.
  2. Under Selector Type, click Advanced; and then in the Selector list, type #footer p .
  3. Click OK.
  4. Style the footer paragraphs to your taste. Altering the font size, text alignment, margins, and line height are common.

When completing the in-class exercises

  1. In the CSS panel, click the New CSS Rule button.
  2. Under Selector Type, click Advanced; and then in the Selector list, type #footer p .
  3. Click OK.
  4. In the Type category, in the Font size box, type a value of your choosing. (In class: Try 80%.)
  5. In the Block category, in the Text align list, click Center.
  6. In the Box category, under Margin, clear the Same for all check boxes.
  7. In the Top box, type 0; and then in the Bottom box, type 0.
  8. In the Type category, in the Line height box, type a value to space between the lines of the footer. (Try 1em for starters.)
  9. Click OK.

Creating navigation

  1. In the nav <div>, over the default text, type the word Home, and then press ENTER.
  2. On separate lines, type names for different navigation links you plan to use in your site. (In class: Type Products, Services, About Us, FAQ, and Contact Us.)
  3. Select all the text you just typed, and then in the Properties panel, click the Unordered List button.
  4. Select the word Home.
  5. In the Properties panel, in the Link box, type index.html, and then press ENTER.
  6. Select the next word in your navigation list.
  7. In the Properties panel, in the Link box, type a number sign (#), which stands for a placeholder link.
  8. Repeat steps 6 and 7 until you have linked all the words in your navigation list.

Styling the navigation

When creating your own site

When completing the in-class exercises

  1. In the CSS panel, click the New CSS Rule button.
  2. Under Selector Type, click Advanced; and then in the Selector list, type #nav ul .
  3. Click OK.
  4. In the Box category, clear the Same for all check boxes for both Padding and Margin.
  5. Under Padding, in the Left box, type 0.
  6. Under Margin, in the Left box, type 0.
  7. In the List category, in the Type list, click None.
  8. Click OK.
  9. In the CSS panel, click the New CSS Rule button.
  10. Under Selector Type, click Advanced; and then in the Selector list, type #nav a .
  11. Click OK.
  12. In the Block category, in the Display list, click Block.
  13. In the Box category, under Padding, in the Top box, type 3.
  14. In the Box category, in the Width box, type 160.
  15. In the Background category, in the Background color box, type or select a background color for your pseudo buttons. (If you don't have a color in mind, set the color to #003366.)
  16. In the Border category, clear the Same for all check box.
  17. Under Type, in the Bottom list, click Solid.
  18. Under Width, in the Bottom box, type 1px.
  19. Under Color, in the Bottom box, type #eeeeee.
  20. Click OK.
  21. In the CSS panel, click the New CSS Rule button.
  22. Under Selector Type, click Advanced; and then in the Selector list, type #nav a:link .
  23. Click OK.
  24. In the Type category, in the Color box, type or enter a color for the pseduo button's text. (If your button is light, set the color to #000000; if your button is dark, set the color to #ffffff.)
  25. In the Type category, in the Decoration list, select the none check box.
  26. Click OK.
  27. In the CSS panel, right-click the #nav a:link rule, and then click Duplicate.
  28. Under Selector Type, click Advanced; and then in the Selector list, type #nav a:visited .
  29. Click OK.
  30. In the CSS panel, click the New CSS Rule button.
  31. Under Selector Type, click Advanced; and then in the Selector list, type #nav a:hover .
  32. Click OK.
  33. In the Background category, in the Background color box, type or select a color that will appear on hover. (If you don't have a value in mind, type #336699.)
  34. In the Type category, in the Color box, type or select a color that contrast well with the color you picked in the previous step. (Remember that black is #000000 and white is #ffffff.)

Positioning the navigation, content, and footer

  1. In the CSS panel, double-click the #nav rule to edit it.
  2. In the Box category, in the Float list, click Left.
  3. In the Box category, in the Width box, type 160px.
  4. Click OK.
  5. In the CSS panel, double-click the #content rule to edit it.
  6. In the Box category, under Margin, clear the Same for all check box.
  7. In the Left box, type 190px.
  8. Click OK.
  9. In the CSS panel, double-click the #footer rule to edit it.
  10. In the Box category, in the Clear list, click Left.
  11. Click OK.

Creating the Page Header

  1. Over the default header text, type a name for your Web site, and then press ENTER.
  2. On the second line, type a tag line for your site.
  3. Apply the Heading 1 style to the Web site name.
  4. In the CSS panel, click the New CSS Rule button.
  5. Under Selector Type, click Advanced; and then in the Selector list, type #header .
  6. Click OK.
  7. In the Background category, in the Background color box, type or select a value for the background of the header area.
  8. In the Box category, in the Height box, type a value for the header size if you want it larger than the default area. (In class: Try 120px to see what happens.)
  9. Click OK.
  10. In the CSS panel, click the New CSS Rule button.
  11. Under Selector Type, click Advanced; and then in the Selector list, type #header h1 .
  12. Click OK.
  13. In the Type category, in the Font list, click a different font for your header, if desired.
  14. In the Type category, in the Font size box, type an appropriate size for the Web site name. (In class: Try 225% as a starting point.)
  15. In the Type category, in the Color box, type or select a color for the Web site name.
  16. Click OK.
  17. In the CSS panel, click the New CSS Rule button.
  18. Under Selector Type, click Advanced; and then in the Selector list, type #header p .
  19. Click OK.
  20. In the Type category, make any desired adjustments to the Font family, Font size, and Color.
  21. Click OK.

Adjusting the header text

  1. In the CSS panel, double-click the #header h1 rule to edit it.
  2. In the Box category, under Padding and Margin, clear the Same for all check boxes.
  3. Under Padding, in the Left box, type a value for moving the Web site name away from the border. (In class: Try 0.25em. But note that using a pixel value will prevent problems with relative sizing positioning the h1 and p in different places.)
  4. Under Padding, in the Top box, type a value for pushing the Web site name down from the top. (In class: Try 0.75em.)
  5. Under Margin, in the Bottom box, type 0.
  6. Click OK.
  7. In the CSS panel, double-click the #header p rule to edit it.
  8. In the Box category, under Padding and Margin, clear the Same for all check boxes.
  9. Under Padding, in the Left box, type a value to push the text away from the border. (In class: Try 0.75em. Again, setting a pixel value will prevent the problems of using a relative measurement for the h1 and p.)
  10. Under Margin, in the Top box, set a value to separate the tag line from the Web site name. (In class: Type 0.5em.)