Lesson 1 : Creating a "Surf Hawaii Web Page"

For this lesson, you will create a simple web page like the one shown in the illustration below: In the process of creating the page, you will learn many different ways to format text and customize the look of your page.

Giving Your Page a Title

Every HTML document should have a title. The title, used primarily for document identification, is displayed in a browser's title bar and as the bookmark name. Choose a short phrase that describes the document's purpose. The title can be of any length: you can crop it if it's too long to fit in the browser's title bar.

Get in the habit of adding the title to each page you create before you add text or graphics to the page. If you forget, Dreamweaver defaults to Untitled Document - you don't want to keep that for the page name.

• Step-by-Step 1.1: Adding the Page Title

1. First you must copy the entire compass_tours folder into your local root directory (in your folder in the HSStudent on Student directory)
2. Start Dreamweaver and be sure your Files panel is in Local View
3. Open the compass_tours folder and Open the Lesson01 folder and then open the surf_hawaii.htm file.
4. If you don't see the Title text box at the top of the Document window (below the menu bar), click the View menu, point to Toolbars, and then click Document.
5. Key Surfer's Paradise in the Title text box and then press Enter or click in the document.
6. Use the scroll bar on the right side of the Document window to see all of the text. Note that most of the contains the title and the file
   text for this page is present but that it does not yet look at all like the page in Figure 1-7.
7. Save your document (click the File menu and then click Save). Remain in this screen for the next Step-by-Step.

Specifying a Background Color

In Dreamweaver, you can easily change the background color of a page by using a preset palette of colors known as the Web-safe color palette. You access that palette in the Page Properties dialog box. For more colors, click the arrow located in the upper-right corner of the color picker and select a color palette from the menu.

• Step-by-Step 1.2: Selecting a Background Color

1. Click the Modify menu, and then click Page Properties. The Page Properties dialog box opens
2. Make sure the Appearance is selected in the Category list.
3. Click the Background Color box. A color picker opens.
4. Move the eyedropper over a color swatch. The swatch's hexadecimal equivalent number is shown at the top of the color palette.
5. Click the pale blue color to select it, or key CCFFFF in the Background Color text box..
6. Click Apply to view the color change to your document without leaving the Page Properties dialog box. Remain in this screen for the next Step-By-Step.

Specifying the Default Font Color

In Dreamweaver, you can easily change the background color of a page by using a preset palette of colors known as the Web-safe color palette. You access that palette in the Page Properties dialog box. For more colors, click the arrow located in the upper-right corner of the color picker and select a color palette from the menu.

• Step-by-Step 1.3: Selecting the Default Font Color

1. In the Page Properties dialog box, click the Text Color box. A color palette opens.
2. Select a color for your text-dark blue would look good-and click Apply to view the color change in your document. Remain in this screen for the next Step-by-Step.
   

Specifying Link Colors

In addition to changing the default text color, you can change the color of text links on your page. There are three different link types that are described below.

Links: The initial color of a link-the color a user sees before clicking the link. The normal default browser color for a link is blue.

Visited Links: The color the link changes to `vhen a user clicks the link. The normal default color for a visited link is purple.

Rollover Links: The color the link changes to when a user positions the pointer over the link. If you do not select a color, then the link color doesn't change when the pointer is over the link.

Active Links: The color the link turns to when a user holds down the mouse button after clicking the link. The normal default color for an active link is red.

• Step-by-Step 1.4: Changing Link Colors

  1. From the Page Properties dialog box, choose Links from the Category list.
  2. Click the color box next to the link type you want to change, as shown in the Figure1.4 below
  3. Select #003399 for your Link Color
  4. Select #CC3333 as your Visited Link color
  5. Click OK to close the Page Properties dialog box and return to your document.
  6. Save the document and remain in this screen for the next Step-by-Ste

Go to next section: Working with Text on a Page