Hawaii Surfer's Paradise


Before you begin to create individual Web pages, you need to create the site that contains those pages. This local site on your hard drive will mirror the actual pages on the Web server. The local site is where you do all your initial development and testing. To set up a local site, create a folder on your desktop. The name of the folder can be the name of the site or any name you choose.

After you define the main folder you will need to define your site.

Choose Site > New Site:

Define Site

The Site Definition dialog box opens. At the Site name type in Hawaii Surfer's Paradise and the click the folder and navigate to the folder you previously created on the desktop. Since you want actually be uploading to a server, this is all that will be filled in. Click OK to close the dialog box.

Name Site

Make sure you create a new folder for each site that you create so that your files are more manageable. To do this, when you click the folder for the local root folder, create a new folder under your student folder.

Create New Folder

Then type a name, replacing the text New Folder. Name the folder the name of your site, example Surfer's Paradise:

Name Folder

Create a new HTML document in Dreamweaver.

HTML Document

Title the document Surfer’s Paradise.

Title of Document

Change the background of the page to a pale blue color shown on the image below. To change the background color, click on the Page Properties button on the Properties panel to open the Page Properties dialog box.

Page Properties


Click on the Background color tab and select #CEFFFF for the color.

Background Color

You will type the text shown below without any formatting. Once you have all the text typed in, follow the instructions below the text graphic to apply formatting to the text so it will appear like the text graphic below:



  • Select Hawaii - Surfer’s Paradise at the page top of the page and tag the text as Heading 3 by selecting Format on the Properties panel and selecting Heading 3.

Format Heading

  • Position the insertion point in the heading “Hawaii - Surfer's Paradise.” Click Align Center Align Centerin the Property inspector.
  • Select the four paragraphs that start with Dead Man's Bluff down to Gripper. Click the Text Indent icon in the Property Panel.

Text Indent

  • Your text should now appear indented as shown below without the formatting to the main terms:

Paragraph Indent

  • Change the heading "Hawaii - Surfer’s Paradise's" color to turquoise (#006697) by selecting the text:

Text Color

  • Either select your color or type the number in color code box by the text color option box:

Color Code

  • Once you have selected a font color, you can add it to your favorites if you intent to use it in the future. You will use this font color again so we can add it to your assets panel for easy access in the future.
  • Choose Window > Assets to display the Assets panel.

Diplay Assets Panel

  • Click Colors to see the asset colors.

Asset Colors

  • Choose Favorites at the top of the Assets panel.

Asset Favorites

  • Click the new color button at the bottom of the Assets panel.

New Color

  • With the eyedropper tool, point to the color in your title.

Color Pointer

  • Your color should now be displayed under Favorites.

Favorite Color Assets

  • Select the text “Hawaii - Surfer’s Paradise.” From the Property inspector’s Font pop-up menu, choose Arial, Helvetica, Sans-serif

Font Face

  • Select the four lines of text, “Sunset Beach, Oahu,” “Waimea Bay,” “South Shore, Oahu,” and “Pipeline,” and make them an ordered (number) list by clicking the order list button on the properties panel.

Order List

  • Click the list item button on the Properties panel to open the List Properties dialog box.

List Item

  • Change the list type to Alphabet Small.

Order List\

  • Your list should look like the one below:

Order List Example

  • Select the text starting with “East to southeast winds” and ending with “Water temperature at 76 degrees Fahrenheit” and change the text to an unordered list. To do this click the unordered list button on the Properties panel.

Unordered List Icon

  • Again click the List Item icon to open the List Properties dialog box but choose square bullet list:

Square Bullet List

  • Your list should look like the one below:

Square Bullet List

  • Select the text starting with “Crest” and ending with “The time for a wave crest to travel one wave length.” Format this text as a definition list by choosing Text > List > Definition List.

Definition List

  • The terms are now at the left margin, and their indented definitions are on succeeding lines.

Definition List

  • Apply bold to the definition terms (for example, “Crest” in the first paragraph.) by clicking the bold icon Bold Formattingon the Properties panel.
  • Apply a paragraph break between the "Besides helping" paragraph and the "Sign up at" line by Position the insertion point before the text “Sign up at” and then press Enter (Windows) or Return (Macintosh) to insert a new paragraph..
  • Apply single line spacing between the next four items. Position your text after "Sign up at" and before “Big Kahuna Surf and Swim Shop.” Press Shift+Enter (Windows) to insert a single line break. The text after the insertion point moves to the next line. A new paragraph has not been created, so there is no additional spacing between the two lines.
  • Repeat steps 1 and 2 to move the text “1134 Paradise Lane” to the next line and “Hawaii, USA” to a new line.

Single Line Break

Cascading Style Sheets (CSS) are a collection of formatting rules that control the appearance of content in a web page. Instead of selecting text, then adding bold and a color to a collection of text throughout the document, we can create a CSS style that can be easily applied with the click of a button.

  • First open the CSS Styles panel by clicking Window > CSS.

CSS mNew

  • Click the new CSS Button at the bottom of the panel to open the New CSS Rule dialog box.


  • At the new CSS Rule, fill in the information as if appears below:

New CSS Rule

  • Fill in the CSS format options shown below. Click OK to close the CSS Rule definition for .boldandblue.

CSS Format


  • Select “Crest,” the first term in the definition list. Click the Style drop down list by the CSS button on the Properties panel and select boldandblue.

CSS Format

  • Your text should now appear turquoise and bold. Apply the same css style to the remaining definition terms on this page. Now we will create a new css style for the indented main terms.
  • Create a new css style with a different color font and make the words bold. Apply this new style to the text Dead Man's Bluff, Long Cool One, Piece of Cake, Gripper.

You will now place the horizontal rule under the water temperature bulleted list shown below.

Horizontal Rule

Horizontal rules (lines) are useful for organizing information. On a page, you can visually separate text and objects with one or more rules. To create a horizontal rule:

  • In the Document window, place the insertion point where you want to insert a horizontal rule, under the bulleted list shown above. Do one of the following: Select Insert > HTML > Horizontal Rule.

To modify a horizontal rule:

  • In the Document window, select the horizontal rule. In the Property inspector, type 90 in the W (width) text box. Select % from the pop-up menu to the right of the text you just typed.
  • Deselect Shading to display a solid bar. Type 3 in the H (height) text box.
  • From the Align pop-up menu, select Left.

Format Horizontal Rule

When working in Dreamweaver, you are generally typing at the keyboard. Sometimes you need characters and other information that is not directly accessible from the keyboard. With Dreamweaver, you can easily insert special characters, e-mail links, and dates.

  • In the Document window, place the insertion point where you want to insert a special character, before the year (2000).
  • Select the name of the character from the Insert > HTML > Special Characters submenu.

Linking to an e-mail address makes it easy for your visitors to contact you from a Web page. You should always include some method to allow visitors to correspond or interact with someone in your organization.

  • Place the insertion point on the line following the copyright you created earlier.
  • Click Insert > E-Mail Link. The Insert Email Link dialog box opens. Type in the information shown below.


Sometimes you will need to keep track of the date when you last modified a page in your site. Dreamweaver lets you place the date and time on your pages to track this information. The date and time can be updated automatically so you don’t have to do it.

  • Place the insertion point on the line following the e-mail link.
  • Click Insert then select Date. Select the date format you want, then click OK to place the date on your page.

Date Format

Check the update automatically on save to update the date on your page each time you save your document.

When you add a heading to your page, your options are to use text and format it as a heading tag or to create a graphic and insert it on your page. Text formatted as a heading loads quickly because it is text, but your font and size choices are limited. Graphics as headings solve the font choice problem, but you may not have access to a graphics program, or you may not have enough time to create the graphic you need.

Flash text provides the best of both these options. You can use any font you choose and create the text within Dreamweaver. The text you create is a small Flash file (a SWF file). Because it is Flash and not normal body text or a bitmap graphic, you can resize Flash text directly in the Document window.

  • Select the text Kawabunga. Cut it so that you have it on your clipboard. You are going to replace the text with flash text.
  • On the Common Objects panel, click Media:Plugin Media Pluginto drop down you options.
  • Select Flash Text.

Flash Text

  • From the Font pop-up menu, choose Comic Sans. (Choose another font if this is not available on your machine.)
  • In the Size text box, type 22.
  • From the Color pop-up menu, choose a maroon color.
  • From the Rollover pop-up menu, choose a blue color.
  • In the Text text box, type Kawabunga! (or paste from the clipboard)
  • For Bg Color, type CCFFFF or use the eyedropper and click the background in the Document window.
  • In the Save As text box, type kawa_text.swf and then click OK.

Flash Text Format

  • In the Property inspector, click Play to start the Flash animation.

Play Flash Text

  • In the Document window, place your pointer over the Flash text. The text changes to the rollover color you chose.
  • In the Property inspector, click Stop.

Stop Flash Text