Deprecated: mysql_connect(): The mysql extension is deprecated and will be removed in the future: use mysqli or PDO instead in /home/a26f9f83/public_html/articles/includes/config.php on line 159
Designing Your Websites Directory Structure > NetSparsh - Viral Content you Love & Share

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

Fast Company

The future of web design is less, not more
Fast Company
The internet is a system that demands more: more engagement, more clicks, more ads, more content, more code, more servers, and more devices. The size of a typical web page has increased exponentially in recent years. Thirty-nine percent of young ...


Franklin County School Board must pay $11000 to web design firm
Roanoke Times
In its initial filing, HD Web Design sought $17,332.44, or half of the total project cost. But after Maddy filed a motion for summary judgment, the complaint was amended to seek $11,252.75 for the work that had been completed at the time of cancellation.

and more »

Business 2 Community

4 Ways to Ensure Effective Web Development
Business 2 Community
When it comes to building a new website, many businesses choose to focus predominantly on the design aspect of the project when approaching agencies to carry out the work. Whilst design is a vital part to any web development project, there are a vast ...


Adweek

This New Tool Makes Eye-Tracking Tech More Accessible to Web Designers
Adweek
At least that's the premise of an increasingly popular practice among web designers and advertisers: the use of biometric technology to track and test consumer's eyes as they roam around a screen. Proponents say these devices, which range from infrared ...


Customer Think

Top Ways to Improve the Web Design for Enhanced Customer Experience
Customer Think
The design for the web store is an essential facet of the customer experience today. A device-wide ease-of-use and accessibility is the desire of every customer today, whether they are looking for a product or a service. However, to achieve this, the ...


Boing Boing (blog)

Modern web design best practices
Boing Boing (blog)
1. Let Users Know About Your Mobile Application. The very first thing you must do when a user visits your website is to show them a big modal dialog telling them that they should just install the mobile application instead.


Web Design Company, Lounge Lizard, shares Insider Tips for better Email Marketing
PR Newswire (press release)
27, 2018 /PRNewswire/ -- Lounge Lizard is globally recognized as a top New York web design firm within the web design and development industry. Lounge Lizard's brandtenders are creative, tech-savvy, and passionate in developing innovative strategies ...

and more »

New York Web Design Company, Lounge Lizard, discusses 6 Things Google wants you to do for a Faster Website
PR Newswire (press release)
20, 2018 /PRNewswire/ -- Lounge Lizard is globally recognized as a top New York Web Design Company within the web design and development industry. Lounge Lizard's brandtenders are creative, tech-savvy, and passionate in developing innovative ...

and more »

SunStar Strategic Wins Web Design Award
PR Newswire (press release)
ALEXANDRIA, Va., Oct. 3, 2018 /PRNewswire/ -- The Web Marketing Association has presented SunStar Strategic with a 2018 Award for Outstanding Achievement in Web Development. The award reflects reaching the standard of excellence level in the ...

and more »

Customer Think

Know about the current trends in web development
Customer Think
In case of web development, you may have probably heard that the only constant is the change. It is an industry-defining statement as web development keeps on changing. User expectations are evolving rapidly, and it is quite essential than ever before ...

Google News

Bad Web Design: ActiveX

ActiveX uses an interesting method for enforcing security ... it... Read More

Designing Your Web Site For ALL Browsers

Let's face it. Building a web site that browses consistently... Read More

Tips for a Successful Website for Any Organization, NGO or GO

Most NGOs (Non-Governmental Organizations) don't understand these important aspects of... Read More

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

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

Graphic Terms- The Basics Part I

You're almost set. The content of your website, e-book, or... Read More

E-covers for Your Niche Market

When creating an e-cover the what's the first thought that... Read More

What is ASP.NET

ASP.NET is a new programming framework from Microsoft for developing... Read More

Elements of Graphic Design for Your Website

We've all seen them. Poorly designed web sites that make... Read More

One-Product Sales Sites: Avoid These Top Blunders

One product, one long web page: this kind of web... Read More

A Web Site That Sells Is All One Needs To Have A Successful Online Business!

There are more than billions of Web Sites, running Online... Read More

5 Ways To Automate Your Site

Automating your online business is one of the most important... Read More

Make Your Site Quick To Load!

The time it takes to load your site can make... Read More

Content - the Key to Long Term Success

Every day internet marketers are inundated with the latest fad... Read More

Is Your Website?s Copy Up to the Mark?

The Internet is a relatively new medium. What works for... Read More

Custom Website Design - 7 Steps to a More Professional Website

If you are trying to sell a product or service... Read More

Creating a Favicon

Once, I attempted to create a favicon (the little graphic... Read More

How to Create A Homepage That Works

Want to know what the worst thing to say on... Read More

How Does Your Website Measure Up?

Does your website make a good first impression? Is the... Read More

Tips on How to Design a Great Site

Have you ever walked pass a shop that, for some... Read More

Awards Program Debate

Daily article:One of the most debated subject among webmasters is... Read More

How Your Business Can Win Online

There are lots of websites out there that do little... Read More

Why Dot-Coms Fail - a Webmasters Perspective

Everyday we hear that another company goes out of business.When... Read More

How To Write An Effective FAQ Page

Websites that have multiple pages usually have a Frequently Asked... Read More

A Landing Page is Not an Order Page (and why it matters)

To explain my point I need to first confuse the... Read More

So Much About META Tags!

I've written about META tags in the past, and I... Read More