The goal of this project is to learn the four methods of linking from an image to an external website. Students will open Image Project One in Dreamweaver, and learn how to create four absolute links from each of the four images using four different methods.
Opening the External Sites in Separate Tabs in Firefox
Linking to an Entire Image
- Open Dreamweaver
- Open your gallery.html page
- Select the top left image of your First Image Project
- In the Property Inspector, type Google into the alt field
- Switch to Firefox
- Select the Google tab
- Select the Address
- ctrl+c to copy
- Return to Dreamweaver
- In the Property Inspector, click inside the Link field
- ctrl+v to paste
- Click anywhere in the page
- ctrl+s to save
Linking to a Rectangular Section of an Image
- Select the top right image
- In the Property Inspector, select the Rectangular Hotspot Tool (lower left corner)
- Drag a rectangle over part of the image
- Read the reminder message that pops up, then...
- In the Property Inspector, Type Adobe in the alt field
- In the Property Inspector, type Adobe in the Map field
- Switch to Firefox
- Select the Adobe tab
- Select the Address
- ctrl+c to copy
- Return to Dreamweaver
- In the Property Inspector, click inside the Link field
- Select the #
- ctrl+v to paste
- Click anywhere in the page
- ctrl+s to save
Linking to a Circular Section of an Image
- Select the bottom left image
- In the Property Inspector, select the Circle Hotspot Tool (blue, lower left corner)
- Drag a circle over part of the image
- Read the reminder message that pops up, then...
- In the Property Inspector, Type Apple in the alt field
- In the Property Inspector, type Apple in the Map field
- Switch to Firefox
- Select the Apple tab
- Select the Address
- ctrl+c to copy
- return to Dreamweaver
- In the Property Inspector, click inside the Link field
- Select the #
- ctrl+v to paste
- Click anywhere in the page
- ctrl+s to save
Linking to a Polygon Section of an Image
- Select the bottom left image
- In the Property Inspector, select the Polygon Hotspot Tool (blue, lower left corner)
- Click a series of points that traces the section of the image you wish to link
- Read the reminder message that pops up, then...
- In the Property Inspector, type Microsoft in the alt field
- In the Property Inspector, type Microsoft in the Map field
- Switch to Firefox
- Select the Microsoft tab
- Select the Address
- ctrl+c to copy
- Return to Dreamweaver
- In the Property Inspector, click inside the Link field
- Select the #
- ctrl+v to paste
- Click anywhere in the page
- ctrl+s to save
Test your work in Internet Explorer (shift+f12)
If you have followed every direction correctly, each of your four images will have a pop-up alt tag and a link to one of the four websites.
Troubleshooting Guide
If a link doesn’t work:
- Return to Dreamweaver
- Select the arrow tool next to the hotspot tools
- Select the hotspot
- Delete the hotspot
- Redo the hotspot according to the directions above (RTFD, FTFD).
- Check to see if you left the number sign # in the link. Remove it if you did.
If your images or tables aren't displaying properly:
- Right click inside of your table, and choose Table>Expanded Tables Mode. Sometimes this makes it easier to troubleshoot. Click the exit link at the top of the window to leave this mode.
- Select the image, and change the border value to zero in the Property Inspector. Do this for all four images.
- Select the table.
- Look for the green drop-down menus (above or below the table).
- Click the drop-down menus directly above the column.
- Choose "clear column width".
- Do this for both columns.
- Click the drop down menu for the overall table
- Choose "clear all widths".
- If needed, also choose "clear all heights"
- In some cases, it's quicker and easier to just rebuild the table and then drag each object into it rather than beating your head against the wall trying to figure out what's wrong with your existing table. Here's a link to the original instructions to you can review the instructions.
Once all of your links and alt tags work, you’re done.
