Introduction

This tutorial provides information on the basic elements of Web page design and layout. It is not meant to be a comprehensive course on Web site construction. Rather, it is meant to provide an overview of the most important issues that anybody building a Web page will confront.

The techniques described are based on standard HTML/XHTML code techniques. They do not reflect the latest Cascading Style Sheet practices. You are encouraged to visit our online CSS tutorial after you complete this tutorial. We have found that a good understanding of HTML/XHTML makes CSS easier to grasp.

The tutorial takes about 20 to 30 minutes to complete. Clicking on any selection in the Table of Contents below will take you directly to that portion of the tutorial.

Table of Contents

How this Tutorial Works

The pages of this tutorial are divided into right and left halves. The left half contains the main message. The right half, with the green background, features interactive elements, additional information, or examples.

As you go through the tutorial, be sure to try the interactive elements. Follow the instructions and take the quizzes, click the buttons, or try the action.

Defining A Web Site

The very first step in designing a Web site is to define it. And to properly define a site there are three questions that must be answered.

What is the purpose of the site?
Who will be visiting the site?
How will the site serve the client?

The answers to these questions will guide you as you construct the site

Identify the Purpose of the Site

A Web site may have several purposes. In that case it is necessary to determine which is the primary purpose, which is secondary, and so on. A site that is intended to be strictly informative, such as a news site, is likely to look much different that a site that is designed to sell a product. On the other hand, a site for a college may have some subtle similarities to a site that sells books. The college site probably will be intended to present the school is a very positive and manner so that students will want to enroll. The retail book site will want to convince visitors that it is the best place to purchase reading material.

Identify Who Will Visit the Site

Determining who the visitors are likely to be is crucial in deciding not only the general appearance of the site, but also the technology that might be used to build the site.

If the project is likely to have visitors who log in from home, it is necessary to design the pages with the understanding that some users may still have slow modem connections.

Even with so-called "high speed access," Internet connect speeds vary wildly. Users with DSL will almost certainly notice slower page loading compared to those users who have cable or fiber optic access.

While quick download times are preferred, some types of Web sites require technology that is not conducive to fast page loads. Such a site may be for a rock band or a high-tech company. Both of which might use Flash! or similar techniques.

Serving the Needs of the Client

The term "client" in this instance refers to anybody for whom a site is built, not just a paying customer. In the case of a Web site built for a family reunion, the client is the family. Will the site properly serve the need of the family by providing clear directions to the location of the reunion? Can the family photos be properly displayed?

A client could be a history professor. In such an instance the message of the professor must be clearly understood. Will he or she want to post assignments and readings? Does the site involve explaining research projects? And who will update the site later?