CS 2033 Multimedia and Communications

Posted 2020-11-28 kaitong

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
CS 2033作业代做、HTML, CSS课程作业代写、代做Java程序语言作业
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.

如有需要，请加QQ：99515681 或邮箱：[e-mail] 微信：codehelp