Introduction to Web Design (DIG 111)
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: D-Bldg 101
Office Hours: Wednesdays 8:30 AM - 9:00 AM, or by appointment
Office Phone/Voice Mail:
Email: (The best
way to reach me)
Course Identification
Credit Hours: 3
Course meeting times: Mondays/Wednesdays 9:00 AM - 10:15 AM (D-BLDG 106)
* USB Flash Drive is highly recommended
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.
Class Schedule
Note: All project are due by Midnight Saturday morning of the week they are listed as being due!
| Week Of | Textbook Reading | Chapter | Projects |
|---|---|---|---|
| PART I: Getting Started on the Web | |||
| Aug 31 | Understanding How the Web Works Organizing and Managing a Website |
Krug 1 Meloni 1 & 27 |
Create Your Home Page Brief Introduction Due |
| Sep 7 | Structuring an HTML Document Understanding Cascading Style Sheets |
Krug 2 Meloni 2 & 3 |
|
| Sep 14 | Validating and Debugging Your Code | Krug 3 Meloni 5 |
Create a CSS Page Home Page Due |
| Sep 21 | Working with Fonts, Text Blocks, Lists, and Tables Using External and Internal Links |
Krug 4 Meloni 6 & 7 |
Create Table Page CSS Page Due |
| PART III: Advanced Web Page Design with CSS | |||
| Sep 28 | Working with Colors, Images, and Multimedia | Krug 5 Meloni 8 |
Special Effects Create an HTML5/CSS Page Table Page Due |
| Oct 5 | Working with Margins, Padding, Alignment, and Floating | Krug 6 Meloni 9 |
HTML5/CSS Page Due |
| Oct 12 | Understanding the CSS Box Model and Positioning Creating Fixed or Liquid Layouts |
Krug 7 Meloni 10 & 12 |
Create a Multimedia Page Special Effects Page Due |
| Oct 19 | Using CSS to Do More with Lists, Text, and Navigation | Krug 8 Meloni 11 |
Special Effects Page Due |
| Oct 26 | Working with Web-Based Forms | Krug 9 Meloni 26 |
Form Page Multimedia Page Due |
| PART IV: Getting Started with Dynamic Sites | |||
| Nov 2 | Understanding Dynamic Websites and HTML5 Applications | Krug 10 Meloni 13 |
|
| Nov 9 | Understanding JavaScript Getting Started with JavaScript Programming |
Krug 11 Meloni 4 & 14 |
Create a JavaScript Page |
| Nov 16 | Working with the Document Object Model (DOM) | Krug 12 Meloni 15 |
Use JavaScript Validation JavaScript Page Due |
| Nov 23 | Using JavaScript Variables, Strings, and Arrays | Meloni 16 | JavaScript Validation Page Due |
| Nov 30 | Using JavaScript Functions and Objects | Meloni 17 | Final - Krug Essay/Presentation |
| Dec 7 | Controlling Flow with Conditions and Loops | Meloni 18 | Krug Essay/Presentation Due |
| Dec 11 | Last Day of class | All Work Due By 11:59 PM tonight | |
Chapters 19 (Responding to Events), 20 (Using Windows), 21 (JavaScript Best Practices), 22 (Using Third-Party JavaScript Libraries and Frameworks), 23 (A Closer Look at jQuery), 24 (First Steps Toward Creating Rich Interactions with jQuery UI), and 25 (AJAX: Remote Scripting) are advanced topics and left for the student to explore.
Grading
- Students will be graded on 7 assignments, worth 10 points each. The assignments will utilize the HTML5 web mark up language, Cascading Style Sheets, and the JavaScript programming language.
- There will be a Final assignment worth 15 points and an in-class presentation of your final assignment (15 points). Both the Final assignment and in-class Presentation should be based on your readings in the Krug, Don't Make Me Think, book.
- In-class/dicsussion forums participation are worth up to 5 extra points
- Final grades will be based on total points. The final letter grades be based on the following table:
Grade Range Grade Range A 100 - 95 C+ 79 - 77 A- 94 - 90 C 76 - 74 B+ 89 - 87 C- 73 - 70 B 86 - 84 D 69 - 60 B- 83 - 80 F 59 - 0
Back to Top
Textbooks
Sams Teach Yourself: HTML, CSS and JavaScript All in One
Julie C. Meloni
ISBN: 9780672337147
Publisher: Sams Publishing
Copyright: 2015
Editoin: 2nd
Format: Paper; 704 pp
Book is required.
Don’t Make Me Think! |
or |
Don't Make Me Think Revisited |
| Book is required. Back to Top | ||
| Brief Intro | Home Page | CSS | Table | Form | CSS Print | Multimedia | HTML5 | Final | Presentation | Participation |
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 (10 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 attribute 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
<ptag 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). - 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 (10 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>,<thead>,<th>,<tbody>,<tr>, 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 (10 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
formtag that has an action= value ofmailto:your-email-addressso 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 - Use appropriate
<fieldset>and<label>tags - Use appropriate styles to give your form a nice look (color, alignment, organization, etc.)
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").
Create a Multimedia Web Site (10 points)
For this Assignment you will first read the appropriate chapters in the textbook and then create a
new web site of three (3) pages, for example multimedia.html, audio.html, and video.html in
your web2.niagaracc.suny.edu account just as you did in previous Assignments. Your Multimedia
Assignment new web site should open up a new web page (multimedia.html), that utilizes hypertext
links to allow me to visit your two (2) additional web pages (audio.html and video.html.
These pages should be well designed and use CSS styling to enhance their look.
- create one (1) page that uses an
<a href>tag to link to a sound clip *and* an<embed>tag to link to a sound clip - create one (1) page that uses an
<a href>tag to link to a video clip *and* an<embed>tag to link to a video clip
The sounds and audio clips can be either uploaded to your web2.niagaracc.suny.edu account or you can link
to clips that exist somewhere on the Internet as long as you respect copyright laws and the clips are ethical and moral.
Extra Credit:
Create an additional page that uses JavaScript to display a scrolling text message.
The JavaScript code can be from any of the free JavaScript web sites. Use your favorite search engine (Bing, Google, Yahoo, whatever)
and do a search for: +javascript +scroll
to find lots of helpful information about free JavaScripts.
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
Multimedia web page.
When you have this Assignment ready for me to view and grade you should post a note in the Multimedia 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 (10 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").
Convert Home Page to Use CSS (Cascading Style Sheets) (10 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 style attributes
<strong>(style="font-weight: bold")<h1>, and all<;table>related tags (<tr>,<th>, and<td>for example)
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) Page to Use Print Media Styles (10 points)
For this assignment you will first read the appropriate chapters in the textbook. Then copy your CSS Page (modified index.html) to create a new web page (cssse.html). Then modify your new cssse.html and your original dig111.css file to add these features to your new cssse.html web page:
For this assignment you will first read the appropriate
chapters in the textbook. Then copy your CSS Page (modified index.html) to create a new web
page (cssse.html). Then modify your new cssse.html and your original
dig111.css file to add these features to your new cssse.html web page:- Use a style to change your graphic to be 50px wide by 50px tall (your picture will look scrunched, but that's OK)
- Change the display font for your introductory paragraph to Verdana, serif
- Float your graphic so it is on the right of your introductory paragraph and your introductory paragraph wraps around your image
- Change your list of Assignment links to be an unordered list
- Add a table similar to your Assignment 3 that displays with no borders around any of the cells
- Add appropriate
@media printstyles so that when your page is printed (you can use the Print Preview feature of your web browser to see the different look):- Your home page graphic does not print
- Your list of Assignment links are green
- The font for your introductory paragraph is Arial, sans-serif
- Your table prints with a borders around every cell
This page should also have a link back to your Assignment 1 web page.
You should then an a (anchor) tag to your Home Page web page that opens your CSS Print web page.
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 Site (15 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").
In-class Presentation (15 points)
Near the end of the semester you will be given 15-20 minutes to show the class your final web site. Be prepared to identify any issues you may have had and to point out any features you incorporated that enhance your site. Also, be prepared to answer questions about your design from both the class and myself.
Discussion Forums & In-class Participation (5 points)
Throughout the semester there will be a few discussion forums that you will need to post in and I will also note your participation in class.
Classroom Policies and Procedures
About Cell Phones, IPhones and IStuff ("HANDS OFF POLICY")
Before entering the classroom, turn off all cell phones, SmartPhones, IStuff, and other electronic devices. These devices are disruptive and their use during a lecture is rude to the class and instructor.
- No electronic devices should be in your hands during class. This means no fiddling with your phones, reading/sending text messages, etc.
- If you are expecting an important phone call or are compelled to play with Apps, do not attend class.
- If you feel you have a legitimate reason to use an electronic device in the classroom, see me to obtain explicit permission.
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:
- A failing grade of F or 0% will be entered for the test or other educational activity in question.
- If the activity is a major test, the student will be assigned a failing grade for the course, mid term or final.
- 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.
Class Web Sites
| Brian Bannister | John Constantin | Scott Crumb | Nicole Daniels |
| Alexandra Glover | Joshua Gorman | Jesstin Kolacz | Brittany Merritt |
| Brian Mrugalski | Joseph Navarro | Amanda Vallone | Javon Wise |
If you have any questions about web design, programming, or any computer application, please post a note in our General Discussion Forum and I will do my best to find an answer for you.
Jim...
Connect with me: 
LinkedIn