Microsoft Expression Web 3 – Illustrated Unit E: Working with Pictures

Microsoft Expression Web 3 – IllustratedUnit E: Working with Pictures

Objectives • Understand Web graphics • Insert a picture • Resize and resample a picture • Edit a picture • Set wrapping style and margins Expression Web 3 - Illustrated

Objectives (continued) • Set Auto Thumbnail options • Create a thumbnail picture • Style a thumbnail picture Expression Web 3 - Illustrated

Understanding Web Graphics • Images and graphics add visual interest to Web pages. • There are three factors to consider when working with images and graphics for the Web: • Image measurements • Page download times • Image file formats Expression Web 3 - Illustrated

Understanding Web Graphics (continued) • Image measurements • Size of an image can be measured in two ways: • Dimensions – height and width, measured in pixels, determines size of image on the screen. • File size – measured in kilobytes, determines how long it takes the image to appear in the Web browser. • The larger the dimensions, the larger the file size. Expression Web 3 - Illustrated

Understanding Web Graphics (continued) • Page download times • Download time – amount of time it takes the page to load in a Web browser. • Download time is determined by two factors: • File size of the page including image files. • Speed of visitors’ Internet connection. • Keeping Web pages lean is critical to successful Web page design. • Research shows that visitors will wait an average of 8 seconds for a page to load before surfing to another Web site. Expression Web 3 - Illustrated

Understanding Web Graphics (continued) • Web page file size can be found on the status bar. • 50-100 KB is a safe range. • A 100 KB page downloads in about 2 seconds on a high speed connection. Expression Web 3 - Illustrated

Understanding Web Graphics (continued) • Image file formats • JPEG, GIF, and PNG are the only image file formats suited for Web pages. • JPEG – pronounced jay-peg, best for photographs. • GIF – pronounced jig or gif, best for drawings and simple graphics with large areas of solid color, can be animated and have a transparent background. • PNG – pronounced ping, created for Web graphics, high quality, small file size. Expression Web 3 - Illustrated

Understanding Web Graphics (continued) Expression Web 3 - Illustrated

Inserting a Picture • Images are not embedded in the HTML. • Images are separate files that are referenced in the HTML code using the <img> tag. • Alternate text – attribute of the <img> tag that describes the image. • Long description – detailed description of an image. Expression Web 3 - Illustrated

Inserting a Picture (continued) Expression Web 3 - Illustrated

Resizing and Resampling a Picture • Images can be resized by dragging the sizing handles on the sides or the corner of the image. • Reducing image dimensions works well. • Enlarging image dimensions can result in a grainy appearance. • Hold the [Shift] key to drag image size in or out proportionately. Expression Web 3 - Illustrated

Resizing and Resampling a Picture (continued) • Resizing – changes the height and width attributes in the <img> tag, image dimensions and file size don’t change. • Resampling – changes the dimensions and file size, removes extra pixels, improves clarity, decreases image download time. Expression Web 3 - Illustrated

Resizing and Resampling a Picture (continued) Expression Web 3 - Illustrated

Resizing and Resampling a Picture (continued) • Thinking in pixels • 75 pixels is one inch • Relate image size to screen size • If the screen width is 1024 pixels wide, an image 500 pixels wide would take up about half of the screen. Expression Web 3 - Illustrated

Editing a Picture • Using Expression Web you can make simple changes to a picture. • Cropping – trims or removes unwanted parts of the picture. • Adjusting contrast and brightness. • Bevel – an angled three-dimensional edge. • For significant changes in size, color, or tone use a graphics editing program. Expression Web 3 - Illustrated

Editing a Picture (continued) Expression Web 3 - Illustrated

Setting Wrapping Style and Margins • Wrapping style – the way in which a picture is positioned relative to surrounding text. • None – default wrapping style, text starts at bottom edge of picture. • Left wrapping – picture on left, text wraps around it on right. • Right wrapping – picture on right, text wraps around it on left. • Create margins around pictures so text doesn’t flow to edge of picture. Expression Web 3 - Illustrated

Setting Wrapping Style and Margins (continued) Expression Web 3 - Illustrated

Setting Auto Thumbnail Options • Thumbnails – smaller images that link to a larger version of the same image. • Saves space on the page. • Minimizes download time. • Auto Thumbnail tool – creates a thumbnail image and automatically links to the larger image. • Default thumbnail size is 100 pixels wide. Expression Web 3 - Illustrated

Creating a Thumbnail Picture • Two embedded images are created during the thumbnail process. • The original image file. • The smaller thumbnail version. Expression Web 3 - Illustrated

Creating a Thumbnail Picture (continued) Expression Web 3 - Illustrated

Styling a Thumbnail Picture • Auto Thumbnail settings • Controls dimensions, border size, and beveled edges of thumbnail. • Picture Properties • Controls wrapping styles, alignment, and margins. Expression Web 3 - Illustrated

Summary • Images and graphics add visual interest to Web pages. • Images can be resized and resampled to reduce file size and improve image quality. • Expression Web contains image editing functions to make simple changes to images. • Text can be set to wrap around the images on the Web page. Expression Web 3 - Illustrated

Summary (continued) • Thumbnails, or smaller versions of images, can save space on the Web page and minimize download time. • Web Expression has Auto Thumbnail features that creates the thumbnail image and links to the full-size image. Expression Web 3 - Illustrated

Microsoft Expression Web 3 – Illustrated Unit E: Working with Pictures