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 link Add a ScreenTip Chapter 2: Working with Images and Links2

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

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

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 to insert the images. Let’s look at adjusting the workspace layout on page Do pages to adjust your layout and resize the image. Chapter 2: Working with Images and Links5

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

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

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

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

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 Chapter 2: Working with Images and Links10

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

Do pages to create thumbnail images Chapter 2: Working with Images and Links12

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 Chapter 2: Working with Images and Links13

Image Folder Example Chapter 2: Working with Images and Links14

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 to create and test both internal and external links. Chapter 2: Working with Images and Links15

Links and Screen Tips 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 Chapter 2: Working with Images and Links16

Ch. 2 is over! Homework Do the Practice Test on arn arn Due NEXT class meeting at 8am Lab work In the Lab: Lab 2 Sweet Tooth Bakery, pg Cases and Places: Lab 5 Working together you will create this! We will discuss it. Chapter 2: Working with Images and Links17