Transcript Slide 1
Project Two Adding Web Pages, Links, and Images Define and set a home page Add pages to a Web site Describe Dreamweaver's image accessibility features Describe image file formats Insert, resize, and align images within a Web page Describe the different types of links Create a relative, absolute, and e-mail links Describe how to change the color of links Edit and delete links Describe and display the Site Map Describe Code view, Split view, and Design view View 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?