Dreamweaver

Chapter 2-Lessons 3, 4 & 5

Chapter 2-Lesson 3

Add Links to Web Pages

Create a navigation bar:

  1. Open index.html (the home page).
  2. Position the insertion point to the left of “A” in About Us, then drag to select About Us-Spa-Café.
  3. Type Home – About Us – Spa – Café – Activities

Format a navigation bar:

  1. Select Home – About Us – Spa – Café – Activities, click the Size list arrow in the Property inspector, then click None (None is equal to size 3, the default text size).
  2. Click the format list arrow in the Property Inspector, then choose Heading 4.
  3. Click the Font list arrow in the Property Inspector, choose Arial, Helvetica, sans-serif, deselect the text.

Add links to web pages

  1. Double-click Home in the navigation bar to select it.
  2. Click the Browse for File icon next to the Link text box in the Property Inspector, then navigate to the striped_umbrella root folder.
  3. Verify that the link is set Relative to Document in the Select File dialog box.
  4. Click index.html, click OK, then click anywhere on the page to deselect the text Home. (Home now appears in blue with an underline indicating it is a link)
  5. Repeat steps 1-4 to create links for About Us, Spa, Café, and Activities to their corresponding pages in the striped_umbrella root folder.
  6. When you finish adding the links to the other four pages, deselect the text.

Create an e-mail link

  1. Place the insertion point after the last digit in the telephone number, then insert a line break.
  2. Click the insert bar list arrow, choose Common, then click the E-mail Link button on the Insert bar to insert an email link.
  3. Type Club Manager in the Text text box, type in the email text box, then click OK to close the Email Link dialog box.
  4. Save your work.

View Linked Pages in the Site Map

  1. Click the Expand to show local and remote sites button on the Files panel to expand the site map. (the site map shows the home page, the four pages that are linked to it, and the email link on the home page.
  2. Click View on the Files Panel menu bar, point to Site Map Options, then click Show Page Titles.
  3. Select the first Untitled Document page in the site map, click the words Untitled Document, type About our Property, then press Enter. (be careful not to change the filename).
  4. Repeat step 3 for the other two Untitled Document pages, naming them The Sand Crab Café and Activities at The Striped Umbrella.
  5. Click the Collapse to show only local or remote site button on the toolbar to collapse the site map.

Chapter 2-Lesson 4

Use the History Panel and Edit Code

Use the History Panel

  1. Click Window on the menu bar, then click History.
  2. Click the History panel list arrow, click Clear History, then click Yes to close the warning box.
  3. Select the horizontal rule on the home page (the horizontal line).
  4. Select the number in the W text box, type 90, click the list arrow next to the W text box, click %, press TAB.
  5. Using the Property inspector, change the width of the horizontal rule to 80%, click the Align list arrow, then click Left.
  6. Drag the slider on the History panel up to Set Width: 90%.
  7. Click the History panel list arrow, then click Close panel group to close the history panel. (You formatted the horizontal rule, made changes to it then used the history panel to undo some of the changes)

Use the Code Inspector

  1. Click the horizontal rule to select it, click Window on the menu bar, then click Code Inspector. (the code inspector highlights the code for the horizontal rule)
  2. Click the View Options list arrow on the Code Inspector toolbar to display the View Options menu, then click Word Wrap to activate word wrap.
  3. Click the View Options list arrow, then verify that the Word Wrap, Line Numbers, Highlight Invalid Code, Syntax Coloring, Auto Indent, and the Coding Toolbar menu items are checked.
  4. Replace the 90% horizontal rule width in the code with 80%.
  5. Click Refresh in the Property Inspector.

Insert a date object

  1. Scroll down, to select January 1, 2006, then press Delete.
  2. Click the Date button on the Insert bar, then click March 7, 1974 in the Date format text box.
  3. Click the Update automatically on save check box, then click OK.
  4. Click the Split View button. (Notice the new code for the date)
  5. Return to Design view.

Chapter 2-Lesson 5

Modify and Test Web Pages

Modify a Web page

  1. Click the Restore down button on the index.html title bar to decrease the size of the home page window.
  2. Click the Window Size list arrow on the status bar, then click 600x300 (640x480 maximized).
  3. Click the Window Size list arrow, choose 760x420 (800x600 maximized)
  4. Replace the period after the last sentence, “You won’t want to go home.” With an exclamation point.
  5. Shorten the horizontal rule to 75%.
  6. Click the Maximize button on the index.html title bar to maximize the home page window.
  7. Save your work. (You have viewed the home page using two different window sizes and you made simple formatting changes to the page)

Test Web pages by Viewing in a Browser

  1. Click the Preview/Debug in browser button on the Document toolbar, then choose the browser of your choice.
  2. Click all of the links on the navigation bar, then after each click, use the Back button on the toolbar to return to the home page. (Pages with no content will appear as blank pages)
  3. Close the browser window.
  4. Save your work.