This document provides instructions on various web design techniques including: 1) Adding links to other pages on the same site by selecting text, inserting a hyperlink, and selecting the target page from the same folder. 2) Adding links to external pages by typing the full URL including "http://". 3) Adding images and setting the alternative text property to describe images for visually impaired users. 4) Creating image maps by selecting areas of an image and adding hyperlinks and alternative text to create "hot spots". 5) Creating rollover images using two same-sized images and the rollover image tool to change the image on mouseover. 6) The task is to create a page with an image map

1. Web Design Lesson 3

2. Adding links (your pages) Inserting a link to your other pages: Make sure both pages are saved in the SAME folder Select the text you wish to use as a hyperlink. Insert – Hyperlink Next to the Link box click the folder and find the page you want to link to.

3. Target property for hyperlinks _blank loads the linked file into a new, unnamed browser window. Usually use this for opening external pages linked from your site. _self loads the linked file into the same frame or window as the link. This target is the default, so you usually don’t need to specify it. Usually use this for moving around your own pages. There are 2 more options you won’t need to use yet. _top _parent

4. Adding links (external pages) Inserting links to external pages (for example www.hi5.com , www.yahoo.com . or your friends websites) Select the text you wish to use as a hyperlink. Insert – Hyperlink Type in the FULL web address including http:// e.g. http://www.yahoo.com/ http://www.freewebs.com/satree/

5. Adding Graphics to Web Pages We use 2 file types for images on our web pages: .gif - logos, titles, buttons, animations. .jpg - photographs. Please remember to save ALL images you use in your web design folder. Try to edit the size of the graphics in PhotoShop before you import them into Dreamweaver.

6. Alt Property of Images Add a simple description of your image in this box. This text is displayed when the mouse rolls over the image. This text is also used for people who do not display graphics, or for visually impaired users.

7. Using Images as Links We can add a link to your image. Insert the hyperlink in the Link box. Remember to use the FULL address http://www.webaddress.com You can also use the Target property that we learnt about last week.

8. Image Maps We use Image Maps to create links within an image. These links are called hot spots. Select an Image you wish to use as an Image Map. Insert this Image on your picture. Then select the rectangle, circle or freehand tool below:

9. Image Maps Select the area of the Image you wish to use as a hot spot, or hyperlink. Then add your Hyperlink, Alt and Target properties. It is important to fill in the Alt property which tells the user about your hot spot.

10. Rollover Images A rollover image is an image that changes when the mouse rolls over it. We can use this for buttons, or to create simple user generated animations. We need to create 2 images that are the same size for this example. Remember - BOTH these Images must be in your web design folder and BOTH must be uploaded to your web site.

11. Rollover Image Once you have your 2 Images: Insert - Image Objects - Rollover Image Fill in the box below: Then Preview your Rollover Image.

12. Task Today – Part 1 Create a webpage that features rollover images and an image map. Upload this to your web account. Don’t forget what we learnt last week: Well designed text Page title

13. Task Today – Part 2 Create a Welcome or Introduction page for your website. Include links to: Your work from last week (text) and this week (images) Your friends Other websites How about: Try making a menu with rollover images. You can create interactive buttons. Create your buttons in Photoshop, or find some on the Internet.

14. Task Today When you have finished add your Welcome page link to the English-Study website. Remember – there is no exam in this subject. Your grades will depend on your work this semester.