CS1033 -
Multimedia and Communications
Assignment #3 (15%)
Website Design & Dreamweaver
Due: Friday, November 16 by 3:00 pm
PROJECT:
You have been asked by the
Waste Free World organization of London, Ontario to re-do their website. This
organization is dedicated to eliminating all unnecessary waste from our lives.
Your job is to come up with a professsional looking website that will represent
the organization. We are providing you with the content for creating each of
the six required web pages.
CRITERIA:
Build a website to include ALL OF THE FOLLOWING things:
- A banner for your
website made with Photoshop
- Size of banner must be
EXACTLY 900 pixels wide.
- You can use any images you find on the internet that will add appeal to
the banner but remember you need to save the url for the image to reference
the images.
- Should contain the organization's name somewhere on the banner: Waste
Free World
- Create a banner that is professional, appealing and appropriate for the
overall organization's goal.
- Content for the web
pages: (read carefully)
- The document http://www.csd.uwo.ca/~lreid/cs1033/assignment3/content/website_contentFall2012.txt
contains the content to be used for creating the web pages 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 how nicely the information has been presented. Add
images throughout every web
page (except for the references page) to give more visual appeal but
remember to reference all images used.
- Number of Web
pages: You need to create 6 webpages in
total. Thus, you need to create a menu structure containing links to
each webpage (you will have 6 menu items to navigate with betweent the
webpages). The text for the 6 webpages is contained in the content document
Listed below are guidelines for
each of the 6 webpages
- Home -->
Text for this web page is included in the content document Make sure the layout for this
page is neat, use the bullet feature in Dreamweaver rather than having
hyphens for list items. Make sure you turn the two emails on
this page into working links to email.
- Media and Award
Information-->Text for this web page is included in the content document.
- Make sure the 2 press release titles given link to the
full descriptions below on this page (for example, the July 18th, 2008 -
Green the Festivals should have a link on it that jumps down to the long
text about 25 lines later).
- The 2 Green Foot Awards should also have the images of them somewhere
near the description. The 2 images can be found at:
- http://windmillwebworks.sytes.net/wastefreeworld/lpbpimages/plaque.jpg
- http://windmillwebworks.sytes.net/wastefreeworld/lpbpimages/plaque2.jpg
- The EcoVox video text should go to this link--> http://www.rogerstv.com/page.aspx?lid=237&rid=9&sid=4271
- The EcoVox magazine should go this link --> http://www.ecovoxlondon.com/
- Layout the contact info at the bottom of each press release in a nice
clean manner.
- Waste Elimination
-->Text for this web page is included in the content document . Make the Waste Free Living and
the 3 lines under that (organizations, retailers, individuals) each link
down to the appropriate text within this page. Make the Waste Free Festivals
and Events and the 7 lines under that each link down to the appropriate text
within this page. .
- Facts -->
Text for this web page is
included in the content document . Set this page up in a nice,
well organized manner.
- Useful Links
--> For this page, find 3 interesting sites on the internet about
waste reduction and put them on this page along with an image for each site
(could be the site's logo or some other picture you think would work for
this site) and a brief description of each stie (no more than 2 or 3
sentences). Lay this page out in a nice neat manner.
- References: -->This webpage is to tell us where you
got your images from. For each image used in your website, on this
"References" webpage indicate the
website address of where you obtained the image.Make sure this page is
neatly laid out. You no longer have to place your image
references in the Assignment Text box in Owl since they are listed on this webpage
HOWEVER you still have to use OWL to list the link to your
website.
- A Table
structure (not cascading styles): Fixed 900 pixels wide to control
your overall website layout. 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 will get more marks than plain text
links.
- Appropriate Images:
Appropriate images MUST be embedded in each of your web pages to make the
pages interesting. You can use the images from WasteFreeWords current website. or any images you find on
the internet. All images used must be cited in your "References" web page. You
can also use images from online stock photo companies such as http://www.bigstockphoto.com/, http://www.istockphoto.com/ but you still have to site
these images also.
- 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
- link(s) pointing to
another area within the same page (bookmark/anchor links) and control to the
top of the page.
- link(s) pointing to a
website on the Internet (on homepage link to "The University of Western
Ontario" )
- Structured List
(ordered OR unordered): You must have some sort of bulleted list or
numbered list in one of your pages using Dreamweaver (there should be no
hyphens used as bullets for lists).
- An image map with
hotspots: It is up to you to think of a way of using 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.
- Layout within page - should
not be cluttered, should be easy to read, should have clean alignment (use
what is appropriate: Left, Right or Centered
Alignment)
- 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 and in step 6 above.
- An uppermost folder
called assign3. You must keep your index.html home page in
the upper most folder (the upper most folder must be called assign3).
The sub folders inside assign3 can be called whatever you wish. Note
though, you will be given marks for appropriate file names and folder names.
Also note: the home page called index.html MUST be located in the
assign3 folder and NOT in a sub folder of assign3. Thus, this is correct:
assign3/index.html and this is incorrect:
assign3/pages/index.html. The incorrect way will NOT display your
pages so make sure you put index.html inside folder assign3 NOT in a
sub folder of assign3.
Handing
In Your Assignment 3:
Note: you
are now posting to a NEW SERVER not panther so follow instructions below and
make sure you put the link to your website in Owl.
STEP 1: FTPing YOUR WEBSITE TO THE INTERNET
Due to limitations on space on
Panther, for the remaining assignments (this one and Major assignment), your web
pages will be hosted on the Computer Science webserver. 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/yourwesternuserid/assign3/
You will still be using winscp or file zilla to upload your files but a few
things will be different:
- When you run winscp or file zilla use the following information:
- Host Name: publish.gaul.csd.uwo.ca
- Username: Your western username, for example jsmit27
- Password: The GAUL password you were sent by the computer science
department at the beginning of term
- Port: 22 (only if you are on campus or in residence), 27 (if you are
using winscp/filezilla from off campus)
- You no longer have to cd to public_html, you will be put right in the
directory where you will move your assign3 folder
- Drag your assign3 folder from your machine (on the left) up to
publish.gaul.csd.uwo.ca (on the right)
- You no longer need to set permissions, they should be set
automatically
- YOU MUST CHECK THAT YOUR SITE WORKS, please follow these instructions to
make sure this step worked:
STEP 2: TESTING TO SEE IF YOUR WEBSITE IS VIEWABLE FROM THE INTERNET
WARNING: If you want to
check if your site is working (all the links are correct and none of the images
are broken), you MUST check it from an account/machine that was NOT used to make
assignment. Thus, if you made your assignment on a home machine/laptop machine,
then find another machine on campus to test the ALL the links OR have a friend
test the links for you on their machine. If you created your site on the
machines in the lab rooms (MC230 and MC235), then you should test your links
from a home machine, or you can even test it from a machine in MC230/235 AS LONG
AS YOU ARE TESTING IT ON A MACHINE THAT IS NOT LOGGED ON WITH
YOUR USERID. Thus, in the labs, you could ask the person sitting next to you to
check if the links work BUT NEVER TEST IT ON THE MACHINE YOU BUILT IT ON, it may
appear that everything is correct but when the t.a.s go to look at your site,
the links may be broken or the images may not appear!
To double check, open a browser such as Internet Explorer or Firefox and 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 called index.html. If it doesn't, you have
done something wrong, try again or visit a TA during the posted consulting
times. If your links or images are not working, this means you are not
referencing them correctly in your web page and should check the following
troubleshooting tips:
- 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.
- Make sure that all your images
and web pages are within the site, i.e. within the folder
assign3. If you have to move files around or rename
them, do it from the Dreamweaver File panel because only this way will Dreamweaver adjust its pointers on links
etc.
- Make sure that your images are named the same (the same case) in your file directory pane as the link in your .html file. For example: Cat.jpg is not the same as cat.jpg thus the case is very important in a filename. If you need to rename your image/filesname, then do it from inside the File Pane in Dreamweaver, Dreamweaver will try to fix the links for you.
STEP 3: SUBMITTING YOUR ASSIGNMENT ON
OWL:
-
You ALSO MUST submit
a link to your website via http://owl.uwo.ca/. See below for the details of
how to do this.
- In the "Assignment Text" box for assignment 2, you must put the
following:
- the first line of the "Add Comment" box
MUST be the assignment 3 web site (include the
http://)
- a blank line
- a note to the t.a. marking your assignment where your hot spot is
located.
- NOTE: you
don't need to put references in the "Assignment Text box this time because
you have included the References web page that you built above as part of
your site
- Your submission should look like this:
.
The
labs will be VERY busy because every student must hand in their assignment
via a lab machine. Thus, try to have your assignment done and handed in at
least 1 or 2 days before it is due, otherwise you might not be able to
find a free machine in the lab to build your assignment! No extensions will be
given because someone could not find a free machine in MC230 or
MC235 to use Dreamweaver to build his/her site.
Late Policy
- Any assignments received after 3pm on Friday, Nov 16, 2012 but before 3pm on Sunday, Nov 18, 2012 will lose 15%.
- Any assignments received after 3pm on Sunday, Nov 18, 2012 but before 3pm on Monday, Nov 19, 2012 will lose 30%.
- Any assignments received after 3pm on Monday, Nov 19, 2012 , but before 3pm on Tuesday, Nov 20, 2012 will lose 45%.
- No assignments submitted after 3pm on Tuesday, Nov 20, 2012 will be accepted and a grade of ZERO will be given
- NO extensions will be given for computer technical problems or webct connectivity issues. If your machine is having problems, you MUST complete the assignment in one of the labs on campus.
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
- Pick an appropriate page
background color
|
Banner (top) |
- Approximate size 150 x
900
- Can be taller as long as
all your side links or top links fit within the window (no
scrolling)
|
Web page
Balance |
- Web page
boundaries
- Sections: easily
identified, easy to read
- Effective use of padding in cells
|
Images |
- Clear, no
noise
- Must have alt tag and
title tag for listed above
|
Image
Links |
- Balance: size
- Buttons: suitable
size
- Color: what color are
links
|
Text Color Text Size |
- Easy to read
- Appropriate size, font
type relative to overall web page
|
Navigation |
- Easy to navigate through
your website and placement
|
Navigational Links |
- Easy to read
- Size appropriate with
rest of web page
- Should not have to
horizonally scroll to read link
- Target field:Â new
window or not?
|
Images |
- Fits with rest of color
scheme
- Fits with the
content
|
Property Titles |
- Set a property title for
each webpage in your website. Follow instructions given out in
lecture.
|
WEBSITE FILE
ORGANIZATION |
Bottom of web page |
- Sometimes, many websites place the contact information at the very
end of each webpage.
|
Files |
- images folder
- Use folders to further
organize your web pages
|
Spelling/Grammar |
|
Upload |
- Server needs: file names
and case sensitivity
- Always use lower
case
|
Paragraphs |
- Most of the times use left alignment for paragraphs. Reserve
centering for small things you want to emphasize
|
 |
 |
Crowdiness |
- Avoid putting text in web pages that runs into table grid lines or
image edges. You can add padding to the cell or to the image to spread
the text away from the table cell or image edges.
|
 |
 |