File Organization
Juliet Davis
_______________________________________________________
Master Folder (Client)
(Holds all folders for that client)
ABC Corporation

 Web Site
 Brochure
 Logo
 Correspondence




 rootdirectory
 Images
 PhotoShop Comps
 Illustrator Files
 Sounds




- index.html
- about.html
- contact.html
- video.avi
- mystyles.css
images

File organization is critical in web design. Stay organized.
1) Your root directory should hold only the files that will appear on the Web (no Photoshop or
Illustrator files, etc.). Delete old files you are not using.
2) The home page is called index.html.
3) File names do not have spaces or special characters. You can use underscore or hyphen if you
need to separate words (example: foodgroups_fats.html).
4) It’s a good idea to use all lower-case letters for file names so that you can remember them
easily (example: index.html NOT Index.html).
5) Use file naming conventions. For example, utilize alphabetical order to cluster file names that
can be found easily together. Examples: button_blue.gif; button_red.gif; | headshot_frontview.jpg;
headshot_profile.jpg | bg_leaves.jpg; bg_stripes.gif
Paths
1) Link to Website Page: Here is an absolute link to a resume.html page in a root directory:
http://www.janedoe.com/resume.html. Or, if you have resume.pdf, place the .pdf document in
your root directory and the link will be: http://www.janedoe.com/resume.pdf. If you are using it as
an internal link from the root directory, it’s just resume.html or resume.pdf.
2) Link to Page Inside a Folder: Let’s say your site is huge and you have organized sections of
your site inside folders. On a zoo website, for instance, a page called zebras.html inside a folder
called mammals would be: http://www.myzoo.com/mammals/zebras.html or
mammals/zebras.html for the internal link.
3) Jumping to a Folder Above the Current Folder: To link to a file above the current folder, use
../ before the file name. Let’s say you are designing the zebra.html page (which is inside the
mammals folder) and you want to create a link from that page to the contact page, which is in the
folder above (the main root directory folder). That link would be: ../contact.html.