Microsoft Expression Web-Illustrated Unit E: Working with Pictures

1. Microsoft Expression Web-IllustratedUnit E: Working with Pictures

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

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

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

5. Understanding Web Graphics Microsoft Expression Web - Illustrated

6. 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 typea description of the picture Microsoft Expression Web - Illustrated

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

8. Resizing and Resampling a Picture • Resizing • Changing the height and width attributes in the <img> 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

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

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

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

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

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

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

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

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

17. 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 descriptionin the Alternate text field, then click OK Microsoft Expression Web - Illustrated

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

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

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