Introduction to Web Design (DIG111) - Fall 2014 - Niagara County Community College

Jim Gerland Introduction to Web Design (DIG 111)
Fall 2014
Niagara County Community College

Course Description

Introduction to Web Design introduces the fundamental concepts of Hypertext Markup Language (HTML) scripting and web site design. Primary topics include: origins of HTML and the Internet, basic elements and structure of HTML, implementing HTML, Cascading Style Sheets, web site organization, page design and layout, internet browser and cross-platform considerations, creating and organizing linked documents, web typography, creating and optimizing web graphics, technical and aesthetic issues of color, image maps, tables, and designing for web standards compliance. Students must possess basic computer skills for success in this course. (Usually offered Fall and Spring semesters).

Prerequisite Coursework: AAC 042 and ENG 099

Instructor Information

Name: Jim Gerland
Office:
Office Hours: Tuesdays/Thursdays 2:00pm - 2:30PM, or by appointment
Office Phone/Voice Mail:
Email: (The best way to reach me)

Course Identification

Credit Hours: 3
Course meeting times: Tuesdays/Thursdays 2:30pm – 3:45pm (D-BLDG 106)

Expected Student Outcomes

Upon the successful completion of this course, a student will be able to:

Plan, design, and produce an organized, navigable, and visually appealing web site utilizing HTML and CSS.
Produce web pages and web sites that incorporate the principles of organization, layout, navigation, typography, color, and graphic design.
Create, optimize, and incorporate various graphic file formats.
Use FTP to successfully maintain and manage files on a web server.
Produce web pages and web sites that comply with web standards established by the World Wide Web Consortium.
Use code validation to insure compliance of HTML and CSS with web standards.

Schedule

Course schedule is subject to change

Date	Chapter	Topics	Assignment
September 2		Course Introduction Getting Started	Brief Introduction
September 4	1	Structure	Brief Introduction Due
September 9	2	Text	Home Page
September 11	3	Lists
September 16	4	Links
September 18	5	Images
September 23	6	Tables	Table Page Home Page Due
September 25	7	Forms	Form Page Table Page Due
September 30	8	Extra Markup	Form Page Due
October 1	9	Flash, Video & Audio	Multimedia Page Form Page Due
October 6	10	Introducing CSS	CSS Pages Multimedia Page Due
October 8	11	Color
October 13	Columbus Day - No Classes
October 15	12	Text	CSS Pages Due
October 20	13	Boxes
October 21	14	Lists, Tables & Forms	CSS Print Page
October 27	15	Layout
October 29	16	Images	CSS Print Page Due
November 4	17	HTML5 Layout	HTML5 Page
November 6	18	Process & Design
November 11	Veterans Day - No Classes		CSS Print Page Due
November 13		Final Project	Final Project HTML5 Page Due
November 18		???
November 20		???
November 25		???
November 27	Thanksgiving Break - No Classes
December 2		???
December 4		???
December 9		???
December 11	Last Class - Final Project Due		All Assignments Due

Textbook

HTML & CSS: Design and Build Websites
Jon Duckett / Wiley / 2011 / 512 pages
ISBN: 978-1-118-00818-8
Book is Required!

Don't Make Me Think Revisited
A Common Sense Approach to Web Usability
Steve Krug / Pearson Education / 2013 / 216 pages
ISBN-13: 978-0-321-96551-6
Book is Recommended!

* USB Flash Drive is highly recommended

Grading

Assignments

Eight (8) Individual Assignments worth 9 points each.
Final Project: 20 points
In-class/Discussion Forums participation: 8 points

Assignments and Methods of Evaluating Student Progress

All assignments are due at the start of the class noted on the schedule. They must be submitted in the appropriate Discussion Forum unless otherwise specified. Late assignments lose one (1) point per class late up to a maximum of three (3) late points.

Format

Assignments are to be professionally prepared, documented, cited, and organized. Proofread and spell-check all assignments, include your name, date, course number and description/comments of the assignment.

Extra Credit

There are no opportunities for extra credit. Please plan accordingly

NCCC Grading Scale

Letter Grade	Total Points
A	95 - 100
A-	92 - 94
B+	89 - 91
B	85 - 88
B-	82 - 84
C+	79 - 81
C	75 - 78
C-	72 - 74
D+	69 - 71
D	65 - 68
F	64 - 0

Brief Introduction & Profile Picture (1 point)

Post an introduction about yourself in the Brief Introduction forum. Please include how you would rate yourself with technology, Windows/Macintosh, Notepad/Text Wrangler, Internet, Web Browser, etc. I think it would be good to know whether you're a beginner, intermediate, or advanced user of each of these areas. Also, please post a picture of yourself. This will help me get to know you.If you don't already have your NCCC ID card with your photo then you should stop at Security.

Create Your `NCCC (Web 2)` Home Page (9 points)

For this Assignment you will first read the appropriate chapters in the textbook and then create a web page called index.html in your web2.niagaracc.suny.edu account web space which will be used as the starting page for the rest of your Assignments for this course. Your web page should utilize the following HTML tags and include the following:

Appropriate html, head, and title tags to give your page a title that contains your name.
A body tag.
An h1 tag that contains your name.
An img tag with appropriate src, alt, width, and height values that insert a graphic image on your page. It doesn't matter at this time what the graphic is as long as it is legal and moral.
A p tag that encloses a brief paragraph about yourself.
An ol tag that contains li tags that list the remaining Assignments for this course (2, 3, 4, 5, 6, 7, 8, 9, 10).
At least one of each of these tags: strong, em, hr, br

Your web URL to view your web page is:

http://web2.niagaracc.suny.edu/~your-userid/

You will add a link to this page that allows the user to view your work.

Your username and password for the web2.niagaracc.suny.edu machine is the same as your username and password you used to log into your Blackboard Learn account.

Now, whenever you login to your web2.niagaracc.suny.edu account you need to issue the command cd public_html to change to the sub-directory where you can create and maintain the files for your Assignments and Assignments.

You can use ssh to login to your web2.niagaracc.suny.edu account and then use either vi or Emacs to maintain your files or you can edit them on your PC and use an SFTP client ( FileZilla for Windows or Fetch for a Mac) to move them from your PC to your web2.niagaracc.suny.edu account. For Windows it is even better to use Notepad++ for your editor since it has a built-in SFTP client. For Mac the better choice is TextWrangler which also has a built-in SFTP client.

When you have this Assignment ready for me to view and grade you should post a note in the Home Page Discussion Forum with the URL of your web page so I can click on that link and open your Assignment in a new browser window (target="_blank").

Create a Table Web Page (9 points)

For this Assignment you will first read the appropriate chapters in the textbook and then create a web page called table.html in your web2.niagaracc.suny.edu account just as you did in your Home Page Assignment. Your new web page should utilize the following HTML tags and include the following:

A body tag that uses an appropriate style value to change the background color of the web page.
Appropriate table, tr, th, and td tags to create a table that has three (3) columns (Font Faces, Font Sizes, Colors) and (5) five rows (different font faces, font sizes, and color codes in their appropriate face, size, and color). Use the th tag to create the headings for each column the background-color style value to change the color of the heading cells and the font-family and color style values to change the color of the font in the cell headings row. Use the background-color style value on the table tag to change the color of the background of your table to a different color than the background of your web page.
Appropriate style values that change the font, font size, and font color.

This page should also have a link back to your Assignment 1 web page.

You should then add an a (anchor) tag to your Home Page web page entry for this assignment that opens your Table web page.

When you have this Assignment ready for me to view and grade you should post a note in the Table Discussion Folder with the URL of your Home web page so I can click on that link and open your Assignment in a new browser window (target="_blank").

Create a Form Web Page (9 points)

For this Assignment you will first read the appropriate chapters in the textbook and then create a web page called form.html, in your web2.niagaracc.suny.edu account just as you did in previous assignments. This web page should utilize the following HTML tags and include the following:

A form tag that has an action= value of mailto:your-email-address so that the results of what the user enters gets sent to your email address when your form gets submitted.
input tags that allow the user to enter their:
- First Name
- Last Name
- Address
- City
- State/Province (this should use a select tag with option tags for each state name and state abbreviation
- Zip/Postal Code
- Phone
- Email Address
An input tag that creates a submit button that says: OK Send My Data

You should utilize the new HTML5 form tag features. Use your favorite search engine (Bing, Google, Yahoo, whatever) and do a search for

+html5 +form

to find lots of helpful information.

This web page should also have a link back to your Home Page web page.

You should then add an a (anchor) tag to your Home Page web page that opens your Form web page.

When you have this Assignment ready for me to view and grade you should post a note in the Web Form Discussion Forum with the URL of your web page so I can click on that link and open your Assignment in a new browser window (target="_blank").

Convert Home Page to Use CSS (Cascading Style Sheets) (9 points)

For this Assignment you will first read the appropriate chapters in the textbook and then create three (3) new web pages (copies of your index.html file, for example called inline.html, external.html, and embedded.html, and another file for your external styles, for example called dig111.css, in your web2.niagaracc.suny.edu account just as you did in previous Assignments. One of your Assignment 2 web pages should use inline styles; the second web page should use embedded styles; and the third web page should use a linked style sheet. These web pages should change the default look for the following HTML tags:

h1, h2, h3, h4, h5, h6
p
font color, family, and size
strong (style="font-weight: bold")
h1, tr, th, td

Each of these pages should also have a link back to your Assignment 1 web page.

You should then add 3 a (anchor) tags to your Home Page web page that opens your CSS web pages.

When you have this Assignment ready for me to view and grade you should post a note in the Cascading Style Sheets Discussion Forum with the URL of your web page so I can click on that link and open your Assignment in a new browser window (target="_blank").

Modify CSS (Cascading Style Sheets) Pages to Use Print Media Styles (9 points)

For this Assignment you will first read the appropriate chapters in the textbook and then modify the three (3) web pages you created for the CSS assignment in your web2.niagaracc.suny.edu account just as you did in previous Assignments. One of your Assignment 2 web pages should use inline styles; the second web page should use embedded styles; and the third web page should use a linked style sheet. These web pages should change the default look for the following HTML tags:

h1, h2, h3, h4, h5, h6
p
font color, family, and size
strong (style="font-weight: bold")
h1, tr, th, td

Each of these pages should also have a link back to your Assignment 1 web page.

You should then add 3 a (anchor) tags to your Home Page web page that opens your CSS web pages.

When you have this Assignment ready for me to view and grade you should post a note in the CSS Print Discussion Forum with the URL of your web page so I can click on that link and open your Assignment in a new browser window (target="_blank").

Create an HTML5/CSS Compliant Web Page (9 points)

For this assignment you will first read the appropriate chapters in the textbook and then create a new web page, for example called html5.html, in your web2.niagaracc.suny.edu account just as you did in previous assignments. Copy your current CSS Print Page assignment web page to a new html5.html web page. Your index.html new web page link should open up a new web page that utilizes your HTML5 and CSS to include the following:

A correct DOCTYPE tag for HTML5
Convert any of your tags that are not HTML5 compliant
Correct any of your CSS that is not CSS3 valid

You can (and should) use the W3c validator page at http://validator.w3.org/ to verify your code and http://jigsaw.w3.org/css-validator/ to verify your CSS styles.

This web page should also have a link back to your Home Page web page.

You should then add an a (anchor) tag to your Home Page web page that opens your HTML5 web page.

When you have this Assignment ready for me to view and grade you should post a note in the HTML5 Discussion Forum with the URL of your Home Page web page so I can click on that link and open your Assignment in a new browser window (target="_blank").

Create an HTML5/CSS Compliant Web Site (20 points)

For this assignment you will create a company web site. You should create a sub-directory, final in your web2.niagaracc.suny.edu account where you will store the files for this assignment. In your final sub-directory you should create sub-directories called css (for your css file) and images for your graphics.

Your web site should have a minimum of four (4) pages, including the home page for that site (index.html), a table page that lists some of your company's inventory, pricing, etc., a page that video page (not necessarily related to your fictional company), and a contact (form page. Each page in your web site should have consistent navigation such that a visitor to your site can easily navigate between all the pages in your web site. You may have additional pages which *might* be worth extra credit if it will help you move to the next higher grade level.

Your new company web site should utilize your HTML5 and CSS knowledge from this course to include the following:

A correct DOCTYPE tag for HTML5
All HTML tags should be HTML5 compliant
All CSS styles should be CSS3 valid

You can (and should) use the W3c validator page at http://validator.w3.org/ to verify your code and http://jigsaw.w3.org/css-validator/ to verify your CSS styles.

The company web page should also have a link back to your Home Page web page.

You should then add an a (anchor) tag to your Home Page web page that opens your Company web page.

When you have this Assignment ready for me to view and grade you should post a note in the Final (Web Site) Discussion Forum with the URL of your Home Page web page so I can click on that link and open your Assignment in a new browser window (target="_blank").

Classroom Policies and Procedures

Attendance Policy

Class attendance is required at all times. If you must miss a class please talk with the instructor. There are no make-up opportunities for assignments or tests.

Cheating/Plagiarism

Cheating or plagiarism will not be tolerated. If detected, the following procedure will be followed:

1. A failing grade of F or 0% will be entered for the test or other educational activity in question. 2. If the activity is a major test, the student will be assigned a failing grade for the course, mid term or final. 3. The College system for reporting cheating or plagiarism will be followed. See Student Handbook.

Ethical Conduct

Each student is responsible for adhering to the Code of Student Conduct as stated in the student handbook. Students involved in any unethical activities in the class are subjected to discipline at the instructor’s discretion. Students are responsible for completion of assigned work. As would be expected of workers in any work environment, students are expected to work independently, to use their initiative in solving problems, and to have professional pride in their work.

Disabilities and Health Issues

Students with disability issues which might make it difficult to complete any assignment, activity or test required in the course should notify the instructor as soon as possible so that appropriate arrangements can be made.