Chapter 2

Working with Images and Links

Chapter Objectives• 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

Chapter 2: Working with Images and Links 2

Starting Expression Web

• Copy information as needed into the Ch 2 folder in your home directory (all files from the Chapter 2 folder on Public should be copied to your Ch. 2 folder!)

• Start Web Expression

• Close any open websites

• Reset the workspace layout

• Read the project on page 72Chapter 2: Working with Images and Links 3

Planning ahead

• Use images that enhance the message of your site

• Identify any changes that need to be made to an image

• Determine necessary internal and external links

• Any images you use should be embedded in your site so that when your site is published, all files are accessible.

• Be aware the resolution of an image affects the look and the time to load for your website.

• The most common file types to use are .gif, .jpg, and .png (see the table on pg. 75)

• IMAGES should be saved in an IMAGE folder within your website… you will be graded that your website is organized!

Chapter 2: Working with Images and Links 4

Opening a Web Site

• Under your chapter 2 folder, click on the the Boon Mountain Resort_final Web site folder.

• Double-click the default.html file

• Do pages 81-83 to insert the images.

• Let’s look at adjusting the workspace layout on page 84-85.

• Do pages 85-93 to adjust your layout and resize the image.

Chapter 2: Working with Images and Links 5

Aligning an Image, Borders and Spacing

• Positioning an image and the text next to it are essential to good design

• One feature to consider is text wrapping

• This method is preferable to using the alignment buttons on the toolbar.

• You can also add borders to pictures and adjust the spacing around them so the text doesn’t jam right up next to the picture.

• Do pages 94-98Chapter 2: Working with Images and Links 6

This is what it should look like now!

Chapter 2: Working with Images and Links 7

Enhancing images

• Look at the bottom of page 98. This is the picture toolbar.

• You can put it on your screen by Clicking on View…Toolbars…pictures

• Look at the top of page 99.. Let’s discuss these.

• Do page 99-top of 103 – this will show you how to add transparency to an image.

• Look at the following slide!Chapter 2: Working with Images and Links 8

Adding Transparency to an Image

Chapter 2: Working with Images and Links 9

Copying an Image to Other Pages

• Now you are going to use this image on other pages and work on some of the other images.

• Do pages 103-111

Chapter 2: Working with Images and Links 10

Creating a Thumbnail

• Thumbnail images are used to represent smaller renditions of larger images that are available.

• Usually, clicking on a thumbnail image will display the larger version of that image.

Chapter 2: Working with Images and Links 11

Do pages 112-115 to create thumbnail images

Chapter 2: Working with Images and Links 12

Creating a Folder for Images

• In this class, we will create a separate folder for images.

• I expect this to be done for EVERY website from here on, regardless if it tells you to or not.

• It is just good organization!

• Do pages 116-120

Chapter 2: Working with Images and Links 13

Image Folder Example

Chapter 2: Working with Images and Links 14

Navigation within a site

• Internal links (bookmarks) – point to another page within the website (used in the navigation bar)

• External links – point to a page that is NOT in your website.

• Do pages 121-136 to create and test both internal and external links.

Chapter 2: Working with Images and Links 15

E-Mail Links and Screen Tips

• Email links typically invoke the mail application

• Screen tips – window containing descriptive text that appears when you position the pointer over a button or link.

• Do pages 137-140

Chapter 2: Working with Images and Links 16

Ch. 2 is over!

Homework

• Do the Practice Test on www.scsite.com/ew3/learn

• Due NEXT class meeting at 8am

Lab work• In the Lab: Lab 2

• Sweet Tooth Bakery, pg. 147-148

• Cases and Places: Lab 5

• Working together you will create this! We will discuss it.

Chapter 2: Working with Images and Links 17