Tutorial 3: Working with Images

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 2New Perspectives on Microsoft Expression Web 3.0 Tutorial 3

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 New Perspectives on Microsoft Expression Web 3.0 Tutorial 33

Visual Overview Placing Images New Perspectives on Microsoft Expression Web 3.0 Tutorial 34

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 New Perspectives on Microsoft Expression Web 3.0 Tutorial 35

Using Images on a Web Page 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 New Perspectives on Microsoft Expression Web 3.0 Tutorial 36

Using Images on a Web Page – 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 New Perspectives on Microsoft Expression Web 3.0 Tutorial 37

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 New Perspectives on Microsoft Expression Web 3.0 Tutorial 38

Using Images on a Web Page New Perspectives on Microsoft Expression Web 3.0 Tutorial 39

Using Images 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 New Perspectives on Microsoft Expression Web 3.0 Tutorial 310

Using Images on a Web Page 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 New Perspectives on Microsoft Expression Web 3.0 Tutorial 311

Using Images on a Web Page New Perspectives on Microsoft Expression Web 3.0 Tutorial 312

Using Images on a Web Page 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 New Perspectives on Microsoft Expression Web 3.0 Tutorial 313

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 New Perspectives on Microsoft Expression Web 3.0 Tutorial 314

Setting the Picture Properties New Perspectives on Microsoft Expression Web 3.0 Tutorial 315

Setting the Picture Properties Bounding Box – Rectangular box that defines the outside border of an image. Resize Handles – Controls that modify the box size New Perspectives on Microsoft Expression Web 3.0 Tutorial 316

Setting the Picture Properties 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 New Perspectives on Microsoft Expression Web 3.0 Tutorial 317

Setting the Picture Properties New Perspectives on Microsoft Expression Web 3.0 Tutorial 318

Visual Overview New Perspectives on Microsoft Expression Web 3.0 Tutorial 319

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 New Perspectives on Microsoft Expression Web 3.0 Tutorial 320

Editing Images New Perspectives on Microsoft Expression Web 3.0 Tutorial 321

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 New Perspectives on Microsoft Expression Web 3.0 Tutorial 322

Using the Pictures Toolbar New Perspectives on Microsoft Expression Web 3.0 Tutorial 323 – 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

Using the Pictures Toolbar Cropping an Image – Crop tool used to remove part of the image – Cropping does not reduce image resolution New Perspectives on Microsoft Expression Web 3.0 Tutorial 324

Using the Pictures Toolbar 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 New Perspectives on Microsoft Expression Web 3.0 Tutorial 325

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 New Perspectives on Microsoft Expression Web 3.0 Tutorial 326

Creating Thumbnail Images Using an Image as a Horizontal Line – More common to use an image as a horizontal line rather than the HTML tag Insert the image normally Do not use the tag at all New Perspectives on Microsoft Expression Web 3.0 Tutorial 327

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 New Perspectives on Microsoft Expression Web 3.0 Tutorial 328

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 New Perspectives on Microsoft Expression Web 3.0 Tutorial 329