Web Design - Introduction to Graphics

Sections:  Introduction  |  Section 1  |  Section 2  |  Section 3  |  Section 4  |  Section 5

Section Four:  Part A  |  Part B  |  Part C  |  Part D  |  Part E  |  Part F  |  Part G  |  Part H

More Attributes Stop and Think? Have you ever been on a web site where a photo looks out of proportion? Often you will see this in instances of personal photos where an image has been modified using the width="" and height="" attributes. If the width to height ratio is out of proportion images often look either abnormally long or abnormally wide. Your best bet in regard to resizing images and displaying them on a web page is to use a combination of the methods listed previously, as seen in the below steps: Modify the canvas size in an image-editing software application – noting the new width and height pixel dimensions for your image and saving the image in the same format and location as before. Add the width="" and height="" attributes to the <img> tag in your HTML document using the new pixel dimensions from step 1. Save the HTML document and view the changes in a web browser. The width="" and height=""Attribute in Action Consider the following scenario... Upon review of the My Favorite Vacation web page, you realize that the photo of the Amazon River is just too big. So you decide to use an image-editing software application to adjust the canvase size of the image and add the new size pixel dimensions to the width="" and height="" attributes of my <img> tag. In an image-editing software application, you learn that the current size of the Amazon image, amazon.jpg, is 1200 x 900 – or 1200 pixels in width by 900 pixels in height. This is far too big. The image should be resized to something much smaller. In fact, it should be resized to about 1/3 its current size. You would then use the image-editing software to modify the canvas size to 400 pixels in width – ensuring that the height remains in proportion with the original dimensions. After making the adjustments, the new pixel dimensions are 400 x 300 – 400 pixels in width by 300 pixels in height. This is a much more manageable size for a web page. You then re-save the image as amazon.jpg and replace the original image. Now that have used an image-editing software application to adjust the canvas size, you can add width="" and height="" attributes to the <img> tag and input the new dimension values. The HTML code below would be used to not only add the Amazon.jpg image to the web page, but it would also ensure the image size is correctly displayed in a web browser. The last step in the scenario would be to review the the changes made to the My Favorite Vacation web page in a web browser to ensure the image modifications are appropriate. The image below demonstrates the changes made. Compare the image size displyed below to previous image size displayed in previous screenshots of the My Favorite Vacation web page. The Importance of Understanding Your File Structure You may recall from the reading from Module 1, adhering to your file structure is very important – particularly in regard to hyperlinks and images. If you do not correctly refer to images based on your file structure, your images won’t display on your web page. Let's explore that topic further. Next

© 2008 KCDL. All rights reserved.