Subject: CS1033 - Assignment 3
From: <Saved by Windows Internet Explorer 7>
Date: Mon, 1 Mar 2010 13:30:22 -0500

CS1033 - Multimedia and Communications

Assignment #3 (15%)
Website Design & Dreamweaver

Due: Friday, November 14, 2008 by 12:00 Noon

PROJECT:

You have been asked to create a website for the theatre company "Tribute Theatre Productions " company who is based in New York that are committed to fostering the development and performance of theatre, music, dance and multi-media works. They are looking at revamping their website and would like you to redesign it for them. They would like a website which can provide information to both their members as well as to the public. They would like to showcase their upcoming performances and hope that this website will act as a marketing tool for providing upcoming performances and sparking interest for volunteer opportunities.

Your job is to come up with a website that will represent their artistic nature as a theater group. We are providing you the content to use to put together a website with 6 webpages, so that they can decide if they like this prototype website that you have put together. Good Luck!

PLEASE NOTE THAT ALL all company names and member names are fictitious. If you choose to want to include images of people then go ahead and find your own and place it in your site.

MARKING SCHEME:

Build a website to include ALL OF THE FOLLOWING things:

A banner for your website made within Photoshop

Size of banner should be a maximum of 780 pixels wide. The height will depend on how you want to setup the layout, presentation, but remember that good design means that you should be able to see all the links without scrolling.

Content for the webpages: (read carefully)

The document website_contentFall2008.txt contains the content to be used for creating the webpages. This is provided so that you don't have to come up with the content. Your job is to lay out the content in an appealing and professional manner. Note that it is a text file with no formatting so that you can copy and paste the information into your website and work with the layout and the attributes as you choose. We will be marking on how nicely the information has been presented. Add images throughout your webpages to give more visual appeal but remember to reference all images used. TIP: IF YOU WANT TO PRINT OFF the .txt file so that you can see much easier what material you have to work with and ensure that the margins aren't cut off, then consider copying this information to a Word file and then printing it off the Word filef. BUT WHEN INSERTING THE TEXT CONTENT INTO YOUR WEBPAGE, USE THE .TXT FILE NOT THE WORD file.

Number of Webpages: 6 webpages which will act as your menu items

Home --> Text is found in the document website_contentFall2008.txt provided but you can include any additional information. It is up to you how you want to set up the homepage. NOTE: the third line of content on this page, the line: Les Miserables - the Musical must have a link to the information on this play on webpage 3; other than that link, it is up to you how you want to set up the homepage.
About Us --> included in the document
Performances --> included in the document
Contact Us -->included in the document. Make sure you:

layout the board of directors in a format, i.e. some sort of chart, that makes it easy to read.

Other Theatre Links Of Interest --> This webpage must contain content selected by you and layout by you. The content should really just be a BRIEF description of interesting sites and the links to those sites. It must have a list of 4 links to existing websites that you think a theatre goer might find interesting, for example, you might include a link to Stratford Festival in Stratford, Ontario.
References: -->This is to tell us where you got your images for putting your website together. Just list the website addresses of where you obtained images for your web pages and thus there is now no longer a need to place your references in your .txt webct file. Make sure this page is neatly layed out and the t.a. can figure out where you got all your images.

A Table structure (not cascading styles): Fixed 780 pixels wide. You can use as many rows as you need to set up your layout, and as many tables, nested tables required to achieve the look.

A Navigational structure: Create your menu links as button images, or as text. NOTE: If you decide to create button images, you MUST use Photoshop to create your buttons, you may not use button generating software. Navigational buttons/links that are very professional looking (or where it appears students have put extra effort into the look of the navigational structure) will get more marks than plain text links.

Appropriate Images: Appropriate images should be embedded in your webpages to make the pages interesting. Look on the internet to find images but don't forget to site them in your references webpage.

Color creativity: We will be looking to see whether colors co-ordinate and flow nicely with the overall look

Clean Neat Layout: We are looking for a nicely laid out page as opposed to a cluttered, crowded page

Links We will be looking for several different types of links. You need an instance of each of the following link type in your website:

e-mail links
hotspots links (see bullet 11)
link(s) pointing to another area within the same page (bookmark/anchor links) .
link(s) pointing to another of your pages within your site (this could be the links in your navigational menu)
link(s) pointing to a website on the Internet (you can decide where you want to point to anywhere on the internet)

Structured List (ordered OR unordered): You must have some sort of bulleted list or numbered list in one of your pages.

An image map with hotspots: It is up to you to think of a way of illustrating an image map in this website. Marks will be given for how the image and it's hotspots related to the content it links up to. Go back to your notes if you don't remember what this is.

Well balanced text formatting. We will be looking for:

Appropriate size: headings, body of text, balance, etc.
Text Emphasis - use bold/italics as you see fit. There must be at least one example of both.

A well organized File/Folder structure to hold all your html files and images. Marks will be given based on how well your files and folders are organized as was demonstrated during lectures.

An uppermost folder called assign3. You must keep your index.html home page in a the upper most folder. The uppermost folder must be called assign3. The subfolders inside assign3 can be called whatever you wish. Note though, you will be given marks for appropriate file names and folder names.

Handing In Your Assignment 3:

Note: you are now posting to a NEW SERVER not panther so follow instructions below

Due to limitations on space on Panther, for the remaining assignments (this one and Major assignment), you webpages will be hosted on the Computer Science gaul network on P: drive. As long as you have your website sitting in a folder called assign3 on your P: drive, then anyone will be able to see your assignment simply by using the URL address:

http://publish.gaul.csd.uwo.ca/jsmith34/assign3/

You MUST use the lab machines (in Middlesex College, room 230 or room 235) to hand in your assignment. You will copy your files to the P: drive. There is no need for you to use the Secure Shell program for this assignment.

If you choose to work with your own copy of Dreamweaver (or a free trial downloadable version) from home, remember to put your files into folder called assign3, (see step 3 below as far as setting up your site because it will mess up your links if you don't do this step) and then copy the information onto a memory stick and come to the lab, and copy the entire assign3 folder to the P: drive. But you might want to test out your website a few days in advance to ensure that you have set things up correctly.

In order to work on this assignment, perform the following steps:

Log onto a machine in MC 230 or MC 235

Create a new folder on your P: drive called P:/assign3

Run Dreamweaver, from the main menu select Site>New Site> then give it the name Assign 3 and make sure the Local Root Folder says P:\assign3 and that for Links Relative to, make sure the option Document is selected, the select OK. It should look like this:

Build your assignment 3 inside this new Dreamweaver area. It must have a file called index.html that is the home page or else it will not work. Make sure you have created a folder in P:/assign3 to hold all your images.

When you have finished your website YOU MUST DOUBLE CHECK FROM A MACHINE NOT IN MIDDLESEX COLLEGE that ALL your links and images are working. Do this from a machine in one of the labs in Natural Sciences or from your home machine but do NOT double check your site from a middlesex college lab machine, things may appear to be working when you check while in Middlesex College but the website may actually be set up incorrectly from other machines, so make sure you check your website from a machine NOT in Middlesex College. Also, if you built the website on your laptop, after you post your website in MC 230/235, it is a good idea to check your website from a machine OTHER than your laptop and other than the machines in MC 230/235 because links that appear to be working for you may not be working for the t.a. marking your assignment. To double check in Internet Explorer or Firefox that your website in assign3 is on the internet, type the following web address: http://publish.gaul.csd.uwo.ca/youruserid/assign3. For example: if your username was lreid, you would type: http://publish.gaul.csd.uwo.ca/lreid/assign3/ This should bring up your home page in index.html. If it doesn't, you have done something wrong, try again or contact your professor. If your links or images are not working, this means you are not referencing them correctly in your webpage. You should look at where you stored the page/image and how you linked it to figure out what went wrong. Sometimes deleting it and reinserting it will fix it.

TO SUBMIT YOUR ASSIGNMENT:

Now you must prepare your files to submit to webct.

In Notepad (or some other simple text editor) create a file called uwouseraccount_assignment3.txt, make sure the name of the file is all lowercase. For example, if your name were John Smith and your UWO user account was jsmith34, then you would create a file called jsmith34_assignment3.txt. The uwouseraccount_assignment3.txt should just contain ONE line, the web address of where you assignment can be viewed. For example, if your name was John Smith and your UWO user account was jsmith34, then here is a possible jsmith34_assignment3.txt file:

http://publish.gaul.csd.uwo.ca/jsmith34/assign3/

NOTE: you don't need to put references in the above txt file this time because you have included the References webpage that you built above as part of your site.

Go into http://webct.uwo.ca/ and upload and submit the following files:

uwouseraccount_assignment3.txt (if you fail to submit this file, you will receive an automatic ZERO, the time stamp on this file and the time you uploaded your files to assign3 will be used to decide on the punctuality of your assignment)

a COMPLETED submission form named: uwouseraccount_submissionform_assignment3.doc The form can be found at http://www.csd.uwo.ca/courses/CS1033/assignments/assignment3/fall2008/submissionform_assignment3.doc Open the .doc file, read it, fill it in, resave the file with the following file name: uwouseraccount_submissionform_assignment3.doc. (if you fail to provide this file, you will receive an automatic ZERO)

PLEASE NOTE: When submitting your assignment to webct, in the comments section inside the Webct submission form, indicate to the marking TA, the image and the webpage that contains the hotspot. For example,
"My hotspot image is the image of Stratford Theatre on the Productions page"
Otherwise, they may miss it, and not give you the marks you deserve.

Dreamweaver Website Tips:

A lot of the following concepts have been presented during the lectures and used in your lab tutorials, remember to think about them when designing your website :-)

TECHNICAL

CREATIVE

Homepage

Represented as "index.html"

Color

Color balance (important!!)
Pleasing colors to match company profile
Page background color

Other webpages within site

3 Click Rule structure

Webpage Balance

Webpage boundaries
Sections: easily identified, easy to read
Effective use of padding in cells

Banner (top)

Approximate size 150 x 780
Can be taller as long as all your side links or top links fit within the window (no scrolling)

Image Links

Balance: size and font
Buttons: suitable size
Color: what color are links

Images

Clear, no noise
File size (download time)
Alternative Text for major images

Navigation

Easy to navigate through your website and placement

Meta Tags

Description, keywords in homepage and in other major webpages

Images

Fits with rest of color scheme
Fits with the content

Text Color
Text Size

Easy to read
Appropriate size, font type relative to overall webpage

WEBSITE FILE ORGANIZATION

Navigational Links

Easy to read
Size appropriate with rest of webpage
Should not have to scroll
Target field:Â  new window or not?

Files

Images folder
Use folders to further organize your webpages

Property Titles

Need a heading on each webpage
Need to know what page you are on
Complicated Navigational structure, show path chosen

Upload

Server needs: file names and case sensitivity
Always use lower case

Bottom of webpage

Contact information: dept, city, e-mail, fax

Spelling/Grammar

Use Spell Checker

Speed

Max 25-30 sec at 56K modem