Adobe Dreamweaver CS3 Revealed

CHAPTER THREE: WORKING WITH TEXT AND IMAGES

Chapter 3 Lessons

1. Create unordered and ordered lists

2. Create, apply, and edit Cascading Style Sheets

3. Add styles and attach Cascading Style Sheets

4. Insert and align images

5. Enhance an image and use alternate text

6. Insert a background image and perform site maintenance

Breaks up text

Increases readability

Three types of lists:

Unordered

Ordered

Definitions

Text as Lists

Cascading Style Sheets

Saves you time

Ensures consistency

Applies formatting attributes to an entire site

Using Images to Enhance Web Pages

Use graphics sparingly

Can complement content of pages

Store in assets folder

Three Web graphic file formats:

GIF

JPEG

PNG

Creating Unordered Lists

Unordered or bulleted

This slide is an example of an unordered list

Select paragraphs of text to be included in list

Click the Unordered List button in Property inspector

Default bullet style is a round dot

Creating Ordered Lists

Called numbered lists

Preceded by numbers or letters in a sequence

Creating Definition Lists

Definition lists do not have bullets

Select paragraphs of text to be included in list

Click Text List Definition List

Unordered list button

Ordered list button

List item button

Click to collapse Property inspector

Fig. 1: Expanded Property Inspector

List type list arrow

Numbered list styles

Fig. 2: Choosing a Numbered List Style

Style list arrow

List type list arrow

Fig. 4: List Properties Dialog Box

Fig. 5: HTML Tags in Code View for Unordered List

Beginning tag for unordered list First pair of tags for

first list item

Text color button

Formatted heading

Fig. 7: Spa Page with Ordered List

Formatted body text

Bold button

Cascading Style Sheets

Sets of rules

Style or rule: formatting attribute that can be applied to page elements

Can be created, edited or applied

New CSS Rule dialog box

CSS Rule definition dialog box

CSS Styles panel

Types of CSS

External CSS

Saved as a separate file (.css)

Stored in the directory structure of a Web site

Internal CSS

Embedded in the code on an individual page

CSS Style Sheet Codes

The selector is the name of the tag to which the style declarations have been assigned

The declaration consists of the property and the value

selector

declaration

property

value

Fig. 9: Cascading Style Sheet File

Working with CSS

Create a CSS and a style

Apply a CSS

Edit a CSS

New style name

Class option for Selector

Define in list arrow

Fig. 11: New CSS Rule Dialog Box

Type category selected

Fig. 12: CSS Rule Definition for .bullets in su_styles.css Dialog Box

Toggle Displaying of CSS Styles button

Selected text

Click to set font of selected text to Default Font

Click to set size of selected text

to None

Click to apply bullets style to selected text

Fig. 15: Applying a CSS Style

Properties of the bullets style

Fig. 17: Editing a CSS Style

Font size list arrow

Properties pane

Add Styles and Attach CSS

.css files created by Web designer

Embedded style sheets created automatically by Dreamweaver

Set preference to Use CSS instead of HTML

Formatting in Property inspector

Code in Head content of file

Named style1, style2, etc.

Fig. 19: Code for Embedded Styles

New style name

Fig. 20: Adding a Style to a CSS Style Sheet

Fig. 21: Formatting Options for Heading Style

Link option button

su_styles.css

Fig. 24: Attaching a Style Sheet to a Page

Code linking external style sheet file to the

index page

Code that applies the body_text style to the

paragraph

Fig. 25: Viewing the Code to Link the CSS Style Sheet File

Understanding Graphic Formats

Three primary graphic file formats:

GIF

JPEG

PNG

GIF

Graphic Interchange Format

Downloads very quickly

Limited in color

Can show transparent areas

JPEG

Joint Photographic Experts Groups

Can display many colors

Photographs are often saved in this format

PNG

Portable Network Graphics

Shares advantages of GIFs and JPEGs

Not universally recognizable by older browsers

The Assets Panel

Located in the Files panel group

Displays all the assets in a Web site

Has Favorites button

Contains nine categories

The Assets Panel

Categories include:

Images

Colors

URLs

Flash

The Assets Panel

Categories include:

Shockwave

Movies

Scripts

Templates

Library

Inserting Files with Adobe Bridge

Bridge is an easy way to view files outside the Web site before bringing them into the Web site

Integrated application

Works with other Adobe programs such as Photoshop and Illustrator

Use Bridge to add meta tags and search text to your files

Aligning Images

Aligning images means to position them in relation to other elements

Default:

bottom edge aligns with the baseline of the first line of text or any other element in the same paragraph

Drag gripper to undock

Images button

Category buttons

List of images in Web site

Site option button

Favorites option button

Thumbnail of selected image

Fig. 26: The Assets Panel

club_house.jpeg inserted

Image path(should begin with assets) Inserted file listed

in assets folder

Fig. 26: The Striped Umbrella About Us Page with Inserted Image

boardwalk.jpeg image is selected

Fig. 29: Using Adobe Bridge

Left-aligned image

Text wrapped around image Left-aligned

option selected

Fig. 31: Left-aligned Club House Image

Enhancing Images

Borders

Add horizontal space

Brightness/Contrast

Modify the image and image size using an image editing program

Alternate Text

Descriptive text that appears in place of an image when the image is downloading or when the mouse pointer is placed over it

Makes your Web page viewer-friendly and handicapped accessible

Priority 1 Checkpoint

Selected image with 1-pixel

border

V Space text box

H Space text box

Border text box

Fig. 34: Using Property Inspector to Add a Border

Image with horizontal and vertical space

Image without horizontal and vertical space

Fig. 35: Comparing Images with Horizontal and Vertical Space

Drag slider to adjust brightness

Fig. 36: Brightness and Contrast Settings

Alternate text box

Fig. 37: Alternate Text Setting

Alternate textdisplayed ontop of image

Fig. 38: Alternate Text Displayed in Browser

Accessibility category

Check boxes forForm objects,

Frames, Media,and Images

Fig. 39: Preferences Dialog Box with Accessibility Category Selected

Background Images

Keep file size small

Use a tiled image

Small graphic that repeats across or down a page

Or a larger non-tiled image

Use either a background color or a background image, but not both

Managing Images

Adding and removing background images

Delete files from Web site

Remove non-Websafe colors from Web site

Selected filename

Fig. 43: Removing a Background Image

Drag the border to the left

to expand panel width

Both colors are websafe

Fig. 45: Colors Listed in Assets Panel

Chapter 3 Tasks

Create unordered and ordered lists

Create/apply/edit Cascading Style Sheets

Add styles and attach Cascading Style Sheets

Insert and align graphics

Enhance an image and use alternate text

Insert a background image and perform site maintenance