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 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)
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.
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)
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 -