Lesson 1

Create Head Content and Set Page Properties

 

In this lesson, you will learn how to enter titles, keywords, and descriptions in the head content section of a web page.  You will also change the background color for a web page.

 

Lesson:  Edit a page title

  1. Start Dreamweaver, click the Site list arrow on the Files panel, then click The Striped Umbrella
  2. Double-click index .html in the files panel to open The Striped Umbrella home page, click View (on the Application bar), then click Head Content - the Meta icon, Title icon, and CSS icon are now visible in the head content section
  3. Click the Title icon (in the head content section)--the page title The Striped Umbrella appears in the Title text box in the Property inspector, and the selected Title icon in the head content section changes to a blue color
  4. Click after the end of The Striped Umbrella text in the Title text box (in the Property inspector), press the Spacebar, type 'beach resort and spa, Ft. Eugene, Florida', then press Enter--the new title is better, because it incorporates the words “beach resort” and “spa” and the location of the resort—words that potential customers might use as keywords when using a search engine
    [TIP:  You can also change the page title using the Title text box (on the Document toolbar)]

Summary:  You opened The Striped Umbrella website, opened the home page in Design view, viewed the head content section, and changed the page title.

 

Lesson:  Enter keywords

  1. Click the Common category (on the inset panel)
  2. Click the Head list arrow, then click Keywords
    [TIP:  Some buttons on the Inset panel include a list arrow indicating that there is a menu of choices beneath the current button--the button that you select last will appear on the Insert panel until you select another]
  3. Type 'The Striped Umbrella, beach resort, spa, Ft. Eugene, Florida Gulf of Mexico, fishing, dolphin cruises' in the Keywords text box, then click OK--the Keywords icon appears in the head content section; click it and the keywords will appear in the Keywords text box (in the Property Inspector)

Summary:  You added keywords relating to the beach to the head content of The Striped Umbrella home page.

 

Lesson:  Enter a description

  1. Click the Head list arrow (on the Insert panel), then click Description
  2. In the Description text box, type 'The Striped Umbrella is a full-service resort and spa just steps from the Gulf of Mexico in Ft. Eugene, Florida'
  3. Click OK, then click the Description icon (in the Head Content)--the Description icon appears in the Head Content section and the description appears in the Description text box in the Property Inspector
  4. Click the Show Code view button on the Document toolbar--notice that the title, keywords, and description appear in the HTML code in the document window
    [TIP:  You can also enter and edit the meta tags directly in the code in Code view]
  5. Click the Show Design view button to return to Design view
  6. Click View (on the Application bar), then click Head Content to close the head content section

Summary:  You added a description of The Striped Umbrella resort to the head content of the home page.  You then viewed the page in Code view and examined the HTML code for the head content.

 

Lesson:  Set the page background color

  1. Click Modify (on the Application bar), then click Page Properties to open the Page Properties dialog box
  2. Click the Background color box to open the color picker
  3. Click the rightmost color in the bottom row (white)
  4. Click Apply, then click OK--clicking Apply lets you see the changes you make to the web page without closing the Page Properties dialog box
    [TIP:  If you don’t like the color you chose, click the Default Color button in the color picker to switch to the default color - the background color of the web page is now white - the black text against the white background provides a nice contrast and makes the text easy to read]
  5. Save your work

Summary:  You used the Page Properties dialog box to change the background color to white.