IS301: Web Design I

Course Description:

This course covers the planning and development of well-designed Web sites. The course combines
the use of effective navigation with the balanced use of graphics, text, and color. Topics include HTML
and XML overview, Web site design principles, Web site planning, Web site navigation, page
templates, Web typography, graphics and color, HTML frames, and Web publishing and maintenance.

Course Objectives

The goal of this course is to teach techniques for the creation of well-designed Web sites. At the
completion of this course, you will be able to:
Use of HTML for building Web pages.
Properly use graphics, color, and navigation methods when building Web sites.
Use proper Web design techniques for different browser and viewing platforms.
Describe appropriate planning and design principles.
Use the CSS Box Element
Publish and maintain a Web site.

Course Credits: 3

Course Resources:

Carey, P. (2013) New Perspectives on HTML, CSS< and Dynamic HTML, 5th Ed. Cengage.
ISBN: 9781111526436

Grading Policy: A course grade is determined based on the percentage of points as designated in
the following chart.

Assessment Percent of Final Grade

Discussions 15%
Assignments 60%
Final Project 25%

Below is an at-a-glance look at the weekly discussion and assignment topics. In each Getting
Started module within the course, you will find details about your weekly readings, lectures,
1
 supplemental resources, discussions and assignment instructions, and rubrics

TOPICAL OUTLINE BY WEEK

Week 1: HTML Basics

Reading: Textbook: Tutorial 1, Session 1.1

Lecture 1: HTML Basics (Video)

Lecture 2: Adding to the Basics (Video)

Lecture 3: Notepad++ (Tutorial)

Lecture 4: cPanel (Tutorial)

Discussion: Part A: Introductions

Introduce yourself to the class. What do you hope to do with what you learn in
this class? Which text editor are you using? Which browsers are you using?
Why did you choose them?

Assignment: Part 1
1. Download a text editor if you dont already have one. Take a
screen shot showing you have one on your computer and paste that into
a Word document.
2. Download a second browser if you don't already have one. Take
a screen shot showing that you have two browsers on your computer
and paste that into your Word document.
3. Download all the files for Tutorials 1-6 and 9. Your book may
have come with a CD with the files or you can download them here: PC
or Mac1 and Mac2. Open the file location on your computer and take a
screen shot showing you have the tutorials on your computer and paste
that into your Word document.
4. Login to cPanel. Create a folder for IS301 and take a screenshot
showing you have access and paste that into your Word document.
5. Save your Word document and submit that file here.

If you have problems with any of the above, contact me BEFORE the
assignment is due. I can help you work through issues and have all of these
ready to go so you are set up for week 2.

You may be able to get more than one of these items or even all of them in one

2
 screen shot. It is fine to get multiple requirements into one screen shot.
Please do not submit them as pictures. It is much easier for professors to view
Word or PDF files in BlackBoard. Paste all of your screenshots into ONE Word
or PDF document and submit that file as your assignment for this week.

Part 2
Look ahead to the Final Project. Start thinking about what you want to do for
your website. You may want to work on your final project a little each week to
follow along with the lessons.

Week 2: Page Content Elements

Reading:

Tutorial 1, Session 1.2

Page Content Elements (Video)

Discussion: List one semantic element (either structural or text-level) and tell why you
would want to use it instead of a more generic element.

Additionally, provide a link to an example (either a code snippet/demo or an

actual website and its source code) that uses a semantic element. Identify the
element for the class and explain how its use enhances the webpage.

Assignment: Open your textbook to page 63 and complete Case Problem 1 Math High.
Upload your files to cPanel and submit the link to your web page here. Don't
forget to upload all of your files for the assignment.

Start good habits now! All markup should be in lowercase and indented.

Week 3: Final Implementation Design

Reading: Textbook, Chapter 2

Adding Links (Video)
Fun With Images (Video)

Discussion: Think about all the hyperlinks you have used today alone (in the course of your
own web browsing, work, etc.). Paste a few of them and tell why they were
important to making your web experience easier, either because of their ease
of access, how they helped page organization/navigation, or some other
reason.

Assignment: Open your textbook to page 128 and complete Case Problem 2 Lakewood
School. Upload your files to cPanel and submit the link to your home page
here. Don't forget to upload all of your files for the assignment.
3
 Week 4: Adding Style with CSS

Reading:
Textbook, Chapter 3
Cascading Style Sheets

Discussion: How would you decide between using internal or external style sheets on your
web page? When is one more appropriate than the other?

Assignment:
Open your textbook to page 216 and complete Case Problem 2 Mountain
Wheels. Upload your files to cPanel and submit the link to bmtour.htm here.

Week 5: Solution Implementation, Part 2

Reading:
Textbook, Chapter 4
Using CSS to Improve Layouts (Video)
Using CSS to Add Background Images (Video)

Discussion: What things will you consider before choosing between fixed, fluid, hybrid, or
elastic layouts for your final project site?

Assignment: Open your textbook to page 312 and complete Case Problem 3 Longs Peak
Interactive Map. Upload your files to cPanel and submit the link to longs.htm
here.

Week 6: Tables

Reading:
Textbook, Chapter 5
Tables (Lecture)

Discussion: Your final project requires a table. How do you plan to use a table on your
site? Why do you feel a table is the best way to display this information?

Assignment: Open your textbook to page 380 and complete Case Problem 1 The
Japanese Puzzle Factory. Upload your files to cPanel and submit the link to
sudoku.htm here.

4
Week 7: Web Forms

Reading: Textbook, Chapter 6

Creating Web Forms (Video)

Discussion: Why is the design of your web form so important? What elements did/will you
include and how did that influence your design?

Assignment: Open your textbook to page 476 and complete Case Problem 2 The Spice
Bowl. Upload your files to cPanel and submit the link to spice.htm here.

Week 8: Website Maintenance

Reading: 9 Mistakes That Prove Youre Not Effectively Maintaining Your

Businesss Website
The Importance of Maintaining Your Website 5 Reasons To
Show Your Website Some Love
Maintaining Your Website (Lecture)

Discussion: What has been the most interesting thing you have learned in this
class? What has been the most difficult? Do you think you will
continue to create websites?

Assignment: Create a website about anything you choose. (This might be a good time
to help out your local charity or your friend starting up a new business.)
Your site must include:
At least 4 pages, showing good design
All the essential tags on each page (Look at Week 1 resources
for help)
At least 5 comments to explain your code (Week 1)
At least 3 semantic elements (Week 1/Week 2)
A list (Week 2)
An image with height, width, and alt text (Week 2)
A functional navigation menu on all 4 pages (Week 3)
An email link (Week 3)
An external style sheet with at least 10 style rules for various
parts of your site (Week 4/Week 5)
A table with at least two columns and two rows (Week 6)
A form with at least 4 different input types (don't worry about the action)
(Week 7).

The following table outlines the academic effort required by students to be successful in this course.
While the times in the table are approximate, it is presented to help students with their time
management. Please note, depending on the student's background knowledge and experience of the

5
course subject and an individual student's academic capabilities, these times will vary. If you have
any questions or concerns, please direct them to your instructor or student advisor.

Estimated Hours
Week Type of Activity Activity
Required
Readings/Lectures 1.1
Online Discussions 2.0
Assignments 0.0
1 Readings 0.9
Discussions 1.0
Preparation
Assignments 5.0
Clinical/Lab Hours 4.0

Estimated Hours
Week Type of Activity Activity
Required
Readings/Lectures 0.4
Online Discussions 2.0
Assignments 0.0
2 Readings 1.4
Discussions 1.0
Preparation
Assignments 5.0
Clinical/Lab Hours 5.0

Estimated Hours
Week Type of Activity Activity
Required
Readings/Lectures 0.5
Online Discussions 2.0
Assignments 0.0
3 Readings 1.4
Discussions 1.0
Preparation
Assignments 5.0
Clinical/Lab Hours 5.0

Estimated Hours
Week Type of Activity Activity
Required
Readings/Lectures 0.5
Online Discussions 2.0
Assignments 0.0
4 Readings 2.1
Discussions 1.0
Preparation
Assignments 5.0
Clinical/Lab Hours 5.0

Estimated Hours
Week Type of Activity Activity
Required
5 Online Readings/Lectures 0.2
Discussions 2.0
Assignments 0.0
6
 Readings 2.4
Discussions 1.0
Preparation
Assignments 5.0
Clinical/Lab Hours 5.0

Estimated Hours
Week Type of Activity Activity
Required
Readings/Lectures 0.5
Online Discussions 2.0
Assignments 0.0
6 Readings 2.3
Discussions 1.0
Preparation
Assignments 5.0
Clinical/Lab Hours 5.0

Estimated Hours
Week Type of Activity Activity
Required
Readings/Lectures 0.5
Online Discussions 2.0
Assignments 0.0
7 Readings 2.9
Discussions 1.0
Preparation
Assignments 5.0
Clinical/Lab Hours 5.0

Estimated Hours
Week Type of Activity Activity
Required
Readings/Lectures 0.4
Online Discussions 2.0
Assignments 0.0
8 Readings 0.7
Discussions 1.0
Preparation
Assignments 5.0
Clinical/Lab Hours 10.0
Follow this link for course-related Policies and Contact Information.