Goal:

This course gives the student an introduction on how to create effective web pages in the "World of E-Commerce" by combining lecture with hands-on exercises. Students will learn the fundamentals of web page and user interface design and will be exposed to the various basic methods of web page creation from text editors to WYSIWYG tools. Students will also learn what is appropriate for the particular message that is to be conveyed by the web site.

Objectives:

1. Know elements/components of a web page
2. Design considerations when constructing web page
3. Understand the differences between various browsers
4. Understand the concepts of cascading style sheets
5. Understand the differences between static and dynamic web page
6. How to creative an effective web page
7. Future direction of the web

Topics Covered:  

HTML	Forms	Tables
Web Browsers	Web Safe Colours	Static/dynamic sites
Hyperlinks	FTP	Lists
CSS	Web Development Cycle	Principles of Good Web Design
Frames	Images	Image Maps

Course Duration:
· 30 Hours, 10 classes

Mark Breakdown:
 

Description	Due Date	Final Mark
Take home Exercises 1	Week 1	5%
Take home Exercises 2	Week 2	5%
Project 1	Week 4	15%
Midterm Test	Week 5	15%
Practical Test	Week 9	15%
Project 2	Week 10	35%
Professionalism	All Classes	10%
	Total:	100%

Professionalism: The mark given for professionalism will be a combination of attendance and general attitude in class.

Note: Work that is submitted late will have 10% of the value deducted per day.

Software:

• Note Pad
• Internet Explorer and/or Netscape

Platform:

• Windows

Class 1:

Topics:

• Introductions - course goals & objectives, instructor & student introduction etc.
• The role of the internet in effective communications
• Principles of Good Web Design
• HTML Introduction: Note Pad / http://davesite.com/webstation/html/
• The Anatomy of an HTML Document
• Editing HTML in Dreamweaver (Chapter 14 - Dreamweaver 4)
  

Note:

• Download Dreamweaver 4 Manual. .pdf or zipped file (582 pages) from http://www.npconsultants.com/ec106/downloads.htm
  
  

Take Home Exercises 1:

• Find two (2) web sites of your choice.
• Review them, keeping in mind the comments and topics covered in Class 1.
• Answer the following questions for each of the sites:
  1. Does the site effectively communicate the product/service that it is presenting?
  2. What are the three (3) main strengths and/or weaknesses of the web site?
  3. What type of techniques where used in the site? (Flash, animated GIF's, cascading menus, dynamically generated pages etc.Note: If you don't know "what" was used, not a problem, just describe how it looks, your feeling about the design... go with instinct, gut feeling.)
• Submit your answers via email to instructor by beginning of Class 2

Class 2:

Topics:

• Principles of Good Web Development
• Dreamweaver Basics (Chapter 2 - Dreamweaver 4)
• Website Development Cycle - Lecture
• Setting Up a Document (Chapter 5 - Dreamweaver 4)
• Inserting and formatting Text (Chapter 10 - Dreamweaver 4)
• Introduction to File Transfer Protocol - FTP
• Choosing a Web Hosting Service
  

Take Home Exercise 2:

1. Sign up for a free Web-hosting service.
   • See the Resources page for suggestions for a Free web site hosting company.
   • Bring codes, passwords to class.
   • ***NOTE**** Do not leave this Exercise to Sunday Night !
   • It takes a day (and sometimes more) to just get signed up for the service.
     
     
2. Format text and upload to your web-hosting site
• Download, from the Week 2 section of the downloads page, the file called "Class_2_Editing_text.txt".
• Read the downloading instruction for help.
• Copy the text into the body of a new document in DW4 and save the new document as "index.html", locally.
• Ensure you place the correct title of the page, "Home Work Exercise 2", in the correct area.
• Now, edit the text file to match the printed handout given at the end of Class 2.
• Once completed, upload this page to your free web site.
• Check to ensure it is up (view live on the net) and correct.
• E-mail a link (the address of the free web site) to this page to ec106@npconsultants.ca before Class 3.

***NOTE****

The purpose of this exercise is to get you familiar with uploading to a hosting service and editing text in DW4.

Download (print if needed) the Dreamweaver 4 PDF. This is your reference while going through DW4.

Find time to Explore DW4.

Project 1

1. Find three websites or articles that provide design tips. (Do's & Don't of Web Design)
2. Summarize the main points in each of these articles and use these summaries as a basis for analyzing one good, one mediocre, and one poorly designed commercial website, of your choice.
3. Upload your summaries, as a new web page titled "Project 1". Put a link to this page from your current home page, in an appropriately visible place.
4. Email a link, to your current Home Page to: ec106@npconsultants.com
5. Due: End of Class 6

Class 3: 

Topics:

• Principles of Good Web Design II
• Continue with FTP - File Transfer Protocol
• Planning and Setting Up your Site (Chapter 3 - Dreamweaver 4)
• Site Management and Collaboration (Chapter 4 - Dreamweaver 4)
• Website Development Cycle - Lecture
  

Note:

• Project 1 due at the end of Class 6

Class 4:

Topics:

• Inserting Images, Image Mapping (Chapter 11 - Dreamweaver 4)
• Linking and Navigation (Chapter 15 - Dreamweaver 4)
• Introduction to Project 2
  

Project 2: 

• Develop a fictional website.
• The fictional title/name/domain name shall be: prodo.com.
• The theme of the site will be determined through discussion.
• You will upload your site to your free server.
  
  
• The site should include at the following pages: 
  
  • index.html - Perhaps your splash page?
  • intro.htm - Introduction information.
  • contact_us.htm - Complete (fictional) contact information.
  • links.htm - 5 External links {text/images} to appropriate sites.
  • site_map.htm - with Internal links to each of the pages of your site.
    • the site map must be handed in at the beginning of Class 6
  • At least two (2) other pages.
  • If you are using Frames, you will need to have at least one (1) additional page to hold your frameset information.
    
    
• The site should include the following content:
• Each of the pages should have appropriate Titles
• A Navigation area
• A Form using check boxes, radio buttons, several appropriate text fields (one Multi-line and one drop down list). Several of the fields should be mandatory.
• A Table with several cells.
• An Image Map.
  
  
• Project 2 must be made up of a minimum of seven (7) html pages and a maximum of nine (9) html pages.
  
  
• The Site Map (text/image format only) for Project 2 is due at the beginning of Class 6. Preference to emailing a link, but a hard copy will be accepted.
  
  
• Submit the Project 2 site address via E-Mail to ec106@npconsultants.ca with a link.
  
  
• This E-Mail should be in the format of a letter, including a statement or sales pitch meant to encourage a visitor.

Note: Project 1 due at the end of Class 6. 

Note: Midterm Next Class

Class 5: 

Midterm Test:

• Two (2) hour test of material from Classes 1 - 4

Topics:

• Using Tables I (Chapter 7 - Dreamweaver 4)

Note:

• Site Map for Project 2 is due for review in Class 6.

Class 6:

Go over Midterm Test:

Topics:

• Using Tables II (Chapter 7 - Dreamweaver 4) Part 2
• Review Project 2 - Site Maps.
  

Class 7:

Topics:

• Using Frames (Chapter 8 - Dreamweaver 4)

Topics:

• Creating Forms (Chapter 20 - Dreamweaver 4)
• Reusing Content with Templates and Libraries (Chapter 16 - Dreamweaver 4)
• Practical Test - Class 9

Class 9:

Practical Test

Topics:

• HTML Style
• Cascading Style Sheets - Introduction (page 244 to 266 of Chapter 10 - Dreamweaver 4)
• Checking Spelling

Note:

• Project 2 due by 10 pm on the day of the 10th class.

Class 10:

Go over Practical Test:

Topics:

• Using Behaviours (Chapter 18 - Dreamweaver4)
• Customizing Dreamweaver (Chapter 22 - Dreamweaver 4)
• Complete Project 2.

Note:

• Project 2 due by 10 pm on the day of the 10th class.