Activities CAL Package Career Courses Computer Education IECIT IT Special Education Study Study Circle

Basic Web Design

This hands-on workshop introduces you to the basic principles of Web site design and authoring using HTML. You will then use FrontPage to create your web page or site and publish it to the World Wide Web for viewing.


  • Understand and apply design principles when creating and modifying a Web site.
  • Recognize HTML and Web terminology such as hypertext, tags, browser, and HTML.
  • Identify the basic structure of an HTML document and create a simple Web page using HTML.
  • Create a new Web site or modify an existing website using FrontPage.
  • Use tables to design the layout of a Web page.
  • Understand how typography works on the Web and format fonts and paragraphs..
  • Set Web page properties such as background colors and images.
  • Understand graphic formats for Web pages; insert graphics, modify picture properties


Developing a Web Site


The Five Golden Rules


  • Create a clear visual hierarchy on each page.
  • Take advantage of conventions.
  • Break pages into clearly defined areas.
  • Make it obvious what’s clickable.
  • Minimize noise.




The first phase in creating a new web site is planning. This involves determining the site’s navigation structure, content, and page layout. It is only after this has been accomplished that HTML coding or authoring tools like FrontPage can be used effectively to actually create the site.

The planning process involves:

  • Define site purpose
    • What are the web site’s objectives?
    • Who is the target audience?
    • What is their connectivity (dial up, broadband, network, etc.)?
    • What computers (PC/Mac) and browsers (IE, Netscape, Opera, etc.) do they use?
  • Define content
    • What you have and what you need.
    • How it will be organized. Categorize information rather than defining categories and filling them.Build the site structure around content organization.
    • What graphics are required and how many? Remember, the larger the number of graphics, the longer the page will take to download.
  • Develop a file naming convention and stick to it.

Web files and folders should not have any spaces and be in lowercase. Use the underscore (_) to connect words in file names.

File names cannot contain colons (:), asterisks (*), questions marks (?), or other special characters.

  • Avoid spaces in file or folder names. If necessary use an underscore between words.
  • Determine site architecture and navigation. A simple flowchart-style sketch usually works best. Hierarchical models are best suited to the web.

Use sticky notes to organize your navigation structure. Use one sticky note per page and arrange them on a wall or table till you achieve your desired hierarchy. Index cards can be used in a similar manner.






  • Sketch page layouts and content layouts to create appropriate page design.
  • Assess sketches for appropriateness, placement, consistency and usability, and revise if necessary.


Designing Navigation Bars

The main goal of your website should be to make it easy for users to perform useful tasks. Develop a clear information architecture that is simple, consistent, and follows convention.

Key Elements of Navigation


  • Site ID.
  • Global navigation bar.
  • “You are here” indicator.
  • Local navigation bar.
  • Breadcrumb trail
  • Small text version of navigation bars (optional)


For continuing Web Enabled Learning contact today ……. Email:



Comments are closed.