Module 2 - Analyzing and Designing a Web Site
File Structure
The Site Structure Map and the File Structure of your site are different. The site structure map is a visual representation of how the site pages are organized from the point of view of the person navigating the pages. The File Structure is how the HTML or image files will be organized on the web server (your public.www folder on the H:/Home Drive).
Here is a way you can document the file structure:
- For each HTML files (web pages) - create a file name, a page title, and determine what folder the file will be located in.
- For images – create a file name for each image, write the “alt text” description, and determine what folder the file will be located in. (“Alt Text” is a text description of what an image contains. Persons with visual disabilities use special software that reads the text on a web page, and the Alt Text is used by these persons to understand what is included in your images on the web page.)
Here is an example of the file structure for the online proposal web site:
Web Site File Structure:
- "proposal” – name of folder for the entire site – the following files and folders will be inside this folder:
- “index.html” (Home Page) – Page Title: “Online Proposal”
- “background.html” – Page Title: “Invention Background”
- “site_description.html” – Page Title: “Site Description”
- “bibliography.html” – Page Title: “Bibliography Description”
- “internet_sources.html” – Page Title: “Bibliography of Internet Sources”
- “non_internet_sources.html” – Page Title: “Bibliography of Non-Internet Sources”
- “images” – folder to store images for the entire site – these files will be inside this folder:
- “railroad.gif” – Alt text: “photo of train”
To explain the Web Site File Structure document a bit, the top level is the folder that will hold the entire site – in this case, named “proposal.” Indented below are all the files and folders that are inside the proposal folder. In this case, we have six HTML pages, and a folder called “images.” Indented under the images folder is one photo file called “railroad.gif.” The photo file will be stored inside the images folder. It is common practice to create an images folder for your web site, and to place all your images inside it. It helps to keep the file structure organized, especially if you have a lot of images.
Notice that file and folder names are kept short, and that we use no capital letters or spaces in the names - the reason for this it to keep your site compatible with the largest number of web servers. This way, if you ever move your site to a web server that doesn't like to have spaces or caps in filenames, it will still work.
The Web Site File Structure is one of the documents you will use when it is time to build the actual web pages in Netscape Composer. Having the names of the folders and files determined ahead of time, you can quickly build the files in Composer. It also helps you keep things straight in your own mind when you are trying to edit files and have several pages open at once.
One other note - notice that the file name for the Home Page is “index.html”. This is a special name for the home page. By default, web browsers are looking for a file named index in the folder of your web site. If they find it, they open it automatically. This makes the URL that you need to give a user shorter, so it is a good thing to do.