adobe dreamweaver cs5 on demand part 39 pdf

ptg
236 Chapter 9
Formatting CSS Code
Set CSS Code Formatting
Preferences
Click the Dreamweaver (Mac) or
Edit (Win) menu, and then click
Preferences.
Click the Code Format category.
Click the CSS button.
Select from the following CSS
source code format options:
◆ Indent Properties With. Sets
the indent number and type
(Tabs or Spaces) for properties
within a rule.
◆ Each Property On Separate
Line. Places each property
within a rule on a separate line.
◆ Opening Brace On Separate
Line. Places the opening brace
for a rule on a separate line
from the selector.
◆ Only If More Than One
Property. Places the single-
property rules on the same line
as the selector.
◆ All Selectors For A Rule On
Same Line. Places all selectors
for the rule on the same line.
◆ Blank Line Between Rules.

Inserts a blank line between
each rule.
Click OK.
Click OK.
6
5
4
3
2
1
You can use the Code Format section of the Preferences dialog box to
access CSS source formatting options. You can set options to indent
properties, and insert separator lines to make it easier to work with
CSS code. As you make formatting option changes, a preview of the
CSS code appears in the dialog box. If you like the preview results, you
can accept the options. Otherwise, you can continue to make option
changes. After you set CSS code formatting preferences, you can apply
them to an entire document (in a CSS style sheet) or the head of the
document only (embedded CSS code).
3
2
6
4
5
From the Library of Wow! eBook
ptg
Chapter 9 Working with Cascading Style Sheets 237
Format CSS Code in a CSS Style
Sheet Manually
Display the CSS style sheet you

want to format. Click the CSS style
sheet name on the Related Files
toolbar.
Click the Commands menu, and
then click Apply Source
Formatting.
The formatting options set in CSS
code formatting preferences are
applied to the entire document.
Format Embedded CSS Code
Manually
Display the HTML page that
contains CSS embedded in the
head of the document. Click
Source Code on the Related Files
toolbar.
Select any part of the CSS code.
Click the Commands menu, and
then click Apply Source
Formatting To Selection.
The formatting options set in CSS
code formatting preferences are
applied to all CSS rules in the head
of the document only.
3
2
1
2
1
1

2
1
3
2
From the Library of Wow! eBook
ptg
238 Chapter 9
Setting CSS Styles
Preferences
Set CSS Styles Preferences
Click the Dreamweaver (Mac) or
Edit (Win) menu, and then click
Preferences.
Click the CSS Styles category.
Select from the following CSS
style options:
◆ When Creating CSS Rules Use
Shorthand For. Select the
check boxes for the properties
you want Dreamweaver to
write in shorthand.
◆ When Editing CSS Rules Use
Shorthand. Select the font and
size you want to use to display
text within pre, code, and tt
tags.
◆ When Double-clicking In CSS
Panel. Select the option with
the editing preference you
want to use: CSS dialog,

Properties panel, or Code view.
Click OK.
4
3
2
1
You can use the CSS Styles section of the Preferences dialog box to
control the way Dreamweaver writes the code that defines CSS styles.
You can specify the properties—including font, background, margin
and padding, border and border width, or list-style—you want
Dreamweaver to write in shorthand, determine whether Dreamweaver
edits existing styles in shorthand, and select the editing tool you want
to use to modify CSS rules. Shorthand CSS is an abbreviated syntax
that allows you to create styles.
4
2
3
From the Library of Wow! eBook
ptg
Chapter 9 Working with Cascading Style Sheets 239
Using Design-Time
Style Sheets
Use Design-Time Style Sheets
Open the Web page you want to
create a CSS style.
Click the Format menu, point to
CSS Styles, and then click Design-
Time.
Select from the following CSS
style options:

◆ Show. Click the Plus (+) button
above Show Only At Design-
Time, select the CSS style sheet
you want to show, and then
click OK.
◆ Hide. Click the Plus (+) button
above Hide At Design-Time,
select the CSS style sheet you
want to hide, and then click OK.
◆ Remove. Click the style sheet
you want to remove, and then
click the appropriate Minus (-)
button.
Click OK.
The CSS Styles panel displays an
indicator, either “hidden” or
“design” that reflects the current
status of the style sheet.
4
3
2
1
In Dreamweaver, you can use design-time style sheets to show or hide
designs applied by a CSS style sheet as you work on a Web page. This
is useful when you want to include or exclude the effect of a style
sheet as you design a page. Design-Time style sheets only apply while
you are working on a page. When the page displays in a browser, only
the styles that are actually attached to or embedded in the page
appear.
4

3
Show in design-time
Hide in design-time
From the Library of Wow! eBook
ptg
240 Chapter 9
◆
Remove inessential elements of your
pages.
This is especially true of sound
and video files, but also extends to
unnecessary graphics and even
extraneous text.
◆
Avoid frames.
Not only do framed pages
load more slowly, some search engines
still do not index framed pages correctly.
◆
Avoid nested tables.
Inexperienced Web
designers will often utilize tables inside of
tables in order to get the page layout just
right. This can be avoided by using a
single, well-thought-out table for page
layout.
◆
Compress your images.
Uncompressed
JPEGs and GIFs often contain extra data

not necessary for their correct display.
◆
Remove extra "whitespace" in your code.
Every space, tab, and "newline" character
in your HTML code requires extra data in
the page. Thus, limit their use and pay
attention to what extra space is inserted
by your design software.
◆
Break up long copy.
While long copy can
often be an effective means of marketing
your products or services, long-copy
pages taken to the extreme may take so
long to load that they will lose visitors
during the wait. Consider breaking up
very long copy to multiple pages.
◆
Clean up your code with tools.
A number
of free and commercial tools are
available online that will clean up your
website code, reducing page weight
without affecting how your page is
displayed.
Page weight is a measurement of the file size
of a Web page that includes the combined
size of all the elements of the page. The ele-
ments images, audio or video files, associated
style sheets, multiple HTML files loaded

within frames, and so on.
Page weight can be used to determine the
download time for a given page on a variety
of Internet connection speeds. At high speeds
(DSL and cable connections), most reasonably
sized pages will download relatively quickly.
However, at slower speeds (including faster
dial-up speeds), even medium-sized pages
can take ten seconds or more to download.
You can reduce page weight by doing
some things and not doing others. Here is a
brief list of different ways to reduce page
weight:
◆
Use CSS (Cascading Style Sheets).
CSS
can be a very effective way to reduce the
load time of your overall site.
CSS reduces file size because it
decreases the amount of markup in the
HTML. CSS eliminates the need for page
elements such as one-pixel spacer
images, multiple font tags, nested tables,
and similar items.
Using an external style sheet also allows
for the caching of the styles so that the
browser doesn't have to reload it with
each new page, thus reducing the time
for subsequent pages (after the first) to
load. Change a single property in the

external file and it changes the
appearance of that element for the entire
website.
Optimizing Web Pages
From the Library of Wow! eBook
ptg
Creating Page Layouts
Using CSS-P
Introduction
Cascading Style Sheets-Positioning (CSS-P) is more than the
perfect positioning of words and objects on a Web page, in
addition, layers technology lets you create movable contain-
ers (called
AP elements
, formerly known as layers) that allow
you to precisely position Web text and objects, even going so
far as to stack one AP element on top of another, or to use
JavaScript to show or hide AP elements. For example, you
could have several AP elements containing thumbnails of
images and when you hover over a particular AP element, a
JavaScript would show a previously hidden AP element with
information about the image. The incorporation of AP ele-
ments into a Web page gives the designer, for the first time,
the use of all three dimensions: width, height, and even
depth (stackable AP elements).
There is, of course, in all things a good news/bad news
scenario. The good news is that AP elements and CSS-P are
awesome tools for the creative designer to use. The bad
news is that they do not work in earlier browsers (pre 4.0).
Fortunately, Dreamweaver turns that bad news on its head by

giving you the ability to convert AP elements into a more
compatible tables document and vise versa.
This chapter covers the use of AP elements and CSS-P for
the creation and implementation and total control of the
design of Web pages. We'll focus in on how to create CSS-P
design, and why you might want to use it.
10
10
What You’ll Do
Introduce CSS Layouts and AP Elements
Create AP Elements
Nest AP Elements
Set AP Element Preferences
Use CSS Positioning
Apply a CSS-P Style
Modify CSS-P Properties
Work with AP Elements
Create a Rollover Using AP Elements
Convert AP Elements to Tables
241
From the Library of Wow! eBook
ptg
242 Chapter 10
In the beginning, support for Cascading Style
Sheets (CSS) was a bit sketchy; however, as
time when on, and CSS caught on, more and
more browsers came on board. In response,
Dreamweaver began giving Cascading Style
Sheets complete support.
Cascading Style Sheets is all about the

control of the Web page, and are a designer's
dream come true. Not only do you have the
ability to specify and apply specific font char-
acteristics; in addition you can precisely place
elements on the page. Basically CSS are a set
of rules encased within a style sheet. The
rules are customized styles, or modified
HTML tags that define the look, position, and
feel of the Web page. In the previous chapter,
you learned about the syntax of CSS. In this
chapter you’ll learn how to use CSS to control
and format Web pages, using AP elements,
formally known as layers. An AP element is a
movable container that allows you to pre-
cisely position Web text and objects
Web designers have always wanted the
type of control over text and graphic elements
that page designers have had, and with the
advent of CSS, and the incorporation of AP
elements, that day has finally arrived.
CSS and AP elements give you the ability
to precisely position elements on a Web page,
and let you stack AP elements over each
other. This addition of the third dimension is
not only a new concept in Web design, but it
is exactly why CSS absolute position is called
AP elements. Not only can Web designers
position elements using x and y (width and
height) positioning, they now have z indexing
(depth)… and that's what I call control.

The Code
When you use Dreamweaver to create an AP
element, the HTML code looks something like
the following:
<div id="Layer4" style="position:absolute; visibil-
ity:inherit; width:200px; height:175 px; z-index:6">
</div>
Although it's not the only way to create
the code, AP elements are usually placed
between <div> …</div> or <span>… </span>
tags.
Creating AP elements in Dreamweaver's
design window (the most common method) is
as simple as a drag and release. The visible
result is the creation of a square or rectangle,
which becomes a floating element on the Web
page. This element can be populated with
text, images or any combination thereof.
Think of an AP element as a floating, inde-
pendent table cell, and you have the picture.
To mov e a n AP el em ent t o a diff e r e n t posit i o n
on the Web page, the designer has only to
click and drag.
In addition to creating and moving the AP
elements about the Web page, you have the
ability to stack AP elements in the third
dimension. By default every AP element is
assigned a z-index, or stacking order. The first
AP element is assigned the stacking order of
1, and each new AP element follows the pro-

gression 2, 3, 4, etc. Therefore, when two AP
elements interact, they can actually slide over
each other; creating Web designs that would
have been impossible in straight HTML.
If you've ever used AP element-intensive
applications, such as Adobe Photoshop,
Illustrator, or InDesign, you're ready to get
started designing CSS AP elements in
Dreamweaver.
Introducing CSS Layouts and AP Elements
From the Library of Wow! eBook