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 methods. 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.
Special Note: This online tutorial is now available in the Armenian language athttp://www.webhostinghub.com/support/by/edu/webdesign-library-hy.
Table of Contents
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.
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.Let's say you are going to build a Web site. Check all that apply: I want people to join my group
My site is like an online newsletter
I am trying to sell something
The main purpose of the site is educational
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 "hight 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 prefered, 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.
Click who you expect to visit your site: Text for choice1
College students
Expert Web users
Internet newbies
Music fans
Pet owners
People with dial up modems
People with cable Internet access
International corporations
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?
Does this site meet the needs of the "client?" Yes, the text is easy to understand
Yes, the images are clear
Yes, the site downloads quickly
Oops, we forgot to put in our email address!
Yes, students can download their assignments
Oops, the site takes too long to download
Yes, the site is easy to update
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 methods. 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.
Special Note: This online tutorial is now available in the Armenian language athttp://www.webhostinghub.com/support/by/edu/webdesign-library-hy.
Table of Contents
- How this Tutorial Works
- Defining a Web Site
- Identifying the Purpose of a Web Site
- Identifying Who will Visit the Site
- Serving the Needs of the Client
- Basic Web Design Concepts
- Proximity
- Alignment
- Repetition
- Contrast
- Navigation
- Fonts
- Page Size and Layout
- Tables
- Tables vs. Cascading Style Sheets
- Browsers & Multitasking
- Tips, Tricks, and Questions
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?
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.Let's say you are going to build a Web site. Check all that apply: I want people to join my group
My site is like an online newsletter
I am trying to sell something
The main purpose of the site is educational
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 "hight 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 prefered, 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.
Click who you expect to visit your site: Text for choice1
College students
Expert Web users
Internet newbies
Music fans
Pet owners
People with dial up modems
People with cable Internet access
International corporations
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?
Does this site meet the needs of the "client?" Yes, the text is easy to understand
Yes, the images are clear
Yes, the site downloads quickly
Oops, we forgot to put in our email address!
Yes, students can download their assignments
Oops, the site takes too long to download
Yes, the site is easy to update