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

Understanding Your File Structure Stop and Think In Module 1 you completed the Course Folder and Portfolio Structure assignment in which you created a Web_Design course folder structure like the one listed below. In the assignment you created a Web_Design folder with six sub folders (Module1, Module2, Module3, Module4, Module5, and Portfolio). In addition, each module folder contained an Images subfolder and the Portfolio folder contained subfolders titled: CSS, Docs, and Images. Previously we learned that the below code only works if the HTML document and the image to be displayed are listed in the same folder. In reviewing our Web_Design folder structure you see that we have a separate folder for images in each module as well as in the Portfolio folder. This is good web design practice - separating file formats. Based on this file structure, all your images will be housed in the images folder and the HTML documents will be housed in the module or Portfolio folders. This poses a problem, though, with our code above. If we move the amazon.jpg image to the Images folder, where it should be, then view the My Favorite Vacation web page, the image is no longer displayed. Imagine for a second that you are the HTML document, DreamVacation.html, which is housed in your Module2 folder. Now image you need to reference, or get to, the amazon.jpg image that has been moved to the Module2 > Images folder. What steps would you need to take to get to the amazon.jpg image? Enter the Images folder. Access/refer to the amazon.jpg file. To replicate the steps above we need to modify our scr="" attribute in our <img> tag. Let's consider each step above to determine how we can replace that action with the appropriate HTML code to access the amazon.jpg photo. Refer to Module 1 > Section 3 for additional guidance. To enter a folder (in this instance the Images folder) use the name of the folder followed by a forward slash: Images/ Once in the Image folder, use the file name (in this instance amazon.jpg) to access the the appropriate file. So using the information above we would create a new src="" value so as to point to our newly moved amazon.jpg file now listed in the Images folder. Be sure to really look at the src="" attribute in the above code to understand the parts. Next

© 2008 KCDL. All rights reserved.