Chapter 02

Microsoft Expression Web
2 Working with Images

and Links
Objectives
You will have mastered the material in this chapter when you can:
• Insert and align an image • Create a folder for images
• Change the workspace • Add internal links
• Add borders and margins to an • Add external links
image
• Add a bookmark
• Copy page elements to the
• Add an e-mail link
Clipboard
• Add a ScreenTip
• Edit an image
• Create an image thumbnail
Copyright 2011 Cengage Learning, Inc. All Rights Reserved. May not be copied, scanned, or duplicated, in whole or in part.
Microsoft Offi
Microsoft ce Word 2003
Expression Web
2 Working with Images

and Links
Introduction
Text is an important part of Web site content — it describes the purpose of the site and
conveys valuable details related to the site’s subject matter. No matter how well written
the text is, however, a site without images or that is difficult to navigate will not hold a
visitor’s attention for long. Graphics or images in Web pages serve a practical purpose by
illustrating a product or service described in the text, displaying a company’s logo, or serving
as links to further information. Images also help make a site more attractive and effective by
providing visual interest and continuity. Hyperlinks, or simply links, are text or graphics
used to jump to another location in the same Web page, elsewhere in the site, or to another
Web site. A link can also open the visitor’s e-mail program that allows the visitor to send an
e-mail to the site owner or other recipient. Links, in either text or graphic format, help to
organize a site by providing navigation to other areas of the World Wide Web.
Project — Enhancing the Boon Mountain

Resort Web Site
A Web site for a business, such as the Boon Mountain Resort, needs to inform and attract
current and potential customers. Visitors to a Web site want to get an impression of the
product or service very quickly. Sites that feature eye-catching images and that are easy to
navigate and informative can help build a customer base, leading to increased success of
the business.
A navigation bar that includes links to each of the main pages on a site usually
appears on the left side or below the masthead on each page of a site. The navigation bar
also might appear in both locations.
The project for this chapter uses Expression Web to add images and links to the
home page for the Boon Mountain Resort Web site as shown in Figure 2–1. Additional
pages and content have been added to the Web site that you created in Chapter 1, based
on the site plan and feedback from site visitors and Boon Mountain Resort staff. Now you
will add a logo and images so that visitors to the site can see images of the resort’s various
accommodations. You will also create a navigational structure, add links to other attrac-
tions near the resort, create a bookmark for a long page, and add a link that visitors can
use to send an e-mail to the resort.
EW 72
Microsoft Expression Web
logo with
transparency
applied
navigation bar
contains links
to other pages
in the site
double border
margin adds space

between border and
other page content
inn.jpg file has

been resized and
wrapped on the
right margin
Figure 2–1
Overview
As you read this chapter, you will learn how to add images and links to the Web site
shown in Figure 2–1 by performing these general tasks:
• Choose and insert images.
• Adjust the workspace layout.
• Position images in relation to text and page margins.
• Distinguish an image by modifying margins and borders.
• Make changes to the appearance and format of an image.
• Add links to other pages in the site, to other sites, and to an e-mail address.
EW 73
EW 74 Expression Web Chapter 2 Working with Images and Links
Plan General Project Guidelines

Ahead When adding images and links to a Web site, you should keep in mind the goals of the site.
Any images that you add should not only be attractive but should also serve a purpose. Links
should assist a reader in finding information quickly. A navigation bar is essential, but addi-
tional links to pages, page areas, or external locations can enhance a visitor’s experience and
allow him or her to find the information needed quickly. As you add text and images to a
Web site, such as the project shown in Figure 2–1, you should follow these general guidelines:
1. Properly use images that enhance the message of your site. Adding too many images
or using poor quality ones will detract from the message you are trying to deliver. Consider
having a professional photographer take the pictures to ensure their quality. Always make
sure that you have the proper permission to use an image before you add it to your site and
that you give credit to your source. You should plan for borders, image placement, and spac-
ing around your image to guide the reader’s eye and distinguish your image.
2. Identify changes to make to the images. Removing unnecessary background areas by
cropping will emphasize the portion of the image that is relevant. Physically resizing an
image takes up more or less space on the screen. You can give visitors the option of see-
ing a larger version of an image by providing them with a thumbnail that, when clicked,
enlarges the image. Including thumbnails can make the site quicker to download, increas-
ing the usability of your site. You should also organize the image files into a folder or
series of folders.
3. Determine the necessary internal and external links. A navigation bar includes
links to the main pages in a site. A large site can have thousands of Web pages, but the
designers of the site generally organize the pages into categories and subcategories to
help visitors quickly find the information they are seeking. Linking to external sites can
enhance the information on a site. For example, providing links to area attractions helps
visitors learn more about the Boon Mountain Resort vicinity. Providing an e-mail link
allows visitors to interact with the site by requesting additional information or by adding
their address to a mailing list. Text is often used as a link, but images, such as photos and
graphic logos, can also be used as links as well.
Specific details about these guidelines are presented at appropriate points in the chapter.
The chapter will also identify what tasks will be performed and how decisions are made
during the creation of the Web site shown in Figure 2–1.
Sources for Images

Choosing Images and File Types
BTW
You can insert images

installed on a disk or net- Web page images are digital files that you can acquire as stock photography from a
work folder to which you CD or downloaded file, or you can use images that are imported from a device such as a
have access, use images
saved to your Web site
digital camera. Regardless of the origins of your image files, all images included in your
folder, or insert images site need to be embedded, or saved as a part of the Web site so that when you publish
directly from a digital your site, all of the files are accessible.
camera or electronic
scanner.
Technical Considerations for Image Files

File Sizes
BTW
A higher file resolution Adding images to a Web site increases the site’s attractiveness but adds complexity
delivers a better quality in terms of increased page file sizes and variations in graphic resolution. Image files that
image, but larger file
exceed 100 kilobytes in size can download slowly in a visitor’s browser, a situation you
sizes take longer to
download. You can usu- should avoid. Image files are composed of dots, or pixels, which are the smallest amount
ally reduce file sizes using of visible data in an image. An image’s resolution is the concentration of dots that make
compression software up the image. High-quality images typically require larger file sizes because higher-
without visibly diminish- quality images are high resolution (high res), containing a high concentration of dots
ing the quality of the
image as displayed on
per inch (dpi). If an image file has a low resolution (low res), the image can appear jagged,
the page. or pixilated. A high-resolution file provides a better quality image, so you have to
balance the quality of an image with how its size affects the site.
Project — Enhancing the Boon Mountain Resort Web Site EW 75
Expression Web Chapter 2

A file format is the way the file is encoded and stored electronically. An image’s file Images from External
BTW
Devices
format differs depending on the type of image, the program that created it, or how it was
If you have images stored
saved. To appear in a browser, your site’s images must be saved in a format supported by on a digital camera or
most browsers. The most common image file formats used on the Web are .gif (Graphics captured electronically
Interchange Format, pronounced “jiff”), .jpg (Joint Photographic Experts Group, pro- using a scanner, insert
nounced “jaypeg”), and .png (Portable Network Graphics, pronounced “ping”). the device or storage
media as directed by the
The .gif, .jpg, and .png file formats differ in how they compress, or reduce the size device manufacturer,
of, image files by removing extraneous file data. Lossy compression means that a certain click Insert on the menu
amount of quality is lost when the image is compressed. For an image that uses broad bar, point to Picture,
swatches of uniform colors, this is not usually visible. For photographs, you should use then click From Scanner
or Camera to insert
lossless compression, where the image retains its quality. Photos that have lost consider- the image.
able quality appear pixilated and display blocks of color (Figure 2–2).
squares
indicate
lossyness
Figure 2–2
Table 2–1 describes common image formats.
Table 2–1 Image File Types
File Format Extension(s) Compression About
Graphics .gif Lossless Introduced by CompuServe in 1987. Best for drawn

Interchange graphics or logos. Supports animations. Uses data
Format (GIF) compression for large files. Limited to 256 colors.
Joint Photographic .jpg, .jpeg Lossy A compression method and file format used for
Experts Group photographs.
(JPEG)
Portable Network .png Lossless Developed as a non-proprietary file format to be
Graphics (PNG) used without restrictions. Best for drawn graphics
or logos. Does not support animations. Uses data
compression for large files.
Accessibility Properties
Because some visitors to your site might have a vision impairment that requires
them to use a screen reader program or other adaptive technology, you should complete
the information in the Accessibility Properties dialog box that opens when you insert an
image. Depending on a visitor’s browser and settings, this information, called alternate
text, appears next to an image while it downloads and provides information to those who
use devices to assist with visual impairments.
Write your alternate text to describe the image that it is associated with so that users
of visual assistance software will get a complete description of the image and how it differs
from other pictures on your site. For instance, on a Web site for a band that features all of
the album covers from the past 20 years, the alternate text for each image should have the
complete album name, year of publication, and a brief description of the images used on
the cover, instead of “album cover.”
Plan Properly use images that enhance the message of your site.
Ahead When deciding on how to enhance your site with images, consider both the aesthetic value
of each image and whether the image conveys the necessary information or message to visi-
tors to your site. Choose only images that are necessary to enhance the site and inform visi-
tors, and make sure to seek permission where necessary.
• Determine the type of images you will need. You can enhance your Web page with
many types of images:
- Company logos are graphics created by a designer, usually incorporate the company
name, and use color and shapes to create an easily recognizable image that can be
used on letterhead, Web pages, and other communications to identify the company.
On a Web page, a company logo often appears on the masthead.
- Photographs taken with a digital camera or scanned into an electronic format are
valuable for depicting a location or product.
- Use a graphic design program to create images that look drawn, such as logos or
cartoons, or to decrease the file size or make other enhancements to photographs or
other images.
- Animated graphics use a series of motions and sounds to make an image appear to
be moving.
• Store the images in a central folder location, and make sure that you have the
proper permissions to use them.
- You can create a folder within the Web site to manage your digital assets, such as
image files.
- Acquire permission to use non-original images, give credit to the source, and make
sure that you are using the image according to the agreement with the source and any
guidelines that may have been set.
- It is the responsibility of the person using the image to gain permission. Even if an
image does not have a copyright notice with it, it is still not free for public use unless
express permission has been given.
The following pages show you how to insert, place, and format images after you
have started Expression Web.
Placeholders
Inserting an Image
BTW
A placeholder is a
container to which you
add text or images. The
When you insert an image into a Web page, Expression Web automatically creates a
Image icon in the Toolbox paragraph tag to contain the image. To wrap text around an image, insert the image into
is used to insert a place- the tag that contains the text. If you want to align and position the image separately from
holder to which you will surrounding text, insert it into its own div.
later add an image. This
is helpful if you do not
have the image at the
time. You can resize the
placeholder to determine
the spacing and layout of
your page until you insert
the image.
Inserting an Image EW 77

To Start Expression Web
If you are using a computer to step through the project in this chapter, and you want your screens to match
the figures in this book, you should change your computer’s resolution to 1024 3 768. For information about how
to change a computer’s resolution, read Appendix G. If you are using a lab computer or have changed the workspace
layout, reset the workspace to the default settings to match the screens in this book.
The following steps, which assume you are running Windows 7, start Expression Web based on a typical
installation and reset the workspace layout. You may need to ask your instructor how to start Expression Web for
your computer.
Note: If you are using Windows XP, see Appendix E for alternate steps. If you are using Windows Vista,
see Appendix F for alternate steps.
1
• Click the Start button on the Windows 7 taskbar to display the Start menu.
• Click All Programs at the bottom of the left pane on the Start menu to display the All Programs menu.
• Click Microsoft Expression on the All Programs menu to display the Microsoft Expression menu.
2
• Click Microsoft Expression Web 3 to start Expression Web.
3
• Click Panels on the menu bar to open the Panels menu, then click Reset Workspace Layout.
To Open a Web Site

An Expression Web site consists of at least one folder and file; most sites include multiple files and folders.
When you open a site, all of the files and folders appear in the Folder List and the Site View pane, and can be indi-
vidually opened and accessed. Always open all of the site’s files at once using Expression Web. If you use a Windows
Explorer window to open one page or file of a site at a time, you can create errors of inconsistency and broken
links. When opening a Web site, there are two Open Site dialog boxes. The first dialog box that opens allows you to
browse through recently opened sites, and to type in a file path of a site folder if you know it. To locate a site folder
by looking through drives and subfolders, click the Browse button to open the second Open Site dialog box. In this
dialog box you can change to a USB flash drive and select a subfolder, for example. The following steps open the
Boon Mountain Resort Web site and the default.html page.
1 Site menu
• With your USB flash drive

connected to one of the
computer’s USB ports, click Site
on the menu bar to open the Open Site
command
Site menu then point to Open
Site (Figure 2–3).
Figure 2–3
2
• Click Open Site
on the Site menu
to open the Open
Site dialog box
Browse button
(Figure 2–4).
• Click the Browse
button to open a
second Open Site
dialog box.
List of recently
opened site folders
Figure 2–4

3
• Scroll if necessary
then click Computer
in the left pane
to display a list of
available drives.
• If necessary,
scroll until FLASH
DRIVE or USB (G:)
appears in the list
of available drives
(Figure 2–5).
list of drives
and devices
will display
scroll box
Figure 2–5
4
• Scroll down, if
necessary, and then
double-click FLASH
DRIVE or USB (G:) to
display the contents Chapter 02
folder is open
of the drive.
• Double-click the
Chapter 02 folder to
display its contents.
• Click the
Boon Mountain Boon Mountain
Resort_final site folder
Resort_final Web
site folder to select
it (Figure 2–6).
Open button
Figure 2–6
5
• Click the Close
button to close the Folder List
second Open Site
dialog box.
• Click the Open
button to open the
default.html
site (Figure 2–7). file
Figure 2–7
6
• Double-click the default.html
page in the Site View pane to
open it (Figure 2–8).
default.html
page
Figure 2–8
To Insert an Image
All images that you insert into a page need to be embedded into your site to make them available when your
page is viewed in a browser. When you make changes to an image, you will be prompted to resave the embedded
file. In the Save Embedded Files dialog box there are options to rename the image, save the image in a folder, assign
an action, and change the file type.
All images used in the Boon Mountain Resort site were taken by the owner, so no credits are necessary. The
following steps add a picture of the resort’s main building to the home page from an external folder, assign accessi-
bility properties, and embed the image into your site.

1
• In the Expression Web editing
window, click two lines above the
line beginning with the word,
Relaxation, to place the insertion
point in the div (Figure 2–9).
insertion
point
Insert menu
Figure 2–9
2
• Click Insert on the menu bar
to open the Insert menu.
• Point to Picture on the Insert
menu, then point to From File
(Figure 2–10).
From File command

on Picture submenu
Figure 2–10
3
• Click From File to open the Picture
dialog box.
images are located in
Boon Mountain Resort
• Navigate to the folder that con- _images folder
tains your data files.
• Open the Boon Mountain

More options
Resort_images folder to access the button arrow
images for this site (Figure 2–11).
Why doesn’t my files list look like
Q&A
the list in Figure 2–11?

If your files list looks different,
then you are seeing a different
files view. To make your screen
match the figure, click the More
options button arrow on the
toolbar and then click Tiles in
the menu.
Figure 2–11
4
• Scroll if necessary,
then click the inn
file to select it
(Figure 2–12).
inn image
file
scroll
box
Insert button
Figure 2–12
5
• Click the Insert button to open the
Accessibility Properties dialog box.
• In the Accessibility Properties Alternate

dialog box, type Front porch of text text box
inn in the Alternate text text box

(Figure 2–13). OK button
Figure 2–13

6
• Click the OK button
to close the dialog
box and see the
inserted image
on the page
(Figure 2–14).
inn image is
inserted and
needs to be
resized
Figure 2–14
7
• Press CTRL+S to save the
default.html page.
• Click the OK button in the Save

Embedded Files dialog box
(Figure 2–15).
I Experiment
• Click the Change Folder, Set
Action, and Picture File Type but-
tons in the Save Embedded Files
dialog box to see the options
OK button
available in the dialog boxes that
open. Click the Cancel button in
each dialog box to close it with-
out making any changes.
Figure 2–15
Other Ways
1. Click the Insert Picture
from File button on the
Common toolbar
Adjusting the Workspace Layout

As you work with Web pages, you may want to adjust the layout of the workspace by
opening, moving, maximizing, minimizing, or closing panels. You can open, close, or
rearrange panels to best fit your preferences or to access specific tools. You should only
open the panels that you need; having too many panels open makes your workspace
cluttered and leaves you less room for editing. Expression Web saves the arrangement and
uses it as the default the next time you start the program.
As you work with images, it is helpful to display the rulers as a guide for cropping
and resizing. Images often are inserted into a Web page at a size that is too large, so you
might need to close panels in order to view more of the editing window on the screen and
display rulers so that you can accurately size, position, and crop images.
Panels
Expression Web contains 18 panels; the four default panels (Folder List, Tag
Properties, Apply Styles, and Toolbox) are docked on the left and right sides of the edit-
ing window. Table 2–2 lists different ways you can adjust the workspace using the panels.
Examples are shown in Figure 2–16 (a and b).
Table 2–2 Panel Actions
Skill Method Effect
Undocking Click the panel’s title bar and then drag the Allows you to move it to a new location or have
panel to the center of the editing window it float anywhere in the Expression Web window
(see Figure 2–16 a)
Docking Click the panel’s title bar and then drag the Allows you to move it to a fixed location on a
panel to the left or right of the editing window side of the Expression Web window (see
until it docks Figure 2–16 a)
Maximizing Click the Turn off AutoHide button on the Enlarges a panel so that you can see more of its
panel title bar content (see Figure 2–16 a)
Minimizing Click the Turn on AutoHide button on the Minimize a panel to view more of
panel title bar another panel in the same column (see Figure
2–16 a)
Opening Click Panels on the menu bar, then click a panel Displays a panel in order to access its tools (see
Figure 2–16 b)
Closing Click the Close button on the panel Closes a panel or group of panels to see more
title bar, or to the right of grouped panels, to of another panel or more of the editing window
close the group (see Figure 2–16 a)
Figure 2–16 (b) shows the Panels menu, which can be accessed through the Panels
command on the menu bar. A check mark next to the panel name in the Panels menu indi-
cates it is visible. To show a panel, click the panel name in the menu to add a check mark.
To hide a panel, click the name that contains the check mark to remove the check mark.
Adjusting the Workspace Layout EW 85

Close button
Turn on (a)
AutoHide
button panels on right side
are closed, freeing
up space in the
editing window
docked
panel
undocked
panel
(b)
maximized
panel
check marks
indicate open
panels
Panels
menu
Figure 2–16
To Close a Panel
The following steps close the panels on the right side of the window, giving you more space in the editing
window to format the images.
Close all
1 button
• Point to the Close all button

to the right of the Manage
Styles panel title bar
(Figure 2–17).
Figure 2–17
2
Close
• Click the Close all button to the button
right of the Manage Styles panel
title bar to close the Apply Styles
and Manage Styles panels
(Figure 2–18).
panel is
maximized to
fill space after
closing the two
styles panels
Figure 2–18
Adjusting the Workspace Layout EW 87

3
• Click the Close button on the
Toolbox title bar to close the
Toolbox (Figure 2–19).
all panels
closed; entire
image can be
viewed
Figure 2–19
To Display the Ruler

The image file you just inserted is too large and you will need to resize it. The Expression Web workspace can
include rulers to assist you with adjusting page layout. When you display the rulers, they appear along the left (verti-
cal) and top (horizontal) edges of the window and use pixels as measurement. In the following steps, you will display
the rulers so that you can position and size the images and margins.
1 View menu
• Click View on the menu bar to

open the View menu, then point
to Ruler and Grid to display the
submenu.
• Point to Show Ruler on the
submenu (Figure 2–20).
Why is the Ruler and Grid com-
Q&A
mand dimmed on my screen? Show Ruler

command
If the Ruler and Grid command
is dimmed, then you have dese-
lected the document window. Ruler and
Grid submenu
Click the inn image in the docu-
ment window and repeat step 1.
click anywhere
in the editing
window to close
the View menu
and submenu
Figure 2–20
2
• Click Show Ruler on the submenu
to display the rulers (Figure 2–21).
selected
Q&A
What should I do if my rulers are image

horizontal
already displayed? ruler
Show Ruler is a toggle command,
meaning that the same steps are
used to turn the rulers on and off.
If your rulers were already dis-
played, either skip these steps or
repeat them to display the rulers.
vertical ruler
Figure 2–21
Adjusting Proportions EW 89

Adjusting Proportions Changing Image Size
BTW
Resizing an image can
make your layout more
The relationship between an image’s height and width is an image’s proportions, or attractive but does not
aspect ratio. If an image’s proportions are changed, it can distort the image like a carnival change the file size of
funhouse mirror. To maintain the aspect ratio when resizing an image manually, press and the image. When you
make an image larger,
hold the shift key and then drag a corner sizing handle to adjust the height and width at
you risk decreasing the
the same time. When you change the height of an image in the Picture Properties dialog image quality because as
box, click the ‘Keep aspect ratio’ check box so that the width automatically adjusts pro- you increase the size on
portionately, and vice versa. After you have resized an image, you should resample it to the page, you are stretch-
improve the image quality by adjusting the resolution of pixels to the new image size. ing the existing pixels in
the file. Testing your site
in a browser can identify
problems with resized
images.
To Resize an Image
Expression Web uses the actual pixel width and height of the picture as the size when it inserts the image. You
can resize the physical space that the picture takes up by dragging the image using the sizing handles or by specify-
ing the height and width in pixels in the Picture Properties dialog box. In the following steps, you will resize the
image, then resample it.
Format menu
1
• Verify that the image is selected
and then click Format on the
menu bar to open the Format
menu, then point to Properties
(Figure 2–22).
Properties
command
Figure 2–22
2
• Click Properties to open the
Picture Properties dialog box.
Appearance tab
• Click the Appearance tab
(Figure 2–23).
original width original height
Figure 2–23
3
• If necessary, click the ‘Keep aspect
ratio’ check box to select it.
• Type 400 in the Width box to

decrease the figure’s size
(Figure 2–24).
height automatically
adjusted when you
resize the width
Keep aspect
ratio check box 400 is
entered
OK button
Figure 2–24
Adjusting Proportions EW 91

4
• Click the OK button to close the
• If necessary, click the picture to

select it and make sizing handles
appear around the perimeter.
• Position the pointer over the
lower-right handle so that it
changes to a double-headed
arrow.
• Press and hold the SHIFT key and
then drag the sizing handle up
and to the left so that the width
is approximately 350 pixels and
the height is approximately
263 pixels, according to the
ScreenTip (Figure 2–25).
resizing
ScreenTip
corner sizing
handle
Figure 2–25
5
• Click the Picture
Actions button
below the resized
image to open the
menu. Point to
Resample Picture
To Match Size
(Figure 2–26).
Picture Actions
button
resample
image quality
after resizing
Figure 2–26
6
• Click the Resample
Picture To Match
Size option button
to resample the
image, then click
outside the picture
to deselect it
(Figure 2–27).
resampled
image
Figure 2–27
Positioning an Image EW 93

7
• Press CTRL+S to
save the page
(Figure 2–28).
• Click the OK
button in the Save
Embedded Files dia-
log box to save the
embedded file.
after resizing
and resampling,
image needs to
be re-embedded
OK button
Figure 2–28
Other Ways
1. Double-click the picture to 2. Right-click the picture, then
open the Picture Properties click Picture Properties to
dialog box open the Picture Properties
dialog box
Positioning an Image
Changing the alignment and spacing of text and images allows you to create a flow to your
page that is visually interesting and guides the reader’s eye down the page. You can choose
to align to the left or right margin, or to the center of the page. When you align an image
that is surrounded by text, you should position the image in relation to the text. When
positioning text around an image, use the text wrapping feature to guide how the text
flows around the image. This method is preferable to using the alignment buttons on the
Common toolbar, which would adjust the image and text alignment at the same time.
To Align an Image
In the following steps, you will align the image to the right margin and wrap the text around it.
1
• Double-click the image to open Appearance tab
the Picture Properties dialog box. Right Wrapping
style
• Click the Appearance tab.
• Click the Right button in the
Wrapping style section of the
Appearance tab (Figure 2–29).
OK button
Figure 2–29
2
dialog box. Click anywhere out-
side of the image to deselect it.
• Press CTRL+S to save the page

image is
(Figure 2–30). right-aligned
Figure 2–30

Adding Borders and Spacing Padding
BTW
Padding is space between
There are many different borders available from the Borders tab of the Borders the image and its border.
When an image has been
and Shading dialog box that you can use to surround your image with lines, graphics, or
padded, you can see
effects. You can also create a custom border, or use the Borders button on the Common the page background
toolbar to add a basic border. between the edge of the
Image margins surround the top, bottom, left, and right edges of an image and image and the border.
separate it from adjacent text or images. Adding a margin to an image ensures that the Including padding is dif-
ferent from adding a
image has sufficient spacing around it. Margins are measured in pixels. margin.
To Add a Border to an Image

A border around an image can give it definition and distinction. As you click an option in the Style list of the
Borders and Shading dialog box, the Preview pane of the dialog box changes to show you what the border will look
like. The following steps add the double border style to the image.
1 Format menu
• Click the image to select it.

• Click Format on the menu bar
to open the Format menu, then
point to Borders and Shading
(Figure 2–31).
selected
image
Borders and
Shading
command
Figure 2–31
2
• Click Borders and Shading on the
Format menu to open the Borders
and Shading dialog box.
• Click double in the Style list to

select it (Figure 2–32).
I Experiment double
border style
• Click other options in the Style list

to view them in the Preview box,
then click double to select it.
OK button
Figure 2–32
3
• Click the OK button to close the double
dialog box and apply the border. border style
How can I reverse a change to

Q&A
the page?
To undo the last change you have
made to a page, press CTRL+Z
or click the Undo button on the
Common toolbar. Repeat this step
to undo multiple changes that
have occurred since your last save.
After you save a page, you cannot
undo the changes.
• Click outside the image to

deselect it (Figure 2–33).
• Press CTRL+S to save the page.

Figure 2–33
Other Ways
1. Select the image, click
the Borders button
arrow on the Common
toolbar, then click an
option from the gallery
to apply it

To Modify Image Margins
Adding a margin to an image increases the space between the image and the surrounding text and helps the
image to stand out. The following steps manually adjust the left and bottom image margins of the image using
ScreenTips to determine the size of the margin.
1
• Click the image to select it.
left margin so that the double-
headed arrow appears. The mar-
gin ScreenTip will appear, which
left margin
should be margin-left: (0 px). is 25 pixels
• Hold down the left mouse

button and drag the left mar-
gin border to the left until the
ScreenTip shows that it is 25 pix-
els (Figure 2–34).
Figure 2–34
2
• Release the mouse button to set
the left margin. Using the double-
headed arrow pointer, click and
drag the bottom margin border
down until the ScreenTip shows
that it is 20 pixels (Figure 2–35),
then release the mouse button.
expand
bottom
margin
Figure 2–35
3
• Release the mouse button to view
the expanded margin.
• Click outside of the image to

deselect it (Figure 2–36).

Q&A
Why did my picture resize when I

dragged the margin border?
Make sure that you position
the pointer over the edge of an
image, but not on one of its siz-
ing handles.
bottom margin
is expanded
Figure 2–36
Adjust File Sizes

Enhancing an Image
BTW
To adjust the file size or

file type of an image, you
need to use a graphic Enhancing, or improving, an image can be as simple as removing unnecessary parts by
design program, such as cropping, or it can be more involved, such as subtly changing the brightness of an image.
Expression Design. You can use a photo editing program to perform complex image editing and manipula-
tion, but Expression Web provides a comprehensive range of image editing tools on the
Pictures toolbar. Table 2–3 lists common image formatting options available, along with
other tools, on the Pictures toolbar (Figure 2–37).
change contrast
and brightness Color button
using these Bevel button
Insert Auto Thumbnail
buttons Restore
Picture button
Crop button button
button
Figure 2–37 Set Transparent Resample

Color button button
layer objects rotate or flip
using these images using
buttons these buttons
Enhancing an Image EW 99

Table 2–3 Image Enhancement Options
Enhancement Effect
Layering Stacks images on top of each other, specifying the order in which the images appear
Rotating or Flipping Rotates an image 90 degrees to the left (counterclockwise) or right (clockwise), or flips
the image horizontally or vertically
Adjusting Contrast Changes the contrast between the dark and light colors in your image
Changing Brightness Increases the brightness of the colors or decreases the brightness to make them duller
and more subtle
Cropping Removes unnecessary or unwanted parts of a picture
Beveling Adds a bevel, using shadows, so that the edges of an image appear to form a three-
dimensional frame, similar to a window pane or mirror
Adjusting Color Changes an image to grayscale (black and white) or to color washout (fade)
Resampling Changes the file size by increasing or decreasing the depth of pixel concentration after
resizing an image
Creating Transparency Makes a certain color in an image transparent so that the background can be seen; good
for images that have rounded edges and a square background; not possible for JPEG files
Identify changes to make to the images. Plan

Making changes to images can increase their relevance, appearance, and usability. Ahead
1. Relevance. Ensure that the image conveys the correct information. Cropping unneces-
sary portions helps the visitor focus on the relevant points of the picture and can increase
the white space or allow you to increase the image size.
2. Appearance. Applying formatting can make the image stand out from the rest of
the page.
3. Usability. Creating thumbnails that you can use in an image gallery can help compress
the image into a format that will download more quickly for the visitor.
To Add Transparency to an Image

An image that has rounded corners, like a logo, may appear with a white background when the image is
inserted into a page. To make the logo rounded, you can add transparency to the image background, which removes
the image background and makes the page background visible. The following steps replace the resort name in the
masthead with a logo. Logos do not typically need very descriptive alternate text. You will add transparency to the
logo and resize it.
1 Insert menu
• At the top of
the page, select
the words, Boon
Mountain Resort.
• Click Insert on the selected text

menu bar to open
the Insert menu.
From File
command
• Point to Picture,
then point to From
File (Figure 2–38).
Figure 2–38
2
• Click From File to
open the Picture
dialog box.
Navigate to the
folder that contains
your data files then
open the folder
Boon Mountain
Resort_images if
necessary.
• Click the innlogo

file (Figure 2–39).
innlogo
Insert button
Figure 2–39
3
applying transparency
• Click the Insert to the white will make
button to close the logo’s outside border
be the green oval
the Picture dia-
log box and open
the Accessibility
Properties dialog box.
innlogo.gif
• Type Boon Mountain
Resort logo in
the Alternate text
text box, then click
the OK button to
close the dialog box
(Figure 2–40).
Figure 2–40

4
• Double-click the logo to open the
Appearance tab
• Change the width to 400 pixels
(Figure 2–41).
height adjusts
automatically
OK button
width is
400 pixels
Figure 2–41
5
• Click the OK button to resize
the logo.
• Click the Picture Actions button

below the resized image and
then point to Resample Picture To
Match Size (Figure 2–42).
Picture Actions
button
resample
image quality
after resizing
Figure 2–42
6
• Click the Resample Picture To
Match Size option button to
resample the logo.
• Right-click a blank area of the Toolbar menu

Common toolbar to display the
Toolbar menu and then point to
Pictures (Figure 2–43). Pictures
toolbar
command
What if my Pictures toolbar was
Q&A
already displayed?
Opening and closing a toolbar is a
toggle command. If your Pictures
toolbar was already displayed,
either skip the second bullet of
Step 6 or repeat it to redisplay
the toolbar.
Figure 2–43
7
• Click Pictures to Set Transparent
open the Pictures Color button
toolbar.
• Click the Set

Transparent Color
Pictures
button on the toolbar
Pictures toolbar
(Figure 2–44).
Figure 2–44

8
• Using the
transparency pointer,
click the white
logo background
to remove it.
• Click anywhere in
the editing win-
dow to deselect the
image (Figure 2–45).
Q&A
Why is my Pictures
white logo
toolbar in the mid- background
is removed
dle of the screen?
Dock the toolbar
to get it out of
the way by drag-
ging it beneath the
Common toolbar
until it docks. Figure 2–45
The Clipboard
Instead of recreating an element, such as a navigation bar, on each page, you
can copy the element to the Clipboard and paste it in other locations. The Clipboard
temporarily stores text or page elements so that you can move or copy them to other
pages or locations.
To Copy an Image to Other Pages

When creating a Web site, you should repeat certain elements throughout the site to help reinforce the site’s
message. The following steps copy the modified logo on the default.html page to the Clipboard, and paste it onto
the Accommodations, Attractions, and Directions pages in the Boon Mountain Resort site.
1 Edit menu
• Click the logo to

select it.
• Click Edit on the

menu bar to open
the Edit menu and Copy command
then point to Copy
(Figure 2–46).
• Click Copy to copy

the logo to the logo to be copied
Clipboard. to the clipboard
Figure 2–46
2
• Double-click the
accommodations.
html page in the accommodations
Folder List page tab
Folder List to open it
(Figure 2–47).
accommodations.html
page
Figure 2–47
3 Edit menu
• Select the words, Boon

Mountain Resort, on the
Accommodations page.
• Click Edit on the menu bar to

open the Edit menu
and then point to Paste
Paste
(Figure 2–48). command
• Click Paste to insert logo will

the logo on the replace text
Accommodations page.
Figure 2–48

4
• Repeat Steps 2 and 3
to insert the logo
on the Attractions
and Directions pages
(Figure 2–49).
logo is copied
and pasted onto
directions page
Figure 2–49
5 File menu
• Click File on the menu

bar to open the File
menu
(Figure 2–50).
Save All command

will save changes
to all edited pages
Figure 2–50
6
• Click Save All to save
the changes you
made to all the pages logo with
transparency
in the site applied will
be embedded
(Figure 2–51). into the site
• Click the OK
button to save the
embedded image if
necessary.
OK button
Figure 2–51
Other Ways
1. Press CTRL+C to copy 2. Press CTRL+V to paste
selected text or images to selected text or images
the Clipboard from the Clipboard
To Crop an Image
Digital images can be cropped, or trimmed, to show only the relevant portions. Cropping an image is done
manually to specify exactly what parts of the image you want to crop. When you are cropping an image, a box with
sizing handles indicates the area that will remain after you crop. You can adjust the cropped area by dragging the
cropping handles until you are satisfied. The following steps insert an image on the Accommodations page and
crop it.
1
• Click the accommodations.html
tab to make it the active Web
page.
• Click between the masthead and

Accommodations to place the
insertion point (Figure 2–52).
accommodations.html tab
insertion point
Figure 2–52
2 Insert menu

to open the Insert menu, point
to HTML to open the HTML <div> command
submenu, and then point to <div>
(Figure 2–53).
Figure 2–53

3
• Click <div> to insert a new div for
the image. Insert Picture
from File button
• Click in the new div, if necessary,

to place the insertion point
(Figure 2–54).
image will be
placed in new div
Figure 2–54
4
• Click the Insert Picture from File
button on the Pictures toolbar to
open the Picture dialog box.
• Click the guestroom1 JPEG image

to select it (Figure 2–55).
guestroom1
image file
Insert button
Figure 2–55
5
• Click the Insert button to open the
Accessibility Properties dialog box.
• In the Alternate text text box
within the Accessibility Properties
dialog box, type Guest room
decorated with quilts and
artwork (Figure 2–56).
alternate text
OK button
Figure 2–56
6
• Click the OK
button to close
the Accessibility
Properties dialog
box and insert
the picture
(Figure 2–57).
image is too
large and needs
to be cropped
Figure 2–57

Crop button
7
• Click the image to
select it.
• Click the Crop button area outside of
on the Pictures tool- the dashed line
will be removed
bar to display the
cropping area.
cropping
resize handle
• Using the use the rulers to
adjust your cropping
double-headed marks as closely as
possible to the figure
arrow pointer,
drag the cropping
handles to adjust
the cropping area so
that it appears simi-
dashed lines
lar to Figure 2–58. indicate cropping
area (cropping box)
Figure 2–58
8
• Click the Crop
button to accept the Crop button
cropping changes
you have made
(Figure 2–59).
image is
cropped
Figure 2–59
9
Center button
• Click the Center
button on the
Common toolbar
to center the image
between the Web
page margins
(Figure 2–60).
image is
center-aligned
Figure 2–60
10
• Double-click the image to open
the Picture Properties dialog box. Appearance tab

• Type 350 in the Width text box
(Figure 2–61).
Q&A
Why does the height of my

resized image differ?
Depending on the exact
cropping you did in Step 6, your height adjusts
to 231 pixels
image height may differ slightly.
This is OK.
OK button
change
width to 350
Figure 2–61
Controlling Image Files EW 111

11
• Click the OK button to resize the
guest room image.
• Click the Picture Actions button

below the resized image, and
then point to Resample Picture To
Match Size (Figure 2–62).
Picture Actions
button
resample
image quality
after resizing
Figure 2–62
12
• Click the Resample Picture To
Match Size option button to modified image
will be embedded
resample the image. into the site

(Figure 2–63).
• Click the OK button to save the

embedded image.
OK button
Figure 2–63
Controlling Image Files Internet Connection

BTW
Speed
Depending on a user’s
Web sites need to be convenient for visitors to use; otherwise, the users will move on to other Internet connection, the
sites. Including too many large image files in a Web page can make a page slow to download speed at which a site’s
into a visitor’s browser, leading to frustration. Recall that the file size in bytes is the determin- contents download into
his or her browser can
ing factor; the visual size of the image on the page does not affect its download speed.
vary. You should test your
sites using multiple con-
nection types, including
Thumbnail Images high-speed connections
such as a digital sub-
A thumbnail version of an image file is a small rendition that serves as a preview of scriber line (DSL) or cable,
the large version. Thumbnails also have smaller file sizes, which reduces download time. and slower connections
If the visitor clicks the thumbnail image, the larger version opens in its own window. such as a dial-up modem.
Thumbnail images are useful when displaying multiple pictures, such as in a

product catalog.
To Create a Thumbnail
Resizing the image or displaying a thumbnail, a smaller version of an image, frees up room on the Web page.
When you use Expression Web to create an automatic thumbnail, Expression Web does three things: changes the
image on the page to a smaller version; saves the new version with the filename imagename_small.jpg (where image-
name is the original image’s filename); and creates a new window in which the larger version of the thumbnail opens
when the user clicks it. The following steps create a gallery of images for different guest rooms and resort areas.
1
page tab to make it the active
Web page, if necessary.
• Scroll if necessary, then position

the insertion point at the end gallery of thumbnail
images will appear in
of the last line item in the the new paragraph
bulleted list.
• Press ENTER twice to create a new

paragraph tag, into which you
will insert a gallery of thumbnails
(Figure 2–64).
Figure 2–64
2 Insert Picture
from File button
• Click the Insert
Picture from
File button on the
Pictures toolbar to
open the Picture dia-
log box.
• Click the
guestroom2 image
(Figure 2–65).
guestroom2
Insert button
Figure 2–65

3
alternate text
• Click the Insert button to open
the Accessibility Properties
dialog box.

dialog box, type Guest room OK button
with antique doll collection
(Figure 2–66). Figure 2–66
4
dialog box. Auto Thumbnail
button
• In the editing window, click the

image to select it.
• Click the Auto Thumbnail button

on the Pictures toolbar to create a
thumbnail (Figure 2–67).
thumbnail
of image
Figure 2–67
5
• Click to the right of the image
to deselect it, then press TAB
to insert space before the next
thumbnail (Figure 2–68).
insertion
point after
pressing TAB
Figure 2–68
6
• Click the Insert Picture from File
button on the Common toolbar
to open the Picture dialog box.
• If necessary, drag the scroll box
down, then click the premier-
sittingroom image (Figure 2–69).
scroll
box
premiersittingroom
Insert button
Figure 2–69
7
• Click the Insert button to close the
Picture dialog box.

dialog box, type Cozy sitting
area in premier suite
(Figure 2–70). alternate text
OK button
Figure 2–70

8
• Click the OK
button to close the Auto Thumbnail
button
dialog box.
• Click the image

in the editing
window to select it,
then click the
Auto Thumbnail
button on the
Pictures toolbar to
create a thumbnail
(Figure 2–71).
space between
two thumbnails
Figure 2–71
9
• Following the
instructions in
Steps 5–8, create
thumbnails for
the garden image
with the alternate
text Lush peren-
nial bed, for the
cabinporch image
with the alternate
text Each cabin
has a screened
porch, and for the
cabinroom image
with the alternate
text Cabin bedroom
with bookshelves
(Figure 2–72).
gallery of
thumbnails
is complete
Figure 2–72
10
(Figure 2–73).
• Click the OK button to save the

embedded files.
all inserted and

thumbnail images
are embedded
OK button
Figure 2–73
Other Ways
1. Press CTRL+T to convert
a selected image into a
thumbnail
To Create a Folder for Images

To keep your site organized and help make updates easier, you should store all media files, including images
and video, in a common folder. When you move an image using the Folder List, Expression Web automatically
adjusts any coded references to the image file location so that the image can be found and placed appropriately on
the page when viewed in a browser. You can create a separate folder for each page that includes the page and any
assets, or for a smaller site, you can create one folder for all of the images. The following steps create a folder for
storing files and move multiple images into it.
1 File menu
• Click anywhere in the Folder

List to activate it.
New submenu
• Click File on the menu bar, point
to New, then point to Folder
(Figure 2–74).
Folder
command
Figure 2–74

2
Folder List
• Click Folder to create a new folder
in the Folder List (Figure 2–75).
new folder
is created
Figure 2–75
3
• Type images, then press ENTER to
name the folder (Figure 2–76).
images folder
is named
Figure 2–76
4
• Click the Site View tab to display
the site contents in the editing
Site View
window (Figure 2–77). tab displays
site contents
Q&A
Why can’t I see the full file names

on my screen?
The column needs to be wid-
ened to see the full file names.
Move the pointer between the
Name and Size column headers,
and then double-click when the
pointer becomes a two-headed
arrow.
Figure 2–77
5
• Click the Type column header to
sort the files and folders by type
(Figure 2–78).
• Click the innlogo.gif image

filename to select it. Type column
header
innlogo.gif file
Figure 2–78

6
• Drag innlogo.gif to the
images folder in the Folder List
(Figure 2–79).
innlogo.gif
image is moved
to images folder
Figure 2–79
7
• Click the first JPG image, press
and hold SHIFT, then click the
last JPG image to select all of the
image files (Figure 2–80).
all JPG images

are selected
Figure 2–80
8
• Drag the selected images to the
images folder in the Folder List
(Figure 2–81).
Why does a dialog box open
Q&A
and close while the images are

being moved?
The Rename dialog box opens
while the image files are being all images
are moved to
moved, then closes after. It lets images folder
you know that the file path for
all of the files you are moving
is being automatically renamed
and all links to the files are being
updated automatically.
Figure 2–81
Browser Bookmarks Adding Navigational Links to a Site

BTW
Expression Web calls

links within a page book- The advantage of looking for information on the Web is that you can easily jump to related
marks, but you should information with a simple mouse click. Using hyperlinked text and images, visitors to a site
not confuse them with
can view the information that is relevant to their experience, interests, and needs. Within
bookmarks used by
browsers, which save a your site, you can use internal links called bookmarks to let visitors move around within
page to a Favorites list. long pages. A bookmark is a page anchor that is attached to a specific portion of the page.
Every page in a site should have a navigation bar that appears in the same location
Search Boxes
BTW
on the page. The navigation bar usually appears vertically on the left side of the page or
Many large sites include
horizontally under the masthead. The navigation bar for a small site is a group of links to
search boxes in addi-
tion to navigation bars. every main page. In a larger site, the navigation bar contains links for each information
Search boxes are forms topic in the site, which take you to a page that gives you more information and allows you
that allow a visitor to to drill down further to reach the information you want.
enter keywords and find
External links point the visitor’s browser to a site that is outside of your own Web
information within the
site that matches the site, but that could be useful or interesting for your site’s visitors. In addition to browsing
search criteria. related sites of interest, you can use links to open and download files. E-mail links allow
users to write and send an e-mail to the site’s management or other recipients using the
visitor’s e-mail editing program. E-mail links are called mailto links.
Plan Determine the necessary internal and external links.

Ahead Web site visitors should easily be able to find the information they seek, whether they are
navigating within your site or getting information from other sources.
• Add internal links to create a navigation bar and include the navigation bar in the same
place on every page.
• Add external links to sites that might be useful for your visitors.
• When a page is too long to be viewed on the screen without scrolling, consider adding
bookmarks so visitors can jump to locations on the same page.
• If appropriate, include e-mail links for your visitors.
Adding Navigational Links to a Site EW 121

To Add an Internal Link
The following steps create the links in the navigation bar to each of the pages in the site.
1
• Click the default.html page tab to
make it the active Web page.
default.html
page tab
• Select the word, Home, in the
navigation bar (Figure 2–82).
Home
selected
when inserting a hyperlink,

select only the word and
not the space(s) after it
Figure 2–82
2 Insert menu

to open the Insert menu and then
point to Hyperlink (Figure 2–83).
Hyperlink
command
Figure 2–83
3 Existing File or
• Click Hyperlink Web Page button
to open the
the text you
Insert Hyperlink selected on the
page appears here
dialog box, then
click the Existing File
or Web Page button
if necessary. your filenames
and order of
files may vary
• Click the default
page in the list
default
to select it as the
hyperlink target OK button
the filename
(Figure 2–84). appears in the
Address text box
Why are there
Q&A
two versions of
some files, as
shown in the Insert Figure 2–84
Hyperlink dialog box
in Figure 2–84?
If a file is open, there
may be an option to link
to the open or the saved
file. Click either to create
a link to the page.
4
Insert Hyperlink dialog box and
format the word, Home, as a
hyperlink, then click to the right
of the new hyperlink to deselect it
(Figure 2–85).
Why doesn’t the link work when I
Q&A
click on it in the editing window?

To test a link in the editing
window, press CTRL, then click
the link.
inserted
hyperlink
Figure 2–85

5
• Select the word, Accommodations,
in the navigation bar.
• Press CTRL+K to open the Insert

Hyperlink dialog box.

the text you
(open) page in the list to select it as selected on the
page appears here
the hyperlink target (Figure 2–86).
accommodations.html (open)
OK button
the filename of
the selected page
appears in the
Address text box
Figure 2–86
6
Insert Hyperlink dialog box and
display the new hyperlink, then
click to the right of the hyperlink
to deselect it (Figure 2–87).
inserted
hyperlink
Figure 2–87
7
• Following the
instructions in
Steps 5 and 6,
create a hyperlink
from the word,
Attractions, in the
navigation bar,
to the attractions.
html page.
• Following the
instructions in
Steps 5 and 6,
create a hyperlink
from the word,
Directions, in the
navigation bar, to
the directions.html completed
navigation bar
page, then click
to the right of the
Directions hyperlink Figure 2–88
to deselect it
(Figure 2–88).
8
• On the Quick Tag Selector,
click the navigation bar div tag,
<div.style5>, to select the div
Quick Tag
(Figure 2–89). Selector
Why does my div name differ?

Q&A
tag for
navigation div
Div names change based
on the actions and order of
completion. Your div names
might differ slightly.
div is selected
Figure 2–89

9
• Click the Center Center button
button on the
Common toolbar to
center the navigation
bar (Figure 2–90).
• Press CTRL+S
to save the
default.html page.
navigation bar
is centered
Figure 2–90
To Test Internal Links

The following steps open the page in a browser window and test the links in the navigation bar. Once you have
confirmed that the links work, you can copy the navigation bar to the other pages in the site.
1
Preview in Windows
• Point to the Preview in Internet Explorer 8 button
Windows Internet Explorer 8
button (Figure 2–91).
My button has a different name.
Q&A
Depending on your default

browser or past use, your but-
ton name may have a different
browser name or version. Click the
button to open in your default
browser, or click the button arrow
to see a list of browser choices.
Figure 2–91
2
• Click the Preview in
browser button to
display the page
in the browser
(Figure 2–92).
Accommodations link
Figure 2–92
Maximize button
3 Back button
• Click the
Accommodations
link in the
Accommodations page
navigation bar
to open the
Accommodations
page (Figure 2–93).
Q&A
Why is my browser
window not
maximized?
Click the Maximize
button in the upper-
right corner of the
browser window
to maximize it.
• Click the browser
Back button to
return to the
default page.
Figure 2–93

Close button
Back button
4
• Test the remaining
two links; click the
Attractions link,
Directions page
click the Back but-
ton, and then click
the Directions link
(Figure 2–94).
• Click the Close button

to close the browser
window to return to
Expression Web.
Figure 2–94
To Copy and Paste Internal Links

After you have verified that the navigation bar links work, you will add it to each page in the site in the same
location. For layout purposes, a placeholder navigation bar appears on each page, listing the pages but without
any links. The following steps replace the placeholder navigation bar on the Accommodations, Attractions, and
Directions pages.
1
• Select the naviga-
tion div, if necessary. attractions.html
tab
• Press CTRL+C to copy
the entire navigation
div to the Clipboard.
• Click the attractions.

html tab to make it
the active Web page.
• Click the placeholder placeholder

navigation bar, and navigation bar
then click the div.

style5 tab to select
the div (Figure 2–95).
Figure 2–95
2
• Press CTRL+V to
insert the naviga-
tion bar on the
Attractions page
(Figure 2–96).
Q&A
Why isn’t my
navigation bar
centered?
If the pasted
navigation bar isn’t
centered, select the
div, then click the
Center button
on the Common icon indicates
toolbar. Clipboard
was used to
pasted navigation paste text
links on the
Attractions page
Figure 2–96
3
• Follow Steps 1 and 2
to insert the naviga-
tion bar below the
masthead on the
Accommodations
and Directions pages
(Figure 2–97).
When I paste the
Q&A
navigation bar onto

the accommoda-
tions.html page, the
formatting does not
match the page.
When copying and
pasting formatting pasted
between pages, navigation
links
errors can occur if the icon indicates
Clipboard was
page already includes used to paste text
a style with the same
name as the one
being pasted. If this
occurs, reapply the
formatting to the
pasted text , for
example, change the
font family and size. Figure 2–97

4 File menu
• Click File on the menu bar to

open the File menu, and then
point to Save All (Figure 2–98).
• Click Save All to save all open

pages at once.
Save All
command
Figure 2–98
To Add an External Link

Adding external links allows you to include access to resources whose sites and content you do not control.
Such links can help visitors to your site gain information that might enhance their experience on your site or with
your organization or in a tab within the browser window. The following steps insert links to attractions near the
Boon Mountain Resort.
1 Insert menu
• Click the attractions.

html tab to display the
Attractions page. attractions.html tab
• Select the text in the first

Hyperlink
bulleted list item. command
• Click Insert on the menu

bar to open the Insert
menu, and then point to
Hyperlink (Figure 2–99).
first bulleted
list item
Figure 2–99
2
• Click Hyperlink to open the Insert
Hyperlink dialog box. the text you
selected on the
• In the Address text box, type page appears here
http://www.gastateparks.
org/info/littlewhite to
create a link to a page in the
Georgia State Parks Web site
(Figure 2–100). Address text box;
enter URL for
Web address here
OK button
Figure 2–100
3
Insert Hyperlink dialog box
(Figure 2–101).
completed
hyperlink
Figure 2–101
4
• Select the text in the second
bulleted list item (Figure 2–102).
selected bullet text
Figure 2–102

5
• Press CTRL+K to open the Insert
Hyperlink dialog box. the text you
selected on the
• In the Address text box, type page appears here
http://www.gastateparks.
org/info/crookriv to
create a second external link
(Figure 2–103).
Address text box;
enter URL for
Web address here
OK button
Figure 2–103
6
to close the Insert
Hyperlink dialog
box, then click to
the right of the
hyperlink to deselect
it (Figure 2–104).
Why can’t I add a
Q&A
link to the text I

new hyperlink
selected?
Make sure that you
have not selected a
page element, such
as a line item or a
div. Hyperlinks can
only be added to
text and images.
Figure 2–104
7
• Repeat Steps 4–6 to create a link
from the third bullet to http://
www.gastateparks.org/info/
etowah.
• Repeat Steps 4–6 to create a link

from the fourth bullet to http://
www.gastateparks.org/info/
blackrock (Figure 2–105).

completed
external links
Figure 2–105
To Test External Links

The following steps open the page in a browser window, and test the links in the navigation bar.
1
• Press F12 to display the
Attractions page in the browser.
• Click the first bullet link in the list external link

to open the Little White House opens site
Web page (Figure 2–106).

Why did a new browser window
Q&A
or tab open when I clicked the

link? if the site has been
updated, your
Depending on your browser and page will differ
security settings, a new window
or tab may open when you click
an external link from a Web page
saved on your computer.
Figure 2–106

Close button
2 Back button
• Click the Back

button or click the
Close button if your
browser opened
the page in a new
window. Then click
the second bullet
link to test it, click
the Back button, and if the site has been
updated, your
repeat for the third page will differ
and fourth bullet
links (Figure 2–107).
Figure 2–107
3
• Click the Close button on the
browser window.
• Click the ‘Close all tabs’ button,
if necessary, to close the
Internet Explorer dialog box
(Figure 2–108).
• Click the Close button on any

other open browser windows
to return to Expression Web,
if your browser uses
if necessary. tabbed windows,
click Close all tabs in
the dialog box
Figure 2–108
To Add a Bookmark
When creating a bookmark, first you assign the bookmark text or image to which you want to jump (the link’s
target or destination), then you can insert the bookmark hyperlink in the desired location on the page. The follow-
ing steps add a bookmark link at the bottom of the Directions page that returns to the top of the page.
1 Insert menu
• Click the directions.

html tab to make it
Bookmark
the active Web page. command directions.html tab
• Select the words,

Natural beauty
atop the Blue Ridge
Mountains, below
the logo.
• Click Insert on the

menu bar to open
the Insert menu, selected text
and then point
to Bookmark
(Figure 2–109).
Figure 2–109
Other Ways
1. Press CTRL+G to open
the Bookmark
dialog box
2
• Click Bookmark to open the
Bookmark dialog box.
• Type Top of Page in the Bookmark bookmark

reads Top
Bookmark name text box to name text box
of Page
specify the wording that will
appear as the link (Figure 2–110).
OK button
Figure 2–110

3
to close the
Bookmark dialog
box (Figure 2–111).
bookmark text
is underlined
Figure 2–111
4
• Scroll to the bot-
tom of the page
bookmark will
and then click at be inserted into
new <p> tag
the end of the last
bullet list item
(below Directions
from Redhat County
Airport), then press
ENTER twice to create
a new paragraph tag
(Figure 2–112).
Figure 2–112
5
• Press CTRL+K to open
the Insert Hyperlink
dialog box.
• Click the Place in This

Document button Top of
to display the list of Page link
bookmarks. Place in This

Document
button
• Click Top of Page to
select it as the
target bookmark
(Figure 2–113). OK button
Figure 2–113
6
to close the dia-
log box and insert
the bookmark link
(Figure 2–114).
inserted
bookmark link
Figure 2–114
7
• Press CTRL, then
click the Top of
Page link to test
the bookmark link
(Figure 2–115).
• Click the Save

button on the
Common toolbar
to save the page.
dashed underline
indicates bookmark
Figure 2–115
Forms vs. E-Mail Links

BTW
There are programs that

search the Web collecting
e-mail addresses to use
in mass e-mailings. Some
sites avoid including
e-mail links and instead
use forms to collect user
feedback and requests
for this reason.

To Add an E-Mail Link
An e-mail link opens a new, blank e-mail window using the visitor’s e-mail program. In the following steps,
you will add an e-mail link to your e-mail address for requests for room rates.
1
page tab so it is the active Web
page tab in the editing window.
• In the last bullet item, select the

word, e-mail, to make it a hyperlink.
type your e-mail
• Press CTRL+K to open the Insert address here
Hyperlink dialog box. type e-mail
subject here
• Click the E-mail Address button.

• In the E-mail address text box,
type mailto: followed by your
OK button
e-mail address.
E-mail Address button
• In the Subject text box, type
Rooms and Rates (Figure 2–116).
Why is there no e-mail address
Q&A
in my ‘Recently used e-mail

addresses’ text box?
The text box is empty because
you are using a fresh install of
Expression Web 3. Therefore, there Figure 2–116
have been no previously used
e-mail addresses.
2
• Click the OK button to close
the Insert Hyperlink dialog box
and create the mailto link
(Figure 2–117).
completed
e-mail link
Figure 2–117
The e-mail window shown here is Microsoft

3 Outlook 2007. If you are using a different
e-mail program, your screen will differ.
• Press F12 to display the page in
the browser.
• Scroll down and click the e-mail

link to test it.
Send button
• If an Internet Explorer Security

your e-mail
dialog box appears, click the address
appears here
Allow button.
• The Outlook e-mail window may subject is already filled in

appear (Figure 2–118). based on information entered
when you created the link
• Close the e-mail window without

saving changes if it opens. Figure 2–118
• Close the browser window to return to Expression Web.

Why do I get an error message when I click the e-mail link?
Q&A
Your e-mail program or browser might not be configured to process mailto links.
I Experiment
• If an e-mail window opens, click the Send button to send the e-mail to yourself.
To Add a ScreenTip
A ScreenTip is a window containing descriptive text that appears when you position the pointer over a button
or link. Adding a ScreenTip to the e-mail address lets users know that they can contact you with any questions. The
following steps add a ScreenTip to the mailto link.
1
• Select the e-mail name of dialog box
changes because you
link. are modifying an
existing hyperlink
• Press CTRL+K to open

the Edit Hyperlink
ScreenTip
dialog box button
(Figure 2–119).
Figure 2–119
2
• Click the ScreenTip button to
open the Set Hyperlink ScreenTip
dialog box.
type ScreenTip text
• In the ScreenTip text text box, OK button
type Contact us by e-mail

with any questions
(Figure 2–120).
Figure 2–120

3
• Click the OK
button to close
the Set Hyperlink
ScreenTip dialog box
(Figure 2–121).

to close the Edit
Hyperlink dialog box.
• Press CTRL+S to save

the page. OK button
Figure 2–121
To Preview the Site

In the following steps, you will preview the site in your browser to view all of the pages and view and test
the ScreenTip.
1
your screen will
• Click the default. differ if you are not
html tab to make it using 1024 3 768
resolution
the active Web page.
• Press F12 to open the

page in a browser
(Figure 2–122).
navigation bar
contains links to other
pages in the site
inn.jpg file is
aligned and
formatted
Figure 2–122
2
• Click the Accommodations link on
the navigation bar.

e-mail link to view the ScreenTip
(Figure 2–123).
thumbnail
Figure 2–123
3
• Click the second
filename for image is
thumbnail image premiersittingroom.jpg
to open the larger Close button
image (Figure 2–124).
• Click the Close button

to close the browser
window and return
to Expression Web.
larger image
Figure 2–124
To Close a Site and Quit Expression Web

• Click Site on the menu bar, then click Close.
• Click File on the menu bar, then click Exit.
Learn It Online EW 141

Chapter Summary
In this chapter, you have learned how to use images to enhance and add value to Web pages. You used Expression
Web to insert, align, and format images. You learned that controlling image file size and organization is accom-
plished through the use of thumbnail images and folders. You have also learned to add different types of links,
including internal, external, and mail links, to your site. The items listed below include all the new Expression Web
skills you have learned in this chapter.
1. Open a Web Site (EW 77) 12. Create a Thumbnail (EW 112)
2. Insert an Image (EW 80) 13. Create a Folder for Images (EW 116)
3. Close a Panel (EW 85) 14. Add an Internal Link (EW 121)
4. Display the Ruler (EW 87) 15. Test Internal Links (EW 125)
5. Resize an Image (EW 89) 16. Copy and Paste Internal Links (EW 127)
6. Align an Image (EW 94) 17. Add an External Link (EW 129)
7. Add a Border to an Image (EW 95) 18. Test External Links (EW 132)
8. Modify Image Margins (EW 97) 19. Add a Bookmark (EW 134)
9. Add Transparency to an Image (EW 99) 20. Add an E-Mail Link (EW 137)
10. Copy an Image to Other Pages (EW 103) 21. Add a ScreenTip (EW 138)
11. Crop an Image (EW 106) 22. Preview the Site (EW 139)
For current SAM information, including versions and content details, visit SAM Central
(http://samcentral.course.com). If you have a SAM user profile, you may have access to
hands-on instruction, practice, and assessment of the skills covered in this chapter. Since vari-
ous versions of SAM are supported throughout the life of this text, check with your instructor
for the correct instructions and URL/Web site for accessing assignments.
Learn It Online
Test your knowledge of chapter content and key terms.
Instructions: To complete the Learn It Online exercises, start your browser, click the Address bar, and
then enter the Web address scsite.com/ew3/learn. When the Expression Web Learn It Online
page is displayed, click the link for the exercise you want to complete and then read the instructions.
Chapter Reinforcement TF, MC, and SA Who Wants To Be a Computer Genius?

A series of true/false, multiple choice, and short An interactive game that challenges your
answer questions that test your knowledge of the knowledge of chapter content in the style of a
chapter content. television quiz show.
Flash Cards Wheel of Terms

An interactive learning environment where An interactive game that challenges your
you identify chapter key terms associated with knowledge of chapter key terms in the style of the
displayed definitions. television show Wheel of Fortune.
Practice Test Crossword Puzzle Challenge

A series of multiple choice questions that test your A crossword puzzle that challenges your
knowledge of chapter content and key terms. knowledge of key terms presented in the chapter.
Apply Your Knowledge

Reinforce the skills and apply the concepts you learned in this chapter.
Adding Images and Links

Instructions: Start Expression Web. Open the Web site, Apply 2-1 Photography, from the Data Files
for Students. See the inside back cover of this book for instructions for downloading the Data Files for
STUDENT ASSIGNMENTS
Students, or see your instructor for information about accessing the required files.
The Web site you open contains a home page with formatting and text. Open the default.html
file and add and format an image, create thumbnails, and add an e-mail link with a ScreenTip so that
the page looks like Figure 2–125.
Figure 2–125
Perform the following tasks:

1. Open the default.html Web page.
2. Click before the words, Quiet moments.
3. Click the Insert Picture from File button on the Common toolbar.
4. Select the JPG image flowerphoto from the Apply 2-1 images folder, then click Insert.
5. Type Lily on bush in the Alternate text text box, then click OK.
6. Select the image, right-click the image, then click Picture Properties from the shortcut menu.
Extend Your Knowledge EW 143

7. Click the Appearance tab, click the Left Wrapping style button, then click the OK button.
8. Press the shift key and drag the lower-right sizing handle until the picture is resized to approxi-
mately 200 3 161 pixels.
9. Drag the right margin to resize the right margin to 40 pixels.
10. Drag the bottom margin to resize the bottom margin to 30 pixels.
11. Click the Bevel button on the Pictures toolbar to add a bevel to the image.
12. Save the default.html page, then click OK to save the embedded picture.
13. Click before the words, Here are some images, then press enter three times.
14. Click anywhere below the line that begins, Here are some images, then double-click the div tag in
STUDENT ASSIGNMENTS
the Toolbox.
15. Insert the JPG image beachphoto1, then type Two girls on a beach in the Alternate text
text box, and then click OK.
16. Select the image, then click the Auto Thumbnail button on the Pictures toolbar.
17. Click to the right of the image, then press tab.
18. Insert the JPG image beachphoto2, type Girl in surf in the Alternate text text box, create a
thumbnail, click next to the image, then press tab.
19. Insert the JPG image beachphoto3, type Girl with towel in the Alternate text text box, then
create a thumbnail.
20. Save the default.html page, then click OK to save the embedded pictures.
21. Select the words, Contact me.
22. On the Insert menu, click Hyperlink.
23. Click the E-mail Address button, then type your e-mail address in the E-mail address text box.
24. Click the ScreenTip button, type your e-mail address in the ScreenTip text text box, then click the
OK button twice to close the open dialog boxes.
25. Save and then preview the site, and test the thumbnails and links.
26. Change the site properties, as specified by your instructor. Close the site.
27. In Windows Explorer, change the site folder’s name to Apply 2-1 Photo Site. Submit the revised
site in the format specified by your instructor.
Extend Your Knowledge

Extend the skills you learned in this chapter and experiment with new skills. You may need to
use Help to complete the assignment.
Creating Links to Images and Bookmarks

Instructions: Start Expression Web. Open the Web site, Extend 2-1 Music Festival, from the Data Files
for Students. See the inside back cover of this book for instructions for downloading the Data Files for
Students, or see your instructor for information about accessing the required files.
You will enhance the Web page to match the one shown in Figure 2–126.
Continued >
Extend Your Knowledge continued

STUDENT ASSIGNMENTS
Figure 2–126
Perform the following tasks:

1. Use Help to learn about inserting a link to a file.
2. Open the default.html page, position the insertion point before the words, Incoming Flight, at the
beginning of the second paragraph, then press enter.
3. Click above the words, Incoming Flight, to make the empty paragraph tag active. Insert the GIF
image bandlogo from the folder Extend 2-1 images, and type Incoming Flight band logo
as the Alternate text.
4. Center the image on the page.
5. Select the image, then open the Insert Hyperlink dialog box.
6. Click the Existing File or Web page button if necessary, type http://www.incomingflight
band.com in the Address text box, then click the OK button. (Note: This Web page does not exist.
You will get an error message when you test it.)
7. Select the words, Sign up, then open the Insert Hyperlink dialog box.
8. Click the Existing File or Web Page button if necessary, click signup_form, then click the OK button.
9. Save the default.html page and the embedded file, preview the page and test all links, then close the
browser window.
10. Change the site properties, as specified by your instructor, and then close the site. In Windows
Explorer, change the site folder’s name to Extend 2-1 Music Site. Submit the revised site in the for-
mat specified by your instructor.
Make It Right EW 145

Make It Right
Analyze a site and correct all errors and/or improve the design.
Placing and Formatting Images

Instructions: Start Expression Web. Open the Web site, Make It Right 2-1 Swim Club, from the Data
Files for Students. See the inside back cover of this book for instructions for downloading the Data
Files for Students, or see your instructor for information about accessing the required files.
The site has one image that is large, is not aligned with the text, and has no formatting. In addi-
tion, there is no link to the second page of the Web site, which gives more information on swim lessons,
STUDENT ASSIGNMENTS
and no way to contact the director by sending him an e-mail. Position the image to the right of the
bulleted list, resize (approximately 300 pixels wide and maintain aspect ratio) and format it, add a link
from the swim lesson text to the swim lesson page, add an e-mail link to the director’s name (jeremiah.
[email protected]), add a 5-pixel border to the image, and add two empty paragraphs before the
footer, as shown in Figure 2–127.
Change the site properties, as specified by your instructor. In Windows Explorer, change the site
folder’s name to Make It Right 2-1 Swim Club Site. Submit the revised site in the format specified by
your instructor.
Figure 2–127
In the Lab
Design and/or format a Web site using the guidelines, concepts, and skills presented in this
chapter. Labs are listed in order of increasing difficulty.
Lab 1: Creating a Navigation Bar and Inserting an Image

Problem: You work part-time at a small bike repair shop. Your boss has asked you to add images and
STUDENT ASSIGNMENTS
create a navigation bar for the shop’s Web site. Add images and links to the page shown in
Figure 2–128.
Figure 2–128
Instructions:
1. Start Expression Web.
2. Open the Web site Lab 2-1 Bike Shop.
3. Open the default.html page.
4. Position the insertion point in the line above the words, Dear Customers, then insert a new div.
5. Insert the GIF image kickstands_logo from the Lab 2-1 images folder. Do not assign alternate text.
6. Resize the logo to 200 pixels wide, keeping the image aspect ratio the same so that the height
automatically adjusts, and left-align the image around the text. If necessary, drag the image up to
align the text as shown in Figure 2–128.
In the Lab EW 147

7. Increase the right margin of the logo to 40 pixels.
8. Create a navigation bar using the text below the masthead, then copy it to each page in the site.
9. Save the changes you have made to all pages at once, then preview the site in a browser.
10. Rename the site Lab 2-1 Bike Shop Site. Change the site properties, as specified by your instructor.
11. Close the site, and then submit it in the format specified by your instructor.
In the Lab
Lab 2: Adding a Horizontal Line, Bookmark, and Link to a File
STUDENT ASSIGNMENTS
Problem: You own a baking business and want to attract customers by making your site’s home page
easier to navigate. On the featured recipe section of the home page, add a horizontal line at the top
of the recipe and a bookmark link at the bottom to help users navigate back to the top of the page, as
shown in Figure 2–129. Also add a link to an order form that users can download.
Figure 2–129
Continued >
In the Lab continued
Instructions:
2. Open the Web site Lab 2-2 Bakery, then open the default.html page.
3. Insert a horizontal line two lines above the text, Recipe of the month. Leave two empty paragraphs
before this horizontal rule so that it will not intersect with the cake.
STUDENT ASSIGNMENTS
4. Create a bookmark called Top of Page to the words, Sweet Tooth Bakery, in the masthead.
5. At the bottom of the page, between the directions and address, add a new paragraph, type the text
Top of Page, and create a bookmark link from this text to the bookmark created in Step 4.
6. Add a link from the words, Click here, to the PDF file orderform.
7. Change the left margin of the cake image to 35 pixels.
8. Preview the site in a browser and test the link and bookmark.
9. Rename the site folder Lab 2-2 Bakery Site, then change the site properties, as specified by your
instructor.
10. Close the site, and then submit it in the format specified by your instructor.
In the Lab
Lab 3: Formatting an Image
Problem: Your school’s travel club has a Web page for its upcoming trip to New York. Insert, align,
and format an image as shown in Figure 2–130.
Figure 2–130
In the Lab EW 149

Instructions: Perform the following tasks.
2. Open the Web site Lab 2-3 Travel.
3. Open the default.html page.
4. Click after the last bulleted list item, press enter three times, then insert the image statue.jpg from
the Lab 2-3 images folder and add alternate text crediting your name as the photographer.
5. Crop the top, left, and right sides so that the image appears as shown in Figure 2–130.
6. Center-align the image.
7. Use the Borders and Shading dialog box to add a groove border around all sides. (Hint: To open the
STUDENT ASSIGNMENTS
dialog box, click the Borders and Shading command on the Format menu.)
8. Click the More Brightness button twice.
9. Click the Color button arrow, then click Grayscale.
10. Click the More Contrast button twice.
11. Save the changes you have made to default.html and save the embedded image.
12. Preview the page in a browser.
13. Change the site properties, as specified by your instructor.
14. Close the site, rename the site folder Lab 2-3 Travel Site, and submit the site in the format speci-
fied by your instructor.
Cases and Places

Apply your creative thinking and problem-solving skills to design and implement a solution.
• EASIER ••MORE DIFFICULT

STUDENT ASSIGNMENTS
• 1: Add Internal and External Links

You want to practice adding links to a Web site. Open any site that you created in Chapter 1, then open
that site’s default.html page. Add a link to your school’s Web page, add a link to your e-mail address,
and create and insert a bookmark. Close the default.html page without saving any changes, close the
Web site, then quit Expression Web.
• 2: Add Images and Links to a School Web Site

The administration of Pinkham Academy would like to include images and links on a Web site. If
you completed the Cases and Places 2 activity in Chapter 1, you can use the sketch of the Web site as
a basis for this exercise. Create a one-page Web site that has a masthead, and at least one paragraph
and bulleted list describing the school’s features. Next to the bulleted list, insert a right-aligned image
(use a photo from an exercise in this chapter or use one of your own). Add a margin and a bevel to the
image. Add an e-mail link with a ScreenTip to your e-mail address.
• • 3: Add a Gallery of Images to an Alumni Web Site

You have recently joined the Connecticut branch of your college alumni association. You have been
working on a home page that can tell other local graduates of Gulliver College about upcoming
alumni events. You have already entered the text for the home page. Open the site Cases and Places 2-3
Alumni, then open the page default.html. Add four images and create a gallery of thumbnails for them
(use photos from an exercise in this chapter or use your own). Center-align the thumbnails and make
sure to add space between each image. Save the changes to the default.html file and embed all image
files, then test your thumbnails in your browser.
• • 4: Create a Personal Home Page

Make It Personal
You want to create a personal home page that you can use to link to your favorite sites and allow others
to e-mail you. Create a one-page Web site and include a masthead, bulleted list, footer, and any other
information you think is relevant. Format the Web site attractively. Add at least one image that you
crop, size, and align with text wrapping. Add a border to the image. Insert three links to sites that you
like to visit. Add a ScreenTip to each of the links that displays the name of the site or what type of
information the visitor will see when he or she clicks it. Insert an e-mail link to your e-mail address.
• • 5: Enhance a Home Page for a Restaurant

Working Together
A local restaurant wants to create a multi-page Web site for its customers. The site will include a home
page, a menu page, and a page with directions. All pages should include a masthead, navigation bar
with links, at least one image, one or two paragraphs or lists of information, and a footer with contact
information. Working as a team with several of your classmates, you are to design and create the Web
site. As a group, decide on the name of the restaurant and the menu. Each team member should plan
on paper the three pages (home, menu, and directions), and present his or her plan to the group. As a
group, decide on elements of each plan that you will incorporate into the home page, and start creating
the home page using Expression Web. Format the Web site attractively. Add the text for each page.
Add images and use text wrapping, create thumbnails, and apply formatting. Create a navigation bar
and copy it to each page.

Chapter 02

Uploaded by

Copyright:

Available Formats

Chapter 02

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Chapter 02

Uploaded by

Copyright:

Available Formats

Microsoft Expression Web

2 Working with Images

2 Working with Images

Project — Enhancing the Boon Mountain

margin adds space

inn.jpg ﬁle has

Plan General Project Guidelines

Sources for Images

You can insert images

Technical Considerations for Image Files

Expression Web Chapter 2

Table 2–1 describes common image formats.

Table 2–1 Image File Types

File Format Extension(s) Compression About

Graphics .gif Lossless Introduced by CompuServe in 1987. Best for drawn

Expression Web Chapter 2

To Open a Web Site

• With your USB ﬂash drive

Expression Web Chapter 2

Expression Web Chapter 2

From File command

• Open the Boon Mountain

the list in Figure 2–11?

• In the Accessibility Properties Alternate

inn in the Alternate text text box

Expression Web Chapter 2

• Click the OK button in the Save

Adjusting the Workspace Layout

Table 2–2 Panel Actions

Skill Method Effect

Expression Web Chapter 2

• Point to the Close all button

Expression Web Chapter 2

To Display the Ruler

• Click View on the menu bar to

mand dimmed on my screen? Show Ruler

What should I do if my rulers are image

Expression Web Chapter 2

original width original height

• Type 400 in the Width box to

Expression Web Chapter 2

• If necessary, click the picture to

Expression Web Chapter 2

• Press CTRL+S to save the page

Expression Web Chapter 2

To Add a Border to an Image

• Click the image to select it.

• Click double in the Style list to

• Click other options in the Style list

How can I reverse a change to

• Click outside the image to

• Press CTRL+S to save the page.

Expression Web Chapter 2

• Hold down the left mouse

• Click outside of the image to

• Press CTRL+S to save the page.

Why did my picture resize when I

Adjust File Sizes

To adjust the ﬁle size or

Figure 2–37 Set Transparent Resample