adobe dreamweaver cs5 on demand part 35 doc
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (618.15 KB, 6 trang )
ptg
214 Chapter 9
Cascading Style Sheets function and perform just like their counter-
parts in word-processing applications. For example, you could create a
character style in Microsoft Word that specifies text be Garamond, 12
point, bold, and the color black. When the style is applied to the text it
will immediately take on those characteristics. If you access the style
and change it (for example, change the color to red), all text associated
with that style would change. CSS works the same way: You create a
style for the text and apply the style to the Web document. Changing
the style would subsequently change all text associated with that par-
ticular style. However, the difference between word-processing styles
and CSS styles is that paragraph and character styles are one in the
same. For example, if you select a word or group of words and apply a
CSS style, the style is applied only to the selected text (also called an
inline style). However, if you click within a paragraph (add an insertion
point), the CSS style is applied to the entire paragraph. Generally, inline
styles are frowned upon because of the amount of effort it takes to
apply and modify the items on an item-by-item basis. Instead, you can
convert an inline style to a CSS rule located in the head of the page or
in an external style sheet, which is cleaner and easier to use.
Applying Internal
CSS Styles
Apply a Paragraph Style
Open the Web page you want to
apply a paragraph style.
Click within a specific paragraph,
to create an insertion point.
NOTE
Do not select any text.
Click the Format menu, point to
CSS Styles, and then select a
user-defined CSS style.
TIMESAVER
In the Properties
panel, click CSS, click the
Targeted Rule list arrow, and then
select the CSS style you want.
The CSS style is applied to the
entire paragraph.
NOTE
A paragraph is defined as
the information contained between
two carriage returns.
3
2
1
2
3
Click the Targeted Rule list arrow,
and then select a style.
From the Library of Wow! eBook
ptg
Chapter 9 Working with Cascading Style Sheets 215
Apply a Character (Inline) Style
Open the Web page you want to
apply a character style.
Select a word or words within the
text document.
Click the Format menu, point to
CSS Styles, and then select a
user-defined CSS style.
The CSS style is applied to the
selected text.
Convert Inline CSS to a CSS Rule
Open the Web page with the style
you want to change.
Click the View menu, and then
click Code.
Select the entire <style> tag that
contains the inline CSS you want
to convert.
Right-click (Win) or Control-click
(Mac) the selection, point to CSS
Styles, and then click Convert
Inline CSS To Rule.
Click the Convert to list arrow,
select a convert type, and then
enter a class name for the new
rule.
Specify a style sheet or select the
head of the document as to where
you want the new CSS rule.
Click OK.
7
6
5
4
3
2
1
3
2
1
2
3
5
6
7
See Also
See “Moving CSS Rules” on page 226
for information on moving CSS rules to
a style sheet.
From the Library of Wow! eBook
ptg
216 Chapter 9
When you start to modify an external style sheet, you really begin to
see the awesome power of using CSS. An external style sheet normally
contains all of the formatting options for one or more Web pages. When
you attach the style sheet to the document, the style sheet controls the
formatting of the document. For example, if you had a style sheet that
modified the <body> tag to use the Helvetica font, centered, and 12
point, when the style sheet was attached to the HTML document, all
text defined by the <body> tag would change, according to the rules
set up by the style sheet. Since the style sheet is only a text document
it's easy to make changes (they can even be made in a text editor). For
example, you could access the style sheet and change the formatting
of the text from centered to left, and then save the style sheet. The next
time the Web page opens, all the <body> tag text will be left justified. In
addition to this power, you can use more than one style sheet within a
Web page. For example, you can have a style sheet that defines all
your headings, one that defines the look of the page, and another that
defines body text. Cascading Style Sheets separate the page content
from the formatting, and give you total control over your designs.
Applying and
Modifying External
CSS Styles
Attach an External Style Sheet
Open the Web page you want to
attach an external style sheet.
Click the Format menu, point to
CSS Styles, and then click Attach
Style Sheet.
Select from the following options:
◆ File/URL. Enter the path and file
name of the external style
sheet, or click Browse to select
a file.
◆ Add As. Click the Link option to
create a link from the page to
the external style sheet
(recommended), or click the
Import option to write the style
sheet directly into the page.
◆ Media. Click the Media arrow
to select the media type
associated with this particular
page (Default: All).
◆ Preview. Click Preview to view
the effects of the external style
sheet on your page.
Click OK.
4
3
2
1
4
3
From the Library of Wow! eBook
ptg
Chapter 9 Working with Cascading Style Sheets 217
Open and Modify an External
Style Sheet
Open the Web page you want to
modify an external style sheet.
Any associated files, such as an
external style sheet and scripts,
with the main document are
automatically available on the
Related Files toolbar.
Click the external style sheet file
on the Related Files toolbar.
Modify the document to reflect the
changes required.
Click the File menu, and then click
Save.
To view the mai n doc ument, cl ic k
Source Code on the Related Files
toolbar.
When you display the main
document, the formatting reflects
the changes made to the attached
style sheet.
5
4
3
2
1
5
3
Did You Know?
You can use a Dreamweaver sample
style sheet.
Dreamweaver provides
sample style sheets you can apply to
your Web pages or use it as a starting
point to create your own style sheet.
Click the Window menu, click CSS
Styles, click the Attach Style Sheet
button, click the Sample Style Sheets
link, select the sample style sheet you
want, click Preview to apply it to the
current Web page, and then click OK.
2
Related Files toolbar
Filtering Files on the Related Files toolbar
The Related Files toolbar displays static and dynamically-related
files for a Web page. Status files appear first starting from the left,
followed by external files (such as .css and .js), and concluding with
dynamic path server included files (such as .php, .inc, and .module).
When the Related Files toolbar contains too many files to fit on the
toolbar, scroll arrows appear to access files. To help you reduce the
number of files on the toolbar, you can filter files by type to hide the
ones you don’t want to display. Click the Filter Related Files button
(New!) on the Related Files toolbar, and then select the file types
you want to filter (checked to show or unchecked to hide) or click
Show All File Types to show all files. The list of file types on the
menu is built based on the file types connected to the current open
document, which varies. You cannot filter out all the file types.
When you get to the last file type, it will be grayed out in the menu.
When you close a document, the filter settings are not saved.
For Your Information
Filter Related Files button
From the Library of Wow! eBook
ptg
218 Chapter 9
You can remove a style from any tag, you can delete the redefined tag,
or you can even edit the existing style to reflect different formatting.
Once again this reflects the versatility of using style sheets over stan-
dard HTML coding. When you remove a style from a Web document the
item or text will revert back to its original formatting. For example, if you
remove a style from a section of body text, the text will revert back to
the default for that particular tag. If, however, you have an external
style sheet attached to a document, and you have applied a local class
or attribute (internal) style to the text, when you remove the localized
style, the text will revert back to the rules supplied by the external style
sheet.
Removing Internal
Styles
Remove an Internal Style
Open the Web page you want to
remove an internal style.
Select the stylized text, or place
the insertion point in a paragraph
containing stylized text.
Click the Format menu, point to
CSS Styles, and then click None.
TIMESAVER
In the Properties
panel, click CSS, click the
Targeted Rule list arrow, and then
click None.
The CSS style is removed from the
selected text.
3
2
1
2
3
Did You Know?
You can rename a CSS class style.
Click the Window menu, click CSS
Styles, right-click (Win) or control-click
(Mac) the CSS class style you want to
rename in the CSS Styles panel, click
Rename Class, enter a new name, and
then click OK.
From the Library of Wow! eBook
ptg
Chapter 9 Working with Cascading Style Sheets 219
Dreamweaver gives you complete control over internal and external
styles with the CSS Styles panel. The CSS Styles panel lists all the inter-
nal and external styles attached to the active Web page. In addition to
displaying the styles, known as rules, the CSS Styles panel gives you the
ability to attach style sheets, modify existing styles (internal or external),
disable or enable CSS properties (New!), and even remove styles.
Using the CSS Styles
Panel
Use the CSS Styles Panel
Open the Web page that contains
the stylized text you want to view.
Click the Window menu, and then
click CSS Styles or click the CSS
button in the Properties panel.
The following options are available
on the CSS Styles panel:
◆ All or Current. Shows all of the
active document's style rules,
or the currently selected rule.
◆ Rules Window. Displays a list
of the active document's rules.
◆ Properties Window. Displays a
list of the properties for the rule
selected in the Rules window.
◆ Show Category View. Displays
the properties for the selected
rule by categories.
◆ Show List View. Displays the
properties for the selected rule
in List view (color, font, etc.).
◆ Show Only Set Properties.
Displays only set properties.
◆ Attach Style Sheet. Attaches
an external style sheet.
◆ New CSS Rule. Creates a new
CSS rule.
◆ Edit Style Sheet. Opens a
dialog box to edit styles.
◆ Disable/Enable CSS Property.
Disables or enables the
selected CSS property (New!).
◆ Delete CSS Style Sheet.
Deletes the selected rule or
property.
3
2
1
2
Rules window
Properties window
Use to change
property view
Use to manage style sheets,
rules, or properties
External CSS rules
Internal CSS rules
From the Library of Wow! eBook
