Course Description and Objectives:

This laboratory course introduces Professional Web Design techniques. Course provides both hands-on experience and theoretical discussion to aid in understanding the concepts of Web sites along with some of the practical tools used to create Internet web sites such as Adobe Dreamweaver, Flash, Photoshop.

Evaluation of Students:

Class Attendance - 15%
Homework Assignments - 45%
Final Project - 45%

Attendance

to all sessions is required. More than three absences will result in an "F". Lectures will be held at the beginning of class so two late arrivals are equal to one absence.

Homework assignments

will be collected at the beginning of class. Homework assignment not turned in in time will be marked late. Points will be deducted from late homework.

Required Textbook and Materials:

- USB Flash Memory Stick
- a notebook to take notes
- time outside of class to complete homework assignments

Requirements for your final project:

Your website should have a minimum of twenty pages. The First (Opening) Page can be created using Flash (alternative - Photoshop & Dreamweaver. Flash project then could be used as an insert). CSS has to be used for text formatting and web page layouts. Some elements of Java Script are a plus (Rollover buttons, Popup Windows etc.)

Course Outline

This schedule is subject to change!
Feel free to comment on the speed and the extent to which material is covered.

Week 1 January 23

1. Class Introduction, overview of the facilities.
Brief history of the Internet (structure, service providers, browsers). Protocols (HTTP, FTP, Telnet).
2. Introduction to HTML coding, HTML Tags (<html>, <head>, <body>, <br>, <p>). In-class exercises

Homework 1

Research the Web and create one web page (HTML hard-coded):
a). One paragraph on the person that is considered "the father of the World Wide Web";
b). One paragraph on Web 2.0
c). One paragraph on HTML 5.0

Week 2 January 30

1. Introduction to Adobe Dreamweaver for Designing Web Pages. Table as a Holding Structure. Defining Page Properties.
2. CSS for text formatting. (  <li> for spaces and bullets). In-class exercises

Homework 2

Create your own or finish an HTML version of the resume as text only page (Dreamweaver or hard coding).
Here is an example resume.

Week 3 February 6

1. Dreamweaver continued. CSS as a holding structure. Creating a DIV-based Layout. Designing with color. Background and text colors. Inserting images.
2. Creating Links - Absolute Links, Relative Links, Email Links, Anchors. Link colors. In-class exercises

Homework 3

Create an HTML page with a Table-based Layout (similar to the one we created in class). Link it with your Homework 2 and Homework 1. You will end up with three page website. Your three page Web Site should have: two Relative links, one Absolute link,. Save your three page website in one folder.

Week 4 February 13

1. Anchor link and E-mail link. Images on the Web. Color Modes, Compression, Resolution, File Formats. Photoshop for Image Editing and Manipulating. Creating animated GIFs.
2. Basic Design Concepts. Hierarchy of images and text on the page. "Negative space" in Design. Photoshop for creating website layout plan.

Homework 4

Create a Base Page Layout plan in Photoshop.

Week 5 February 20

1. Web Site Usability.
2. CSS continued: Slicing graphics for Base Page Design. Creating a DIV-based Layout with background images. CSS: creating pages with flexible background. In-class exercises

Homework 5

Cut Slices for the page you have created in Photoshop.

Week 6 February 27

1. Web Site Usability continued. Basic Design Concepts continued.
2. Creating a DIV-based Layout with background images. CSS: creating pages with flexible background. CSS: Cascading Hierarchy: HTML tags rules overwritten by Class rules. In-class exercises

Homework 6

Finish your Photoshop page layout.

Week 7 March 5

1. CSS with Divs continued. Finishing the template webpage. Creating RollOver Text buttons with CSS.
2. CSS: Cascading Hierarchy continued. Setting up Website text formatting in a cascading style.

Midterm

Create a website using your Photoshop page layout. It has to have three to five pages linked between each other, pages created using Dreamweaver DIV-based Layout based on your Photoshop layout. Due week 9, March 26th.

Spring Recess starts March 12th. Classes Resume 8:00 a.m. (Monday) March 19th.

Week 8 March 19

1. Short Quiz1 on definitions of HTML, HTTP, FTP, Absolute and Relative links, Image file format for the Internet.
2. Managing your website assets in Dreamveawer. Creating Meta Data for search engine. Creating Roll-over Buttons using javaScript. In-class exercises
Homework 7 Create three pages from your template with images, Rollover buttons.

Week 9 March 26

Creating a Layout and Formatting Content for the Template. Formatting text with <h1> tag. Rollover buttons with images created in Photoshop.

Midterm Assignment Due

Homework 8

Create a page from your template with rollover buttons created in Photoshop/Dreamweaver and a layout for the content.

Week 10 April 2

1. Intro to flowcharting.
2. Multimedia on the Web: Audio, Video, Flash. In-class exercises

Homework 9

Create your flowchart for the Final website project

Discuss Final Website Project

Week 11 April 9

1. Forms. In-class exercises

Homework 10

1.Create a page with the form.

Week 12 April 16

1. Intro to Macromedia Flash Interface and Tools. Importing Images and Creating Vector Graphics. Creating Shape/Motion Tween Animations. Inserting Flash animations into your web page. Audio in Flash and HTML (bgsound). Bring headphones!
2. Work in class on Final Projects.