Macromedia Dreamweaver 8 Revealed AND GRAPHICS WORKING WITH TEXT

Macromedia Dreamweaver 8 Revealed

AND GRAPHICSWORKING WITH TEXT

2Macromedia Dreamweaver 8 Revealed Chapter 3

Create unordered and ordered lists

Create, apply, and edit Cascading Style Sheets

Add styles and attach Cascading Style Sheets

Chapter Lessons


Chapter LessonsInsert and align graphics

Enhance an image and use alternate text

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 SheetsSave you time

Ensure consistency

Apply formatting attributes to an entire site


GraphicsUse graphics sparingly

Can complement content of pages

Store in assets folder

Three Web graphic file formats:– GIF– JPEG– PNG


Creating Unordered and Ordered Lists

Unordered or bulleted– This slide is an example of an

unordered list

Ordered or numberedSelect paragraphs of text to be included in listClick the (Un)Ordered List button in Property inspector


Creating Definition Lists

Definition lists do not have bullets

Select paragraphs of text to be included in list

Click Text List Definition List


FIGURE 1 Expanded Property inspector

Unordered list button

Ordered list button Click to open

List properties dialog box

Click to collapse Property inspector


FIGURE 2 Choosing a numbered list style in the List Properties dialog box

List type list arrow

Numbered list styles


FIGURE 4 List Properties dialog box

Style list arrow

List type list arrow


HTML Tags

FIGURE 5 HTML tags in Code view for unordered list

<ul>

<li>


Cascading Style SheetsSets 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 CSSExternal 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


FIGURE 9 su_style.css style sheet file

selector

declaration

property value


Working with CSSCreate a CSS and a style

Apply a CSS

Edit a CSS


FIGURE 11 New CSS Rule dialog box

New style name

Class option button

External

Internal


FIGURE 12 CSS Rule Definition for .bullets in su_styles.css dialog box

Type category selected


FIGURE 15 Applying a CSS style to selected text

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


FIGURE 17 Editing a CSS style

Properties of the bullets

style


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.


FIGURE 19 Code for embedded styles shown in Code view


FIGURE 20 Adding a style to a CSS style sheet

New style name


FIGURE 23 Attaching a style sheet to a page

Link option button

su_styles.css


FIGURE 24 Viewing the code to link the CSS style sheet file

Code linking external style sheet file to the

index page

Code that applies the body_text style to the

paragraph


Insert and Align GraphicsFile formats

Assets panel

Image alignment


Understanding Graphic Formats

The three primary graphic file formats are:– GIF– JPEG– PNG


GIFGraphic Interchange Format

Downloads very quickly

Limited in color

Can show transparent areas


JPEGJoint Photographic Experts Groups

Can display many colors

Photographs are often saved in this format


PNGPortable Network Graphics

Shares advantages of GIFs and JPEGs

Not universally recognizable by older browsers


The Assets PanelLocated 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


FIGURE 25 The Assets panel

Drag gripper to undock

Images button

Category buttons

Drag panel border to resize

List of graphics in

Web site

Site option button

Favorites option button

Thumbnail of selected image

Click to refresh file list


FIGURE 26 The Striped Umbrella about us page with inserted image

Inserted image

Image path Inserted file listed in assets folder


FIGURE 29 Left-aligned club house image

Left-aligned image

Text wrapped-around image

Left-aligned option set


Enhancing ImagesBordersAdd horizontal spaceBrightness/ContrastAlternate textModify the image and image size using an image editing program


FIGURE 32 Using the Property inspector to add a border

Selected image with

1-pixel border

V Space text box

H Space text box Border text

box


FIGURE 33 Comparing images with and without horizontal and vertical space

Image with horizontal and vertical space

Image without horizontal and vertical space


FIGURE 34 Brightness and contrast settings for the boardwalk image

Drag slider to adjust brightness


Alternate TextDescriptive 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


Alt text box

FIGURE 35 Alternate text setting in the Property inspector


FIGURE 36 Alternate text displayed in browser

Alternate textdisplayed ontop of image


FIGURE 37 Preferences dialog box with Accessibility category selected

Accessibility category

Check boxes forForm objects,

Frames, Media,and Images


Background ImagesKeep 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


Working with Background Images

Adding and removing background images

Delete files from Web site

Remove non-Websafe colors from Web site


FIGURE 41 Removing a background imageSelected filename


FIGURE 42 Images listed in Assets panel

Images file listafter removing

umbrella_back.gifand stripes_back.gif


FIGURE 43 Colors listed in Assets panel

Drag the border to the left

to expand panel width

Non-Websafe color


Chapter 3 TasksCreate unordered and ordered lists

Create/apply/edit Cascading Style Sheets

Add styles and attach Cascading Style Sheets


Chapter 3 TasksInsert and align graphics

Enhance an image and use alternate text

Insert a background image and perform site maintenance

Documents

Macromedia Dreamweaver 8 Revealed AND GRAPHICS WORKING WITH TEXT