CS 2033代做、HTML, CSS代写、代做Java程序语言

日期：2020-02-28 09:33

CS 2033

Multimedia and Communications II

Assignment 2

Hometown Webpage

Overview

The city in which you grew up, or lived for a significant period of time, is looking

for a new website to showcase its attractions and culture and provide viewers with

information about the city and country. You have been asked to design and

develop the site about your hometown. There are several specific requirements to

follow, but you are also given freedom and flexibility in the overall design and the

content in the page.

Notes: if you are from a small town and wish to make a site about a bigger city that

is near your hometown, you are permitted to do so. If you have lived in several

different cities, you may choose any one (ideally one that you lived in the longest

or felt most connected to while growing up). Do not pick London, ON if you just

moved here for university!

Overall Requirements

 Must be a long, scrolling page format rather than separate, short pages.

 You must write your own HTML, CSS, and JavaScript code (No online

templates or themes, no BlueGriffon or Kompozer, etc.)

 Download the file blocks.css from

http://www.csd.uwo.ca/~bsarlo/cs2033b/assignments/hometown/ to use for

the layout of your website. Do not edit or add styles in this file. Create new

stylesheet(s) for your custom CSS. Your custom styles must be in your own

CSS files, not added in blocks.css.

o Use all 4 different block sizes (i1, i2, i3, and i4) which are provided to

you in blocks.css. To use them, create an element (like a div) and give

it the class "ib" as well as one of the numbered block sizes, i.e.

<div class="ib i3">Content here</div>

o Create a wrapper div to hold all the content of the entire page. This

wrapper class is provided to you in blocks.css.

 You must use websafe fonts and/or Google Fonts only. At least one websafe

font is required and at least one Google Font is required. They can be

anywhere you want to use them but you must have at least one of each type,

and ALL fonts you use must be either web-safe or a Google Font.

 Only use your own photos or copyright-free pictures from online. See the

References section below for more details (same policy as Assignment 1).

 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.

 Each section of the page must be contained within a <section> element.

 Your webpage must have the following 5 sections:

o Top

o About

o Cuisine

o Celebrities

o References

Folder Structure

 Name the project's root folder "hometown"

 The webpage must be named "index.html"

 Within root folder, add subfolders:

o "css" to contain CSS files

o "images" to contain all images

Meta Requirements

 Set the page title to: CityName, CountryName – Username (where

CityName and CountryName are the names of your hometown and nation,

respectively, and Username is your Western username)

 On www.favicon.cc create an icon of the initial letter of your hometown and

add the favicon to your webpage (Note: some browsers require the icon to be

saved in the root folder rather than the images sub-folder. First try it in

images and if it doesn't show up, you may move it to the root folder. This is

the only exception for storing an image outside of the images subfolder).

 Add links to external CSS files in the head. Do not use any internal CSS.

References

For this course, you are required to use copyright-free images only. This means

you will not be allowed to do a simple Google Image search and use any image

that comes up on there. Marks will be taken off if you use images that are

copyrighted.

The following websites are acceptable and encouraged as they have many

copyright-free images that are high definition and free to use!

 Pexels https://www.pexels.com/

 Unsplash https://unsplash.com/

 StockSnap.io https://stocksnap.io/

 Negative Space http://negativespace.co/

 Life of Pix http://www.lifeofpix.com/

 Cupcake http://cupcake.nilssonlee.se/

 Foodiesfeed https://foodiesfeed.com/

If you find an image on a different website that you think is copyright-free, it is

your responsibility to find the terms and conditions regarding copyright. Sites will

usually have a page that explains their copyright policies. If you use an image from

a site other than those provided in the list above, you will have to find the site's

copyright policy and keep track of the link to that policy. This link will have to be

included in your submission on OWL so the TAs can determine whether or not

your image is indeed copyright-free. Do not ask the instructor or TA to find this

copyright policy for you. Failing to find a copyright policy will result in deducted

marks. The best option is to just use images from the sites above so that you won't

have to look up their policies!

Example: The Pexels policy is found here: https://www.pexels.com/photo-license/

Note that Pexels is one of the acceptable sites listed above so you don't have to

provide this license link, but this is an example of what most stock photo sites will

have somewhere on their website, but often with different policies.

Top – Requirements

 Create a banner for the top of your webpage

o Find a photo of your hometown that was taken by you or a family

member, or that is copyright-free.

o Ideally use a picture that captures something unique or special about

your hometown like a landmark or popular attraction.

o If you don't have any such picture or cannot find one on a copyrightfree

site, you can instead use one of your home country that is not

specifically from your city.

o The photo should be in landscape so it works as a horizontal banner.

You may crop or resample the image to make it more banner-like.

o Use Affinity Photo or Photoshop or another imaging program to add

the name of your city and country in the format CityName,

CountryName on top of the picture. If the text is hard to read on top

of the picture, you are allowed to add an intermediate translucent layer

between them or apply an effect to the image or add outlines to the

text.

o Add this banner at the top of your webpage.

 Below the banner on the webpage, add the navigation using an unordered

list with list items. There will be 5 links, each of which will jump to a

section bookmark within the page.

About – Requirements

 This section will contain general information about your city and country.

 Write at least 4-5 sentences to broadly introduce your hometown and explain

the culture and anything unique, special, or otherwise fascinating about this

city/country.

 Within this section, include the city population, the country population,

continent, geography, climate, demographics, area, and population density.

This information can either be included in the written paragraph(s) or

summarized in a table or list format.

 Include 1-2 sentences about the main industries of your city/country, i.e.

fishing, tourism, oil, financial, textile, etc.

 Include at least 2 pictures of your city/country in this section.

Cuisine – Requirements

 This section will include information about the cuisine in your city/country.

 Think of at least 3 dishes/beverages/desserts native to your region, or that

are commonly consumed in your region.

 For each one, provide the name of the dish, a brief description of the dish,

and a picture of the dish (either taken by yourself or a family member or a

copyright-free picture you find online).

 * If you do not have any personal pictures of the dish and cannot find any

copyright-free pictures of this specific dish, you could instead use a picture

(still copyright-free) of one of the ingredients or something generic. For

example, if one of your dishes contains a lot of rice, you could use a picture

of just rice rather than the entire dish.

Celebrities – Requirements

 This section will showcase famous people who were born and/or raised in

this city or region

 One of these celebrities will be YOU!

o As a new movie star, you are considered a celebrity from this city!

o Write your name and include a thumbnail (downsampled, smaller

picture) of your DVD cover in this section.

o This thumbnail picture should have a width between 300px and 500px

(depending on how you want to lay out this section).

o The thumbnail must be a clickable link and when you click it, it opens

the full, original DVD cover JPG image (not the thumbnail). To

clarify, the smaller version is displayed in the website but the file it

links to is the larger, original version of your DVD cover. To do this,

you must have 2 versions of the JPG file, i.e. do not use HTML or

CSS to do the downsampling!

 After yourself, find at least one other celebrity (they don't have to be

worldwide famous; a minor, local celebrity is fine) and provide their name

and a short description of what they have done or what they are famous for.

References – Requirements

 Every image used on your website must be referenced, whether it was taken

by you or a family member or obtained from a copyright-free image website.

 The reference URLs do not have to be shown but can instead be provided as

clickable links. This is actually encouraged to keep the site looking clean.

 IF you chose to use any images from sites other than the ones listed as

acceptable resources, then beside/below these images' references, include the

link that points to the license policy for the website from which you

downloaded that image (failing to do this will result in deductions).

Additional Requirements

 You must create a "Back to Top" button that points to the very top of the

webpage. This link must always be visible near the bottom of the screen,

regardless of where you are scrolled to in the webpage (hint: review the

different position options in CSS).

 You must add at least one CSS animation somewhere on the website.

 You must add at least one CSS transition somewhere on the website.

Hints and help

 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 and ensure that the external link

includes the http:// or https://, i.e.

<a href="http://www.google.ca" target="_blank">Check out Google</a>

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.

The port is 2033 and use SFTP protocol.

c. When logged in, create a folder called "hometown"

d. Transfer all the files and subfolders into "hometown" and remember

to maintain the required folder structure within.

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/hometown/

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 hometown folder into the submission

text box (replacing username with your Western username):

http://cs2033.gaul.csd.uwo.ca/~username/hometown/

c. Beneath this link, write the words "Websites Notes:" and then provide

bullet point notes to explain where you included your CSS animation

and transition.

d. 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.