There are many ways to design a two column layout using Cascading Style Sheets (CSS). This article takes you through the steps of using one method. The code given here will also allow you to add an optional header and footer that spans both columns to your pages should you wish.

Prerequisites

For you to be able to use this article, you need to be able to code directly in both HTML and CSS. If this is not the case, you may prefer to use a visual web editor to design your site instead. For example, Dreamweaver comes with numerous templates to build 2 or 3 column websites using CSS. My Dreamweaver Tutorial takes you through the steps of creating a CSS-based two column website with this editor.

Some Basic Usability Tips for Commercial Websites:

Some websites try to hide the price list for their products. Some of these sites only display the price of the item after you hit the "Buy" or "Order" button, or worse, only after you have created an account on their site. Others have a price list, but bury the link to the price list somewhere deep in their site in a place not easily accessible from the main page or the products page.

I'm not exactly sure what the reason behind this is. Possibly, they think that if the customer does not see the price until they click the "Buy" or "Order" button, they will be more likely to buy the item. This reasoning is fallacious.

Note: this is a satirical look at usability. Although it reads like a "Do" list, it is really a "Don't" list. If you follow it literally, your site is history. 

Date Formats and the Usability of Your Site:

A date is a date. How different can it be around the world? If you think that, you'll probably be surprised by this article. Dates are formatted differently around the world, and if you are not careful in how you write them in your website, your web pages may confuse your readers and even cause serious misunderstanding.

The Diversity of Numeric Date Formats

Take a date like 8.5.2008. Depending on the part of the world you're in, that date can mean August 5, 2008 or 8 May 2008. If you have ever seen the variety of date formatting options in your operating system (be it Windows, Mac OS X, Linux or otherwise), where dates can be formatted MM/DD/YY, DD/MM/YY or even YYYY/MM/DD, you'll know what I mean.

I was recently asked by a visitor to thesitewizard.com to take a look at her company's website, designed by a university student. I will not give the URL for that site, partly to protect the innocent, and partly because by the time you read this, it'll probably have been modified.

The site was heavy in its use of graphics with images adorning most parts of the page layout, to provide curved borders (to replace the sharp corners in enclosing boxes), different background images for different parts of the page, etc. It had a top navigation bar, driven entirely using JavaScript. The navigation bar mimicked the sort of menu bar you find in computer programs - there is a horizontal menu bar with different items listed. When you move your mouse over one of those items, the menu will automatically expand vertically. As you move the mouse cursor down the pop-up menu, the item beneath the pointer is highlighted. Click it, and you will be delivered to another page on the site.

I worry a lot about this page. I originally set it up to cut down the amount of email I receive at thesitewizard.com asking me to recommend a web host. However, over time, I have found that I had to revise this page numerous times as a result of changes in the web hosting scene. The worst thing is finding out that the quality of hosting at the hosts I had earlier mentioned here had deteriorated. Naturally those hosts are no longer listed below.

The best way to treat this page is to regard the comments I make here about web hosts as merely the opinions of one person given at a particular point in time. I recommend that you investigate thoroughly any host before signing up. You can find a list of things you should look for in a web host in my other article How to Choose a Web Host.

Note that I only mention commercial and free web hosts providing shared hosting (where yours is not the only website on a particular machine). Since I have no direct experience with leasing a dedicated server or getting a virtual private server (VPS), this page will not mention any companies providing such facilities.

If you were to observe the websites that you visit, you will notice that the majority of them sport a set of links that are common to all pages on their site. These links may sometimes look like buttons, and are usually placed either on the left column, the right column, along the top or at the bottom of a website. These links are usually called the navigation menu of a website. You will be customising ("customizing" if you use US English) your navigation menu in this chapter.

I should probably mention that if you have only just arrived at this article from outside thesitewizard.com, this is the 6th chapter of the Dreamweaver CS5.5 tutorial. Since I will assume that you already know what I've taught in the previous chapters, you may want to start with chapter 1 if you're new to Dreamweaver. Those who are complete newcomers to website creation will have an easier time if they start at the very beginning, with the article How to Make / Create Your Own Website: The Beginner's A-Z Guide.

Over the years of running thesitewizard.com, I have had numerous webmasters write to me asking why their web pages do not appear in the search engine results page even though they directly search for terms that should yield their page. More often than not, a quick visit to their site reveals that they have created a web page that is not search engine friendly.

Tables are useful if you want to show relationships between different types of data. They allow you to group related data in rows and link them to other data in different columns. While they are often not needed on many sites, there are certain situations where you may want to present your data in tabular form. This tutorial shows you how you can create and customize the appearance of your tables using Dreamweaver.

A feedback form, also called a contact form, allows your visitors to send you a message from a web-based form. The message will be delivered to you via ordinary email. In this final chapter of the Dreamweaver CS5 Tutorial, you will add a feedback form to your website, thereby completing it.

As with the other chapters of this Dreamweaver tutorial series, this article assumes that you have completed the earlier chapters, and thus makes references to concepts and techniques taught there. If you are not an experienced user of Dreamweaver CS5, you may want to begin with chapter 1. In fact, if you are new to web design, it's best to start at the real beginning, with the guide How to Make / Create Your Own Website.