adobe dreamweaver cs5 on demand part 39 pdf

Select from the following CSS source code format options: ◆ Indent Properties With.. After you set CSS code formatting preferences, you can apply them to an entire document in a CSS styl

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

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

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

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

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

◆ 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

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

Optimizing Web Pages

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 laycontain-ers) 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

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

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 move an AP element to a different position

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,

Introducing CSS Layouts and AP Elements