File Organization
Interactivities > File Organization
Introduction
Show
Hide
You may not have heard of this terminology. In any storage medium, there is always a way of arranging the files for quick access and searching. This applies to all web servers as well. A web server also requires good file organization, benefitting both the web developer and the user.
You will tend to see the benefits during the uploading phase where you upload your site to the ThinkQuest server using WEBDAV. If you have been working with a poor structure, you might end up having a site that does not work on the server because stray files are not being uploaded.
TOP
Creating a file structure
Show
Hide
How to begin
In ThinkQuest, you often begin by building your site outline/site map. This is mentioned in Toolkit's Site Content so do read up on that first.
Firstly, make a general folder that will contain all the files for the whole process of development of the site. You can name it "tq07" like we did.
Now, create the following folders which will come in handy: A "workfiles" folder, a "sources" folder and a "website" folder.
The "workfiles" folder will store all your raw images, workfiles such as files saved for image editing (e.g PSD files for Photoshop users) and downloaded scripts that have not been customized for your site.
The "sources" folder will store all forms of references which you might have used and might want a copy of it on your local machine. It may also contain notes that you want to make during the development phase.
The "website" folder will contain files that mirror the ThinkQuest server. Files and folders here MUST be exactly the same as how it would appear on the server.
Subdivide your folders
We strongly recommend that your "website" folder be further subdivided into a few folders. This is how it goes:
- All pages (files with extension ".html") can be stored right in this folder without having to create extra folders
- All images used in the building of the site can be stored in an "images" folder.
- All external style sheets can go into a "styles" folder.
- All scripts can go into the "scripts" folder.
Do note that this is the structure used for AJAX sites. For sites that do not use AJAX, multiple "index.html" might appear, so it will be good to create more folders to store each section.
TOP
Linking them up
Show
Hide
Naming the pages
You should already know that index.html is the main page which loads on the ThinkQuest server. For other pages, try your best to use meaningful yet short names. This applies to folders too.
For example, "history of San Francisco" page could just be named "history.html". It is a good practice not to use spaces in your file names because URLs(keyword) will have to be encoded if characters like spaces are used (%20 replaces the spaces).
Also remember that most servers are case sensitive, so just use lowercase letters since it is most common on the web.
Linkage
For links from the first level of hierarchy of the "website" folder (e.g index.html), you should have no problem linking them using relative links like "images/box.jpg" for an image in the "images" folder.
If you want to make a link to the images folder from a style sheet in the "styles" folder, then the relative link would become "../images/box.jpg" where the two dots in front allows an elevation up by one level.
TOP
Conclusion
Show
Drag and drop
Show
Hide
To make learning fun, we have created a flash game: "Drag and drop"
In this game, you will drag and drop relevant files into the correct folder. If you have read the content above, this should be an easy feat. Enjoy!
Play Drag and Drop!
TOP