Microsoft Expression Web-Illustrated Unit E: Working with Pictures.
-
Upload
thomasina-dawson -
Category
Documents
-
view
216 -
download
1
Transcript of Microsoft Expression Web-Illustrated Unit E: Working with Pictures.
![Page 1: Microsoft Expression Web-Illustrated Unit E: Working with Pictures.](https://reader036.fdocuments.us/reader036/viewer/2022062517/56649f115503460f94c248c8/html5/thumbnails/1.jpg)
Microsoft Expression Web-Illustrated
Unit E: Working with Pictures
![Page 2: Microsoft Expression Web-Illustrated Unit E: Working with Pictures.](https://reader036.fdocuments.us/reader036/viewer/2022062517/56649f115503460f94c248c8/html5/thumbnails/2.jpg)
Objectives
Understand Web graphicsInsert a pictureResize and resample a pictureEdit a picture
Microsoft Expression Web - Illustrated
![Page 3: Microsoft Expression Web-Illustrated Unit E: Working with Pictures.](https://reader036.fdocuments.us/reader036/viewer/2022062517/56649f115503460f94c248c8/html5/thumbnails/3.jpg)
Objectives
Set wrapping style and marginsSet Auto Thumbnail optionsCreate a thumbnail pictureStyle a thumbnail picture
Microsoft Expression Web - Illustrated
![Page 4: Microsoft Expression Web-Illustrated Unit E: Working with Pictures.](https://reader036.fdocuments.us/reader036/viewer/2022062517/56649f115503460f94c248c8/html5/thumbnails/4.jpg)
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
![Page 5: Microsoft Expression Web-Illustrated Unit E: Working with Pictures.](https://reader036.fdocuments.us/reader036/viewer/2022062517/56649f115503460f94c248c8/html5/thumbnails/5.jpg)
Understanding Web Graphics
Microsoft Expression Web - Illustrated
![Page 6: Microsoft Expression Web-Illustrated Unit E: Working with Pictures.](https://reader036.fdocuments.us/reader036/viewer/2022062517/56649f115503460f94c248c8/html5/thumbnails/6.jpg)
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
![Page 7: Microsoft Expression Web-Illustrated Unit E: Working with Pictures.](https://reader036.fdocuments.us/reader036/viewer/2022062517/56649f115503460f94c248c8/html5/thumbnails/7.jpg)
Inserting a Picture
Click OK, then click the Save button on the Common toolbar
Microsoft Expression Web - Illustrated
![Page 8: Microsoft Expression Web-Illustrated Unit E: Working with Pictures.](https://reader036.fdocuments.us/reader036/viewer/2022062517/56649f115503460f94c248c8/html5/thumbnails/8.jpg)
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
![Page 9: Microsoft Expression Web-Illustrated Unit E: Working with Pictures.](https://reader036.fdocuments.us/reader036/viewer/2022062517/56649f115503460f94c248c8/html5/thumbnails/9.jpg)
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
![Page 10: Microsoft Expression Web-Illustrated Unit E: Working with Pictures.](https://reader036.fdocuments.us/reader036/viewer/2022062517/56649f115503460f94c248c8/html5/thumbnails/10.jpg)
Editing a Picture
Right-click a picture on the home page, then click Show Pictures Toolbar on the shortcut menu
Microsoft Expression Web - Illustrated
![Page 11: Microsoft Expression Web-Illustrated Unit E: Working with Pictures.](https://reader036.fdocuments.us/reader036/viewer/2022062517/56649f115503460f94c248c8/html5/thumbnails/11.jpg)
Editing a Picture
To crop, click the Crop button on the Pictures toolbarAdjust the crop handles and press [Enter]
Microsoft Expression Web - Illustrated
![Page 12: Microsoft Expression Web-Illustrated Unit E: Working with Pictures.](https://reader036.fdocuments.us/reader036/viewer/2022062517/56649f115503460f94c248c8/html5/thumbnails/12.jpg)
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
![Page 13: Microsoft Expression Web-Illustrated Unit E: Working with Pictures.](https://reader036.fdocuments.us/reader036/viewer/2022062517/56649f115503460f94c248c8/html5/thumbnails/13.jpg)
Setting Wrapping Style and Margins
Double-click a picture
Microsoft Expression Web - Illustrated
![Page 14: Microsoft Expression Web-Illustrated Unit E: Working with Pictures.](https://reader036.fdocuments.us/reader036/viewer/2022062517/56649f115503460f94c248c8/html5/thumbnails/14.jpg)
Setting Wrapping Style and Margins
Click the Appearance tabClick Left under Wrapping styleAdjust the picture’s margins
Microsoft Expression Web - Illustrated
![Page 15: Microsoft Expression Web-Illustrated Unit E: Working with Pictures.](https://reader036.fdocuments.us/reader036/viewer/2022062517/56649f115503460f94c248c8/html5/thumbnails/15.jpg)
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
![Page 16: Microsoft Expression Web-Illustrated Unit E: Working with Pictures.](https://reader036.fdocuments.us/reader036/viewer/2022062517/56649f115503460f94c248c8/html5/thumbnails/16.jpg)
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
![Page 17: Microsoft Expression Web-Illustrated Unit E: Working with Pictures.](https://reader036.fdocuments.us/reader036/viewer/2022062517/56649f115503460f94c248c8/html5/thumbnails/17.jpg)
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
![Page 18: Microsoft Expression Web-Illustrated Unit E: Working with Pictures.](https://reader036.fdocuments.us/reader036/viewer/2022062517/56649f115503460f94c248c8/html5/thumbnails/18.jpg)
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
![Page 19: Microsoft Expression Web-Illustrated Unit E: Working with Pictures.](https://reader036.fdocuments.us/reader036/viewer/2022062517/56649f115503460f94c248c8/html5/thumbnails/19.jpg)
Creating a Thumbnail Picture
ThumbnailsSmaller imagesSave space on the page and minimize
download time
Microsoft Expression Web - Illustrated
![Page 20: Microsoft Expression Web-Illustrated Unit E: Working with Pictures.](https://reader036.fdocuments.us/reader036/viewer/2022062517/56649f115503460f94c248c8/html5/thumbnails/20.jpg)
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