2 Domain Hosting

Formatting Paragraphs

Formatting text and paragraphs in Dreamweaver is similar to formatting them in Word and this is done most efficiently with styles.

A style is a preformatted definition of how selected text will appear on the web page. For example, a style called Heading 1 applies a large font size, bold, and an indent to the selected text. Dreamweaver styles are those that are supported by HTML codes. These include styles from Heading 1 (largest) to Heading 6 (smallest), along with others for formatting lists and so on. Most styles affect the entire paragraph rather than a portion of the paragraph. Use text formatting for words or individual characters.

Many of the paragraph and heading style options are found in the Format pull-down list. Individual text formatting options are listed in the Text menu or accessed by using toolbar buttons or keyboard shortcuts.

This document provides instructions for the following formatting tasks:

• Making Styles Accessible for the Vision-Impaired

• Applying Paragraph Styles

• Applying Text Styles

• Creating Lists for Information or Step

• Checking Spelling

Making Formatting Accessible for the Vision-Impaired

When applying any styles (e.g., color, font, or size), it is important to remember the usability of the web page. A large number of people throughout the United States and the world have vision impairments. Simple things can be done to your text in order for the vision impaired to be able to read your web page with ease.

Using Fonts

When the designer of a web page applies font size, it will not always remain that size for the user. Many browsers have different settings that allow the user to change the font size to his/her comfortable reading level. If the designer uses font markups, the browser will be able to open the page and show the text without distorting any of the margins or columns. If the designer specifies type sizes, many browsers can only open the site using the specific fonts and sizes. This can make it extremely difficult for a person with limited vision to read the page.

Using Scrolling or Moving Text

To liven up a page, designers might use scrolling or moving text. While a person using a screen reader may not have any difficulties with this, a person with partial vision might not be able to read the moving text. Moving text can also be distracting to a person with normal vision; therefore, it is a good idea to avoid using this altogether.

Using Color

As a web designer, it is critical to know how something so simple as color decisions can make your web page go from colorful to unreadable. Web users who have vision impairments, such as color blindness, struggle with web pages that are not designed correctly. For example, users with a color deficiency are often unable to differentiate between colors of a similar hue when those colors are of the same lightness and saturation, like the colors red and green.

Using Lists

For the vision-impaired, bulleted and numbered lists can be very hard to understand if not created properly. For people with vision impairments, a screen reader is the way they get information off of the Web. Bulleted and numbered lists created the right way can be read to the user without any complication.

Applying Paragraph Styles

Applying paragraph styles will enhance your document. Paragraph styles are a good way to make your page more navigable with the use of bigger font sizes and bold headings. 

1. Select the text to be formatted
   OR  
   Place the cursor within the paragraph to be formatted
   HINT: Remember that styles apply to the entire paragraph.

2. In the Properties pane, from the Format pull-down list, select the appropriate option
   

Applying Text Styles

Applying text styles enhances your web page by creating words or characters with a variation of design.

Applying Text Styles: Properties Pane

1. Select the text to be formatted

2. In the Properties pane, click the appropriate button(s)
   

Applying Text Styles: Text Menu

The Text menu is used to adjust font style, weight (e.g., bold), and relative size, as well as to apply effects (e.g., underlining) and font color.

1. Select the text to be formatted

2. From the Text menu, select the appropriate options
   

Creating Lists for Information or Steps

A list is a helpful way to present information. The most popular lists are bulleted lists (unordered) and numbered (ordered) lists. Working with either type of list is essentially the same. To create these lists, you can use the Text menu or the Properties pane.

For bulleted lists, the level of the list (e.g., flush with the left margin or a sublist) influences the shape of the bullet. The shape is also influenced by the user-specified browser font.

Creating a List of Items: Text Already Typed

1. Select the items to be in the list
   NOTE: Items must be separated by paragraph breaks, not line breaks.

2. From the Text menu select List » Ordered List (numbered) or Unordered List (bulleted)
   OR
   On the Properties pane, click the appropriate button

Creating a List of Items: Text to be Typed

1. Set your insertion point where the list will begin (this must be on a blank line)

2. From the Text menu select List » Ordered List (numbered) or Unordered List (bulleted)
   OR
   On the Properties pane, click the appropriate button

3. Type the first entry in the list

4. Press [Enter] 

5. Type the next entry

6. Repeat steps 4 and 5 until the list is complete

7. From the Text menu select List » None
   OR
   On the Properties pane, click the appropriate button to deselect it

Start a New Line

If you want to start a new line but not have a bullet or number, insert a line break

1. After the list item, press [Shift] + [Enter]

Checking Spelling

It is easy to check the spelling in your document using Dreamweaver.

1. From the Text menu, select Check Spelling
   The Check Spelling dialog box appears and displays the words that Dreamweaver thinks are misspelled and offers suggestions for correction.

2. Complete the Check Spelling dialog box on each word not found in the dictionary until the document is finished

3. Click OK