adobe dreamweaver cs5 on demand part 19 docx

ptg
While embedding physical tags or logical styles into a document is a
very common way to change the look of text, the Web design commu-
nity is moving to Cascading Style Sheets. Cascading Style Sheets can
be used in conjunction with logical styles to define how that style
works when viewed by the visitor, and give you more control over what
your visitors will see. It's also important to understand that the visual
look of standard HTML styles and tags are defined by the browser
application, and may appear different when viewed on different
browsers. If you modify a style, you make the change once, but all text
tagged with that style changes to reflect the new format.
116 Chapter 5
Creating Text Styles
Create a CSS Text Style
Open the Web page you want to
create a customized style.
Click the Format menu, point to
CSS Styles, and then click New.
◆ You can also click the New
Style button on the CSS Styles
panel.
Choose from the following options:
◆ Selector Type. Select the Class
(can apply to any tag) option.
◆ Selector. Enter a name for
the style.
NOTE
Class names should begin
with a period (if you don't add it,
Dreamweaver will), and have no
spaces or additional punctuation.

◆ Define In. Select the This
Document Only option or select
an existing external style sheet.
Click OK.
Click the Type category.
Format the font based on the
available options.
Click OK.
7
6
5
4
3
2
1
4
3
7
5
6
From the Library of Wow! eBook
ptg
Chapter 5 Working with Web Page Text 117
Apply a CSS Text Style
Open the Web page you want to
apply a CSS text style.
Select in the paragraph that you
want to apply the custom style.
Remember the style you created
can only be used within the

original document. If you open
another document, you will not be
able to use this new style.
Click the Format menu, point to
CSS Styles, and then click the
name of the new style, or click the
Targeted Rule list arrow in the
Property Inspector for CSS, and
then click the name of the new
style.
TIMESAVER
You can also
change the Style in the Properties
panel. Click the Style list arrow,
and then select the style you want
to apply.
The new style is applied to the
selected text.
3
2
1
2
3
3
Targeted Rule l is t ar row
CSS Styles submenu
From the Library of Wow! eBook
ptg
118 Chapter 5
If you no longer like the name you specified for a style or the name

doesn’t adequately describe the formatting style, you can rename it
using the Style list arrow in the Properties panel. The Style list arrow
provides access to the Rename command where you can change the
name of a style.
Renaming Styles
Rename a Style
Open the Web page you want to
rename a style.
Click the Window menu, and then
click Properties to open the
Properties panel.
Click HTML in the Properties
panel.
Click the Style list arrow, and then
click Rename.
Click the Rename Style list arrow,
and then select the style you want
to rename.
Type a new name for the style.
Click OK to close the dialog box
and save your changes.
The Results panel appears,
displaying the selected style.
7
6
5
4
3
2
1

2
4
Style list arrow
5
6
7
3
From the Library of Wow! eBook
ptg
Chapter 5 Working with Web Page Text 119
If you need to quickly find another instance of a word or phrase in a
Web page, you can use the Find Selection command instead of the Find
and Replace command. All you need to do is select an instance of the
text or phrase you want to find, and then select the Find Selection com-
mand on the Edit menu, or press Shift+F3. After you find the selection,
you can use the Find Next command to locate the next occurrence of
the selection.
Finding Text
Find Text by Selection
Open the Web page you want to
find text.
Select a word or phrase.
Click the Edit menu, and then click
Find Selection.
TIMESAVER
Press Shift+F3 to
find the current selection.
Dreamweaver goes through the
document, finds and highlights the
next occurrence of the selected

word.
To lo ca te the next occu rre nce of
the word, click the Edit menu, and
then click Find Next.
TIMESAVER
Press F3 to find
the next occurrence of the current
selection.
4
3
2
1
3
2
Locates the next instance
of “Upload”
From the Library of Wow! eBook
ptg
120 Chapter 5
Suppose that you discover you need to change a word throughout a
Web page or entire site. You do not need to read through the document
to find every instance of the word and manually change it. The Find and
Replace command can do that for you. Dreamweaver can find every
instance for you, and walk you through the Web site from page to page
until all the corrections have been made. In addition to text, you can
also find and replace code. You can search one or more Web page or
an entire Web site. The results of performing a Find All and Replace All
appear within the Results window under the Search tab, and results
remain there until the next time you perform a Find All or Replace All. If
you select a word or group of words before opening the Find and

Replace dialog box, the words automatically are added to the
Find box.
Finding and Replacing
Text or Code
Find and Replace Text or Code
Open the Web page you want to
find and replace text.
Click the Edit menu, and then click
Find and Replace.
Choose from the following Find
and Replace options:
◆ Find In. Click to determine what
documents you want to search;
everything from the current
document to the entire site.
◆ Search. Click to determine
what logical parts (Text or
Source Code) of the document
you want searched.
◆ Find. Enter the text that you
want to find.
◆ Replace. Enter the text
(optional) that you want to use
to replace the text entered in
the Find input box.
◆ Load Query. Click Load Query
button to load a previously
saved Find and Replace query.
◆ Save Query. Click Save Query
button to save the current Find

and Replace query.
3
2
1
3
Finds
text
From the Library of Wow! eBook
ptg
Chapter 5 Working with Web Page Text 121
Choose from the following Find
and Replace options:
◆ Match Case. Select to make the
Find text case sensitive
(charlie, as opposed to Charlie).
◆ Match Whole Word. Select to
match whole words.
◆ Ignore Whitespace. Select to
treat all whitespace as a single
space for the purpose of
matching.
◆ Use Regular Expression. Select
to use string expressions to
help locate information.
Choose from the following controls
to find what you want:
◆ Find Next. Find the next
occurrence of the Find input
field, based on the current
position of the cursor.

◆ Find All. Find all occurrences of
the Find input field.
◆ Replace. Find the next
occurrence of the Find input
field and replace it with the text
in the Replace field.
◆ Replace All. Find all
occurrences of the Find input
field and replace with the text
in the Replace field.
Click Close to exit the Find and
Replace dialog box.
The Results panel appears for the
Find All and Replace All.
TIMESAVER
Press F3 (Win) or
A
+G (Mac) to perform a search
again without displaying the Find
and Replace dialog box.
6
5
4
4
6
5
Finds all the instances of the word
“video” in the Results Panel.
From the Library of Wow! eBook