MacromediaDreamweaver MX 2004 Design Professional

And GraphicsWORKING WITH TEXT

2Working with Text and Graphics Web Collection: Dreamweaver MX 2004 Chapter C

Create Unordered and Ordered lists

Create, apply, and edit Cascading Style Sheets

Insert and align Graphics

Image enhancements and alternate text

Background images and perform site maintenance

Working with Textand Graphics

3Working with Text and Graphics Web Collection: Dreamweaver MX 2004 Chapter C

Breaks up text

Increases readability

3 Types of Lists:

Unordered

Ordered

Definitions

Text as Lists

4Working with Text and Graphics Web Collection: Dreamweaver MX 2004 Chapter C

Cascading Style SheetsSave you time

Ensure consistency

2 Types of style sheets:

Internal style sheetsExternal style sheets(for applying to multiple pages)

5Working with Text and Graphics Web Collection: Dreamweaver MX 2004 Chapter C

Graphics

Use graphics sparingly

Store in Assets folder

3 Web graphic file formats:

GIF

JPEG

PNG

6Working with Text and Graphics Web Collection: Dreamweaver MX 2004 Chapter C

Lists

Unordered - bulleted or small raised dots

Ordered numbered - specific order of items

Definition term + indented paragraph

This slide is an example of an unordered list. What characteristics of this list improve readability?What other formatting might improve its readability?

7Working with Text and Graphics Web Collection: Dreamweaver MX 2004 Chapter C

Create a List

1. Select paragraphs of text to be included in list

2. Click List button in Property Inspector

3. This slide is an example of an ordered list.What characteristics of this list improve readability?What other formatting might improve its readability?

8Working with Text and Graphics Web Collection: Dreamweaver MX 2004 Chapter C

Property Inspector - unordered

unordered

ordered

List Item properties

Collapse Property Inspector

9Working with Text and Graphics Web Collection: Dreamweaver MX 2004 Chapter C

List Properties - unorderedList Type

Square Style

10Working with Text and Graphics Web Collection: Dreamweaver MX 2004 Chapter C

Property Inspector - ordered

unordered

ordered

List Item properties

Collapse Property Inspector

11Working with Text and Graphics Web Collection: Dreamweaver MX 2004 Chapter C

List Properties - orderedList Type

Number List Styles

12Working with Text and Graphics Web Collection: Dreamweaver MX 2004 Chapter C

Cascading Style SheetsA Cascading Style Sheet (CSS) is made up of sets of formatting attributes that are either saved with a descriptive name or that redefines the appearance of an HTML tag

13Working with Text and Graphics Web Collection: Dreamweaver MX 2004 Chapter C

Cascading Style Sheetsselector

declaration

property

value

14Working with Text and Graphics Web Collection: Dreamweaver MX 2004 Chapter C

Create a Style Selector

external

internal

“class” propertiescan override anyselector properties

List changesAccording to “Type”

15Working with Text and Graphics Web Collection: Dreamweaver MX 2004 Chapter C

Declare a Style

Type categoryselected

16Working with Text and Graphics Web Collection: Dreamweaver MX 2004 Chapter C

Apply a Style

Select textthen applya style…

Click to apply bulletsStyle to selected text

…to apply HTML style

17Working with Text and Graphics Web Collection: Dreamweaver MX 2004 Chapter C

Apply an external style sheet

Click toapply anexternal stylesheet to thispage

18Working with Text and Graphics Web Collection: Dreamweaver MX 2004 Chapter C

Edit a CSS

CSS Properties

19Working with Text and Graphics Web Collection: Dreamweaver MX 2004 Chapter C

Understanding Graphic File Formats

The three primary graphic file formats are:

– GIF (Graphic Interchange Format)– JPEG (Joint Photographic Experts Groups)– PNG (Portable Network Graphics)

20Working with Text and Graphics Web Collection: Dreamweaver MX 2004 Chapter C

Understanding the Assets Panel

The Assets panel displays all the assets in a web site

Assets panel contains nine categories

Categories include:– Images– Colors– URLs– Flash– Shockwave– Movies– Scripts– Templates– Library

21Working with Text and Graphics Web Collection: Dreamweaver MX 2004 Chapter C

The Assets Panel

22Working with Text and Graphics Web Collection: Dreamweaver MX 2004 Chapter C

Insert and Align Graphics

File formats

Assets panel

Image alignment

23Working with Text and Graphics Web Collection: Dreamweaver MX 2004 Chapter C

Graphic file formats

GIF “giff” (not “jiff”)

JPEG “jay-peg”

PNG “ping”

24Working with Text and Graphics Web Collection: Dreamweaver MX 2004 Chapter C

GIF

256 solid colors1 transparent color per image

Animate gif files

Lossless

25Working with Text and Graphics Web Collection: Dreamweaver MX 2004 Chapter C

JPEG

16.7 million colors gradients and shadows

No transparency

No animationLossy everytime you save a jpeg, the file becomes

smaller and loses quality

26Working with Text and Graphics Web Collection: Dreamweaver MX 2004 Chapter C

PNG

16.7 million colors gradients and shadows

256 transparent colors per image

Lossless

27Working with Text and Graphics Web Collection: Dreamweaver MX 2004 Chapter C

Assets PanelStores & categorizes items you may re-use in

several HTML pages:Images

Colors

URLs links

Flash

Shockwave

Movies

Scripts

Templates

Library

28Working with Text and Graphics Web Collection: Dreamweaver MX 2004 Chapter C

Assets Panel

CategoryButtons

FavoritesOption Button

Site OptionButton

ImagesButton

Drag Gripper to undock

List of graphics inweb Site

Thumbnail of selected Image

Refresh Sitelist Button

29Working with Text and Graphics Web Collection: Dreamweaver MX 2004 Chapter C

Adding a graphic from the Site or Assets panel

Select and Dragfrom the AssetsPanel to Webpage

30Working with Text and Graphics Web Collection: Dreamweaver MX 2004 Chapter C

Insert Graphics

Five GraphicFiles containedin the TripSmartweb Site

Click to refresh File List

31Working with Text and Graphics Web Collection: Dreamweaver MX 2004 Chapter C

Aligning Images

Left alignOption set

Left-alignedZebra image

Text wrappedaround left-alignedimage

32Working with Text and Graphics Web Collection: Dreamweaver MX 2004 Chapter C

Enhance Images

Borders

Brightness and Contrast

Alternate TextModify the image and image sizeusing an image editing program

33Working with Text and Graphics Web Collection: Dreamweaver MX 2004 Chapter C

Borders

Selected ImageWith 2-pixel border applied

Border text box

H Space text box

34Working with Text and Graphics Web Collection: Dreamweaver MX 2004 Chapter C

Apply Brightness and Contrast

Brightness slider

Brightness and Contrast button

35Working with Text and Graphics Web Collection: Dreamweaver MX 2004 Chapter C

Use Alternate text

Alternate text (alt text) is descriptive text that appears in place of an image when the image is downloading or when the mouse pointer is placed over it

Alt text makes your web page viewer-friendly and handicapped accessible

36Working with Text and Graphics Web Collection: Dreamweaver MX 2004 Chapter C

Use Alternate text

Alt text box

37Working with Text and Graphics Web Collection: Dreamweaver MX 2004 Chapter C

Alt Text in the Browser

Alternate text Display onTop of image

38Working with Text and Graphics Web Collection: Dreamweaver MX 2004 Chapter C

Alt Text Preferences

Accessibilitycategory

Image checkBox

39Working with Text and Graphics Web Collection: Dreamweaver MX 2004 Chapter C

Background Images

File size: smallImage size: small for tiling

Image size: large use style for white space, no tile and move with scroll

Affects Readability

40Working with Text and Graphics Web Collection: Dreamweaver MX 2004 Chapter C

Insert a Background Image

Selectedfilename forbackground image

41Working with Text and Graphics Web Collection: Dreamweaver MX 2004 Chapter C

Delete files from Web site

Select file to delete

42Working with Text and Graphics Web Collection: Dreamweaver MX 2004 Chapter C

Remove non-Web-safecolors from Web site

Non-Websafecolor

Websafecolor

43Working with Text and Graphics Web Collection: Dreamweaver MX 2004 Chapter C

Chapter C SummaryCreate listsCreate, apply and editCascading Style SheetsInsert and Align Graphics Add linksEnhance imagesAdd Border and Background ImageRemove unused images & non-Web colors