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.. Creating
Trang 1While 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
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
6
5
4
3
2
3
5
6
Trang 2Apply 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
3 Targeted Rule list arrow
CSS Styles submenu
Trang 3If 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
4 Style list arrow
5
6
7 3
Trang 4If 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 locate the next occurrence 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
2 Locates the next instance
of “Upload”
Trang 5Suppose 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
3
2
Finds text
Trang 6Choose 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.