adobe dreamweaver cs5 on demand part 18 doc

ptg
108 Chapter 5
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
1
3
2
Inserted horizontal line
From the Library of Wow! eBook
ptg
Chapter 5 Working with Web Page Text 109
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
1
2
3
From the Library of Wow! eBook
ptg
110 Chapter 5
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 ad d 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?
You can create a nested or indented
list.
A nested list is a list that contains
another list. Select the items you want
to nest, click the Indent button in the
Properties panel, or click the Format
menu, and then click Indent.
4
5
From the Library of Wow! eBook
ptg
Chapter 5 Working with Web Page Text 111
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 ad d 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
From the Library of Wow! eBook

ptg
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.
112 Chapter 5
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
5 42
From the Library of Wow! eBook
ptg
Chapter 5 Working with Web Page Text 113
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 mo dify 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 mo dify 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
From the Library of Wow! eBook
ptg
114 Chapter 5
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.
◆ Strikethrough, Teletype,
Emphasis, Strong
◆ Code, Variable, Sample,
Keyboard
◆ Citation, Definition, Deleted,
Inserted
3
2
1
2
3
From the Library of Wow! eBook
ptg
Chapter 5 Working with Web Page Text 115

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
From the Library of Wow! eBook