Syllabus Aesthetics HTML Fireworks Flash Dreamweaver

 

 

 

Dreamweaver MX

Learning the Basics
Working with Graphics
Creating Links
Working with Tables for Page Design
Adding User Interactivity
Managing Your Site

Projects

Fan Site
Commercial Web Site
Final Dreamweaver Site

Final Exam


 

Search this site:

 


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


Working with Text on a Page

You can add text to a page by typing it or by copying and pasting from an existing text document. If the text is from an application that supports drag-and-drop copying (for example, Microsoft Word on the Macintosh), you can open both Dreamweaver and that application and either copy and paste or drag the text into Dreamweaver.

  • Step-by-Step 1.5: Adding Text to a Page
    1. Insert a new line at the top of the page by pressing Enter.
    2. Key Hawaii - Surfer's Paradise in that new line.
    3. From the Property inspector's Format menu, select Heading 3. You now tagged the text as a Level 3 heading.
    4. Save your document and remain in this screen for the next Step-by-Step.

Indenting Text

Often you'll want to indent the text on the page. You can use the Text Indent and Text Outdent icons in the Property inspector to do this, as shown in the Figure below. Using Text Indents indents text at the left and righ margins of the page.

  • Step-by-Step 1.6: Indenting Paragraphs and Removing Indentation
    1. Select the first six body paragraphs of your surf_hawaii.htm document, starting with the word Aloha.
    2. Click Text Indent in the Property inspector or click the Text menu and then click Indent.
    3. Select the first two body paragraphs of the document.
    4. Click Text Outdent in the Property inspector or click the Text menu and then click Outdent.
    5. Save the file and preview it in the browser by pressing F12.
    6. Close the browser and remain in this screen for the next Step-by-Step.

Making Lists

Dreamweaver gives you three kinds of lists: ordered (numbered), unordered (bulleted), and definition lists (a term and its definition).


ORDERED LISTS

An ordered list consists of list items that are ordered numerically or alphabetically. You have the option of using Arabic or Roman numerals or using uppercase or lowercase letters.

  • Step-By-Step 1.7 - Creating an Ordered (numbererd) Lists
    1. Select the four lines of text: Sunset Beach, Oahu, Waimea Bay, South Shore, Oahu and Pipeline
    2. Click the Ordered List button in the Propert inspector (just to the left of the Test Outdent button - see Figure above), or click the Text menu, point to List, and then click Ordered List. The selected text is indented and numbered.
    3. Save the document and remain in this screen for the next Step-By-Step.
    Step-By-Step 1.8 - Changing Ordered List Properties
    1. Click in the line with the text Sunset Beach or in any line in that list.
    2. Click the List Item in the Property inspector, or click the Text menu, point to List, and then click Properties. The List Properties dialog box opens.
    3. From the Style menu, select Alphabet Small (a,b.c) and then click OK. All items in the list are alphabetized.
    4. Save the file and preview in the browser (F12)
    5. Close the browser and remain in this screen for the next Step-By-Step.
ORDERED LISTS

Unordered lists are often called bulleted lists because each list item has a bullet in front of it. The bullet symbol Dreamweaver displays by default can be changed to a circle or a square.

  • Step-By-Step 1.9 - Creating an Unordered (Bulleted) List
    1. Select the text starting with East to southeast winds and ending with Water temperature at 76 degrees Fahrenheit (at the bottom of the document).
    2. Click Unordered List in the Property inspector, or click the Text menu, point to List, and then click Unordered List. The selected text is indented and bulleted.
    3. Save the document and remain in this screen for the next Step-by-Step.

    You can change the default bullet symbol of unordered lists by modifying the list's properties.

  • Step-By-Step 1.10 - Creating an Unordered (Bulleted) List
    1. Click in any line in the list.
    2. Click List Item in the Property inspector, or click the Text menu, point to List, and then click Properties. The List Properties dialog box opens.
    3. From the Style menu, select Square and click OK. All items in the list now use the square bullet symbol.
    4. Save the document and remain in this screen for the next Step-by-Step.
DEFINITION LISTS

A definition list consists of a series of terms and their definitions. The word or term to be defined is left-justified; the definition is indented and placed on the next line. For this formatting to work, a term and its definition must each be a separate paragraph.

  • Step-By-Step 1.11 - Creating a Definition List
    1. Select the text starting with Crest and ending with The time for a wave crest to travel one wave length.
    2. Click the Text menu, point to List, and then click Definition List. The terms are now at the left margin, and their indented definitions are on succeeding lines.
    3. Save the file and preview it in the browser.
    4. Close the browser and remain in this screen for the next Step-by-Step.

    LIST TIPS:

When you're creating lists, keep these tips in mind:

    • To change a bulleted list to a numbered list or a numbered list to a bulleted list, select the entire list and then apply the other list format.
    • To convert a list to plain text, select the list and apply the list type again. This procedure works like a toggle to turn off the list formatting.
    • If you had extra text selected when you applied the formatting for the list, select the extra text and apply the formatting again to remove the list formatting.
    • If you are keying within an already formatted list and you want to end the list, press Enter (Windows) or Return (Macintosh) twice.
    • List items are single-spaced by default. If you want extra spacing between the lines, select all the items in the list and then choose Paragraph from the Format list of the Property inspector.

 

Character Formatting

Occasionally you will need a word or phrase to look different from the surrounding text. For example, you might want a word to be bold or italicized to visually set it apart from other text. Many times you will find yourself repeating the most recent formatting you applied on another paragraph or other selected text. The Redo command makes that task easier, with a simple keystroke. The first two items listed on the Edit menu are the Undo and Redo commands. You'll want to remember their keyboard shortcuts:

  • Undo: Ctrl + Z (Windows) and Command + Z (Macintosh)
  • Redo: Ctrl + Y (Windows) and Command + Y (Macintosh)

 

  • Step-By-Step 1.12 - Creating a Definition List
    1. Select the word Crest in the definition list you just created.
    2. Click Bold (the dark capital B) in the Property inspector, or click the Text menu, point to Style, and then click Bold. The selected text now has bold formatting applied to it.
    3. Select the word Trough in the definition list.
    4. Press Ctrl + Y (Windows) or Command + Y (Macintosh). Because you used the Bold command most recently, it is applied to the selected text.
    5. Repeat the bold formatting on the other terms in the definition list.
    6. Save the document and remain in this screen for the next Step-by-Step.

Positioning Text

If you want to force a line break in the text without creating a new paragraph, you need to insert a line-break character. This would be useful for an address line, for example, where you want a new line for each line in the address, without the extra spacing of a paragraph. You can create a line break by holding down the Shift key and then pressing Enter (Windows) or Return (Macintosh) You also might find that you want to make other adjustments to text, such as centering a heading, to make it more prominent.

  • Step-By-Step 1.13 - Creating a Line Break and Centering Text
    1. In the paragraph that begins with Besides helping you find, position the insertion point before the text Big Kahuna Surf and Swim Shop.
    2. Press Shift + Enter (Windows) or Shift + Return (Macintosh). 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.
    3. Repeat steps 1 and 2 to move the text 1134 Paradise Lane to the next line and Hawaii, USA to a new line.
    4. Position the insertion point before the text Sign up at and then press Enter (Windows) or Return (Macintosh) to insert a new paragraph.
    5. Position the insertion point in the heading Hawaii - Surfer's Paradise.
    6. Click Align Center box in the Property inspector. The heading is now centered.
    7. Save the file and preview it in the browser.
    8. Close the browser. Remain in this screen for the next Step-by-Step.

Changing Font Properties

To make your page more interesting and easier to read, you might want to change the typeface used to display the text. Although a great deal of information is available concerning how type is used for print, not all of that knowledge translates to the Web. You have to consider the fact that users are free to change the screen size or to change the font size and color of the text. The way type flows on a page can easily change from user to user. There is also a dramatic difference between font sizes in Windows and on a Macintosh. The same text displays smaller on Macintosh computers than in Windows.

If you are accustomed to print work, you might be frustrated by the lack of typographic control in HTML, such as line and letter spacing. You also can't control widows (a single word on a line) in Web text, and you can't control line breaks in paragraphs. You should remember that text support on the Web is still primitive (although Cascading Style Sheets can help-more on that later). You need to work within the constraints of the medium.

 

Changing the Font Face

You can change the font for the entire page or for selected text on the page. However, for users to see your page as you designed it, the font you choose must be installed on the user's computer. Do not make the assumption that all fonts are loaded on everyone's computer. If your first choice is not available, the browser will attempt to use the second choice and then the third. If none of the fonts are available on the user's computer, the text will be displayed in the browser's default font. In the following Step-by-Step, you will make some simple font changes to the text on the page.

  • Step-By-Step 1.17 - Changing the Font Face
    1. Select the text Hawaii - Surfer's Paradise.
    2. From the Property inspector's Font list, choose Arial, Helvetica, sans serif. The selected text changes to another font, depending on the fonts installed on your computer.
    3. Select the remainder of the text on the page.
    4. From the Property inspector's Font menu, choose Arial, Helvetica, sans serif. All the text now has the same font face.
    5. Save the file and preview it in the browser. Remain in this screen for the next Step-by-Step.

Removing Font Face Settings

In some cases you might not want text to have a font setting but would rather have it displayed in the user's default font. To make this change in settings, select the text whose font you want to remove. Choose Default Font from the Font list in the Property inspector, or click the Text menu, point to Font, and then click Default Font.

 

Modifying Font Combinations

You can also modify the choices that appear as font combinations and adjust the order in which the fonts will be used. From the Property inspector's Font list, choose Edit Font List, or click the Text menu, point to Font, and then click Edit Font List. The Edit Font List dialog box opens. Select a font combination (such as Arial, Helvetica, sans serif) from the Font list at the top of the dialog box. The fonts in the selected combination appear in the Chosen Fonts list at the lower left of the dialog box. To its right is a list of all fonts installed on your system.

You can choose from the following options:

  • To add or remove fonts, select the font and then click the directional buttons between the Chosen Fonts list and the Available Fonts list.
  • To add or remove a font combination, click the plus (+) or minus (-) button at the top left of the dialog box.
  • To add a font not installed on your system, key the font name in the text box below the Available Fonts list and click the directional arrow to add it to the combination. Adding a font not installed on your system is useful; for example, you might want to specify a Windows-only font when you are authoring on a Macintosh.
  • To move a font combination up or down in the list, click the directional arrow buttons at the top right of the dialog box.


Changing the Font Color

You can easily change the color of your text in Dreamweaver. All colors used at your site are listed on the Assets panel in the Files panel group. To ensure that the colors you use are consistent across your site, you can save commonly used colors on the Assets panel as Favorites.

  • Step-By-Step1.18 - Adding Colors to Assets Favorites
    1. Click the Window menu, and then click Assets to display the Assets panel. If you have the Files panel group open, you can also click the Assets tab to open the panel.
    2. Make sure the Colors icon is selected and then select Site at the top of the Assets panel, if necessary. Note: If your Site list has only black (#000000) and white (#FFFFFF), choose the Options menu and ; click on Refresh Site List.
    3. Select #003366 to add to the Favorites list.
    4. Select Add to Favorites from the Options menu.
    5. At the top of the Assets panel, select Favorites, as hown in the Figure below


    6. Select #003366 and then select Edit Nickname from the Options menu.
    7. Key dark blue as the nickname for this color and then press Enter.

     

  • Step-By-Step1.19 - Changing the Font Color
    1. Add a new color to the Assets Favorites. Select #006699 and nickname it tourquoise.
    2. Select the text Hawaii - Surfer's Paradise.
    3. Select tourquoise (#006699). Then click Apply.
    4. Close the browser and remain in this screen for the next Step-By-Step


    Back to previous page

    Go to next section: CSS Styles

 

 


 

Top of Page

 

Home . Syllabus . Web Aesthetics . HTML . Fireworks . Flash . Planning . Graphic Design . Dreamweaver