Assignment 2 Western Website

CS 2033
Multimedia and Communications II
Assignment 2
Western Website
Overview
Your home department at Western wants to expand their website by adding
student-run webpages. The idea is that prospective students will learn about the
program and campus experiences through the lens of current students. You are
asked to help by designing and developing a webpage about your department.
There are several specific requirements to follow, but you are also given freedom
and flexibility in several aspects of the design and content in the page.
Overall Requirements
• Must be a single, long, scrolling page rather than separate pages.
• You must write your own code (No Kompozer or Dreamweaver, etc.)
• On the project site, download blocks.css and copy it to your assignment
folder (follow the expected folder structure explained below). Do not edit or
add styles in this file. Create new stylesheet(s) for your own custom CSS.
• Create a wrapper div using the wrapper class from blocks.css to hold all the
content in your website.
• Use all the different block sizes (i1, i2, i3, and i4) from blocks.css at least
once each in the website.
• On the project site, download or view WesternBrandingGuide.pdf. You must
use all four colours from this scheme (page 26) prominently. You may use
additional colours if they work well with these official colours. Use their
RGB values; do not use colour names, especially purple or gray.
• The Western branding guide also includes the official fonts. The main ones
mentioned are not easily available or accessible, but the backup font in the
guide is Arial. You must use Arial for at least one portion of the website.
• You are also required to use at least one Google Font somewhere in the
website. When you select one, they provide you with the HTML code to link
the font and the CSS to apply it to the rule-set(s) of your choice.
• Only use your own photos or copyright-free pictures from online. Pexels
(pexels.com) and Unsplash (unsplash.com) are great resources for this!
• Keep track of the URLs of any images you take from these sites so that you
can easily reference them without having to re-find them later.
• You must have at least one external website link somewhere in the webpage,
not including the references. Use the hints provided in the "Extra
Information on Links" for help with making this open in a new tab.
• You must have at least one email link somewhere in the webpage. Use a
fake email for this and use the hints provided in the "Extra Information on
Links" for help with making this behave as an email link.
• Include at least 5 pictures in the website, not including the banner photo.
• Each section of the page must be contained within a <section element.
• Your webpage must have the following 5 sections:
o Top – banner, title, navigation
o About – general program information
o Courses – specifics about courses
o Contact – contact form
o References – image references
Folder Structure
• Name the project's root folder "western"
• Page must be named "index.html"
• Within root folder, add subfolders:
o "css" to contain CSS file(s)
o "images" to contain all images
o "js" to contain JavaScript file(s)
Meta Requirements
• Set the page title to: ProgramName – Username (where ProgramName is
your Western program and Username is your Western username)
• Use www.favicon.cc to create an icon of your first name initial and add this
favicon to your webpage.
• Add links to external CSS and JavaScript files within the head. Do not use
any internal CSS or JavaScript.
Top – Requirements
• Take a photo for the top banner (do not find a picture online).
o It should represent or relate to your department (i.e. building exterior,
a common department classroom or lounge, etc.)
o The photo should be in landscape so it works as a horizontal banner.
o Add this photo at the top of your page
o You are allowed to crop it or add subtle effects in Photoshop if you
desire, but it must remain clear and easy to see.
• Below the photo banner, use a large font to clearly display the name of your
program/department.
• Create an unordered list for your navigation bar. There will be 4 links, each
of which will jump to a section bookmark on this page. You do not need a
Top link; only About, Courses, Contact, and References links.
About the Program – Requirements
• This section will general contain information about the program, why it is
useful, and some of the careers that this program prepares students for.
• Write 4-5 sentences that cover the above key points about your program.
• Take photos or find copyright-free pictures online that relate to this program
or the careers that come from this program and include 2 such pictures.
Courses – Requirements
• Choose 3 courses from your program that you have taken or will be taking.
For each one, provide the course code and a brief paragraph (2-3 sentences)
on the course description and its topics. Include another brief paragraph (1-2
sentences) explaining your personal opinion of the course and what you
learned, or expect to learn, from the course.
Contact – Requirements
• Create a contact web form with several input fields for gathering the
following information about the prospective student:
o Name
o Email address
o Phone Number (no hyphens or spaces)
o Current education
▪ Select current level of education (High school, College,
University, Other, None)
o Interests
▪ Selecting any number of interests from a provided set
▪ You can make up interests for this set (at least 6 are required)
o Country
▪ Selecting whether they currently reside in Canada, US, or Other
o Postal code / ZIP code
▪ IF the country is set to Canada: display postal code field below
▪ IF the country is set to US: display zip code field below
▪ IF the country is set to Other: no additional code fields needed
o Submit button
• Determine which input types are appropriate to use for each input field.
• Add labels beside each of the form inputs that indicate what is expected in
that input field.
• Add onblur event handlers on each of the text inputs to perform validation
based on the specific requirements listed below. Turn that element's border
colour to green or red if that input is found to be valid or invalid,
respectively.
o Name: valid only if the text length is at least 5 characters
o Email: valid only if the text is at least 8 characters
o [BONUS!] Phone Number: valid only if the text is exactly 10
characters and it consists only of numbers (both must be satisfied).
References – Requirements
• This section will contain references to the images you used in your website.
For each one, provide a short description along with the URL (for the ones
obtained online). Convert the description and URL to a link that points to the
reference URL.
• These references are for pictures you found online, the favicon you created
(reference the website used to create it), and pictures you took.
• For pictures you took, just provide a description followed by "taken by me"
Extra Information on Links
• Creating links to bookmarks on the same page involves 2 steps:
o Create the anchor at the spot where the link will be jumping to. To do
this, put your cursor in the spot where you want it and add the HTML:
<a name="AnchorName"</a (where AnchorName is a unique
name you want to give it, which should relate to its location)
o Now add the link using the standard <a href="" tag and for the href
value you will use #AnchorName, where AnchorName is the name of
the anchor you want to jump to. This must be the same name you gave
the anchor when creating it in the last step.
• Links that point to external sites must open in a new tab. To do this, add
target="_blank" within your link <a tag.
• Links that point within the same website are internal and should open in the
same tab. The normal link tag will default to this behaviour so nothing extra
is needed for these links.
• Email links will try to open Outlook or another email program when clicked.
To create such an email link, set the href attribute to the email address and
prefix it with mailto: (i.e. <a href="mailto:email@email.com"Email</a).
• Use relative paths for your internal links and image sources so that they
work both locally and on the server when you upload them.
Submission
1. Go through this document again and verify that you completed the
assignment exactly as instructed.
2. You must upload all your webpage files to GAUL (not Panther) via FTP.
a. Use WinSCP, FileZilla, or another FTP program.
b. Login to cs2033.gaul.csd.uwo.ca using your UWO login information.
Port is 2033 and use SFTP protocol.
c. When logged in, click into "public_html" and create a folder called
"cs2033"
d. Create a subfolder within cs2033 called "western"
e. Transfer all the files and subfolders into "western" and remember to
maintain the required folder structure.
3. Verify that all the files uploaded properly.
a. Open the following link (replacing username with your Western
username): http://cs2033.gaul.csd.uwo.ca/~username/western/
b. You should see your main webpage load there. If you don't, verify the
filename is index.html and retry the previous step to upload the files.
4. Submit the link on OWL.
a. Navigate into the CS2033 Assignment 2 page in OWL.
b. Copy the link of your GAUL western folder into the submission text
box (replacing username with your Western username):
http://cs2033.gaul.csd.uwo.ca/~username/western/
c. Submit the assignment on OWL. Do not just save it and leave. Ensure
that it is submitted! Check your email right away and look for the
automatic OWL email verifying your submission. Keep this email in
case of any discrepancy.