GWDA223 Intermediate Web Page Scripting :: Art Institute

Week 9: File Management

Relative File Paths Refresher

Exploring Relative Paths

EXERCISE: Organize a Sales Site

The Cat Hats Galore site is nearly ready to launch. It still needs some text, which the copywriters are still putting together. You won't need to worry about the copy in this exercise, though.

Cat Hats Galore home page

At almost the last minute, the site's project manager noticed that the site folder is not organized!

Cat Hats Galore site folder

Your job is to organize the file and folder structure for the Cat Hats Galore site. Then you'll need to rewrite all of the image and link paths so that the images still show and the site links still function.

This is a real-world problem. Many times I have had to reorganize a site and then get it back to functioning throughout. Sometimes brand new web professionals come out of school knowing how to design a nice site but then get utterly lost when asked to manage files and paths.


Cat Hats Galore site folder


Do most of the following by hand, not using Dreamweaver. Understanding how relative paths are built is a critical skill to have in this field. You need to know how to do it directly in the code when necessary. If there's a particular Dreamweaver task that you're wondering if you can use, ask yourself, "is Dreamweaver doing for me what I'm supposed to be figuring out on my own?"

  1. Take a look at the existing HTML and CSS code, as well as all of the file names and how they all currently interrelate in the code. Take your time to thoroughly understand the site as it now exists; don't take shortcuts here or you will waste a lot of time later.
  2. Create the following new folders inside the site folder, and move the relevant files into them:
    • folder iconimages
    • js
    • css
    • casual-hats
    • formal-hats
    • silly-hats
    • about
  3. Rename the main page for each of the following folders to index.html. This will assure that each site folder has a default page when no file name is entered in the address bar:
    • casual-hats
    • formal-hats
    • silly-hats
    • about
  4. Draw up a site map for the new file and folder structure of the site. This will help you visualize your site structure better when you need to do steps 5 and 6 below. Scan in your site map for Dropbox submission.
  5. Fix the href relative paths for the menu/links on every page so that the links work with your new folder structure. You may copy and paste bits of code using Dreamweaver's Find and Replace feature to do this.
  6. Fix the src relative paths for the images on every page so that the images all show again.
  7. TEST TEST TEST! Make sure that every single image displays correctly, and that every menu item and other links on each page work, including the logo which clicks back to the home page.
  8. ZIP up the site folder and turn it in.

Dropbox go to eCompanion

Upload the following by midnight of our next class day:

Week Assignment File Name
9 Cat Hats Site
Cat Hats Site Map cat-hats-

Assignment Details

Cat Hats Site

Complete the file management exercise described on the left under Exercise: Organize a Sales Site.

Scan in your site map, and ZIP up the site folder. These go into two seperate Dropbox basket.