Microsoft Expression Web-Illustrated Unit E: Working with Pictures

Objectives Understand Web graphics Insert a picture Resize and resample a picture Edit a picture Microsoft Expression Web - Illustrated

Objectives Set wrapping style and margins Set Auto Thumbnail options Create a thumbnail picture Style a thumbnail picture Microsoft Expression Web - Illustrated

Understanding Web Graphics Image measurements  Dimensions of an image are its height and width  File size affects how long it takes the picture to display in a browser Page download time  Amount of time it takes a page to load into a browser Image file formats  JPEG, GIF, PNG Microsoft Expression Web - Illustrated

Understanding Web Graphics Microsoft Expression Web - Illustrated

Inserting a Picture Open a Web site in Expression Web Click Insert on the menu bar Point to Picture, then click From File Navigate to the folder where you store your picture, select an image, then click Insert Click in the Alternate text field, then type a description of the picture Microsoft Expression Web - Illustrated

Inserting a Picture Click OK, then click the Save button on the Common toolbar Microsoft Expression Web - Illustrated

Resizing and Resampling a Picture Resizing  Changing the height and width attributes in the tag to make the image display differently Resampling  Removes extra pixels, changing the dimensions and file size  Improves clarity  Decreases download time Microsoft Expression Web - Illustrated

Resizing and Resampling a Picture Select a picture Point to the bottom-right corner resize handle until the cursor changes Press and hold [Shift] Drag the resize handle to adjust the picture Click the Picture Actions button list arrow Click the Resample Picture to Match Size option button Microsoft Expression Web - Illustrated

Editing a Picture Right-click a picture on the home page, then click Show Pictures Toolbar on the shortcut menu Microsoft Expression Web - Illustrated

Editing a Picture To crop, click the Crop button on the Pictures toolbar Adjust the crop handles and press [Enter] Microsoft Expression Web - Illustrated

Editing a Picture The Pictures toolbar  Has many image editing tools, including: Grayscale Wash-out Rotate Beveled edges Take the time to experiment with the many editing tools available here Microsoft Expression Web - Illustrated

Setting Wrapping Style and Margins Double-click a picture Microsoft Expression Web - Illustrated

Setting Wrapping Style and Margins Click the Appearance tab Click Left under Wrapping style Adjust the picture’s margins Microsoft Expression Web - Illustrated

Setting Wrapping Style and Margins Wrapping Style  None Default wrapping style Text does not flow around the picture, but starts at the bottom edge  Left Displays the picture on the left side with text wrapping around it on the right  Right Displays the picture on the right side with text wrapping around it on the left Microsoft Expression Web - Illustrated

Setting Auto Thumbnail Options Click Tools on the menu bar, then click Page Editor Options Click the Auto Thumbnail tab Click the Set list arrow Choose settings Microsoft Expression Web - Illustrated

Creating a Thumbnail Picture Insert on the menu bar, point to Picture, then click From File Navigate to the folder where you store your pictures, click on one, then click Insert Type a picture description in the Alternate text field, then click OK Microsoft Expression Web - Illustrated

Creating a Thumbnail Picture Right-click the picture Click Auto Thumbnail on the shortcut menu Then click anywhere on the page outside the picture Save the page Microsoft Expression Web - Illustrated

Creating a Thumbnail Picture Thumbnails  Smaller images  Save space on the page and minimize download time Microsoft Expression Web - Illustrated

Styling a Thumbnail Picture Double-click a thumbnail picture Click the Appearance tab, Set the settings as you’d like them Click OK Microsoft Expression Web - Illustrated