Working with Pictures
Unit E
Objectives:








Understand Web graphics
Insert a picture
Resize and resample a picture
Edit a picture
Set wrapping style and margins
Set Auto Thumbnail options
Create a thumbnail picture
Style a thumbnail picture
Working with Pictures
Understanding Web Graphics:
Pictures, also called images or graphics, add visual interest to any Web site, helping to draw visitors
into the site’s content.
To work successfully with pictures, it’s important to understand:
Image measurements – The size of an image can be measured in two ways. The dimensions of an
image are its height and width, usually measured in pixels. These dimensions determine how large the
picture looks on the screen. The file size of the image is measured in kilobytes (KB) and affects how
long it takes the picture to display in a browser.
Page download time – The download time of a page is the amount of time it takes the page to load into
a browser. Download time is determined by two factors: the file size of the page and its referenced files,
and the speed of the visitor’s Internet connection.
You have no influence over a visitor’s Internet connection speed, but you can control the size of your
Web page files. Research has shown that people will wait an average of 8 seconds for a page to load
before surfing away to a different site.
The status bar shows the total file size for a page. There is no ideal file size for a page, but a rule of
thumb, 50-100 KB is a safe range. A 100 KB page downloads in about 14 seconds on a 56K dial-up
connection and in 2 seconds on a high-speed connection.
Image file formats – Digital images can be saved in many formats. Only 3 of these file formats, JPEG,
GIF, and PNG, can be used for Web pages. When saving images for the Web, the best-looking image
with the smallest possible file size.
Page 1
Working with Pictures
Unit E
The JPEG format is best used for photographs and other images that contain many colors. The GIF
format is best used for images that are drawings, simple graphics, or navigation buttons. A GIF can also
be animated and can have a transparent background color. The PNG (pronounced ping) format was
created specifically for Web graphics. Unfortunately, many browsers still don’t properly display PNG
images.
Inserting a Picture
A picture in a Web page is not embedded in the HTML file. Rather, the image file is referenced in the
page’s HTML code. When you insert a picture into a Web page, Expression Web inserts an <img> tag in
the Web page code. The <img> tag contains the path to the image file as well as the height, width, and
other attributes of the image. The Web browser then locates the image file and displays it in the page.
The Accessibility Properties dialog box allows you to set properties to improve the accessibility of
your site. Alternate text, often referred to as alt text, is an attribute of the <img> tag that describes the
image in words. Visitors who use screen reader software head this text read aloud. Some people set their
browsers to display alt text instead of images so pages load more quickly. A long description allows
you to provide a more detailed description of the image.
Moving images
You can move an image by clicking it, then dragging it to a new position on the page. You can also
move an image file by clicking the file name in the folder list task pane, then dragging it into the correct
folder.
Options in the Save Embedded Files dialog box
Button
Function
Rename
Rename the file before saving
Change Folder
Change the folder where the file is saved
Set Action
Allows you to choose an action based on what type of file you are saving
Picture File Type
Changes the file type to GIF, JPEG, PNG-8, PNG-24
Writing meaningful alternate text
Page 2
Working with Pictures
Unit E
When creating alternate text, keep your descriptions brief. Think about what information the image
conveys and use that as a description. Don’t use the word “picture” or “button” in the alt text.
Resizing and Resampling a Picture
You can change the size of a picture in Expression Web by dragging the sides or corner of the image
until it’s the right size. Reducing an image dimensions works well but enlarging them can result in a
significant loss of quality and a grainy appearance.
Two ways to change the size of an image:


Resizing the picture means that the height and width attributes in the <img> tag change to make
the image display differently on the page. The image dimensions themselves don’t change, nor
does the file size.
Resampling removes extra pixels, changing the dimensions and the file size of the image. It
improves the clarity, so it’s better than resizing. Resampling also decreases the download time.
Thinking in Pixels
On most monitors, 75 pixels is about an inch. If you’re not sure on how wide an image should be, start at
200 pixels and adjust from there.
Editing a Picture
Cropping a picture trims or removes unwanted parts of the picture. The image editing tools don’t have
the same capabilities as a full-blown graphic program, so for any significant changes in size, color, or
tone, you’ll want to use a graphics editing program (Photoshop).
Using the Pictures toolbar
The Pictures toolbar is packed with simple image editing tools. Using the features on the toolbar, you
can change a picture from color to grayscale, wash out the color on a picture, rotate pictures, create
multiple hotspots on a single image that links to other pages, or add a beveled edge to your picture. A
bevel is an angled edge that adds a three-D look to an image.
Buttons on the Picture Toolbar
Page 3
Working with Pictures
Unit E
Page 4
Working with Pictures
Unit E
Setting Wrapping Style and Margins
Controlling a picture’s wrapping style and margins helps you ensure that pictures and text work together
to create an easy-to-read design. You have 3 choices, called wrapping styles in Expression Web.



Default – The text does not flow around the picture, but starts at the bottom edge.
Left – Displays picture on the left side with text wrapping around it on the right.
Right - Displays picture on the right side with text wrapping around it on the left.
If you wrap text around your image, you also want to create margins around your picture so the text
doesn’t flow to the edge of the picture.
The Picture Properties dialog box
General tab – can change the image’s file path, alternate text, and long description, and add or edit a
hyperlink from the image.
Page 5
Working with Pictures
Unit E
Appearance tag – can set the wrapping style; determine layout options such as alignment, border
thickness, and margins; and change the size of the image.
The horizontal margin controls the left and right margins, while the vertical margin controls the top and
bottom margins. These setting determine how much white space is displayed between the picture and
surrounding text.
Setting Auto Thumbnail Options
Sometimes you may want to display a series of smaller images and link them to a larger version of the
same image. Using smaller images, called thumbnails saves space on the page and minimizes download
time. Product galleries, sets of vacation pictures, and portfolios are all examples of pages that work well
with thumbnail images.
Maintaining a Consistent Graphical Style
When deciding what graphics to use on your Web site, it’s best to choose one style and stick with it. If
you decide to use cartoon-like images, use them throughout the site. If you use photographs, don’t mix
them with illustrations. Using a consistent style gives you site a polished and professional appearance.
Page 6
Working with Pictures
Unit E
Creating a Thumbnail Picture
You use the Auto Thumbnail command to create the thumbnail image as well as the link to the full-size
image.
The Auto Thumbnail settings in the Page Editor Options controls the dimensions, border size, and
beveled edges on the thumbnail. To change the wrapping styles, alignment, or margins, you use the
Picture Properties options.
Page 7
Working with Pictures
Unit E
The Picture Properties dialog box
General
Appearance
Page 8
Working with Pictures
Unit E
Answer the Following Questions
2
Name: ___________________________________
1
7
3
6
4
5
1. _____ Which element do you click to crop a picture?
2. _____ Which element do you drag to change the margin?
3. _____ Which element do you drag to change the image size?
4. _____ Which element do you click to make the text wrap on the right of a picture?
5. _____ Which element do you click to make the text wrap on the left of the picture?
6. _____ Which element do you use to set the top and bottom margins of a picture?
7. _____ Which element do you use to set the left and right margins of a picture?
Page 9
Working with Pictures
Unit E
Match each term with the statement that best describes it.
Resizing
a. File format not well-supported by current browsers
Resampling
b. File format best used for simple drawings and artwork with fewer colors
JPEG
c. File format best used for photographs and detailed art work
GIF
PNG
d. Changes the height and width attributes in the <img> tag but not the file
dimensions
e. A small version of an image that links to a larger version of the image
Thumbnail
f. Changes the image dimensions and file size
8. ______
9. ______
10. ______
11. ______
12. ______
13. ______
Select the best answer from the list of choices
14 Which of these controls the way text flows around a picture?
a Margins
b Wrapping style
c Alignment
d Brightness
15 If your Web site visitors use a slow dial-up connection, your Web page file sizes should be
less than:
a 1000 kilobytes
b 100 kilobytes
c 50 kilobytes
d 5 kilobytes
16 Tools for cropping a picture and changing its brightness can be found on the:
a Page Properties dialog box
b Apply Style task pane
c Status bar
d Picture toolbar
17 For which type of images is it preferable to leave the Alternate text box empty?
a Decorative image, such as a bullet
b Company logo
c Pictures accompanying text
d Navigation buttons
Page 10
Working with Pictures
Unit E
18 Which of the following does not affect the download time of a Web page?
a Number of images used on the page
b Speed of visitor’s Internet connection
c File size of images used on the page
d Speed of the Web designers Internet connection
19 When resizing an image by dragging its resize handles, which key do you press to maintain
the image’s proportion while changing the width and height?
a Shift
b Alt
14 _____
15 _____
c Ctrl
d Tab
16 _____
17 _____
18 _____
19 _____
Page 11
Working with Pictures
Unit E
Skills Review
Pages 115-116
Do 1 through 7
Real Life Independent Challenge
Page 119
Do a through g
Page 12