Begin Styling the Page: Body

  1. 3-7-2014 1-21-47 PMGo online and find a seamless background pattern to use for your page background. Another option is
  2. Save the image into your images folder.
  3. Open and review the CSS Designer panel. Arrange and expand it to fill the sidebar of Dreamweaver top-to-bottom.
  4. Click on the + button for the Source subpanel and selectCreate a New CSS File.
  5. 3-7-2014 1-02-13 PMIn the Create a New CSS File dialog box, type styles.css in the text field, then click OK. This will save the file into your root folder if you set up your Site Definition correctly.
  6. With styles.css now selected in the Source subpanel, click the + button for the Selectors subpanel.
  7. Type body into the text field that pops up underneath, and press Return.
  8. In the Properties subpanel:
    1. Click on the Text button (the second icon of five).
    2. Select a default colorfont-family, and font-size for the page.
    3. Under Background (4th icon), click on the text field next to url under background-image.
    4. Click the folder icon that appears to browse for your seamless background image, and click OK.
    5. File > Save All to save your style sheet.
  9. View the markup and styling code:
    1. Click on Code.
    2. Make sure Source Code is highlighted (just above your Code button).
    3. Review the markup.
    4. Click on the styles.css button (to the right of Source Code.)
    5. Review the CSS code.
    6. Return to Source Code and Design view.
  10. Save all and preview in a browser

Style the Wrapper

  1. 3-7-2014 1-30-01 PMClick anywhere inside the design view.
  2. In the Tag Selector, click on <div#wrapper>. This selects the entire <div> element and all of its contents in the code.
  3. In the CSS Designer panel, click the + button for the Selectorssubpanel.
  4. #wrapper should be prepopulated as the selector; just press Enter/Return to commit.
  5. In the Properties subpanel of the CSS Designer panel, style these properties of your wrapper div:
    1. Under Layout
      1. 3-7-2014 1-07-10 PMSet the width to 800px.
      2. For margins, set left to auto and set right to auto.
      3. For padding, click the link icon to make all sides the same. Set the top padding to px, and then type 20and press Enter/Return.
      4. For position, set overflow-x to hidden.
    2. Under Background, use the dropdown color picker to select white for background-color.
  6. Save all and preview in a browser.

Additional Markup for Page Structure and Content

3-7-2014 1-11-53 PMNow it’s time to break up the page into more content areas: the header, content, and footer boxes.

  1. Create additional block elements for: header, article, andfooter. Don’t create the CSS just yet.
  2. Header:
    1. In Design View, click inside the main content and go to Insert > Structure > Header.
    2. In the dialog box, select Before tag, and to the right of that, <nav id=”menu”>.
    3. A new header box should appear at the top of your wrapper, just above the menu. It should say Content for New header Tag Goes Here inside of it.
  3. Article:
    1. Use your mouse to select all the main content from the H1 heading through the last paragraph. Include the image but leave out the menu (which should be above the heading.)
    2. Go to Insert > Structure > Article.
    3. In the dialog box, select Wrap around selection.
    4. A new article box should appear around your main content.
  4. Footer:
    1. Click inside the main content again and go to Insert > Structure > Footer.
    2. In the dialog box, select Before end tag, and to the right of that, <div id=”wrapper”>.
    3. A new footer box should appear at the bottom of your wrapper, just below the main content. It should sayContent for New footer Tag Goes Here inside of it.
  5. 3-7-2014 1-38-04 PMYour html div structure should be nested like this in Code View—check to be sure and move lines of code around if necessary:
    <div id="wrapper">
      <header>Content for New header Tag Goes Here</header>
      <nav id="menu">   
        [existing menu list]
        [existing page content]
      <footer>Content for New footer Tag Goes Here</footer>
  6. Insert the banner image into the header (replace the default text that Dreamweaver added.)
  7. Link the banner image to index.html: with the image selected, use the Point to File icon next to the Link text box in the Properties panel.
  8. Replace the default text for the footer with a copyright notice, something like “©2014 I’m Bananas Over You L.L.C.”(you can find the copyright symbol under Insert > HTML > Special Characters.)
  9. 3-7-2014 1-42-19 PMIn Code View, find the Wikipedia citation (the first <p> element after the <h1>). Wrap the text a second time with a<cite> element, inside the <p> element. See the example.Cite is an inline element that references the source of quoted material. This is also an example of one of the limitations of Dreamweaver. I have yet to find a simpler way to insert a <cite> element.

Style the Overall Layout

  1. In the CSS Designer panel, , style the h1 element:
    1. 3-7-2014 1-55-34 PMClick inside the Monkeys heading in Design View.
    2. Click on <h1> in the Tag Selector below your Design view.
    3. Click the + button on the Selectors subpanel in the CSS Designer panel.
    4. Replace the suggested Selector name (#wrapper article h1) with the simpler name h1, and press Enter/Return.
    5. 3-7-2014 1-57-31 PMSelect the Text icon in the Properties subpanel in the CSS Designer panel, then choose some type styles for the heading and click OK.
    6. You can use the eyedropper icon in the color picker to select colors directly from your images or other design elements in Design view.
  2. 3-7-2014 2-00-43 PMStyle the cite element. For example, you could make the font-size smaller, the color dark gray, and make the font-style italic.
  3. Style article p img with borders, paddings, margins, float, etc. Float can be found in the Layout section.
  4. Style <nav#menu>
    1. width: 160px;
    2. float: left;
  5. 3-7-2014 2-09-23 PMStyle <article>
    1. width: 620px;
    2. margin-left: 20px;
    3. float: left;

Style the Menu

If you can’t figure out how to do it using the CSS Designer panel, you still have code view!

  1. Style #menu ul to remove the indent in all browsers
    1. margin: 0;
    2. padding: 0;
  2. 3-7-2014 2-32-29 PMStyle #menu ul li to make the buttons
    1. Remove the bullets with list-style-type: none; (last item in the Others icon).
  3. Style #menu ul li a
    1. display: block; will make the entire button clickable (not just the text) and fill up the <li> element with the <a> element that is being styled. (Layout icon)
    2. 3-7-2014 2-34-43 PMDefine a background-color for your buttons. (Background icon)
    3. Select a button text color which contrasts with your background color. (Text icon)
    4. Add a little margin-bottom to separate the buttons. (Layout icon)
    5. Add padding to give some white space for the button text inside the button. (Layout icon)
    6. text-decoration: none; will remove the underlines. (Text icon; click the box with a line through it for none)
  4. 3-7-2014 2-54-38 PMStyle #menu ul li a:hover
    1. Define a new background-color for your button rollovers.
  5. Click the Live button to test your rollovers. Be sure to turn it back off again.
  6. Save all and preview in a browser.

Build out the Site

  1. Click inside the second menu item, below “Home”.
  2. Copy the file name you linked to, which you will find in the Link text box in theProperties panel.
  3. Create the next page: File > Save As and paste the file name you just copied. Make sure that the file will end up inside your monkeys root folder.
  4. Title the new page with both the site name and the new page topic (e.g.Monkeys – Etymology).
  5. Replace the following content pieces with the new content:
    1. <h1> text in <article> (from content.txt)
    2. content text in <article> (from content.txt)
    3. monkey image in <article> (and change its Alt description in the Properties panel)
  6. 3-7-2014 2-43-51 PMRepeat steps 1-5 for the remaining five pages (except that in step 1, you should select the next menu item in the list.)
  7. On the Relationship with Humans page, convert each of the subheaders into <h2>.
  8. On the Resources page, make all of the web addresses into links.
  9. Save all. Preview in browser.

Test all of the links from all of your pages. Check that all of your titles and content are appropriate for each page.

ZIP up your site folder and turn it in.