Microsoft Expression Web-Illustrated Unit E: Working with Pictures
description
Transcript of Microsoft Expression Web-Illustrated Unit E: Working with Pictures
Microsoft Expression Web-Illustrated
Unit E: Working with Pictures
Objectives
Understand Web graphicsInsert a pictureResize and resample a pictureEdit a picture
Microsoft Expression Web - Illustrated
Objectives
Set wrapping style and marginsSet Auto Thumbnail optionsCreate a thumbnail pictureStyle 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 WebClick Insert on the menu barPoint to Picture, then click From FileNavigate to the folder where you store your picture, select an image, then click InsertClick 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
ResizingChanging the height and width attributes in the
<img> tag to make the image display differently
ResamplingRemoves extra pixels, changing the dimensions
and file size Improves clarityDecreases download time
Microsoft Expression Web - Illustrated
Resizing and Resampling a Picture
Select a picturePoint to the bottom-right corner resize handle until the cursor changesPress and hold [Shift]Drag the resize handle to adjust the pictureClick the Picture Actions button list arrowClick 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 toolbarAdjust the crop handles and press [Enter]
Microsoft Expression Web - Illustrated
Editing a Picture
The Pictures toolbarHas 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 tabClick Left under Wrapping styleAdjust the picture’s margins
Microsoft Expression Web - Illustrated
Setting Wrapping Style and Margins
Wrapping StyleNone
• Default wrapping style• Text does not flow around the picture, but
starts at the bottom edgeLeft
• 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 OptionsClick the Auto Thumbnail tabClick the Set list arrowChoose settings
Microsoft Expression Web - Illustrated
Creating a Thumbnail Picture
Insert on the menu bar, point to Picture, then click From FileNavigate to the folder where you store your pictures, click on one, then click InsertType 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 menuThen click anywhere on the page outside the pictureSave the page
Microsoft Expression Web - Illustrated
Creating a Thumbnail Picture
ThumbnailsSmaller imagesSave space on the page and minimize
download time
Microsoft Expression Web - Illustrated
Styling a Thumbnail Picture
Double-click a thumbnail pictureClick the Appearance tab, Set the settings as you’d like themClick OK
Microsoft Expression Web - Illustrated