Category Archives: IWWD 2015

IWWD Final Project

Final Project – Complete Web Site

Read ALL instructions before you begin! Ask questions BEFORE you begin!

It’s time for your final challenge, where you’ll have to put your knowledge of HTML, CSS, and JavaScript to the test by building a functional, realistic website!

This is your final exam for the course, and will count for 20% of your overall mark.

If you wish, for this assignment, I will allow you to use DreamWeaver, which may make life a bit easier.

The topic of your site is somewhat up to you, but it has to have a clear purpose, theme, design, etc. This time, you’re more interested in the overall usability/aesthetic of your site than you were before. Your site should be:

  • organized
  • easy to navigate and understand
  • appealing
  • interesting
  • useful
  • appropriate for the topic

You must make good use of the following concepts:

  • HMTL Basic Structure
  • Proper use of headings, paragraphs and div tags
  • Use of borders, shading, horizontal rules, or other design/layout elements to break up page content.
  • CSS used for decorating page elements (borders, padding, text color, etc).
  • CSS should set the fonts, colours, and text formatting options your way. I’ll be looking for spacing, alignment, decoration, and other options you’ve learned and should now be able to apply
  • CSS rules for borders, shading, background options, rounded corners, etc.
  • CSS rules should target specific areas of your page/site (for example, give the header or navigation links a distinct format/look)
  • Images with text wrapping around them
  • A menu with hover colours. Links to other site pages are set to launch in the same window
  • External links that send users to other sites, set to launch in a separate window. These should be links to sites that provide more information/resources for users of your site
  • Use of a table for structuring information
  • Use of a list for organizing information – can be ordered or unordered, depending on your content
  • Anything you want to throw in to impress me (must work properly and look good)
  • JavaScript elements added to at least one page. I’d recommend using a “store” type page, and referring to the JavaScript for WebDesigners tutorials for assistance. You will have to copy SOME of the information used in the site worked on there (we didn’t get into enough detail for you to write it all yourself), but you will have to CUSTOMIZE it yourself (ie you’ll sell your own products, use Canadian provinces instead of states, adjust the tax rates (5% GST, 8% PST in Manitoba, only apply GST (no PST) to other provinces)

Your site must adhere to the following specifications:

  • It must be a website of at least 4 pages stored in a folder called “lastnamefirstinitial_WDFinalProject”.
  • All pages must have a similar structure, with some differences. The overall “look” of the pages will fit together, but each will have individual elements
  • All pages must be linked to every other page (these links launching internally) and each page must include a link to another site (that launches externally)
  • You must use an external CSS document to decorate your website. I will expect to see you using CSS rules and classes.
  • You must include either a horizontal or vertical navigation bar that connects all of your main website pages. These links must be set to behave as rollover links, and should suit the color scheme and design of the rest of the page.
  • Your color scheme for the page should be reflective of the issue that you are raising awareness for.
  • Remember that including different sections with various borders and background colors on your pages creates unique and interesting designs.
  • Also keep in mind that the images that you include are very powerful in promoting your cause/message/product. It is important that you choose them carefully, and make your text wraps neatly around them. Use good quality images! Using images that look bad or have ugly watermarks on them will make your site look bad, and this should look professional!
  • Be aware of the use of padding in elements so that things do not look cluttered.
  • Be sure to use an example of an image background that is not repeating either as the background of the entire page or in a single element.
  • All pages should be properly written (indented code that is properly spaced and easy to read) and all pages must validate.

Site topics:

You should choose something that is interesting/relevant to you. If you’re involved in an activity, organization, group, class, etc. you will have better knowledge of the topic and purpose, and won’t have to waste time researching or checking out other sources.

  • musician/band website
  •  social justice cause/organization
  • club/group/organization
  • sports team
  • teacher/class website
  • other topics are certainly possible, but need to be approved by Mr. Robson!

When finished, place a copy of the entire folder “lastnamefirstinitial_WDFinalProject” in your shared DropBox or Drive folder.


Adobe DreamWeaver

We’ve been learning how to write code ourselves, which is a very important, valuable skill. However, when it comes to making sites in the real world, you’ll often end up using a program like Adobe DreamWeaver, which does a lot of the coding for you. Since you know what code looks like and how it’s written, you’ll have the ability to do a lot of customizing while using DreamWeaver.

You probably won’t find DreamWeaver in your dock, so you’ll have to find it in your Applications folder or search for it

Screen Shot 2014-01-15 at 11.03.02 AM

As with most programs, the opening splash screen offers links to resources that will help you with the program


You can create a variety of files. In our case, we want multiple files combined into a site


You’ll be asked to choose a name for your site and a location where it will be saved. As usual, I like folders to have your last name on them and the project title. I also always recommend that you save your work in your DropBox or Drive folder, but NOT in the folder you share with me. When completed, you can move your folder into your shared folder for marking

Screen Shot 2014-01-15 at 10.41.01 AM

It would be wise to look under “Local info” and set the location of your images file.

Screen Shot 2014-01-15 at 10.42.15 AM

You will have to CREATE a New Folder. Our previous examples contained a folder called _images so I would recommend using that.

Screen Shot 2014-01-15 at 10.41.31 AM






You’ll have to specify a name and location for your css file. We’ve used files called main.css and styles.css, so I’d recommend one of those.

Screen Shot 2014-01-15 at 10.54.52 AM

You should, of course, save your work ASAP. Call your first page index.html (important!)

Screen Shot 2014-01-15 at 11.44.00 AM



Screen_Shot_2014-01-16_at_9_15_30_AM-3 Screen_Shot_2014-01-16_at_9_15_35_AM-5 Screen_Shot_2014-01-16_at_9_15_45_AM-3 Screen_Shot_2014-01-16_at_9_15_53_AM-5

Dreamweaver is pretty easy to pick up and work with, but if you need them, here are links to more Dreamweaver resources/tutorials:

Adobe TV

Adobe tutorial

Beginner handbook

Training course

Good ol’ YouTube



Assignment 2 – Internet Explainer Video

You will be using a fun animated presentation creator site called Powtoon. Please join our class by going to: then put in the code: Lzxg

WD-Assign2 – Internet Explainer Video
Create an animated explainer video that explains and illustrates the concepts of how the Internet works. Make sure you include the following terms and a brief explanation with each item.
You must include: client, server, TCP/IP, routers, IP address, & DNS Server
You will be using a fun animated presentation creator site called Powtoon. Please join our class group here:
How the Internet Works:

Internet Exchange Map:
WD-Assign2 – Internet Explainer Video
Create an animated explainer video that explains and illustrates the concepts of how the Internet works. Make sure you include the following terms and a brief explanation with each item.
You must include: client, server, TCP/IP, routers, IP address, & DNS Server
You will be using a fun animated presentation creator site called Powtoon. Please join our class group here:
Your PowToon can have the information written out or you can record your voice as the narrator.
WD-Assign2: Internet Explainer Video
Student accurately explains all required terms in detail                      /10
Video demonstrates a clear understanding of the processes              /10
of the Internet
Overall Impression of finished product                                                /5
(images, text styles, voice over?, etc.)
Figured out and incorporated PowToon tools well.                              /5
Total                                                                                                             /30

The History of The Internet

Believe it or not, when I was a kid, only a privileged few had access to The Internet, and it was NOTHING like it is today. The kind of information access and connectivity that we enjoy today wasn’t even something we could comprehend. Those were truly dark days, my friends!

But somewhere along the line, our current lifeline started to develop. But how did we get here?

Well, that’s up to you to explain!

Create a timeline showing the most significant events or inventions that helped to form our current Internet. Organize the events chronologically. Include a diagram and description for each event. Make it look nice! Create something of your own and do not copy any samples or anyone else’s work.

I would like you to use a program on your computer called Timeline 3D, which you will have to find in your Applications folder or by using Spotlight Search.

Screen Shot 2015-02-04 at 9.11.14 AM

If you can do it creatively in another application, you could use Photoshop or  another computer program you are comfortable with – one exception: NO POWERPOINT! If you would prefer, you can do it by hand (colors and pictures are expected).

Please save your assignment as lastnamefirstinitial_timeline.(ext) and place a finished copy in your shared DropBox or Drive folder.

Partial Sample:Screen Shot 2015-02-04 at 9.05.13 AM

To see how you will be marked: IWWD_Timeline

Internet history links: (feel free to check out your own sources, but MAKE SURE THAT THEY ARE ACCURATE!)