adobe dreamweaver cs5 on demand part 18 doc

Creating Ordered and Unordered Lists Create an Ordered List Open the Web page you want to format.. Click within the document where you want to insert the ordered list, or select a group

Horizontal lines have a variety of uses in the construction of a Web page Whether they’re used to separate sections of a page or to under-line an important piece of text, you have several decisions to make

Inserting a horizontal line provides a simple, yet effective way to high-light the information you want visitors to see Lines have a variety of properties that you can modify, including width, height, alignment, and color

Inserting Horizontal

Rules

Insert a Horizontal Line

Open and display the Web page

you want to use

Click where you want to insert a

horizontal line

Click the Insert menu‚ point to

HTML, and then click Horizontal

Rule.

3

2

2 Inserted horizontal line

Modify a Horizontal Line

Open and display the Web page

with the horizontal line you want to

change

Select the horizontal line you want

to modify

Select the formatting options you

want in the Properties panel:

◆ W Width of the line Specified

in pixels or as a percentage of

the window width

◆ H Height of the line in pixels.

◆ Align Alignment of the line on

the page

◆ Shading Select the check box

to create a shaded line

3

2

3

Most word processors have the ability to create bulleted or numbered lists of information A bulleted list can itemize a topic's points or cata-log the properties of an object A numbered list is helpful for giving step-by- step instructions A list can break up the page and simultane-ously draw the viewer's eye to key details Lists are an important alter-native to the basic textual tools of paragraphs and headings In this chapter, you can study Dreamweaver's tools for designing and working with each of the three basic types of lists available in HTML: ordered lists, unordered lists, and definition lists An ordered list is used when it's important that the listed items appear in a sequential order As a professional chef, I use ordered lists all the time for the steps to a spe-cific recipe An unordered list is used when the sequence of the listed items is of no great concern Again, as a chef, I use unordered lists to display my list of ingredients to a recipe

Creating Ordered and

Unordered Lists

Create an Ordered List

Open the Web page you want to

format

Click within the document where

you want to insert the ordered list,

or select a group of text that you

want to convert into a list

Click the Window menu, and then

click Properties to display the

Properties panel

Click HTML to format HTML tags.

Click the Ordered List button in the

Properties panel

Dreamweaver inserts the Roman

numeral 1 into the document

To add items to the list, type an

item, and then press Enter (Win) or

Return (Mac)

6

5

4

3

2

1

6 2

Did You Know?

Create an Unordered List

Open the Web page you want to

format

Click within the document where

you want to insert the unordered

list, or select a group of text that

you want to convert into a list

Click the Window menu, and then

click Properties to display the

Properties panel

Click the Unordered List button in

the Properties panel

Dreamweaver inserts a default

round bullet into the document

To add items to the list, type an

item, and then press Enter (Win) or

Return (Mac)

Create a List Using Existing Text

Open the Web page you want to

format

Select the paragraphs you want to

make into a list

Click the Unordered List or

Ordered List button in the

Properties panel, or click the

Format menu, point to List, and

then select the type of list you

want: Unorder List, Ordered List,

or Definition List.

3

2

1

5

4

3

2

1

2 List changed to bullets

2 5

4

3

A definition list doesn't use leading characters (bullets or numbers) to map the items; instead, definition lists are used in areas like glossaries

I might create a definition list explaining cooking terminology A defini-tion list does not use bullets to identify the items, and it's composed of two lines: the first line is for the name of the item, and the second line

is indented and describes the item; hence the name, definition list If you happen to have a very long definition, and you want to separate it into two or more paragraphs, don't press the Enter key; that will take you to a new definition term Simply press the Shift plus Enter key to create a soft return, and then type the second paragraph

Creating Definition

Lists

Create an Definition List

Open the Web page you want to

format

Click within the document where

you want to insert the definition

list

Click the Format menu, point to

List, and then click Definition List.

Type a definition term and press

the Enter (Win) or Return (Mac)

key The new line is automatically

indented

Type in a definition description

Press the Enter (Win) or Return

(Mac) key to add another

definition term, and press Enter

(Win) or Return (Mac) again to add

the corresponding definition

description

The Definition list can be

continued for as long as you want

Press the Enter (Win) or Return

(Mac) key twice to end the list and

return to the normal paragraph

style type

7

6

5

4

3

2

1

2

Modifying Lists

Modify a List

Click anywhere within the ordered

list you want to modify, or click a

specific item that you want to

change

Click the Format menu, point to

List, and then click Properties.

To modify the list use the following

options:

◆ Click the List Type list arrow,

and then click Bulleted List,

Numbered List, Directory List,

or Menu List.

◆ Click the Style list arrow, and

then select the style you want

NOTE You'll see different options

based on the list type chosen

◆ Enter the starting number you

want to use by the list

(available only when creating a

numbered list)

To modify an individual item:

◆ Click the New Style list arrow

to change the style of the

active list item

◆ Enter the reset count number

you want to use by the active

list item (available only when

creating a numbered list)

Click OK.

5

4

3

2

1

After you create a list, you can use the List Properties dialog box to make changes to it Some of the list options you can change include number style, number reset, or bullet style You can make changes to the entire list or to a specific item in the list

2

5

3

4 1

Dreamweaver gives us the ability to change the style of text A style is

a collection of formatting settings saved with a Web site or template that you can apply to text, graphics, and tables at any time Changing the style of text is useful when you want to draw the reader's eyes to a particular phrase or word For example, using a bold font might indicate that the word is very important Dreamweaver accomplishes this by

using two types of tags: physical tags and logical styles Physical tags change how the text looks (bold, italic, underline, etc) Logical styles

define a certain look or style For example, a paragraph style, or a heading style changes the text, based on pre-defined values In addi-tion, when you use logical styles for HTML text, it becomes easier to find what you're looking for For example, you could conduct a search

to find all paragraphs defined as citation text Dreamweaver provides you with built-in styles, or you can create your own user-defined styles

Applying Text Styles

Apply a Built-In Text Style

Open the Web page you want to

apply a text style

Select the character, word, or

words that you want to apply the

text style

If you select a word or words and

apply a style, the style will only

affect the selected text If you

click inside a paragraph and apply

a style, the style will change the

entire paragraph

Click the Format menu, point to

Style, and then select from the

following options:

◆ Bold, Italic, Underline

TIMESAVER You can also

change the font style in the

Properties panel Click the Bold,

Italic, or Underline buttons you

want to apply

3

2

1

Apply a Built-In Font and

Size Style

Open the Web page you want to

apply a text style

Select the character, word, or

words that you want to apply the

text style

If you select a word or words and

apply a style, the style will only

affect the selected text If you

click inside a paragraph and apply

a style, the style will change the

entire paragraph

Click CSS in the Properties panel

to apply or create a CSS rule

Choose from any of the following

style options:

◆ Font Click the Font list arrow,

and then select the font style

you want

◆ Size Click the Size list arrow,

and then select the point size

you want

NOTE You can also change the

font using the Format menu Click

the Format menu, point to Font,

and then select a style

If the New CSS Rule dialog box

appears, select the following

options:

◆ Selector Type Specify a

selector type: Class, ID, Tag, or

Compound

◆ Selector Name Select or enter

a name for your selector

◆ Rule Definition Select where

to define the rule, either a

current document or external

CSS file

Click OK.

6

5

4

3

2

1

2

Using the <strong> and <em> Tags

The two style tags <b> bold and <i> italic are common use tags in Dreamweaver; however, it is better to use the, <strong> for bold and

<em> for italic Dreamweaver allows you to specify which tags to use

Click the Edit (Win) or Dreamweaver (Mac) menu, click Preferences, click the General category, select the Use <strong> and <em> in place

of <b> check box, and then click OK

For Your Information

4 3