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.

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

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

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

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

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.

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

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

You will be using a fun animated presentation creator site called Powtoon. Please join our class by going to: https://www.powtoon.com/edu/join-group/ then put in the code: Lzxg