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.. If, however, you wa
Trang 1When 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
Trang 2Setting 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
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
Trang 3Setting 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
Trang 4The 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
Trang 5The 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
5
Trang 6A 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