Tutorial 3: Working with Images. Objectives Session 3.1 – Identify the differences among image...

Tutorial 3:

Working with Images

New Perspectives on Microsoft Expression Web 3.0 Tutorial 3 2

Objectives

• Session 3.1– Identify the differences among image file types– Evaluate the purpose of alternative text– Position an image– Wrap text around images– Identify the picture properties– Create a border and white space around images


Objectives

• Session 3.2– Change the size of an image– Modify the contents of an image– Explore the functions of the picture toolbar– Create a thumbnail image


Visual OverviewPlacing Images


Using Images on a Web Page

• Images provide visual interest• Images add to file size of Web page and slow

download time• Images should enhance the page and/or provide

useful information• Navigational icons may appear at the bottom of a

web page• Web pages should have breathing room– Planned areas of white space



• Understanding Image File Formats– GIF• Graphic Interchange Format• Uses file compression – makes smaller file sizes• Downloads quickly• Drawings (line art or clip art) usually stored in

this format• Can have up to 256 colors



– JPG• Joint Photographic Experts Group• Most photos are .jpg files• Can have more than a million colors

– PING• Portable Network Graphics• Better file compression than .gif files• Not limited to 256 colors• Does not support animation


Using Images on a Web Page– BMP• Standard Windows graphic files• Have larger file sizes• Avoid using on a web page

– TIF• Tagged Image File Format• Usually generated by optical scanners/digital

cameras• Have larger file sizes• Avoid using on a web page



• Learning About Where to Obtain Images– Get free clip art and photos from different Web

sites• Be mindful of copyright restrictions

– Purchase from online image services– Use digital cameras and cell phones• Files will be very large• Resize/crop pictures as needed



• Entering Alternate Text– Provides a description of the image for screen

readers– Appears before image completely downloads– Appears as a screen tip– Appears beside a placeholder when image fails to

download– Supply alternate text for each image used• Text should be brief, but descriptive



• Inserting an Image Using the Folder List Panel– Click and drag the image filename to the desired

location in the Editing window– Release the mouse button– Type alternative text in the Accessibility Properties

dialog box– Click OK or press Enter to insert image


Setting the Picture Properties

• Expression Web has more than 20 tools that can be used to change the size, position, and appearance of an image

• Default Settings– Image automatically appears at left edge of screen– Text does not wrap around the image—must set

wrapping style– First line of text appears at base of the image



• Bounding Box– Rectangular box that defines the outside border of

an image.• Resize Handles– Controls that modify the box size



• Creating Margin Space and Adding a Border– Leave white space around images and other

objects– Can set the horizontal and vertical margins

surrounding an image– Can use borders to separate image and text• Set desired thickness• By default, border color matches text color


Visual Overview


Editing Images

• Scaling an Image– Maintain the aspect ratio when changing height

and width of image• Change height and width together and in the

same proportion– Making an image smaller does not change image

quality– Making an image larger will degrade the image

quality and make it look grainy


Editing Images


Using the Pictures Toolbar

• Rotating and Flipping an Image– Rotate in 90⁰ increments– Flipping an image shows the image in reverse

• Changing the Image Brightness– More Contrast brightens an image– Less Contrast darkens an image

• Removing Color– Grayscale• Removes all color from an image



– Washout• Fades the image• Image appears as a watermark

• Creating a Beveled Border– Border has a 3D effect• Inset – border appears recessed• Outset – border appears raised



• Cropping an Image– Crop tool used to remove part of the image– Cropping does not reduce image resolution



• Manually Resizing an Image– Click and drag any of the three resizing handles– Resample the image after resizing• Often reduces file size which allows for faster

download time– Manually add white space around image• Drag borders of the image right or left


Creating Thumbnail Images

• Thumbnail Image– Small image that, when clicked, displays a Web

page with a larger version of the image– Image Gallery• Column and row grid of thumbnail images• Conserves screen space

– Expression Web automates the entire process


Creating Thumbnail Images

• Using an Image as a Horizontal Line– More common to use an image as a horizontal line

rather than the HTML <hr /> tag• Insert the image normally• Do not use the <hr /> tag at all


Using an Image as a Bullet

• An image used as a bullet has much more visual appeal

• Expression Web does not create the image for the bullet– Can use Expression Design or a similar illustration

software to create the image


Designing the Page Background

• Images can be used for page backgrounds– Always change the background color if a

background image is used• If problem occurs loading the background

image, the background color takes its place– Contrast the background with the page text– Avoid bright, harsh colors such as red, orange, or

bright yellow– Readability of the page always takes precedence

over design issues

Tutorial 3: Working with Images. Objectives Session 3.1 – Identify the differences among image...

Documents

Transcript of Tutorial 3: Working with Images. Objectives Session 3.1 – Identify the differences among image...