In this lab you will modify an HTML file to change the background color of a Web page.
- Look at the sample page: butterflies.html. Test it out with the upper left butterfly.
- Now we are going to get a copy of the page into Dreamweaver. This can be done in several ways. I suggest just one. With the browser open on the butterflies page, select File | Save Page As, and make sure you save the page on your H: drive in the format Web Page, HTML Only. Now open the file you just saved in Dreamweaver.
- When you look at Design view, the image will be cracked. Why? (Answer)
- Now copy the image of butterflies (I called it 'flies.gif') in the way you have learned in the images lab and assignment (right click on image, etc.), and place in your H: drive.
- Test it out by Preview in browser to make sure it still functions correctly. Only then should you proceed to modifying it as below. (No need to upload to the web server -- we'll work locally for this lab.)
- Add one more <area> tag to the same image map. (Each image should have one map, but a map may have many areas.)
Estimate the (x,y) coordinates of another butterfly. Either that or use the Dreamweaver tools to define the hotzone dimensions.
Arrange that it sets the background color to some other color, via an attribute
onClick = "javascript:document.getElementById('body').style.backgroundColor='[your color here]'" - Save your file and test it via Preview. Now it should be that your second hotzone will change the background to whatever color you selected.
- Now select the flies.gif image, and add more map area tags (again to the same image map) via the Properties tools at the bottom left of Dreamweaver.
- Repeat this process until you have made all the butterflies change background color. (If you run out of time, just get a few working -- if you can do two, you do any number.)