Introduction to Dreamweaver: Monkey Website

Today and next week, you will build a seven-page web site in Dreamweaver CC. 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. 3-6-2014 3-55-48 PMStart up Dreamweaver
  2. Introduction to the Welcome Screen
  3. Create a Site Definition:
    1. Site > New Site
    2. 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. Put your Files and CSS Designer panels together in the same panel group.
    2. Delete the remaining panels in the sidebar panel dock (leave the Properties panel on the bottom).

Place and Structure the Text

  1. 3-7-2014 12-43-15 PMSave 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 Properties panel.
  5. Emphasize some text:
    1. Select a portion of text from one of the paragraphs.
    2. 3-7-2014 1-20-52 PMClick 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: text box 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 using the world icon next to the Code/Split/Design/Live bar (PC: F12; Mac: Opt+F12).

Place an Image

  1. 3-7-2014 12-42-10 PMClick at the beginning of the first paragraph of text in Design view.
  2. Locate the images folder in the Files panel. Twirl it open if necessary to view the individual files.
  3. Select a monkey image, then drag it from the Files panel to over to where your cursor was placed.
  4. In the Properties panel, give the image an alt attribute (description) and press Enter/Return.
  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. 3-7-2014 12-45-44 PMType 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. Check out the code in Code view.
  9. Save and preview in a browser.

Create Navigational Links

  1. 3-7-2014 12-44-21 PMSelect the Home text in your navigational menu.
  2. Make sure you can see index.html in your Files panel.
  3. In the Properties panel, look for the button that looks like a little target, to the right of the Link text field. This is called thePoint to File icon.
  4. 3-7-2014 1-25-20 PMClick and drag thePoint to File icon over to the index.html file in the Files panel. The textindex.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. 3-7-2014 12-53-12 PMAdd a “wrapper” div around the page content:
    1. Ctrl+A (PC) or Cmd+A (Mac) to select all.
    2. Insert > Div.
    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. This part is really important! It will select the entire ul element and its contents.
    3. Insert > Structure > Navigation. This will insert a navelement.
    4. Make sure the div wraps around the selection.
    5. Give the nav element an ID name of menu.
    6. Click OK.
  3. Double-check the code to be sure that the <nav> wraps around the <ul>, not inside it.
  4. Save and preview in a browser.