Chapter 2: Working with Images and Links

Full file at

Microsoft Expression Web 3

Chapter 2: Working with Images and Links

A Guide to this Instructor’s Manual:

We have designed this Instructor’s Manual to supplement and enhance your teaching experience through classroom activities and a cohesive chapter summary.

This document is organized chronologically, using the same headings in red that you see in the textbook. Under each heading you will find (in order): Lecture Notes that summarize the section, Figures and Boxes found in the section, if any, Teacher Tips, Classroom Activities, and Lab Activities. Pay special attention to teaching tips, and activities geared toward quizzing your students, enhancing their critical thinking skills, and encouraging experimentation within the software.

In addition to this Instructor’s Manual, our Instructor’s Resources CD also contains PowerPoint Presentations, Test Banks, and other supplements to aid in your teaching experience.

For your students:

Our latest online feature, CourseCasts, is a library of weekly podcasts designed to keep your students up to date with the latest in technology news.Direct your students to where they can download the most recent CourseCast onto their mp3 player. Ken Baldauf, host of CourseCasts, is a faculty member of the Florida State University Computer Science Department where he is responsible for teaching technology classes to thousands of FSU students each year. Ken is an expert in the latest technology and sorts through and aggregates the most pertinent news and information for CourseCasts so your students can spend their time enjoying technology, rather than trying to figure it out. Open or close your lecture with a discussion based on the latest CourseCast.

Chapter Objectives / 2
EW 72: Introduction / 2
EW 72: Project —Enhancing the Boon Mountain Resort Web Site / 2
EW 74: Plan Ahead:General Project Guidelines / 3
EW 76: Plan Ahead: Properly Use Images That Enhance the Message of Your Site / 3
EW 76: Inserting an Image / 4
EW 84: Adjustingthe Workspace Layout / 4
EW 89: Adjusting Proportions / 5
EW 93: Positioning an Image / 6
EW 98: Enhancing an Image / 6
EW 99: Plan Ahead: Identify Changes to Make to the Images / 7
EW 111: ControllingImage Files / 7
EW 120: Adding Navigational Links to a Site / 8
EW 120: Plan Ahead: Determinethe Necessary Internal and External Links / 10
End ofChapter Material / 10
GlossaryofKey Terms / 11

Chapter Objectives

Students will have mastered the material in this chapter when they can:

Full file at

Insert and align an image
Change the workspace
Add borders and margins to an image
Copy page elements to the Clipboard
Edit an image
Create an image thumbnail
Create a folder for images
Add internal links
Add external links
Add a bookmark
Add an e-mail link
Add a ScreenTip

Microsoft Expression Web 3 Instructor’s ManualPage 1 of 11

EW 72: Introduction

LECTURE NOTES

Define the terms graphics (images) and hyperlinks (links)
Review the purpose of Web page text
Discuss the purpose of Web page graphics or images
Discuss the purpose of Web page links
Use the Overview on page EW 73 to discuss how students will insert images and links

TEACHER TIP

You might choose to have students review the Web-ready images sections in Special Feature 1 as they work through this chapter.

CLASSROOM ACTIVITIES

1. Class Discussion: Ask students to identify a Web site with which they are familiar and then describe how the site uses text, images, and links.

2. Quick Quiz:

1)____ in Web pages serve to make a site more attractive and interesting. (Answer: Graphics or Images)

2)____ help organize a site by providing navigation to other pages at the site and other sites on the Web. (Answer: Links)

EW 72: Project — Enhancing the BoonMountain Resort Web Site

LECTURE NOTES

Define the terms embedded, pixels, resolution, high resolution, pixilated, file format, compress, lossy, lossless, and alternate text
Use Figure 2-1 on page EW 73 to describe the enhancements to be made to the Boon Mountain Resort project in Chapter 2
Describe sources of images
Discuss the technical considerations for Web-ready images using Figure 2-2 on page EW 75
Use Table 2-1 to review the image file formats for Web-ready images
Discuss the use of alternate text for images

FIGURES and TABLES: Figures — 2-1, 2-2, Table —2-1

BOXES

1. BTW: Sources for Images.Review the options for adding an image to a Web page.

2. BTW: File Sizes. Introduce the use of compression software to deliver a file that is of high quality but will not take an unacceptable amount of time to download.

3. BTW: Images from External Devices.Review the steps for inserting an image from a digital camera or an image captured from a scanner.

TEACHER TIP

Discuss the issue of copyright related to images found on the Web.

CLASSROOM ACTIVITIES

1. Critical Thinking: Ask students to review Figure 2-1. What role do the links and image play on the site’s home page?

2. Quick Quiz:

1)Image files are composed of dots or ____. (Answer: pixels)

2)A graphic’s ____ is the concentration of dots that make up the image. (Answer: resolution)

3)____ appears next to an image while it downloads and provides information to those who are using adaptive/assistive technologies. (Answer: Alternate text)

EW 74: Plan Ahead: General Project Guidelines

LECTURE NOTES

Explain what is meant bycropping
Discuss the general guidelines for using images and links to enhance the message of a site
Identify ways to edit images to create Web-ready images
Discuss how to determine relevant internal and external links

CLASSROOM ACTIVITIES

1. Class Discussion: Ask students to review the general project guidelines for adding images and links. Do these guidelines fit within a Web site design plan? If yes, how? If no, why not?

EW 76: Plan Ahead: Properly Use Images That Enhance the Message of Your Site

LECTURE NOTES

Define the term animated graphics
Describe the types of images used at a Web site: logos, photographs, cartoons, animated graphics
Discuss where to store a Web site’s images

CLASSROOM ACTIVITIES

1. Class Discussion: Ask students to describe the types of images that might be appropriate for a personal site, an informational site, and an e-commerce site.

EW 76: Inserting an Image

LECTURE NOTES

Define the term placeholder
Review the steps to start Expression Web and reset the workspace, if necessary
Use Figures 2-3 through 2-8 to illustrate opening an existing Web site
Refer students using the Windows XP operating system to Appendix E for step-by-step instructions on opening an existing Web site; refer students using Windows Vista to Appendix F
Use Figures 2-9 through 2-15 to illustrate inserting an image

FIGURES: 2-3, 2-4, 2-5, 2-6, 2-7, 2-8, 2-9, 2-10, 2-11, 2-12, 2-13, 2-14, 2-15

BOXES

1. BTW: Placeholders. Define placeholder and discuss the utility of placeholders in Web page design.

2. Other Ways: Encourage your students to explore other ways of inserting an image.

CLASSROOM ACTIVITIES

1. Class Discussion: What is the role of placeholders in inserting images?

2. Quick Quiz:

1)If you want to align and position an image separately from the surrounding text, insert the image into its own ____. (Answer: div)

LAB ACTIVITIES

1. Complete the steps To Start Expression Web.

2. Complete the steps To Open a Web Site.

3. Complete the steps To Insert an Image.

EW 84: Adjusting the Workspace Layout

LECTURE NOTES

Discuss adjusting the layout of the workspace
Use Table 2-2 on page EW84 to describe panel actions
Use Figures 2-16a and 2-16b on page EW 85 to discuss working with panels
Use Figures 2-17 through 2-19 to illustrate closing a task pane
Use Figures 2-20 and 2-21 to illustrate displaying the ruler

FIGURES and TABLES: Figures — 2-16a, 2-16b, 2-17, 2-18, 2-19, 2-20, 2-21; Table — 2-2

CLASSROOM ACTIVITIES

1. Class Discussion: Ask students to describe ways to work with task panes to adjust the layout of the workspace.

2. Critical Thinking: Discuss why it is useful to display the rulers before editing images.

3. Quick Quiz:

1)The vertical and horizontal rulers use ____ as measurement. (Answer: pixels)

LAB ACTIVITIES

1. Complete the steps To Close a Task Pane.

2. Complete the steps To Display the Ruler.

EW 89: Adjusting Proportions

LECTURE NOTES

Define the terms proportion, aspect ratio, and resample
Use Figures 2-22 through 2-28 to illustrate resizing an image
Discuss using the Picture Properties dialog box

FIGURES: 2-22, 2-23, 2-24, 2-25, 2-26, 2-27, 2-28

BOXES

1. BTW: Changing Image Size. Caution students about making an image larger in terms of its impact on image quality.

2. Other Ways: Encourage your students to explore other ways of resizing an image.

CLASSROOM ACTIVITIES

1. Class Discussion: Ask students to discuss what is meant by image “proportions” and why changing an image’s proportions is potentially problematic.

2. Quick Quiz:

1)The relationship between an image’s height and width is the image’s ____. (Answer: proportion, aspect ratio)

2)After you have resized an image, you should ____ it to improve the image quality by adjusting the resolution of pixels to the new image size. (Answer: resample)

LAB ACTIVITIES

1. Complete the steps To Resize an Image.

EW 93: Positioning an Image

LECTURE NOTES

Define the terms text wrapping, borders, padding, and margins
Describe how changing the alignment and spacing of text and images affects the flow of a page
Use Figures 2-29 and 2-30 to illustrate aligning an image
Discuss adding borders and image margins
Use Figures 2-31 through 2-33 to illustrate adding a border to an image
Use Figures 2-34 through 2-36 to illustrate modifying image margins

FIGURES: 2-29, 2-30, 2-31, 2-32, 2-33, 2-34, 2-35, 2-36

BOXES

1. BTW: Padding.Define padding and discuss the use of padding to put space between the image and its border.

2. Other Ways: Encourage your students to explore other ways of adding a border to an image.

CLASSROOM ACTIVITIES

1. Class Discussion: Ask students to discuss how using borders and margins can enhance an image.

2. Quick Quiz:

1)The ____ feature is used to position text around an image. (Answer: text wrapping)

2)Image ____ surround the border of a graphic and separate it from adjacent text or images. (Answer: margins)

LAB ACTIVITIES

1. Complete the steps To Align an Image.

2. Complete the steps To Add a Border to an Image.

3. Complete the steps To Modify Image Margins.

EW 98; Enhancing an Image

LECTURE NOTES

Define the terms enhancing, Clipboard, and cropped
Use Table 2-3 in conjunction with Figure 2-37to describe ways to enhance an image
Use Figures 2-38 through 2-45 to illustrate adding transparency to an image
Describe the Clipboard
Use Figures 2-46 through 2-51 to illustrate copying an image to other pages
Use Figures 2-52 through 2-63 to illustrate cropping an image

FIGURES and TABLES: Figures — 2-37, 2-38, 2-39, 2-40, 2-41, 2-42, 2-43, 2-44, 2-45, 2-46, 2-47, 2-48, 2-49, 2-50, 2-51, 2-52, 2-53, 2-54, 2-55, 2-56, 2-57, 2-58, 2-59, 2-60, 2-61, 2-62, 2-63; Table — 2-3

BOXES

1. BTW: Adjust File Sizes. Advise students about the use of a graphic design program (e.g., Expression Design, Photoshop) in the adjustment of the file size (or file type) of an image.

2. Other Ways: Encourage your students to explore other ways of copying an image.

CLASSROOM ACTIVITIES

1. Class Discussion: Ask students to describe how to use each button on the Pictures toolbar to enhance an image.

2. Quick Quiz:

1)The ____ temporarily stores text or page elements so that you can move or copy them to other pages or locations. (Answer: Clipboard)

2)____ is the process of trimming an image. (Answer: Cropping)

LAB ACTIVITIES

1. Complete the steps To Add Transparency to an Image.

2. Complete the steps To Copy an Image to Other Pages.

3. Complete the steps To Crop an Image.

EW 99; Plan Ahead: Identify Changes to Make to the Images

LECTURE NOTES

Discuss how making changes to images can increase their relevance, appearance, and usability

EW 111: Controlling Image Files

LECTURE NOTES

Define the term thumbnail
Describe the purpose of thumbnail images
Use Figures 2-64 through 2-73 to illustrate creating a thumbnail
Use Figures 2-74 through 2-81 to illustrate creating a folder for images

FIGURES: 2-64, 2-65, 2-66, 2-67, 2-68, 2-69, 2-70, 2-71, 2-72, 2-73, 2-74, 2-75, 2-76, 2-77, 2-78, 2-79, 2-80, 2-81

BOXES

1. BTW: Internet Connection Speed. Encourage students to consider Internet connection speeds when designing their Web pages and to make sure to test their sites with multiples types of connections.

2. Other Ways: Encourage your students to explore other ways of creating a thumbnail.

CLASSROOM ACTIVITIES

1. Class Discussion: Have students share with the class real-world examples of Web page thumbnails.

2. Quick Quiz:

1)A(n) ____ version of an image file is a small rendition that serves as a preview of the larger version. (Answer: thumbnail)

2)When you move an image using the Folder List, Expression Web automatically adjusts any coded references to the image file location. T/F? (Answer: True)

3)The visual size of an image on a Web page affects its download speed. T/F? (Answer: False)

LAB ACTIVITIES

1. Complete the steps To Create a Thumbnail.

2. Complete the steps To Create a Folder for Images.

EW 120: Adding Navigational Links to a Site

LECTURE NOTES

Define the term bookmarks (in relation to linking within a page), external links, and mailto links
Discuss the role of hyperlinked text or images in assisting visitors to navigate at a Web site
Explain the importance of consistency in navigational links across all pages at a site
Use Figures 2-82 through 2-90 to illustrate adding an internal link
Use Figures 2-91 through 2-94 to illustrate testing internal links
Use Figures 2-95 through 2-98 to illustrate copying and pasting internal links
Use Figures 2-99 through 2-105 to illustrate adding an external link
Use Figures 2-106 through 2-108 to illustrate testing external links
Use Figures 2-109 through 2-115 to illustrate adding a bookmark
Use Figures 2-116 through 2-118 to illustrate adding an e-mail link
Define ScreenTip and use Figures 2-119 through 2-121 to illustrate adding a ScreenTip
Use Figures 2-122 through 2-124 to illustrate previewing the site in a browser
Remind students how to close a site and quit Expression Web

FIGURES: 2-82, 2-83, 2-84, 2-85, 2-86, 2-87, 2-88, 2-89, 2-90, 2-91, 2-92, 2-93, 2-94, 2-95, 2-96, 2-97, 2-98, 2-99, 2-100, 2-101, 2-102, 2-103, 2-104, 2-105, 2-106, 2-107, 2-108, 2-109, 2-110, 2-111, 2-112, 2-113, 2-114, 2-115, 2-116, 2-117, 2-118, 2-119, 2-120, 2-121, 2-122, 2-123, 2-124

BOXES

1. BTW: Browser Bookmarks. Caution students about not confusing the links within a page with the bookmarks that a browser saves to a Favorites (or Bookmarks, depending on the browser) list.

2. BTW: Search Boxes. Survey students about their experience with search boxes on large sites.

3. BTW: Forms vs. E-Mail Links. Advise students about the programs that crawl the Web collecting e-mail addresses for spamming purposes.

4. Other Ways: Encourage your students to explore other ways of adding a bookmark.

TEACHER TIPS

You might choose to have students review the navigational elements sections in Special Feature 1 as they work through this chapter.

The Web browser illustrations in this text use Internet Explorer 8 with tabbed windows. If your students are using a different browser or an earlier version of Internet Explorer, you might choose to explain the differences between the students’ browser window and the Internet Explorer 8 browser window.

CLASSROOM ACTIVITIES

1. Group Activity: Separate students into groups and assign each group to bring to class three real-world Web site home pages printed in hard copy with the navigational elements on the pages marked as internal, external, or bookmark links. Each group should be prepared to describe to the class the home page navigational system for each of the group’s Web site examples.

2. Quick Quiz:

1)Internal links, called____, let visitors move around within long pages. (Answer: bookmarks)

2)____ links are e-mail links. (Answer: Mailto)

LAB ACTIVITIES

1. Complete the steps To Add an Internal Link.

2. Complete the steps To Test Internal Links.

3. Complete the steps To Copy and Paste Internal Links.

4. Complete the steps To Add an External Link.

5. Complete the steps To Test External Links.

6. Complete the steps To Add a Bookmark.

7. Complete the steps To Add an E-Mail Link.

8. Complete the steps To Add a ScreenTip.

9. Complete the steps To Preview the Site.

10. Complete the steps To Close a Site and Quit Expression Web.

EW 120: Plan Ahead: Determine the Necessary Internal and External Links

LECTURE NOTES

Discuss the importance of easy to find and use navigational links: internal links, external links, bookmarks, and e-mail links

End of Chapter Material

Chapter Summary provides a brief review of key topics in the chapter and a list of key skills referenced by page number.

Learn It Online is a series of online exercises that test students’ knowledge of chapter content and key terms.

Apply Your Knowledge is an assignment that helps students reinforce their skills and apply the concepts learned in this chapter.

Extend Your Knowledge is an assignment that challenges students to extend the skills learned in this chapter and to experiment with new skills. Students may need to use Help to complete the assignment.
Make It Right is an assignment that asks students to analyze a site and correct all errors and/or improve the site’s design.

In the Lab is a series of assignments that ask students to design and/or format a Web site using the guidelines, concepts, and skills presented in this chapter. The labs are listed in order of increasing difficulty.

Cases and Places is a series of assignments in which students apply creative thinking and problem-solving skills to design and implement solutions.

Glossary of Key Terms

Microsoft Expression Web 3 Instructor’s ManualPage 1 of 11

alternate text (EW 75)
animated graphics (EW 76)
aspect ratio (EW 89)
bookmarks (EW 120)
borders (EW 95)
Clipboard (EW103)
compress (EW 75)
cropped (EW 106)
embedded (EW 74)
enhancing (EW 98)
external links (EW 120)
file format (EW 75)
graphics (EW 72)
high resolution (EW 74)
hyperlinks (EW 72)
images (EW 72)
links (EW 72)
lossless (EW 75)
lossy (EW 75)
mailto links (EW120)
margins (EW 95)
padding (EW 95)
pixels (EW 74)
pixilated (EW 74)
placeholder (EW 76)
proportions (EW 89)
resample (EW 89)
resolution (EW 74)
ScreenTip (EW 138)
text wrapping (EW 93)
thumbnail (EW 111)

Microsoft Expression Web 3 Instructor’s ManualPage 1 of 11

Chapter 2: Working with Images and Links

Microsoft Expression Web 3