File Organization, also know as Website Directory Structure. When building a website, it’s essential to create a directory (folder) structure correctly at the very start of your project.
Referring to the example on the left, please note the following:
Create a “root” (master) directory named final_project and inside it, create two folders. The directory doesn’t necessarily need to be called final_project, you can name it after the client project you’re working on such as “acme_company” for example.
The first folder should be named final_web. This folder will contain all the html files for your website, a .css file, and an images folder with all your gif, jpg, and .png files that are part of the website. This final_web folder will match the directory structure on the web server.
The second folder can be named source_files. This is where you’ll keep all of your original design files should you ever need them again, and trust me, many times you will need them again. (e.g. Photoshop and Illustrator files, Flash files, sound files, raw images downloaded from your camera/phone, etc.)
You should keep your files separated into different folders so that the website files stay organized and so that extraneous files do not get uploaded to the server. Normally, you’ll only upload your final_web folder and never your source_files folder to a server. Source files like Photoshop and Illustrator files should not be uploaded to the server.
It is critical that you set up this directory structure before you start working on your website. If you attempt to organize your files after you’ve made the site, you will, in all likelihood, break the links in your web pages.
The video tutorial below covers the basics of organizing your website files.
Remember, organize your files first, before you start building your website.