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