Designing Your Websites Directory Structure

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!

Copyright(C) Bucaro TecHelp.

Permission is granted for the below article to forward, reprint, distribute, use for ezine, newsletter, website, offer as free bonus or part of a product for sale as long as no changes are made and the byline, copyright, and the resource box below is included.

About The Author

Stephen Bucaro

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.

In The News:

This RSS feed URL is deprecated, please update. New URLs can be found in the footers at https://news.google.com/news

Are you thinking about starting a new WordPress web designing business? Let's check out the mandatory steps!
Irish Tech News
Did you ever think about starting your own WordPress web designing business? A lot of people often look for advice for starting a new web design business. Besides plenty of hard work, dedication, patience and effort which all will be required to start ...


Postern Wins Three Graphic Design USA (GDUSA) 2018 American Web Design…
Virtual-Strategy Magazine
The annual American Web Design competition showcases websites and other online communications, like apps, microsites, social media, video and more, from design firms, ad agencies and in-house departments across the country. This year, the event ...


Business 2 Community

How Artificial Intelligence is Shaping the Future of Web Designs
Business 2 Community
Lately, there is a lot of discussion happening on Artificial Intelligence (AI) and its capabilities in web designing. Believe it or not, AI can do anything. Of course, we can see that many companies are experimenting creative things related to ...

and more »

Search Engine Land

Is responsive web design enough? (Hint: No)
Search Engine Land
Yet many questions remain as to what configuration truly works best for your website. Responsive web design has dominated the industry as the preferred configuration, but as the mobile web becomes more competitive, should the industry move on?

and more »

Triad Business Journal

Top of the List: The Triad's Largest Web Design Firms
Triad Business Journal
The full List of the largest web design firms in the Triad is available to subscribers only. Don't subscribe? Sign up today. In addition to the weekly print edition, our subscribers can view the entire List online. Are you on The List? Each week we ...


Lehigh Valley Web Design Team at KDG Wins Three Hermes Creative Awards
PR.com (press release)
Allentown, PA, May 24, 2018 --(PR.com)-- The Lehigh Valley web design team at KDG has just been awarded three Hermes Creative Awards. The Hermes Creative Awards honor the best in web design, copywriting, and marketing. Among thousands of ...


Postern Wins Three Graphic Design USA (GDUSA) 2018 American Web Design Awards
PR Web (press release)
Postern, a full-service advertising agency located in downtown Frederick, has been recognized as a winner of Graphic Design USA's (GDUSA) 2018 American Web Design Awards for three websites the company designed for local nonprofits and businesses.


Immune Design Announces Launch of Web Portal for SYNOVATE Phase 3 Study of CMB305 Immunotherapy in ...
Nasdaq
SEATTLE and SOUTH SAN FRANCISCO, Calif., May 24, 2018 (GLOBE NEWSWIRE) -- Immune Design (Nasdaq:IMDZ), an immunotherapy company focused on novel therapies in oncology, today announced the launch of the patient and healthcare provider ...


Customer Think

5 Essential Features of Successful Mobile Web Design
Customer Think
Source: Pexels.com (CCO License). Technology is in our hands these days – literally. Gone are the days of having to be at home, sitting at a desktop computer to access the internet. From smartphones to Wi-Fi, everyone has the internet with them at all ...


Immune Design (IMDZ) Reports Launch of Web Portal for SYNOVATE Phase 3 Study of CMB305 Immunotherapy in ...
StreetInsider.com
Immune Design (NASDAQ: IMDZ) today announced the launch of the patient and healthcare provider websites for the SYNOVATE study – a pivotal trial to evaluate CMB305 immunotherapy in synovial sarcoma patients. Clinical sites will soon be open for ...

Google News

Website Advertising: 10 Dynamic Tactics To Super-Charge Your Sales

Here are 10 dynamic website advertising tactics to super-charge your... Read More

Can a Webpage Created Without HTML?

The HTML editor is usually a webpage design software that... Read More

Hexadecimal Color Notation on the Web

When designing elements for your webpage, you will often be... Read More

Why Content is King of Website Design

If there's one thing that most web site developers can... Read More

How To Choose A Website Designer

Now that you have decided that it is time to... Read More

Breathe New Life Into Your Half-dead Website By Using Words That Sell

This article may come as a surprise to you.Especially since... Read More

7 Web Site Design Mistakes That Will Lose You Clients

In today's world, a web site is virtually mandatory for... Read More

Teach Yourself CSS The Easy Way

I taught myself HTML back in the mid-nineties and was... Read More

Top Ten Ways to Use Audio on Your Site

Audio can provide an added dimension to your site. It... Read More

How To Get A Pay Raise From Your Web Site

How many of the visitors to your web site take... Read More

Creating Personal Web Sites (Part 2)

This is the second part of a two-part article about... Read More

The Importance of Choosing Your Website Keywords Carefully

The importance of choosing your website keywords carefully is very... Read More

Plugging the Dreaded World Wide Web Black Hole is Just the First Step

You have created your custom error page so now all... Read More

Web Design: Should You Hire Someone or Do It Yourself?

So you need a website. You are not sure if... Read More

How to Double Your Online Sales Without Spending Another Dime on Advertising

Learning how to convert visitors to your web site into... Read More

6 Reasons Why Web Templates Are Todays Trend

As the Internet blooms at an alarming rate, so as... Read More

Ten Basic Steps For Building A Web Site That Works

1. Assemble a web site development plan that is integrated... Read More

Web Crimes: how to avoid common website design mistakes

Thinking about designing your own website? Think again about adding... Read More

Website Savvy: 10 Key Steps to Turn Your Customers ON!

"How to turn "slightly interested" customers into "I've got to... Read More

Do You Want To Save Time With Your Web Design?

It starts off simply; a few HTML pages, a few... Read More

How to Get Your Visitors to Create Content for Your Website

An ongoing challenge for webmasters today is to provide fresh... Read More

Put Up A Website And Start Promoting In About An Hour

I can't figure out people who have products or information... Read More

Web Page Building for Beginners 4

Page ranking by search engines such as Google are not... Read More

Are You A Bill Clinton Webmaster?

One of the most frequent questions I get asked about... Read More

Top Ten Ways to Increase Web Sales - Part 1

You have only 10 seconds to impress your potential buyer.... Read More