adobe dreamweaver cs5 on demand part 13 potx

ptg
Chapter 4 Managing Web Site Files 81
When you create a Web page, one of the first
things to do is to apply some general settings
to your page. The Page Properties dialog box
lets you specify the default font family and
font size, background color, margins, link
styles, and many other aspects of page
design. You can assign new page properties
for each new page you create, and modify
those for existing pages. Dreamweaver pro-
vides the ability to embed these changes to
the page in one of two ways: HTML or CSS.
Dreamweaver formats text using CSS
(Cascading Style Sheets), by default, and it
would prefer to set page preferences in this
manner. If you use the default CSS setting,
Dreamweaver uses CSS tags for all properties
defined in the Appearance (CSS), Links (CSS),
and Headings (CSS) categories of the Page
Properties dialog box. The CSS tags defining
these attributes are embedded in the head
section of the page. To view the tags, simply
click the Code button, located in the upper left
corner of the document window, and
Dreamweaver changes the view from Design
to Code. Scroll up to the Head section of the
document and view the property codes.
If, however, you want to use HTML tags,
you can set page preferences in the
Appearance (HTML) category of the Page

Properties dialog box. The options are similar
to those in the Appearance (CSS)
category.
The page properties you choose apply
only to the active document. If a page uses an
external CSS style sheet, Dreamweaver does-
n’t overwrite the tags set in the style sheet, as
this affects all other pages using that style
sheet.
Preparing to Set Page Properties
Appearance (CSS) options
From the Library of Wow! eBook
ptg
82 Chapter 4
Setting Appearance
Page Properties
Set Appearance Page Properties
Open the Web page you want to
change.
Click the Modify menu, and then
click Page Properties.
Click the Appearance (CSS) or
Appearance (HTML) category.
Select from the following options:
◆ Page Font and Size. Specify the
font type and size you want.
◆ Text and Background Color.
Specify the text and
background color you want.
◆ Background Image. Specify the

font type, size, and text color
you want.
◆ Repeat. Specify how you want
the background image to
appear on the page. No-repeat
appears once; Repeat appears
tiled horizontally and vertically;
Repeat-x appears horizontally;
and Repeat-y appears
vertically.
◆ Margins. Specify the page
margins you want. Most
designers place zeros in all four
boxes (top, bottom, left, right),
so when a visitor opens the
page, all elements align to the
upper left corner of the page.
Click OK.
5
4
3
2
1
The Appearance category in the Page Properties dialog box allows you
to set the default options for CSS and HTML you want for page font
type and size, text and background color. You can also use a picture as
the background for a page and specify how it appears. If you’d like to
add some interest to your pages, you can add a background color. If
the background image contains any transparent areas, the background
color appears. When selecting background colors, some creative judg-

ment is required. For example, if you choose a dark color for your back-
ground, make sure you use a light color for your text (the most
commonly used is white) to generate the appropriate contrast required
for easy reading.
5
3
4
Appearance (HTML) category
From the Library of Wow! eBook
ptg
Chapter 4 Managing Web Site Files 83
Setting Link Page
Properties
Set Link Page Properties
Open the Web page you want to
change.
Click the Modify menu, and then
click Page Properties.
Click the Links (CSS) category.
Select any of the following font
options:
◆ Link Font. Specifies the default
font family to use for links.
(Default uses entire page font
set in the Appearance
category).
◆ Bold or Italic. Specifies
whether to use bold or italic
for links.
◆ Font Size. Specifies the default

size to use for links.
Select a color for the following
options:
◆ Link Color. Displays color for
linked text.
◆ Visited Links. Displays color for
links you visit.
◆ Rollover Links. Displays color
for links you point at.
◆ Active Links. Displays color for
links you click.
Click the Underline Style list
arrow, and then select the
underline option you want.
Click OK.
7
6
5
4
3
2
1
The Links category in the Page Properties dialog box allows you to
change the default nature of the links on a page. For example, a word
defined as a link has a blue underline, by default. You could change the
color to red. You can specify link colors for text, visited, rollover, and
active links. In addition, you can even choose not to use an underline,
or only have it appear when the visitor rolls over the text.
6
3

4
7
5
From the Library of Wow! eBook
ptg
84 Chapter 4
The Headings category in the Page Properties dialog box allows you to
specify the default settings for up to six heading styles. You can specify
the font type, size, color, and formatting. For example, you can specify
that every H2 heading style that is applied to text is 14 points and red.
In addition, you have the option of choosing whether the heading styles
are Bold or Italic style.
Setting Heading
Page Properties
Set Heading Page Properties
Open the Web page you want to
change.
Click the Modify menu, and then
click Page Properties.
Click the Headings (CSS) category.
Specify the Heading font you want.
Click the Bold and/or Italic buttons
if you want.
Specify the specific font size and
color of the H1 through H6 heading
styles you want.
Click OK.
7
6
5

4
3
2
1
7
4
5
6
3
From the Library of Wow! eBook
ptg
Chapter 4 Managing Web Site Files 85
The Title/Encoding category in the Page Properties allows you to
change the Web page title and specify the document encoding type
you want. A Web page title is the text that visitors see on the title bar of
their Web browser when they display the Web page. The document
type and encoding options in the Page Properties dialog box allow you
to specify the language you want to use for a Web page. File encoding
makes sure your Web browser and Dreamweaver use the right charac-
ter set for the selected language. The standard settings for a simple
HTML page are: Document Type (DTD) XHTML 1.0 Transitional,
Encoding Unicode 4.0 UTF-8, and Unicode Normalization None.
Changing Title and
Encoding Page
Properties
Change Title and Encoding Page
Properties
Open the Web page you want to
change.
Click the Modify menu, and then

click Page Properties.
Click the Title/Encoding category.
Enter the title you want for the
Web page title bar.
TIMESAVER
Enter a title in the
Title box on the Document toolbar.
Select from the following options:
◆ Document Type (DTD). Select
XHTML 1.0 Transitional or
XHTML 1.0 Strict to make new
Web pages XHTML-compliant.
◆ Encoding. Select the language
you want. The default for HTML
encoding is Unicode (UTF-8),
which safely represents all
characters.
◆ Unicode Normalization Form.
If you select Unicode (UTF-8)
for encoding, select the form
option you want: C, D, KC, or
KD. Form C is the most common
one used for the Web in the
Character Model. The others
are provided by Adobe.
Click OK.
6
5
4
3

2
1
6
3
4
5
From the Library of Wow! eBook
ptg
86 Chapter 4
A tracing image is a JPEG, GIF, or PNG formatted image that lays in the
background to help you layout the page. For example, you could comp
your site in Fireworks and then bring it into Dreamweaver to use as a
guide to align tables and layers. Tracing images are not saved with the
final document and don’t appear in a Web browser. It doesn't matter
how big or complex the tracing images are because they are only used
by Dreamweaver during the design phase. Once the file is saved and
moved to the server, the tracing image goes away, and the file retains
its original small size.
Changing Page
Properties for a
Tracing Image
Change Page Properties for a
Tracing Image
Open the Web page you want to
change.
Click the Modify menu, and then
click Page Properties.
Click the Tracing Image category.
Click Browse, locate the image
you want to use, select it, and then

click OK.
TIMESAVER
Click the View
menu, point to Tracing Image, and
then click Load to insert a tracing
image.
Drag the Transparency slider to
the percentage level you want for
the image.
Click OK.
6
5
4
3
2
1
6
3
5
See Also
See “Using a Tracing Image” on page
204 for information on using a tracing
image to create a Web page.
4
From the Library of Wow! eBook