Practice resizing an image - Shippensburg University



Using Tables to Organize ImagesAdapted from University of Washington, Web Design and Development.Today we’ll work on importing graphics into your web sites. You can use either digital cameras and/or of the Internet to acquire images (remember that images on the web are protected by copyright law and cannot be used unless written permission is given by the owner of the copyright, or the image is in the public domain!).Find three images you might use or want to work with. Save them in your images subfolder. We’ll practice with these by placing them on your home page, where the picture size is 450 x 450 pixels. FYI: When scanning images or setting the quality settings on your digital camera, remember to think about the total number of pixels you are capturing and what final size you want the image to appear on the web page. It is a good idea to capture an image that has more pixels than you need, since a graphics program can be used to make the image smaller, but can't make the image larger without lowering the quality.Practice resizing an imageBefore you can use your images on your web page, you must first resize them to the exact number of pixels in which they will appear on the page.If you want, read the introduction to resizing images in the online document Resizing a Digital Image. Our computers in DHC002 use Paint (under Applications), so we’ll use that for today.Resizing one of the images to create a 450 pixel wide viewable image. Now try again, but this time resize the image to a 72 pixel wide thumbnail image (most screens display 72 pixels per inch).Practice cropping an imageWhile the resize image function is a useful function, sometimes you will want more control over how the size of the image is reduced. The crop function allows you to cut out a portion of the image or change the image dimensions without distorting the image. If you want, read the introduction to cropping images in the online document Cropping Photos: Every Picture Tells a Story.Using the same original image from the previous activity, use the crop function along with the resize function to create a thumbnail image that is 72 x 72 pixels in size and a viewable image that is 450 x 450 pixels in size. Experiment with cropping the image in different ways to create a different look.Saving an imageNow that you have cropped and resized your image, save it in a suitable web format. Images with gradations in color or many different colors, such as photographs, are best saved in jpeg format. In this activity, you will learn about how to optimize a jpeg image and then save your cropped and resized image file as a jpeg.If you want, read the sections on "Image Formats" and "JPG and PNG Basics" in WebMonkey's Site Optimization Tutorial. Save the image you cropped and resized in the previous activity as a jpeg. Experiment with different quality settings and then observe the resulting file sizes and image quality. Try and determine what compression setting will achieve the lowest file size while still producing an image of adequate quality.The Real Thing: Cropping, Resizing, and SavingIf you haven’t yet, create copies of the images to save:First, crop and resize each of the three original images once more to create viewable images that are 450 x 450 pixels in size.Next, crop and resize each of the three images to create thumbnail images that are 72 pixels wide.All of these images should be optimized and exported in the jpeg file format. Once you are done, you will have 6 images.Adding Images to Your Web PageWe’re going to use a table to organize the images on the page, just to make it easier to see how they work. You can either open up your home page or just a new blank html page (or just duplicate a page you’ve already made and save it as “image_practice.html”). Once you’ve got your site open and ready to work with, create a table 1x3 and place your thumbnail images into it. Remember to name all of your images with an ALT name, and play around with cell padding and borders.If you click on the image, you’ll see an images panel with options to some of the things we’ve done outside of Dreamweaver: edit image settings, crop, sharpen. Play around with some of these features. What are some drawbacks of working with images just here? (besides the fact that we don’t have Photoshop in our lab!)Once you have added the images, the next step is to create a link from each thumbnail image to the larger, viewable image…can you remember how to do this?Once you are completed, the final page should look something like this (the html code for the sample is provided below).Sample Code:<a href="images/photo1.jpg"><img src="images/photo1_tmb.jpg" ALT="hiking into an alpine lake" width="72" height="72" style="border:none" /></a><a href="images/photo2.jpg"><img src="images/photo2_tmb.jpg" ALT="kayaking in Puget Sound" width="72" height="72" style="border:none" /></a><a href="images/photo3.jpg"><img src="images/photo3_tmb.jpg" ALT="Lake Diablo" width="72" height="72" style="border:none" /></a>Now try to format your layout so that there is a brief description of the photo, or caption, next to or below each picture. Create a 2x3 table and see what you can do. ................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download