Web Design I
UNIVERSITY OF WISCONSIN-MILWAUKEE
School of Information Studies
INFOST 240 – Introduction to Web Design
Summer 2016 SYLLABUS – Sect 201
Instructor: Adam Hudson
Location: Northwest Quad Building B 3414
E-mail: arhudson@uwm.edu
Phone: (414) 229-3822
Office Hours: Local students may email for an appointment, otherwise email or the D2L discussion
board is the best way to reach the instructor.
Meeting Times & Location: Online, no scheduled meetings
CATALOG DESCRIPTION:
Uses popular authoring tools to cover the basics of organizing information.
GENERAL DESCRIPTION:
• In this course students will learn the basics of the WWW and how to create basic web pages using
HTML, and how to control the look and feel of web pages through the use of CSS.
• Students will learn how to add interactivity to static web pages using JavaScript while learning the
basics of object-oriented programming.
• Students will learn how to work with fonts and graphic elements in HTML.
• Development of websites will focus on the perspective of the end user.
• Students will use a text or HTML editing program only for this course. You may not use any
WYSIWIG editing programs such as Adobe Dreamweaver.
PREREQUISITES: INFO ST 230
OBJECTIVES:
Upon completion of the course, students will be able to:
1. Connect to a server, upload files to the World Wide Web, examine the history of the www, and
understand how the web communicates.
2. Examine and be aware of the best practices for web design and usability.
3. Create a web page using HTML; examine and understand different tags and attributes
4. Control the layout and appearance of content through the application of CSS.
5. Understand the basics of JavaScript and object-oriented programming and how JavaScript is used
to add interactivity to web pages.
METHOD OF DELIVERY: Online
Students with special test and note-taking needs should contact the instructor as early as possible for
accommodations. See policies below.
On-line Course Expectations:
Web Design I
• Many of you are preparing for careers as a professional, and the tone and formatting of your emails
should reflect that. When emailing me make sure to include a subject relevant to the email in the
subject line and address me by name (hey or no salutation at all is unprofessional). Also sign the email
with your name so that the instructor doesn’t have to look you up in the class roster by your email id.
• Online learning assumes a high level of maturity, time management, and the ability to self-learn.
Learning is more convenient but no less rigorous. The lack of formal schedule in an online course can
be liberating. It can also be demanding because the student must determine when to make time for
class.
• Please remember that you will spend as much or more time completing this course as you would
taking it in a traditional, classroom-bound, format. Due dates are as "real" as they are in a traditional
format.
• The following resources will help you if you have technical problems:
 SOIS Distance Education: http://www4.uwm.edu/sois/online/,
 UITS Help Desk: https://www4.uwm.edu/technology/help/campus/index.cfm
Students with special test and note-taking needs should contact the instructor as early as possible for
accommodations. See policies below.
TEXTBOOK: None Required
Students are expected to digest the lecture notes each week which introduce the week’s concepts.
Most of the lecture notes included audio embedded into the PowerPoint presentations. There are also
video tutorials which run through the application of the concepts brought forth in the lecture notes.
Recommended Resources:
 W3C HTML Tutorial: http://www.w3schools.com/html/default.asp
 W3C CSS Tutorial: http://www.w3schools.com/css/default.asp
 W3C JavaScript Tutorial: http://www.w3schools.com/js/default.asp
 Lynda.com access: http://www4.uwm.edu/sois/resources/it/lynda/
o Training library with courses on HTML, CSS, and JavaScript
o Login with your ePanther username and password
TECH RESOURCES:
UWM Help Desk: http://www4.uwm.edu/technology/help/
SOIS Tech: http://www4.uwm.edu/sois/resources/it/, soistech@uwm.edu, (414-229-5275), NWQB
3432. The SOIS Tech office is open from 8am until 9pm during Monday thru Thursday and on
Fridays from 8am until 5pm. Due to recent budget cuts the office is not open during the weekend so
questions sent on the weekend will not be answered until the following Monday.
SOIS Virtual Lab: http://www4.uwm.edu/sois/resources/it/virtuallab/
The link includes information, tutorials, and login information for using the Virtual Lab.
COURSE SCHEDULE:
Week:
1
Topics:
Introduction to the course, student introductions, course policies, and the D2L
Web Design I
(May 31 –
June 4th)
2
(June 5 -11th)
3
(June 12 –
18th)
4
June 19 –
25th)
5
(June 26 –
July 2nd)
6
(July 3 – 9th )
class site. Background overview of the internet and introduction to the World
Wide Web. Using SOIS webspace account, creating content using a text editor
and connecting to a server via FTP.
Web Design Best Practices; usability, layout, color usage, mobile design. Basic
structure and principles of an HTML form (input types and attributes), and
structuring content using HTML tables.
Introduction to CSS. Setting font type, size, color, and other attributes. Using
CSS for page layout, styling different states of elements, layout using floats, div
tags, span tag, margins, padding, etc.
Using CSS to enhance form layout and form input types. More with CSS
including new developments within CSS3, current browser support, using CSS to
create a responsive design template and using using CSS to create dropdown
menus.
Introduction to object-oriented scripting, basic constructs of scripting using
JavaScript, and the Document Object Model. Programming concepts, syntax,
and first functions working with objects visibility properties.
Manipulating an objects default properties using scripting and writing a routine
Using HTML, JavaScript, and CSS together. Using JavaScript for simple data
validation. Introduction to jQuery and creating an image gallery. Introduction to
Responsive design (creating a CSS-based layout template).
ASSIGNMENTS:
Assignments are due on the specified date (midnight CST on the day it is due) *unless specifically
noted by the instructor. Post the link to the assignment in the drop box on D2L. Grades will be
reduced 2 points for each day that it is past due. Assignments submitted more than 5 days past the
due date will not receive any credit. Assignments are worth 10 points each, so if an assignment is 1
day late 8/10, 2 days late 6/10, etc. Submissions that include an incorrect link (such as a link to the
local file path rather than the url for the file hosted on your webspace account or the submission of an
actual HTML file rather than the url) will receive a 1 point deduction.
Assignments compromise the largest part of your grade by far at 80% so it is important to submit work
on time. Rules of academic conduct require that you not use the work of others without clearly
indicating it as such. Academic misconduct may result in a lowered grade, no credit for a given
assignment, or removal from the course.
If you are going to miss a deadline due to illness, emergency, etc please let the instructor know in
advance. Reasonable accommodations can be made for students who inform the instructor in advance
of complications meeting a particular deadline.
ASSIGNMENT DESCRIPTIONS:
Additional assignments may be assigned during the course of the semester. All assignments are worth
10 points except for the class introduction in week 1 which is worth 5.
Web Design I
Assignment:
Introduction to the class
Creation of a home (assignment) page named
index.html, and placing it on the web (using
your webspace account). This can be used as a
page for linking all of your subsequent
assignments.
Creation of your first web page using core
HTML tags.
Usability Assignment (comparison of website
homepages based on certain criteria)
Create an HTML form for a topic of your
choosing.
Create a short resume for you or someone else
as an example and add some styling through the
application of a CSS stylesheet.
Layout a simple webpage using CSS to control
how page elements are displayed.
Objectives:
1
Point Value:
5
10
Due:
Week 1
Week 1
1&3
10
Week 1
2
10
Week 2
2&3
10
Week 2
3&4
10
Week 3
4
10
Week 3
-Customize form input types with CSS
2&4
10
Week 4
-Creation of a page template using CSS
3&4
10
Week 4
-Create a dropdown navigation menu using the
CSS visibility and z-index properties
3&4
10
Week 4
Create a page that sets the background and
foreground (text) color of a page
5
10
Week 5
-Manipulation of image properties (border,
width, height) through scripting.
-Writing a function and customizing the alert()
method pop-up window
-Using JavaScript to validate an email address.
3, 4, & 5
10
Week 5
3, 4, & 5
10
Week 6
-Responsive layout
-Using jQuery to create an image gallery
3, 4, & 5
10
Week 6
DISCUSSION:
Class participation will be based on completion of assignments as scheduled, and contributions to class
discussions (not required, but will positively impact your grade). Required discussions will be
assigned throughout the course where you must participate (involves making posts to the D2L
Discussion topic for that week). There will be 2-3 weeks during the semester where discussion is
Web Design I
required for the assignment that week. More detail on the type and length of discussion posts will be
given during the week in which it is assigned.
FINAL:
The final will be taken online through the D2L interface. The test consists of a mixture of multiple
choice and T/F questions. All of the questions are drawn from the course lecture notes throughout the
semester. You will have the final week of the course to take the exam between July 3rd and the 9th.
EVALUATION:
Undergraduate
Students
80%
20%
100%
Assignments
Final
Total
GRADING SCALE:
93-100
90-92.99
89-89.99
83-88.99
80-82.99
79-79.99
A
AB+
B
BC+
73-78.99
70-72.99
69-69.99
63-68.99
60-62.99
Below 60
C
CD+
D
DF
UWM AND SOIS ACADEMIC POLICIES:
The following link will take you to UWM pages/links which contain university policies affecting all
UWM students.
http://www.uwm.edu/Dept/SecU/SyllabusLinks.pdf
Undergraduates may also find the Panther Planner and Undergraduate Student Handbook useful
(http://www4.uwm.edu/dos/student-handbook.cfm).
For graduate students, there are additional guidelines from the Graduate School
(http://www.graduateschool.uwm.edu/students/current/), including those found in the Graduate Student
and Faculty Handbook: http://www.graduateschool.uwm.edu/students/policies/expanded/.
The following link will take you to pages/links which contain SOIS policies affecting all SOIS
students.
http://www4.uwm.edu/sois/resources/formpol/policies.cfm
Web Design I