Introduction to Web Design

This course is designed to introduce you to the basics of putting together web pages. Graphics and media will get a short introduction, with more to come in the next course in line. In the introductory course you will learn about the location of web resources and how to utilize them as well as the structure of web pages and the elements which go into the internal operations of web pages.

There will also be an example-only ASP page in server-side programming. This is a plug-and-play page which is designed to work from the server, not from a file folder.

This is a web course.You will be expected to understand and use HTML and other internal page code. You will also be expected to create actual pages on a real world wide web site.

You may not submit HTML pages via email, either individually or zipped as a full site of files.
HTML pages are submitted only by publishing them to the Web where I see them the same way anyone else does.

All grades depend on your web presence because all exercise assignments must be available on the web using standard web browsers and a standard web address.

For the main part of this course you will be creating your HTML files using a text editor, usually Notepad. WYSIWYG editors such as Microsoft Expressions or Dreamweaver are acceptable. They impose their own learning curves and complexities in addition to the code. These pages are simple enough that you should be able to work within a text editor such as notepad or notepad++ or HTML-Kit. However the WYSIWYG html editors help you get up and running quickly. You will need to work in their "code" mode to insert and edit DIVs and CSS files.

Our purpose is to understand the internal structure of pages and of site architecture without an application (such as Dreamweaver) overlaying its own structure and working rules. We will explore WYSIWYG editors at the end of the course, when you should have a better idea of site structure and file structure. WYSIWYG editors make further work much easier, but especially so with a simple grounding in straight-forward HTML code.

We will create a personal web site with contact information, bio, and pictures. This is for you to expand in the future. At the same time part of the site will be devoted to exercises designed to show give you a starting toolkit to go further on your own.


The Example Site

Click here to go to the Example Web Site at (ExampleSite/Default.htm)
This is what you are expected to produce.

Basic Understandings

Basic readings - Websites

Where to work with your files
1) Your home computer and/or
2) on site directly (from campus only)

How to get to your files
1) FTP from your home computer or
2) "N:" drive (from campus only)

File Locations - includes file-folder exercise

Organizing Files and Folders

Deciding where to store various types of files on your site.

Other HTML/ASP pages, Images, Video, Audio, Database files in folders (directories)

Your Default Page - starting your site

This requires that you locate your website area at UMKC and create the front page on your site
Exercise: Making a Template Page, a Default Page and a Main Assignment Page (linked from the default page)

A Template Page

Default Page

Text Formatting

Line Break
Comparing text in the file with appearance on display
     Display formatting vs Code Formatting and White Space
Tags for text qualifiers: font, size, color, bold, Italic

CSS Style Sheets (going further)

Copy and modify a style sheet for the current front page
Copy and modify an in-line style for a paragraph

Div and Span Tags

Divisions - a use of styles to control the formatting and look of areas on a page.
Introduction - no exercise - into <DIV> and <SPAN> tags with illustrations.

Create a set of Pages From the Template

Using the template - create all other pages by doing successive "Save-As" operations from a text editor (such as Notepad)..


Tables allow you to arrange text and pictures on a page


The IMG tag allows you to add images to the page, photos or other pictures.
You will learn what types of pictures to use depending on their tonal scales.
You will also learn why and how to size pictures and what sizes you need on the web.

Server-Side Operations

Using Include Files

Duplicate the Navigation Bar and modify it for the ASP Product page

ASP - Program Scripts

Short introduction to ASP programs
1 - In the Products.htm page you will add a small amount of program code to
2 - Show the Current time and date at the server
3 - Create a form within a page to process the form and print the fields


Change the URL of the requested page at the server when the page or site has moved

Frames and iFrames

iFrames (inline frames are page-holders within pages) and Frames ( frame surrounds all pages)
Creating iFrames
Creating Frames
Exercise: Create an iFrame (in an existing page) and Create 1 New Page as a frame page.

Video and Audio (going further) - not an assignment

Add an embedded video link to a YouTube video
Change the dimensions in the YouTube video so it looks better.

Database (extra, going further) - not an assignment

Copy a database into your site in the output folder
Then open the database using ASP and list the items in the database

- OTech -