Project TwoAdding Web Pages, Links, and Images

Define and set a home pageAdd pages to a Web siteDescribe Dreamweaver's image accessibility featuresDescribe image file formatsInsert, resize, and align images within a Web pageDescribe the different types of linksCreate a relative, absolute, and e-mail linksDescribe how to change the color of linksEdit and delete linksDescribe and display the Site MapDescribe Code view, Split view, and Design viewView Code view

This project introduces students to images, links, the Site Map, and how to view source code. The project begins by using the Windows My Computer option to copy data files to the local site. It leads students through adding two new pages, one for Colorado National Parks and one for Colorado National Monuments. It shows students how to add page images to the index page, and how to add a background image and page images to the National Park and National Monuments pages. It also instructs students in how to add relative links to all three pages, how to add an e-mail link to the home page, and how to add absolute links to the National Monuments page. It explains how to use the Site Map. Finally, it shows how to view source code.

Image Formats

• Vector images

• Bitmap images

• Pixel

• GIF – Graphics Interchange Format

• JPG – Joint Photographic Experts Group

• PNG – Portable Network Graphics

Images

• File size vs download time

• Optimize graphics don’t just resize

• Provide thumbnails

• Use the correct file format– GIF for cartoons and line drawings– JPG for photographs

Special Assignment

• In a new folder create a new web page

• Find a picture on the net or use one from your digital camera, it must be larger than 1Mb in size and the bigger the resolution the better.

• Create a optimized version of this image that is smaller than 600X800 with a file size smaller than 200Kb.

Special Assignment

• Use a image manipulation program or your choice to accomplish the previous step.

• Place the optimized image on your new web page.

• Add text below the image that tells the user how big the optimized page is and how big the original image is.

Special Assignment

• Link the original image to the optimized image so that when the user clicks on the picture on the web page the original image is downloaded and displayed on their computer.

• Make a link on your home page to this image page.

• Make a link on the image page to home.

Special Assignment

• What will this image page be named?

• How do you link a graphic to another graphic?

• In what application will the downloaded image be displayed?

• How do we prevent the user from leaving our site when they close the original graphic?