DF2254 Fundamentals of Web Design :: Art Institute

Week 5: Dreamweaver

Monkey Website

Today you will build a seven-page web site in Dreamweaver (DW). You will start with some plain text and seven photos collected from Wikipedia's page on Monkeys. Save your HTML files early and often!

Downloads

Right-click (Mac: Ctrl-click) on each of the file links below to save to your local machine or flash drive.

content.txt

monkey_images.zip

Organize

  1. Create a site folder named monkeys.
  2. In your monkeys folder, create two folders: images and workdesk.
  3. Review content.txt, and then move it into your monkeys/workdesk folder.
  4. Unzip monkey_images.zip and review the images.
  5. Rename the images:
    1. Use proper file naming conventions for images (lower case, no spaces, descriptive)
    2. Make the file names shorter, but keep them descriptive.
    3. Retain the file extension (.jpg, .gif, etc.)
  6. Move all of the renamed monkey images into your monkeys/images folder.

Site Map

Click on the image below for a larger version.

monkey site map

Begin Building the Site

  1. Start up Dreamweaver
  2. Introduction to the Welcome Screen
  3. Create a Site Definition:
    1. Site > New Site
    2. CS4: Advanced tab > Local Info category
      CS5: Site category
    3. Fill in first two blanks
      1. Site name (which will only be visible in Dreamweaver)
      2. Browse to the site folder on your drive
  4. Create a new HTML page:
    • From the Welcome screen, or
    • File > New; Blank Page > HTML)
  5. Review your workspace options:
    1. Workspace Switcher: choose Designer
    2. Review the document in Code view, versus Design, view versus Split view.

Place and Structure the Text

  1. Save the home page as index.html in your monkeys site folder.
  2. Open content.txt in Dreamweaver from the Files panel.
  3. Copy the first content block from content.txt and paste it into the HTML page in Design view.
  4. Define the headline: click inside the word Monkeys and change the Format to Heading 1 in the Property Inspector.
  5. Emphasize some text:
    1. Select a portion of text from one of the paragraphs.
    2. Click on the I button in the Properties panel.
    3. Select another portion of text and click on the B button.
  6. Title the page (look for the Title: textbox on the Document Toolbar)
  7. Check out all of the new markup in Code view, then return to Design view.
  8. Save and preview in a browser (PC: F12; Mac: Opt+F12).

Place an Image

  1. Click at the beginning of the first paragraph of text.
  2. Locate the images folder in the Files panel. Twirl in open if necessary to view the individual files.
  3. Select an image, then drag it from the Files panel to over to where your cursor was placed.
  4. When a dialog box appears, give the image an alt attribute (description) and click OK.
  5. Save and preview in a browser.

Create a Navigation List

  1. Click at the very top-left of your document window.
  2. Press Enter (PC) or Return (Mac), and then the Up key on your keyboard. Your cursor should be in a new, blank line at the top of the page.
  3. Change the Format of the line to Paragraph in the Properties panel.
  4. Type in the word Home and press Enter/Return. A new paragraph begins.
  5. Type in the following text, pressing Enter/Return after each item:
    • Etymology
    • Characteristics
    • Relationship with Humans
    • Literature
    • Religion & Worship
    • Resources
  6. Use your mouse to select all of the navigational text you just entered.
  7. Click on the Unordered List button in the Properties panel.
  8. Save and preview in a browser.

Create Navigational Links

  1. Select the Home text in your navigational menu.
  2. Make sure you can see index.html in your Files panel.
  3. In the Property Inspector, look for the button that looks like a little target, to the right of the Link text field. This is called the Point to File icon.
  4. Click and drag the Point to File icon over to the index.html file in the Files panel. The text index.html should appear in the Link text field.
  5. Select the Etymology text.
  6. In the Properties panel, enter this text in the Link Text field: etymology.html
  7. Create links for the other five menu items as follows:
Menu Text Link Text Field
Characteristics characteristics.html
Relationship with Humans relationship.html
Literature literature.html
Religion & Worship religion.html
Resources resources.html
  1. Save and preview in a browser.

 

Define Content Areas

  1. Add a "wrapper" div around the page content:
    1. Ctrl+A (PC) or Cmd+A (Mac) to select all.
    2. Insert > Layout Objects > Div Tag.
    3. Make sure the div wraps around the selection.
    4. Give the div an ID name of wrapper.
    5. Click OK.
  2. Add a "menu" div around the navigation list:
    1. Click inside the menu somewhere.
    2. Click on the <ul> tag in the Tag Selector.
    3. Insert > Layout Objects > Div Tag.
    4. Make sure the div wraps around the selection.
    5. Give the div an ID name of menu.
    6. Click OK.
  3. Save and preview in a browser.

Begin Styling the Page: Body

  1. Go online and find a seamless background pattern to use for your page background.
  2. Save the image into your images folder.
  3. Open and review the CSS Styles panel. Click on the All button at the top of the CSS Styles panel.
  4. Click inside the page somewhere.
  5. In the Tag Selector, click on <body>.
  6. In the CSS Styles panel, click on the New CSS Rule button.
    1. For Selector Type, choose Tag.
    2. For Selector Name, make sure it says body.
    3. For Rule Definition, choose New Style Sheet File...
    4. Click OK.
    5. Name the style sheet styles.css and save it into your monkeys folder.
  7. In the CSS Rule Definition box, style some elements of your body tag:
    1. Under Type, select a default font family, text color, and font size.
    2. Click Apply to see your changes so far. Adjust if needed.
    3. Under Background, click on the browse button next to Background-image.
    4. Browse to your seamless background image and click OK.
    5. Click OK to create and save your style sheet.
  8. 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.
  9. Save and preview in a browser

Style the Wrapper

  1. Click anywhere inside the design view.
  2. In the Tag Selector, click on <div#wrapper>.
  3. In the CSS Styles panel, click the New CSS Rule button.
  4. In the CSS Rule Definition box, style these properties of your wrapper div:
    1. Under Background, use the dropdown to select white for Background-color.
    2. Under Box, set the Width to 800px.
    3. Also under Box, leave Same for all checked under Padding, and set the Top padding to 20px.
    4. Uncheck Same for all for Margins, then set Right to Auto and Left to Auto.
    5. Under Positioning, set Overflow to Auto.
    6. Check your settings by clicking Apply.
    7. Click OK.

Additional Markup for Page Structure and Content

Now it's time to break up the page into more content areas: the header, content, and footer boxes.

  1. Create additional divs for: header, content, and footer. Don't create the CSS just yet.
  2. Header:
    1. In Design View, click inside the main content and go to Insert > Layout Objects > Div Tag.
    2. In the dialog box, select Before tag, and to the right of that, <div id="menu">.
    3. Type in the ID of header and click OK.
    4. A new div box should appear at the top of your wrapper, just above the menu. It should say Content for id "header" Goes Here inside of it.
  3. Content:
    1. Use your mouse to select all the main content from the heading through the last paragraph. Include the image but leave out the menu (which should be above the heading.)
    2. Go to Insert > Layout Objects > Div Tag.
    3. In the dialog box, select Wrap around selection.
    4. Type in the ID of content and click OK.
    5. A new div box should appear around your main content.
  4. Footer:
    1. Click inside the main content again and go to Insert > Layout Objects > Div Tag.
    2. In the dialog box, select After tag, and to the right of that, <div id="content">.
    3. Type in the ID of footer and click OK.
    4. A new div box should appear at the bottom of your wrapper, just below the main content. It should say Content for id "footer" Goes Here inside of it.
  5. Your 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>
        <div id="header">
            Content for id "header" Goes Here
        </div>
        <div id="menu">
            [existing menu list]
        </div>
        <div id="content">
            [existing page content]
        </div>
         <div id="footer">
            Content for id "footer" Goes Here
        </div>
    </div>

  6. Insert the banner image into the #header div (replace the default text that Dreamweaver added.)
  7. Link the 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 div with a copyright notice, something like "©2011 I'm Bananas Over You L.L.C." (you can find the copyright symbol under Insert > HTML > Special Characters.)
  9. In Code View, add a citation class to the open p tag for the Wikipedia citation.

Style the Overall Layout

  1. Open the CSS Styles panel, and click the All button at the top. Make sure you can see both subpanels: All Rules and Properties.
  2. Resize #wrapper style with width: 800px; to accomodate the banner image.
  3. Style the h1 element:
    1. Click inside the heading in Design View.
    2. Click on <h1> in the Tag Selector below your design view.
    3. Click the New CSS Rule button in the CSS Styles panel.
    4. Select Tag for the Selector Type, make sure the Selector Name is "h1", and select "styles.css" for the Rule Definition. Click OK.
    5. Choose some font styles for the heading and click OK.
  4. Style the citation class.
  5. Style #content img with borders, paddings, margins, float, etc.
  6. Style #header img a with border: none;
  7. Style #menu
    1. Box category - width: 160px;
    2. Box category - float: left;
  8. Style #content
    1. Box category - width: 620px;
    2. Box category - float: left;
    3. Box category - margin-left: 20px;

Style the Menu

  1. Style #menu ul to remove the indent in all browsers
    1. Box category - margin: 0px;
    2. Box category - padding: 0px;
  2. Style #menu ul li to make the buttons
    1. Background category - Define a background color for your buttons
    2. Box category - Add a little margin-bottom to separate the buttons
    3. Box category - Add padding to give some white space for the button text
    4. List category - list-style-type: none; will remove the bullets
  3. Style #menu ul li a
    1. Type category - Select a button text color which contrasts with your #menu ul li background color.
    2. Type category - text-decoration: none; will remove the underlines
    3. Block category - display: block; will make the entire button clickable (not just the text)
  4. Style #menu ul li:hover
    1. Background category - Define a background color for your button rollovers
  5. Save and preview.

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 the Properties panel.
  3. Create the next page: File > Save As and paste the file name you just copied.
  4. Title the new page with both the site name and the new page topic
  5. Replace the following content pieces with the new content:
    1. page header (from content.txt)
    2. content text (from content.txt)
    3. content monkey image (and change its Alt description in the Properties panel)
  6. Repeat steps 1-5 for the remaining five pages (except in step 1, select the next menu item in the list.)
  7. Preview in browser and test all of your links

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.

Dropbox go to eCompanion

Upload the following by midnight of our next class day:

Week Assignment File Name
5 Monkey Website monkeys.zip

Assignment Details

Monkey Website

Complete the Dreamweaver tutorial shown to the left.