How To Build Your Website Structure And Design. You Must Create Your Website To Achieve Your Objectives — Nothing More! Do not Be Sidetracked By Less-Important Issues!
You Need a Strong Website...
Earlier in this Website section, you learned that the first job is to define your reasons for having a Website, and it's purpose and objectives. Bearing this in mind, you must now structure the outline of your Website. Don't decide to add superfluous pages just because you like them, or you think your visitors will enjoy them, or even be entertained by them. Perhaps they will, but you must ask yourself if these extra pages can help achieve your objectives.
The sitemap is now a popular page for Website visitors, and it's also a good place for you to start your design. Write down the name of each page you are going to include in your Website, and where necessary include them in separate groups.
This will not only help you to decide on what pages to include or leave out, but will help you formulate the overall design structure of the new Website.
A Simple Website Structure
The above structure is a simple example used by many Websites. The root folder contains the home page, which is then linked to each of the other main folders. Each of these sub-folders contains files on a similar subject.
Some designers like to keep images, sound, and video files in the same folder as the page-files, but because many images are also used by files in other folders. it is good practice to put all you image files in one folder. This also makes it easier for editing and updating in the future.
If you design your Website with Dreamweaver™ you are recommended to keep your image files in a folder with the name Assets, and include sound, video, and other 'extra' files that can be used on different pages. Websites tend to grow and develop, so you need a structure that can maintain the integrity of your files and links when you add more pages or update your existing pages with new data.
If your Website is going to have a number of different forms for visitors to access it is advisable to keep them together in a forms folder. You can also include the redirect pages the visitor will be sent to after completing a form. These redirect pages may contain a basic thank you comment, together with more information on the subject matter. Used correctly, they can become great sales pages!
Your Website Security
A big problem for many Webmasters is the security of the data, files, downloads, and more on the Website. You may have files that you do not want casual visitors to access, and you certainly won't want people to download your eBook or software without paying for it!
There are a number of things you can do to protect these files, and many are discussed in detail in our Website Creation course.
The quickest and most simple thing to do is to have a folder on the Website that has no links to it from any other page on your Website. This will prevent most people from finding the folder, even if they use software that downloads complete Websites.
The final tip: give his special folder a name that is not easily found. Don't call it 'eBook' or 'files', because hackers use sophisticated software that will bombard your site looking for 'hidden' folders. Give it a name which is a mixture of letters and numbers: Kop8f6ty_tyh4G5 but don't make it too long!
Protecting Your Contents
If you have an unprotected folder named downloads, and it contains valuable data, a visitor need only enter:
...and the folder will open to reveal all the contents in the visitors browser. They can then access each one and download them all.
You can prevent this from happening by having a default file named index.html in that folder. The file named index.html (or .php .asp etc.) is the 'home page' for that directory. When a visitor enters the Website domain followed by the folder or directory name, the default file opens. If there is no default file, that is when the Internet browser displays the folder contents.
This index page can contain information about that folder, a directory, or it can simply be a redirect to your home page, which is the usual practice.
This is the standard HTML code for a redirect, or refresh:
<meta http-equiv="Refresh" content="0;URL=http://www.your-website.com/index.html" />
Simply replace the words: 'your-website' with your domain name, and the file name: index.html with the name and extension of your home page. Your home page is normally index.html on most Websites.
Button or Text Links
Ten years ago, a navigation bar at the top of each page, or on the left hand side, was not complete without a set of colourful buttons. The range and variety of these buttons is amazing, but often cumbersome, especially with more than four or five buttons.
Today you can have rollover images, with one view when the button is in the 'up' state, another when the mouse is 'over' it, and a final one for when it is 'down' because the visitor has clicked on it.
Great idea, but all these images are pre-loaded (or they will be slow to appear) and this can slow down the process of your page being downloaded to a browser—many people will not wait for more than five to ten seconds.
The more the Website grows and develops, the quicker your pages must download—test them on 28kb and 56kb connection speeds, even if you use broadband. Web designers tend towards text links more today, because of the speed factor, and you even see Websites providing the option of a text only version. Also, text hyperlinks can be read and indexed by Search Engines, and if you also use keywords in these links you can get much higher rankings and thus more traffic.
You must also bear in mind that the Internet robots cannot read buttons or images, only text. This can have a direct impact on your Website page ranking with the major search engines.