adobe dreamweaver cs5 on demand part 34 pot
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 (704.97 KB, 7 trang )
ptg
9
9
What You’ll Do
Introduce Cascading Style Sheets
Create a Web Page with a CSS Layout
Create CSS Styles
Apply Internal CSS Styles
Apply and Modify External CSS Styles
Remove Internal Styles
Use the CSS Styles Panel
Edit CSS in the Properties Panel
Set CSS Properties
Work with CSS Rules
Disable or Enable CSS Rules
Inspect CSS
Use the Relevant CSS Tab
Work with ID Selectors
Create and Apply an ID Selector
Check for CSS Browser Compatibility
Format CSS Code
Set CSS Styles Preferences
Use Design-Time Style Sheets
Optimize Web Pages
207
Working with Cascading
Style Sheets
Introduction
Cascading Style Sheets are one of the greatest things to
come along since the creation of the World Wide Web. A hard
definition of CSS might go something like this: Cascading
Style Sheets (CSS) are a collection of formatting rules that
control the appearance of the content in a Web page.
Using CSS styles to format a page separates content from
presentation. This gives you greater flexibility and control
over the exact appearance of your Web pages. With CSS you
can control text properties including specific fonts and font
sizes; bold, italics, underlining, and text shadows; text color
and background color, link color and underlining. With CSS
controlling fonts, it ensures a more consistent treatment of
your page layout and appearance in multiple browsers.
In this chapter you'll get an introduction to Cascading
Style Sheets: what they are, and how to use them efficiently
to create great Web content. You'll also learn how CSS func-
tions, and how it's used to control multiple Web pages.
With Dreamweaver and Cascading Style Sheets we're get-
ting closer and closer to the goal of What You See Is What You
Get, and I can't wait.
From the Library of Wow! eBook
ptg
208 Chapter 9
Cascading Style Sheets (CSS) are a revolution
in the world of web design. Some of the ben-
efits include:
◆ The layout of many documents from one
single style sheet
◆ Precise control of layouts
◆ Application of different layout to different
media-types (screen, print, etc.)
◆ Many advanced and sophisticated
techniques
Many of the CSS properties are similar to
those of HTML. Therefore, if you are comfort-
able designing Web pages using HTML code,
you will most likely recognize many of the
codes.
CSS Versus HTML
If you wanted to change the color of the back-
ground of a Web page, the HTML code would
look like this:
<body bgcolor="#0000FF">
To wr ite the sam e th ing using CSS , wo uld
look like this:
body {background-color: #0000FF;}
Incidentally, the code, in both cases, is
instructing the browser to paint the back-
ground in pure blue.
CSS Breakdown
Cascading Style Sheets are broken down into
three sections: a selector, a property, and a
value. In our example, body is the selector,
background-color is the property, and
#0000FF is the value.
Create CSS Styles
There are three ways you can apply CSS to an
HTML document: Attributes, Tags, and
External Style Sheets.
Attribute Styles
One way to apply CSS to HTML is by using
the HTML attribute style. CSS used in this
way is coded directly into the HTML docu-
ment. For example, you can create your own
named tags, and use them throughout the
active document. Building on the above
example, it can be applied like this:
<html>
<head>
<title>Attribute Style Example<title>
</head>
<body style="background-color: #0000FF;">
<p>This page has a blue background</p>
</body>
</html>
NOTE
Attribute styles are a one-shot deal.
That is, they are applied to single areas of an
HTML document such as a background color, or
a specific portion of text.
Tag Styles
A second way to include CSS into an HTML
document is to use the Tag Style method. In
this method you control the formatting of
standard HTML tags. For example, you could
redefine the <H1> heading tag to always use
a specific font, size and justification or, in this
example, use the <body> tag to paint the
background blue.
<html>
<head>
<title>Tag Style Example<title>
<style type="text/css">
body {background-color: #0000FF;}
</style>
</head>
Introducing Cascading Style Sheets
From the Library of Wow! eBook
ptg
Chapter 9 Working with Cascading Style Sheets 209
<body>
<p>This page has a blue background</p>
</body>
</html>
NOTE
A Tag style changes all instances of an
HTML tag throughout the active document, but
will not impact other Web documents.
External Styles
This is the recommended way to create
styles. Using this method you create a text
document (called a style sheet). This docu-
ment contains all of the formatting informa-
tion necessary to drive your Web page. This
document is then attached to one or more
Web pages, and when the page loads, it gets
its formatting information from the external
style sheet. The line of code must be inserted
in the header section of the HTML code
between the <head> and </head> tags. Like
this:
<html>
<head>
<title>My document</title>
<link rel="stylesheet" type="text/css"
href="style/style.css" />
</head>
<body>
<p>This page has a blue background</p>
</body>
</html>
In the example, an external style sheet (basi-
cally, a text document) called style.css is used
to format the active Web document.
Back to Basics
With all this talk of selectors, attributes, and
values, you might assume that we're about to
leave the Design mode of Dreamweaver and
go back to the basics of straight HTML cod-
ing. Well, you can do that, if you choose; how-
ever, as you're about to find out, creating
Cascading Styles Sheets is not difficult at all.
As a matter of fact, Dreamweaver does most
of the work for you. Now, isn't that nice of
Adobe to provide us with so much help.
Style Types
There are four types of styles, and as you
might guess, each one performs a specific
function when using Cascading Style Sheets.
The four types of Styles are as follows:
◆
Class.
Creates a custom style that can be
applied as a class attribute to a range or
block of text.
NOTE
Class names must begin with a period
and can contain any combination of letters and
numbers. If you don't enter a beginning period,
Dreamweaver will enter it for you.
◆
ID.
Creates a style and attaches it to a
current HTML tag that contains a specific
ID attribute.
NOTE
ID names must begin with a pound (#)
sign and can contain any combination of letters
and numbers. If you don't enter a beginning
period, Dreamweaver will enter it for you.
◆
Tag.
Redefines a current style and
attaches it to a current HTML tag. For
example, changing the <body> tag so
that each time it's applied the text is red.
◆
Compound.
Defines specific formatting
for a particular combination of tags or for
all tags that contain a specific ID
attribute. The selectors available from the
pop-up menu are a:active, a:hover, a:link,
and a:visited.
From the Library of Wow! eBook
ptg
210 Chapter 9
If you’re not sure where to start, you can create a Web page that
already contains a CSS Layout. Dreamweaver includes over 30 different
CSS layouts. The CSS layouts are divided into 4 categories based on
the page’s column width: Fixed, Elastic, Liquid, or Hybrid. Each of the
built-in CSS layouts includes extensive comments that explain the lay-
out, so beginning and intermediate designers can learn quickly. After
you select a CSS layout, you need to select the location (add to HTML
head, create new file, or link to existing file) for the layout’s CSS style
sheet. A CSS layout can also be a starting point to create your own cus-
tom template, which you can add to the list of layouts in the New
Document dialog box.
Creating a Web Page
with a CSS Layout
Create a Web Page with a CSS
Layout
Click the File menu, and then click
New.
The New Document dialog box
opens.
Click the Blank Page category.
Select the Page Type you want.
Select from the following CSS
Layouts:
◆ Fixed. Column width is fixed (in
pixels) and remains the same in
a browser.
◆ Elastic. Column width is set
relative to the size of the text in
a browser (in ems).
◆ Liquid. Column width is set
based on the percentage of the
browser’s width.
◆ Hybrid. Columns are set to a
combination of Fixed, Elastic,
and Liquid.
Click the DocType list arrow, and
select the option you want.
Click the Layout CSS list arrow,
and select the option you want:
◆ Add To Head. Adds CSS for the
layout to the head of the new
page.
6
5
4
3
2
1
2
5
4
3
Using Custom Layouts to Create New Documents
If you create a custom CSS layout, you can add it to the list of layouts
in the New Document dialog box. When you create an HTML page
with a CSS layout, the file needs to be saved with the .htm extension
and the CSS for the layout needs to reside in the head of the HTML
page. Move the saved HTML page to the following folder: Adobe
Dreamweaver CS5\Configuration\Built-in\Layouts. On Windows the
Adobe Dreamweaver CS5 folder is located in the Program Files folder
and on the Macintosh, the folder is located in the Applications folder.
For Your Information
From the Library of Wow! eBook
ptg
Chapter 9 Working with Cascading Style Sheets 211
◆ Create New File. Add CSS for
the layout to a new external
CSS style sheet that attaches to
the new page.
◆ Link To Existing File. Attaches
an existing CSS file to the new
page.
If you selected the Link To Existing
File option in the Layout CSS
menu, click the Attach Style Sheet
icon, select the CSS file you want
in the Attach External Style Sheet
dialog box, and then click OK.
Click Create.
If you selected the Create New
File option in the Layout CSS
menu, enter a name for the new
external file in the Save Style
Sheet File As dialog box.
Create a CSS File
Click the File menu, and then click
New.
The New Document dialog box
opens.
Select from the following methods:
◆ Blank. Click the Blank Page
category, and then click CSS.
◆ Sample. Click the Page from
Sample category, click CSS
Style Sheet, and then select the
sample you want.
Click Create.
3
2
1
9
8
7
8
6
7
3
2
From the Library of Wow! eBook
ptg
212 Chapter 9
As mentioned in the last section, CSS can be applied to an HTML docu-
ment in one of three ways: Attributes, Tags, or Externally. Although we
will cover all three methods in this section, it's important to understand
that the external method gives you the most control over the styles,
once they've been created. In the other two methods, the CSS styles
created only apply to that one specific page, and changes to the styles
must be performed by reopening the page. The external method is like
creating a text document of how you want a page or pages to display.
Any changes to the formatting are performed to the text document.
When the Web page opens, any changes made to the external docu-
ment are immediately reflected in the active page… now that's what I
call control.
Creating CSS Styles
Create an Attribute or Tag Style
Open the Web page you want to
create a CSS style.
Click the Format menu, point to
CSS Styles, and then click New.
Click the Selector Type list arrow
and then select a CSS style type:
◆ Attribute Style. Select Class,
click the Name arrow, and then
select a style name, or type one
in. Attribute style tags must
begin with a period.
◆ Tag Style. Select Tag, click the
Name arrow, and then select
an HTML tag (in this example,
body).
Click the Define In list arrow, and
then click (This Document Only).
Click OK.
Select a category, and then set the
properties you want for the CSS
style.
Click OK.
7
6
5
4
3
2
1
4
5
7
6
3
From the Library of Wow! eBook
ptg
Chapter 9 Working with Cascading Style Sheets 213
Create an External Style
Open the Web page you want to
create an external CSS style.
Click the Format menu, point to
CSS Styles, and then click New.
Click the Class or Tag option (in
this example, tag).
Click the Name arrow, and then
select an HTML tag (in this
example, body.)
Click the Define In list arrow, and
then click New Style Sheet File.
Click OK.
Enter the file name for the CSS
style in the File Name input box.
Leave the other options at their
default values, and then click
Save.
NOTE
Dreamweaver creates a
folder in the active site called,
CSS, and this is where all style
sheets should be saved.
Select a category, and then set the
properties you want for the CSS
style.
Click OK.
10
9
8
7
6
5
4
3
2
1
6
8
7
10
9
See Also
See “Setting CSS Properties” on page
222 for information on setting CSS
properties for a rule.
4
5
3
From the Library of Wow! eBook
