Macromedia Dreamweaver MX 2004 Design Professional And Graphics WORKING WITH TEXT

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


Breaks up text

Increases readability

3 Types of Lists:

Unordered

Ordered

Definitions

Text as Lists


Cascading Style SheetsSave you time

Ensure consistency

2 Types of style sheets:

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


Graphics

Use graphics sparingly

Store in Assets folder

3 Web graphic file formats:

GIF

JPEG

PNG


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?


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?


Property Inspector - unordered

unordered

ordered

List Item properties

Collapse Property Inspector


List Properties - unorderedList Type

Square Style


Property Inspector - ordered

unordered

ordered

List Item properties

Collapse Property Inspector


List Properties - orderedList Type

Number List Styles


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


Cascading Style Sheetsselector

declaration

property

value


Create a Style Selector

external

internal

“class” propertiescan override anyselector properties

List changesAccording to “Type”


Declare a Style

Type categoryselected


Apply a Style

Select textthen applya style…

Click to apply bulletsStyle to selected text

…to apply HTML style


Apply an external style sheet

Click toapply anexternal stylesheet to thispage


Edit a CSS

CSS Properties


Understanding Graphic File Formats

The three primary graphic file formats are:

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


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


The Assets Panel


Insert and Align Graphics

File formats

Assets panel

Image alignment


Graphic file formats

GIF “giff” (not “jiff”)

JPEG “jay-peg”

PNG “ping”


GIF

256 solid colors1 transparent color per image

Animate gif files

Lossless


JPEG

16.7 million colors gradients and shadows

No transparency

No animationLossy everytime you save a jpeg, the file becomes

smaller and loses quality


PNG

16.7 million colors gradients and shadows

256 transparent colors per image

Lossless


Assets PanelStores & categorizes items you may re-use in

several HTML pages:Images

Colors

URLs links

Flash

Shockwave

Movies

Scripts

Templates

Library


Assets Panel

CategoryButtons

FavoritesOption Button

Site OptionButton

ImagesButton

Drag Gripper to undock

List of graphics inweb Site

Thumbnail of selected Image

Refresh Sitelist Button


Adding a graphic from the Site or Assets panel

Select and Dragfrom the AssetsPanel to Webpage


Insert Graphics

Five GraphicFiles containedin the TripSmartweb Site

Click to refresh File List


Aligning Images

Left alignOption set

Left-alignedZebra image

Text wrappedaround left-alignedimage


Enhance Images

Borders

Brightness and Contrast

Alternate TextModify the image and image sizeusing an image editing program


Borders

Selected ImageWith 2-pixel border applied

Border text box

H Space text box


Apply Brightness and Contrast

Brightness slider

Brightness and Contrast button


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


Use Alternate text

Alt text box


Alt Text in the Browser

Alternate text Display onTop of image


Alt Text Preferences

Accessibilitycategory

Image checkBox


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


Insert a Background Image

Selectedfilename forbackground image


Delete files from Web site

Select file to delete


Remove non-Web-safecolors from Web site

Non-Websafecolor

Websafecolor


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

Documents

Macromedia Dreamweaver MX 2004 Design Professional And Graphics WORKING WITH TEXT