Designing Your Website's Directory Structure

By Stephen Bucaro

Any kid, and their grandmother too, can make a webpage. There are many "wysiwyg" webpage design applications that let you create a webpage as easy as typing text. But only a few people can create a WEBSITE. The stumbling block is knowing how to link webpages together to form a website. I have seen many websites that consist of a single webpage - about a mile long!

The first problem is that websites are contained in virtual directories. You know that your webpages can be found at yourdomain.com, but the actual path to yourdomain.com on the web server may be known only by the system administrator. And the system administrator can move your website to a different folder, or even a different computer, without changing its virtual address.

The second problem is that most people don't know how to write a relative link. Relative links have the advantage that you don't need to know the path to the webpage that you want to link to, you only need to know where it is "relative" to the webpage containing the link.

Designing Your Directory Structure

The first step to implementing a website is to design the directory structure. Let's design a directory structure for a simple download website. The website consists primarily of articles and digital material that visitors can download. You could just dump everything at the top level of the website. Good luck maintaining that website!

To keep the files organized, you need to create sub-directories (folders) on the website. Even though the website consists only of articles and digital downloads, you need five sub-directories, as described below.

- articles
- downloads
- general
- common
- cgi-bin

You understand what the "articles" and "downloads" sub-directories are for, but what are the other three sub-directories for? It's standard practice to provide certain features on your website, as listed below.

- About
- Contact
- FAQ
- Privacy Policy
- Search
- Sitemap
- User Agreement

Each of these features requires a webpage. Instead of dumping the webpages at the top level of the website, or mixing them in with articles or downloads, let's put them together in a folder named "general" (I'm sure you can think of a better name).

All of your webpages use certain things in common, for example, your logo graphic. If your web server provides SSI (Server Side Includes) all your webpages can share a common header file and a common footer file. You might also define all your website's styles in a common style sheet. Let's put all of these files in a folder named "common".

Your contact page might use an email form. If your server provides server-side scripts, you would place the email form script in a folder named "cgi-bin". Cgi-bin stands for "Common Gateway Interface - Binary". Few people use CGI any more, and those that do don't use binary files, but the folder name has stuck as a traditional place to store scripts. Almost all websites come with a preconfigured
cgi-bin folder, and the website may be configured so that the cgi-bin folder is the only folder with rights to run scripts.

I would also recommend that you create certain sub-directories for some of the above mentioned directories. Most web pages contain images. You could dump all the images in the same folder with the webpages, but when you get more than about 50 files in a folder, it becomes difficult to maintain. You should create an "images" sub-directory in the articles, downloads, and general directories. The downloads directory should also have a "files" sub-directory to store the downloads.

This arangement of directories and sub-directories will provide good file organization for the example website. Understanding my reasoning for this directory structure should help you to design a directory structure for the website you have in mind.

Default Page Configuration

Every website has at least one default webpage configured (also called the "home" page). The default webpage is the webpage that is returned when the user enters or clicks on a link containing only the domain name, without a specific file name. On a Unix or Linux web server, the default webpage will usually be "index.htm". On a Windows web server (IIS), the default page will usually be "default.asp".

The website administrator, or if your webhost provides the required "control panel" feature, you can actually configure any page to be the default page. If your web server has more than one default page configured, I would recommend removing all but the default page that you intend to use.

Now, let's assume that all of your webpages need to link to an image file named "logo.gif" stored in the "common" folder. The relative link on your default webpage would be as shown below.

"common/logo.gif"

The website file manager interprets this as "look in the folder named common for the file named logo.gif".

However, the link on any webpage contained in one of the sub-directories would be as shown below.

"../common/logo.gif"

The website file manager interprets this as "go up one level, then look down in the folder named common for the file named logo.gif".

This difference in the link may not be a problem unless you use SSI or ASP (Active Server Pages) to build your webpages from a common header file and a common footer file. Then you need a different link in the common file depending upon whether the page linked to the common file is the default webpage (where you would use common/filename) or a webpage contained in a sub-directory (where you would use ../common/filename). There are several ways to solve this problem.

1. If your website has a server-side scripting engine like ASP or PHP and you know how to program, you could implement code that selects the proper link.

2. You could use the complete path, including the domain name, on all pages. This will cause problems if you ever have to move your website to a different web host (Until all the dns servers across the planet have been updated).

3. You could put your home page in a sub-directory, for example "common", and make your default page into a re-direct to your home page. Then you would use "../common/filename" for all links. The following meta tag, placed the head section of your default webpage, will immediately redirect the users browser to your real home page.

meta http-equiv="refresh" content="0,url= "http://yourdomain.com/common/homepage.htm"

In this article, I showed you how to design a directory structure for your website and how to create relative links to link all your webpages together to form a website. Website visitors don't like to do a lot of scrolling, so try to keep your webpages to only two or three screens high. Please, no more websites that consist of only one mile long webpage!

----------------------------------------------------------
Resource Box:
Copyright(C) Bucaro TecHelp. To learn how to maintain your computer and use it more effectively to design a Web site and make money on the Web visit bucarotechelp.com To subscribe to Bucaro TecHelp Newsletter visit http://bucarotechelp.com/search/000800.asp
----------------------------------------------------------

About the Author

To learn how to maintain your computer and use it more effectively to design a Web site and make money on the Web visit bucarotechelp.com To subscribe to Bucaro TecHelp Newsletter visit
http://bucarotechelp.com/search/000800.asp

More Web Site Design Articles:

Free Website Templates

Useful Links
Web Designer in Philippines
Web Design Resources


	Free Website Design Templates view actual page \| download view actual page \| download view actual page \| download Designing Your Website's Directory Structure By Stephen Bucaro Any kid, and their grandmother too, can make a webpage. There are many "wysiwyg" webpage design applications that let you create a webpage as easy as typing text. But only a few people can create a WEBSITE. The stumbling block is knowing how to link webpages together to form a website. I have seen many websites that consist of a single webpage - about a mile long! The first problem is that websites are contained in virtual directories. You know that your webpages can be found at yourdomain.com, but the actual path to yourdomain.com on the web server may be known only by the system administrator. And the system administrator can move your website to a different folder, or even a different computer, without changing its virtual address. The second problem is that most people don't know how to write a relative link. Relative links have the advantage that you don't need to know the path to the webpage that you want to link to, you only need to know where it is "relative" to the webpage containing the link. Designing Your Directory Structure The first step to implementing a website is to design the directory structure. Let's design a directory structure for a simple download website. The website consists primarily of articles and digital material that visitors can download. You could just dump everything at the top level of the website. Good luck maintaining that website! To keep the files organized, you need to create sub-directories (folders) on the website. Even though the website consists only of articles and digital downloads, you need five sub-directories, as described below. - articles - downloads - general - common - cgi-bin You understand what the "articles" and "downloads" sub-directories are for, but what are the other three sub-directories for? It's standard practice to provide certain features on your website, as listed below. - About - Contact - FAQ - Privacy Policy - Search - Sitemap - User Agreement Each of these features requires a webpage. Instead of dumping the webpages at the top level of the website, or mixing them in with articles or downloads, let's put them together in a folder named "general" (I'm sure you can think of a better name). All of your webpages use certain things in common, for example, your logo graphic. If your web server provides SSI (Server Side Includes) all your webpages can share a common header file and a common footer file. You might also define all your website's styles in a common style sheet. Let's put all of these files in a folder named "common". Your contact page might use an email form. If your server provides server-side scripts, you would place the email form script in a folder named "cgi-bin". Cgi-bin stands for "Common Gateway Interface - Binary". Few people use CGI any more, and those that do don't use binary files, but the folder name has stuck as a traditional place to store scripts. Almost all websites come with a preconfigured cgi-bin folder, and the website may be configured so that the cgi-bin folder is the only folder with rights to run scripts. I would also recommend that you create certain sub-directories for some of the above mentioned directories. Most web pages contain images. You could dump all the images in the same folder with the webpages, but when you get more than about 50 files in a folder, it becomes difficult to maintain. You should create an "images" sub-directory in the articles, downloads, and general directories. The downloads directory should also have a "files" sub-directory to store the downloads. This arangement of directories and sub-directories will provide good file organization for the example website. Understanding my reasoning for this directory structure should help you to design a directory structure for the website you have in mind. Default Page Configuration Every website has at least one default webpage configured (also called the "home" page). The default webpage is the webpage that is returned when the user enters or clicks on a link containing only the domain name, without a specific file name. On a Unix or Linux web server, the default webpage will usually be "index.htm". On a Windows web server (IIS), the default page will usually be "default.asp". The website administrator, or if your webhost provides the required "control panel" feature, you can actually configure any page to be the default page. If your web server has more than one default page configured, I would recommend removing all but the default page that you intend to use. Now, let's assume that all of your webpages need to link to an image file named "logo.gif" stored in the "common" folder. The relative link on your default webpage would be as shown below. "common/logo.gif" The website file manager interprets this as "look in the folder named common for the file named logo.gif". However, the link on any webpage contained in one of the sub-directories would be as shown below. "../common/logo.gif" The website file manager interprets this as "go up one level, then look down in the folder named common for the file named logo.gif". This difference in the link may not be a problem unless you use SSI or ASP (Active Server Pages) to build your webpages from a common header file and a common footer file. Then you need a different link in the common file depending upon whether the page linked to the common file is the default webpage (where you would use common/filename) or a webpage contained in a sub-directory (where you would use ../common/filename). There are several ways to solve this problem. 1. If your website has a server-side scripting engine like ASP or PHP and you know how to program, you could implement code that selects the proper link. 2. You could use the complete path, including the domain name, on all pages. This will cause problems if you ever have to move your website to a different web host (Until all the dns servers across the planet have been updated). 3. You could put your home page in a sub-directory, for example "common", and make your default page into a re-direct to your home page. Then you would use "../common/filename" for all links. The following meta tag, placed the head section of your default webpage, will immediately redirect the users browser to your real home page. meta http-equiv="refresh" content="0,url= "http://yourdomain.com/common/homepage.htm" In this article, I showed you how to design a directory structure for your website and how to create relative links to link all your webpages together to form a website. Website visitors don't like to do a lot of scrolling, so try to keep your webpages to only two or three screens high. Please, no more websites that consist of only one mile long webpage! ---------------------------------------------------------- Resource Box: Copyright(C) Bucaro TecHelp. To learn how to maintain your computer and use it more effectively to design a Web site and make money on the Web visit bucarotechelp.com To subscribe to Bucaro TecHelp Newsletter visit http://bucarotechelp.com/search/000800.asp ---------------------------------------------------------- About the Author To learn how to maintain your computer and use it more effectively to design a Web site and make money on the Web visit bucarotechelp.com To subscribe to Bucaro TecHelp Newsletter visit http://bucarotechelp.com/search/000800.asp More Web Site Design Articles: How to Harness the Differences Between Designers and Developers Web Design Layout For a More Positive Visitor Experience 10 Valuable Web Design Tips and Tricks Using a Template Website Design 8 Specific Ways to Avoid Common Web Design Mistakes Handy Hints For Web Designers How to Create a Website - The Basics Website Design Tips For Site Appearance Your Website Layout The Basic Skills Needed to Become a Web Designer - Simple Programs You Can Teach Yourself XHTML Equals to Browser Compatibility Information About Web Design Training You Can Have a Bright Career in Web Design Taking Your First Steps Toward Creating a Personal Website Inspiring Designs For Your Website How to Design a Successful Website - A Practical Guide! Choose Colors While Designing Web Pages Remarkable Tips For Freelance Web 2 Graphic Design Templates Dreamweaver Vs FrontPage Review What is the Best File Format For Saving Images on the Web? Barack Obama's Website is Web 2.0 at Its Best Role of Site Structure in Web Designing and Traffic Modern Web Design Techniques 7 Must Know Rules For Website Designers Web Designing For Your Home Page Eight Tips to Enhance Online Profits Website Design the Latest Trends What Do All These Graphics File Extensions Mean? The Psychology of Colour in Web Design How to Create a Successful Web Page Layout Website Templates - Build Your Own Website Benefits of Using a Website Template Website Designing – Things To Keep In Mind A Website Checklist 8 Must Have Graphic Design Skills in Today's Market Freelance Web Designer - Why You Should Use One! The Importance Of Getting The Best Web Design Team Involved In The Project Finding and Using a Free Web Site Template 7 Tips for Improving Your Website Design How To Think Like A Web Designer Planning An Effective Web Site Design Web Site Design: Setting the Wrong Backgrounds and Reducing Readability The Best Home Pages Establish Identity and Purpose in a User-Friendly Interface Website Creation Checklist Considering A WebSite Or Unhappy With The One You Have? Don't Trust This Kind Of Web Designer Web Design-Impact Beyond Measure User-Friendly Web Design The Powerfully Attractive Webpage Template No More Font Tags! Seven Reasons to Hire a CSS Web Designer Why Should One Use Web Templates Dreamweaver Tip - Build Better Websites Faster with Templates Some Of The Crucial Components Your Web Site Needs To Be Customer Friendly Benefits of Web Site Templates Advantages of Having a Website How Do You Choose a Web Designer? Website Templates - Who Benefits? Build Websites Easier with Premade Templates The Newbie's Guide to Small Business Web Design Pages to Include in Your Website Do You Really Own Your Web Site? Maybe Not Designing Your Website's Directory Structure 7 Web Site Design Mistakes That Will Lose You Clients Optimal Website Design Becoming A Website Designer How to Design a Search Engine Friendly Website 6 Reasons Why Using Flash is a BIG Mistake
Free Website Templates Web Design Articles Math Calculators Java Programs Site map Contact Us Useful Links Web Designer in Philippines Web Design Resources