1. Chapter 2 Working with Images and Links

2. 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 Links2

3. 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 72 Chapter 2: Working with Images and Links3

4. 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 Links4

5. 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 Links5

6. 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-98 Chapter 2: Working with Images and Links6

7. This is what it should look like now! Chapter 2: Working with Images and Links7

8. 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 Links8

9. Adding Transparency to an Image Chapter 2: Working with Images and Links9

10. 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 Links10

11. 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 Links11

12. Do pages 112-115 to create thumbnail images Chapter 2: Working with Images and Links12

13. 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 Links13

14. Image Folder Example Chapter 2: Working with Images and Links14

15. 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 Links15

16. 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 Links16

17. Ch. 2 is over! Homework Do the Practice Test on www.scsite.com/ew3/le arn www.scsite.com/ew3/le arn 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 Links17