CIS-151  WebSite Development Assignments  

   As you read the chapters - use the examples from the book - to see what each type of code does:
CLICK on the ASSIGNMENT link for each 1 - 14 - to see the DETAILED WORD outline for each Assignment
The Manual has 21 Chapters  
NOTE:  Assignments links will NOT work until September 1st, 2013
Jing Video Recording Tutorials
Assignments are due the following week, for extensions talk with JilMac

Days    Assign-ment  Reading  Research  B+A     D
Jan 26


Chap 1+2
Web Pages
 Introduce yourself & tell me about your computer setup
 I will introduce you to Adobe Connect PRO

Download Files from the text
   Unzip them
   Put them on the computer you are working on
   Edit them with Notepad++

Download Notepad++ from

HTML Tags        w3schools-HTML5 Tags
Set up a gMail login
Set up Google Site
Create a Page for each Assignment
Feb  02


 Chap 3+4
How to you Learn what the terms/definitions/achronyms mean?  What web sites do you use as resources?
You may want to start a LINKS page on your Google Site - with the Resource Links that match your learning style.  These could include:
Look for Carousel examples of web images - HTML5

 Chap 2, 3, 4
FTP Client
FTP an index.html to your root space on STWEB
Feb 08

NO-OnGround Class.


 Chap 5+6
WYSIWYG, Notepad++ and Image EDITORS
Workshops:  Google Sites:  Inserting Images, Links, and their properties
                    Favicons-Document to View or Download (scroll down to find)
                    for Google Sites & HTML code.

There are two types of errors that you will come across:

SYNTAX - you have not closed a tag properly or are not using a tag correctly.

Where can you get help to find errors in your code??  Validator:  - you enter your URL and the W3C (WWW Consortium) Validator lists things that you should address.  These may be causing something else further down to not function properly.


LOGIC - your program is not working the way you thought you designed it to.

This is a harder type of problem to find - because there is no Automated Validator that you can run it through.  You will have to walk the code and step through the steps to debug this.

 Chap 5+6
Images, sizing, and spacing.
Feb 16


Chap 7+8
8-StyleSheet > Connect with JilMac  >  Enter your GUEST name (that can be recorded)
     We will create Tables on our Google Sites
Recording from a previous semester 2/18/2013 -
     NOTE:  the reason that the Favicon did not display in the recording is
                   because JilMac spelled href incorrectly hreg

      <link rel="shortcut icon" type="image/x-icon" href="favicon.ico">

Can you see my Favicon??

Basic HTML5 Website: index.html, style.css, student-pic.jpg, favicon-cow.ico
     to add the Assignment Pages copy the index.html,
     when you have Header & Footer the way you want them, 
     rename it to assignment-0X.html
     for each of the Assignments 01-14,
     then update the section id=Main of each page.

You can add a Table to each Assignments page for the Before & After examples
*   Free CSS website:
*   W3schools TryME
 Chap 7+8  1
Feb 23

Chap 9+10
9-Define Selectors
10-Format Text

Google Sites-Insert Image, Header & Page Title

There are 2 videos (1 is imbedded here ) & 2 questionairres
Please watch them both and answer the True/False + Yes/No questions     fast forward & rewind as needed.
  Recording  9/11/2012-
  Recording  9/18/2012 -
  Recording 9/25/2012
  Recording 10/2/2012
                                   Fast Forward to 15 minutes to see CREATING CALENDARS
Recording NEAUG New England Adobe Users Group Meeting:  
A discussion of CMS - Content Management Systems

WordPress by Matt Nelson, notes on the left Chat window
    Interactive Media Directory at

Joomla by Meg McCarthy of Meg McCarthy Designs

Drupal by  Beth Armor, Web Designer/ Production Admin at UMass @ Amherst
Panel Discussion on NEAUG's new WordPress site
Meg McCarthy, Barb Ackermann, Dawn Russel, Ann Campbell & Matt Nelson

 Chap 9 1
Mar 2     6

Chap 11
Layout with Styles
 EVALUATIONS:  Early Progress Reports & Mid-Term Grades
Recording of 10/09/2012 - Assign06, Embed Maps, Size+Text
Photoshop/ Tutorials and You'Tube Videos
                               Layers is the KEY to Graphic software  Google "TUTORIAL layers"
                               Paint.NET is FREE & has Layers-to see them:  Click Window > Layers
Challenge: Select a Menu from the web site
Put it on your HTML site and create links to all Assign01-Assig14
Post all resources, tutorials, etc. that you used on your Web Site
 Chap 11  1
Mar 9       7

 Chap 12
Style Sheets for Mobile to Desktop
 Recording 10/16/2012 - LINKS - open in New TAB & what is the impact on Phones & Tablets?
                   What's new in HTML5 & CSS3, World Usability Day 


LinkedIN IMage that links to LinedIN website
 Chap 12
 Project Outline
Mar 16    8

 Chap 13
Working with Web Fonts 
Early Progress Reports 
Your Project Outline is also Due.

Join an On-Line Forum

JilMac is available by Phone and would welcome working with you one-on-one, set up a time!  802-254-8628
 Chap 13
and Changing Fonts, Colors & Background Images in Google Sites
Mar 23     9

Chap 14
Progressive Design
CSS3 Enhancements 
JilMac will be out of her home office - she will be retrieving her eMails periodically.  
This will be an ON-LINE class only

CSS Transititions 

Rec 10/4/2011 New England Adobe Users Group - Mobile Development by Jason Mark of fast forward & rewind!! 

Challenge: Break up a .html file into php include & requires to reduce redundancy
  Chap 14  1
Mar 30

Chap 15
Becka -
Jim's Forum -
Nessim's CSS - works

CSS Generators


Liquid Layout
 - Does it work on Phones & Tablets?
                       #wrapper {width: 100%; min-width: 300px; max-width: 2000px; margin: 0 auto;}

What is it & incorporate it into a web site

Challenge:  Star Wars - Scrolling Text

Chap 15  1
 Apr 6  11

Chap 16
Responsive Design

Challenge: Udacity has a free course on building a Game in HTML5 (doesn't start till 2013 - but is there anything else???? Research)
  Chap 16  1
Apr 13   12

Chap 17
Audio, Video, Multimedia
SEO - Search Engine Optimization and
SEM - Search Engine Marketing 


SEO - by Zach Luse


 Chap 17  1
Apr 20    13

 Chap 18+19
 Page 504 in Text

Test your Web Site & your Project Web Site
  • Validate each page of your web site
Copying as Marketing--Thinking About Copyright 


Chap 18 & 19 1
 Apr 27   14

 Chap 20
Testing & Debugging Web Pages


Chap 21
Publishing your Pages on the WEB
Research of your choice -  pertaining to your Project

16 of the Most Common WordPress Mistakes  

An Hour of Code

Recording went over JavaScript Rollovers, Google Sites Clickable Images
                  Advanced Google Search Bar

 Find a Better Rollover, Install a Google Search Bar 


                  Fill out the form

                  MooTools Demo

                  World Scrolling

                  Image Reflection:

20 & 21
May 4Project   Project Presentation  Review your project, update your Project Outline - this is the Bill that you will present to a Customer or Supervisor.  Make sure you include a PHASE II - for future work!

Recording: Assignment 14 & Forms with ALERTS 
Use Google's PageSpeed to optimize your site or another's site!
Installing PageSpeed for FireFox

  5 days
 By Noon      All work: B+A, Research, Extra Credit & Project that you want included in your grade must be in your:
      STWEB,  Moodle, and/or Your Google Site.
      Note:  Students working on other WebServers - need to FTP a copy of their code to their STWEB, it doesn't have to be working on STWEB - but I must be able to see the code to grade you.

FireFox has an add-on for FTP-File Transfer Prototype.  FTP is how you will move your files from your Personal Computer to the Web Server 

FireBug is FireFox's debugger, Chrome has Tools > Developer Tools, IE has F12-Developer Tools