Lesson 1, continued : Creating a "Surf Hawaii Web Page"

CSS Styles

As you design your Web pages, you will want to use font changes to make your pages more interesting. You can easily change the font face, including its sixe and color, but, if you want the same color, the same font face, and the same size for all your pages, you would have to remember the settings from page to page.

Good news: Cascading Style Sheets (CSS) saves the text and paragraphing formatting from selected text, making it easy for you to apply that style to other paragraphs in your document or to any document in your site. If you change a CSS style, text originally formatted with that style does not change.

Creating and Applying CSS Styles

The following exercises demonstrate the use of CSS styles on a page. You will format some text, define a CSS style, and then apply that formatting style to other portions of a document.

• Step-By-Step 1.17 - Creating a CSS Style Based on Exiting Text

  1. Select Crest, the first term in the definition list. You applied bold formatting to this word earlier.
  2. Apply the color turquoise (#006699) from the Assets panel. This word now has the same color as the page's heading.
     The remaining definition terms on this page need the same formatting, as do any other lists you create for your site. You'll use a CSS style to accomplish this.
  3. On the Property Inspector, click the Style pop-up menu and choose Rename from the list. The Rename Style dialog box opens.
  4. In the dialog box, name the style Term and click OK.
  5. In the third paragraph, select the text Dead Man's Bluff. Change the font to Times New Roman, Times, Serif. Change the color to #993300. Use the Size menu to change the size to Medium.
  6. Use the Rename Style dialog box to name the style Place.
  7. Save the document and remain in this screen for the next Step-by-Step.
     Note: To apply a style to a selection, you have to highlight all of the appropriate text before applying the style. To apply a style to an entire paragraph, you just have to place the insertion point within the paragraph-you don't have to select each word in the paragraph.

   

• Step-By-Step 1.18 - Applying a CSS Style

  1. Select the definition term Trough. The style is to be applied to a paragraph-so you can either select the whole word or just place your insertion point within the text.
  2. Click Term on the Style menu on the Property inspector. The style is applied to the paragraph.
  3. Repeat steps 2 and 3 for the remaining definition terms in the list.
  4. Select the text Long Cool One:. This time you are applying a selection style, so make sure you highlight each word and the colon.
  5. On the Style menu on the Property inspector click Place. The style is applied to the selected text.
  6. Repeat steps 5 and 6 for Piece of Cake: and Gripper:.
  7. Save the document and remain in this screen for the next Step-by-Step.

So far, you have created new CSS styles. But you can also use CSS to specify how existing HTML tags are displayed. In the next Step-by-Step, you'll redefine the Heading 3 tag.

• Step-By-Step 1.19 - Redefining an HTML Tag

  1. At the top of the page, click anywhere in the heading Hawaii - Surfer's Paradise.
  2. In the Property inspector, change the style to None. Even if the style is already set to None, set the selection to None again. This should remove the color you added earlier and set the font back to Default.
  3. Click the Align Left button on the Property inspector.
  4. Expand the CSS panel on the right. Click on the menu box in the upper right hand corner of the panel and click New. The New CSS Style dialog box opens.
  5. For Selector Type, choose Tag. For Define In, choose This Document Only. Then use the Tag pop-up menu to select h3 (h3 is the HTML tag used to mark text as Heading 3). Then click OK. This will launch the CSS Style Definition dialog box for the new tag definition.
  6. Start in the Type category. For Font, use the pop-up menu to select Ariel, Helvetica, sans-serif. For Size, key medium (or select it from the pop-up menu). For Color, key #006699.
  7. Switch to the Block category. In the Text Align field, use the pop-up menu to select center.
  8. Click OK to close the CSS Style Definition dialog box. Click Done to close the Manage Styles dialog box. You should see that the heading is set to a style similar to what it was when we started. So why go through all that?
  9. Here's why: Scroll down to the bottom of the page, and click anywhere in the line Expected Conditions of the Big Kahuna Competition. Then, in the Format menu on the Property inspector, select Heading 3. Now every time you set some text to Heading 3, it will have all of the characteristics of your first Heading 3. And if you ever decide to change the characteristics of the heading 3 style, the change will be effective for the whole page.
  10. Save the document and remain in this screen for the next Step-by-Step.

Deleting a CSS Style

If you want to delete a CSS style (one which you perhaps no longer need), click the Window menu and then click CSS Styles. On the CSS Styles panel, right-click the style you want to delete and choose Delete.

Clearing Text Formatting

If you want to clear some text formatting, first select the formatted text or, if you are clearing a paragraph style, you can place your insertion point anywhere in the paragraph. Then, from the Style menu on the Property Inspector, select None. All formatting is removed, regardless of how it was applied.

Adding Horizontal Rules

A horizontal rule is a line that goes across the page and provides a visual division between sections of your page.

• Step-By-Step 1.20 - Adding a Horizontal Rule

  1. Place your insertion point after the word Fahrenheit at the bottom of the document and press Enter (Windows) or Return (Macintosh).
  2. In the Property inspector, deselect the Ordered List option.
  3. From the HTML category on the Insert bar, click the Horizontal Rule button, or select the Insert menu, point to HTML, and then click Horizontal Rule.
  4. With the horizontal rule selected, key 90 in the W (width) text box of the Property inspector.
  5. Select % from the list menu to the right of the W text box. The horizontal rule will now extend across 90 percent of the browser window regardless of the browser width. It is displayed as a shaded bar centered across the page.
     Note: You can select pixels from the menu to specify an absolute width. If you choose this option, the rule is not resized when I users resize the browser window.
  6. Deselect Shading to display a solid bar.
  7. Key 3 in the H (height) text box. The horizontal rule is 3 pixels in height.
  8. From the Align pop-up menu, select Left. The thick, unshaded bar moves to the left but still extends across 90 percent of the browser window.
  9. Position the cursor to the right of the horizontal rule and press Enter (Windows) or Return (Macintosh).
  10. Save the file and preview it in the browser.
  11. Close the browser. Remain in this screen for the next Step-by-Step.

Adding Special Characters to Your Page

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

The Characters pop-up menu on the Text category of the Insert bar contains the most commonly used special characters. To insert characters not found on this panel, click the arrow to the right of the Characters button from the Text category of the Insert bar, or click the Insert menu, point to HTML, point to Special Characters, and then click Other. The Insert Other Character dialog box opens, as shown in the Figure below. You can select any needed characters from this dialog box.

• Step-By-Step 1.21 - Entering Special Characters

  1. Make sure your cursor is positioned at the bottom of the page.
  2. From the Text category on the Insert bar, click the Characters menu and choose the copyright character, as shown in the Figure below.
     
  3. To the right of the copyright symbol, key 2003, Compass Adventure Tours.
  4. Save the file and preview it in the browser.
  5. Close the browser. Remain in this screen for the next Step-by-Step.

Adding E-mail Links

You can link to an e-mail address to give your visitors an easy way 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.

In addition to using the method described below to enter e-mail links, you can also manually enter an e-mail link. First you would select the text you want to make into an e-mail link. Then, in the Link text box of the Property inspector, key mailto: and then the e-mail address. Make sure you key the colon and no spaces (for example, mailto:info@compassadventure.com).

• Step-By-Step 1.22 - Entering an E-mail Link

  1. Place the insertion point at the end of the copyright line you created earlier. Press Shift + Enter (Windows) or Shift + Return (Macintosh) to create a new line just under the copyright notice.
  2. Click the Insert menu, and then click Email Link. The Email Link dialog box opens.
  3. Make the following changes:
     1. For Text, key Send us your questions!
     2. For E-Mail, key your e-mail address.
  4. Click OK. The text appears as a link. The Property inspector shows the e-mail address in the Link text box.
  5. Save the file and preview it in the browser.
  6. Close the browser. Remain in this screen for the next Step-by-Step.

 

Adding a Date Automatically

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.

Once you have an automatically updated date in your document, you can change its formatting by selecting it and then clicking Edit Date Format in the Property inspector. The Edit Date Format dialog box opens (just like the Insert Date dialog box shown in Figure 1-27 below). Make appropriate changes to the options and then click OK.

• Step-By-Step - 1.26 Inserting the Date

  1. Make sure the insertion point is at the end of the line containing the e-mail link you created earlier. Press Shift + Enter (Windows) or Shift + Return (Macintosh) to create a new line just under the e-mail link.
  2. Click Date from the Common category of the Insert bar or click the Insert menu and then click Date. The Insert Date dialog box opens.
  3. Make the following changes:
     1. Select Thursday, (with a comma) from the Day Format list menu.
     2. Select March 7,1974 from the Date Format list menu.
     3. Select 10:18 PM from the Time Format list menu.
     4. Select Update Automatically on Save to update the date on your page each time you save your document.
  4. Click OK. The current day, date, and time appear below the e-mail link. This information will change every time you save your document. Remain in this screen for the next Step-by-Step.

 

Adding Flash Text

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 choices are limited. Graphics as headings solve the font choice problem, but you might not have access to a graphics program, or you might not have enough time to create the graphic you need.

Flash text provides the best of both 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 the text directly in the Document window.

Note: Resizing graphics (which will be discussed in Lesson 2) within Dreamweaver is not recommended. But you can resize the Flash text image you create because it is a vector graphic. Vector graphics are scalable. Bitmap graphics (such as GIF and JPEG images) are not.

• Step-By-Step 1.27 - Adding Flash Text

  1. Create a new line at the bottom of the document by pressing Enter (Windows) or Return (Macintosh). In the Property inspector, click Align Center.
  2. Click the arrow to the right of the Media button on the Common category, and then click Flash Text. (Be sure you haven't selected Flash or Flash Button.) The Insert Flash Text dialog box opens.
  3. Make the following changes:
     1. From the Font pop-up menu, choose Comic Sans MS. (Choose another font if this is not available on your machine.)
     2. In the Size text box, replace the existing size with 22.
     3. From the Color color picker, choose a maroon color (#660000).
     4. From the Rollover Color color picker, choose a blue color (#003366).
     5. In the Text text box, key Kawabunga!
     6. For Bg Color, key CCFFFF, or click on the color picker and use the eyedropper to click the background in the Document window.
     7. In the Save As text box, key kawa text.swf.
  4. Your dialog box should look similar to Figure 1-27. Click OK.
     
     
     
  5. In the Property inspector, click Play to start the Flash animation.
  6. In the Document window, place your pointer over the Flash text. The text changes to the rollover color you chose.
  7. In the Property inspector, click Stop.
  8. In the Document window, select the Flash text and increase its size by dragging one of the handles.
  9. Save the file and preview it in the browser.
  10. Close your browser and close Dreamweaver.

   

Modifying Flash Text

Once you have incorporated Flash text into your Dreamweaver document, you can make modifications to it. In the document window, double-click the Flash text. This opens the Insert Flash Text dialog box. Change the options to your liking. Click Apply to see the results of your changes. When you finish, click OK to close the Flash Text dialog box. The edited Flash text is placed on the page, and the SWF file is updated.

Congratulations! This completes Project 3: Creating a "Surf Hawaii Web Page"

Please be sure to Save your final version of the surf_hawaii.htm page. DO not Synchronize or Save to the Student Work folder at this time.

 

Back to previous page

Go to Dreamweaver Page