© 2010 delmar, cengage learning chapter 3 working with text and images

© 2010 Delmar, Cengage Learning

Chapter 3

Working with Text and Images

© 2010 Delmar Cengage Learning

Chapter 3 Lessons

1. Create unordered and ordered lists.

2. Create, apply, and edit Cascading Style Sheets.

3. Add rules and attach Cascading Style Sheets.

4. Insert and align graphics.

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

Formatting 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 images in separate folder• Three web graphic file formats:

– GIF– JPEG– PNG


Creating and Formatting 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 and Formatting Ordered Lists• Called numbered lists• Preceded by numbers or letters in a

sequence• You can apply numbers, Roman numerals,

lowercase letters, or uppercase letters to an ordered list.


Creating Definition Lists

• Definition lists do not have bullets• Select paragraphs of text to be included in

list• Click Text List Definition List


Fig. 1: Expanded Property Inspector

Property Inspector expanded to full size

Unorderedlist button

Orderedlist button

List item button

Click arrow to collapse Property inspector


Fig. 2: Choosing a Numbered List Style

List type list box

Numbered list styles


Fig. 4: List Properties Dialog Box

Style list arrow


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

Beginning and ending tags for unordered list

First pair of tags for the first list item in the list

In Step 2, click to open the List Properties dialog box


Fig. 7: Spa Page with Ordered List Formatted

heading

Indented text

Bold button

Text indent button

Click to collapse Property Inspector


Cascading Style Sheets

• CSS made up of rules– Define the formatting attributes for

individual styles• CSS also classified by type

– ID– Tag– Compound


Types of CSS

• Saved as a separate file (external style sheet)

• Head content (internal or embedded)• Part of the body of HTML code (inline styles)• External saved as .css


Using the CSS Styles Panel

• To create, edit, and apply• Apply CSS styles to a single page or all

pages in a website• Used for managing your styles


Advantages of Style Sheets

• Save an enormous amount of time• Uniform look• Cleaner code• Separates development of content from

presentation• Compliant with current accessibility

standards


Understanding CSS Style Sheet Code

• 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.


Fig. 8: Cascading Style Sheet File

New Cascading Style Sheet file


Fig. 11: New CSS Rule Dialog Box

Class option for Selector Type

New style name

Rule Definition list arrow


Fig. 15: Applying a CSS Rule

Rule applied

Toggle Displaying of CSS Styles button

Click to apply bold_blue rule to selected text


Fig. 17: Editing a Rule

Font-size list arrow

Properties of the bold_blue rule

Click 14 on this menu


The Style Rendering Toolbar

• Render your page as different media type– Print– T.V.– Handheld


Fig. 23: Using Code and Design Views to Edit a Rule

Replace color “006” with “306”

You can also edit the color in the CSS Styles panel


Add Rules and Attach Style Sheets

• External .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. 25: Adding a Rule to a CSS Style Sheet

New rule name


Fig. 26: Formatting Options for Heading Style


Fig. 29: Attaching a Style Sheet to a Page

su_styles.css style sheet selected

Link optionbutton


Understanding Graphic File 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 website• Has Favorites button• Contains nine categories


The Assets Panel

• Images• Colors• URLs• SWF• Shockwave

• Movies• Scripts• Templates• Library


Inserting Files with Adobe Bridge• Bridge is an easy way to view files outside

the website before bringing them into the website

• 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


Fig. 31: The Assets PanelDrag title bar to

undock tab group

Images button

Category buttons

Drag any panel border or corner to resize

Site option button

Favorites option button

Thumbnail of selected image

List of images in website


Fig. 32: Striped Umbrella about_us Page with Inserted Image

club_house jpg file inserted

Path should begin with the word “assets”

Click Image to insert an image

Style sheet is attached

Inserted file listed in the assets folder


Fig. 36: Left-aligned Club House Image

Left-aligned club house image

Text wrapped around club house image

Left-aligned option selected


Enhancing Images

• Borders• Add horizontal and vertical space• Add alternate text


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


Fig. 39: Using Property Inspector to Add a Border

Selected image with 1-pixel border

V Space text box H Space text box Border text box


Fig. 42: Alternate Text Setting

Alt text box


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 website


Removing Colors from a Website

• You can use the Assets panel to locate non-web-safe colors in a website.

• Non-web-safe colors are colors that may not be displayed uniformly across computer platforms.


Fig. 49: Images Listed in Assets Panel

Images file list after removing umbrella_back.gif and stripes_back.gif


Fig. 50: Colors Listed in Assets Panel

All colors are web-safe

Drag the border to the left to expand panel width

© 2010 delmar, cengage learning chapter 3 working with text and images

Documents

text slide

lists slide

heading style slide

images slide

handheld slide

menu slide

list button list item

css styles panel slide