CS 2033Multimedia and Communications IIAssignment 2Hometown WebpageOverviewThe city in which you grew up, or lived for a significant period of time, is lookingfor a new website to showcase its attractions and culture and provide viewers withinformation about the city and country. You have been asked to design anddevelop the site about your hometown. There are several specific requirements tofollow, but you are also given freedom and flexibility in the overall design and thecontent in the page.Notes: if you are from a small town and wish to make a site about a bigger city thatis near your hometown, you are permitted to do so. If you have lived in severaldifferent cities, you may choose any one (ideally one that you lived in the longestor felt most connected to while growing up). Do not pick London, ON if you justmoved 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 onlinetemplates or themes, no BlueGriffon or Kompozer, etc.) Download the file blocks.css fromhttp://www.csd.uwo.ca/~bsarlo/cs2033b/assignments/hometown/ to use forthe layout of your website. Do not edit or add styles in this file. Create newstylesheet(s) for your custom CSS. Your custom styles must be in your ownCSS files, not added in blocks.css.o Use all 4 different block sizes (i1, i2, i3, and i4) which are provided toyou in blocks.css. To use them, create an element (like a div) and giveit the class ib as well as one of the numbered block sizes, i.e.Content hereo Create a wrapper div to hold all the content of the entire page. Thiswrapper class is provided to you in blocks.css. You must use websafe fonts and/or Google Fonts only. At least one websafefont 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 theReferences 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 youcan easily reference them without having to re-find them later. Each section of the page must be contained within a element. Your webpage must have the following 5 sections:o Topo Abouto Cuisineo Celebritieso ReferencesFolder Structure Name the projects root folder hometown The webpage must be named index.html Within root folder, add subfolders:o css to contain CSS fileso images to contain all imagesMeta Requirements Set the page title to: CityName, CountryName – Username (whereCityName 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 andadd the favicon to your webpage (Note: some browsers require the icon to besaved in the root folder rather than the images sub-folder. First try it in images and if it doesnt show up, you may move it to the root folder. This isthe 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.ReferencesFor this course, you are required to use copyright-free images only. This meansyou will not be allowed to do a simple Google Image search and use any imagethat comes up on there. Marks will be taken off if you use images that arecopyrighted.The following websites are acceptable and encouraged as they have manycopyright-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 isyour responsibility to find the terms and conditions regarding copyright. Sites willusually have a page that explains their copyright policies. If you use an image froma site other than those provided in the list above, you will have to find the sitescopyright policy and keep track of the link to that policy. This link will have to beincluded in your submission on OWL so the TAs can determine whether or notyour image is indeed copyright-free. Do not ask the instructor or TA to find thiscopyright policy for you. Failing to find a copyright policy will result in deductedmarks. The best option is to just use images from the sites above so that you wonthave 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 dont have toprovide this license link, but this is an example of what most stock photo sites willhave somewhere on their website, but often with different policies.Top – Requirements Create a banner for the top of your webpageo Find a photo of your hometown that was taken by you or a familymember, or that is copyright-free.o Ideally use a picture that captures something unique or special aboutyour hometown like a landmark or popular attraction.o If you dont have any such picture or cannot find one on a copyrightfreesite, you can instead use one of your home country that is notspecifically 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 addthe name of your city and country in the format CityName,CountryName on top of the picture. If the text is hard to read on topof the picture, you are allowed to add an intermediate translucent layerbetween them or apply an effect to the image or add outlines to thetext.o Add this banner at the top of your weCS 2033作业代做、HTML, CSS课程作业代写、代做Java程序语言作业 帮做Haskell程序|代写留学生 Sbpage. Below the banner on the webpage, add the navigation using an unorderedlist with list items. There will be 5 links, each of which will jump to asection 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 explainthe culture and anything unique, special, or otherwise fascinating about thiscity/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) orsummarized 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 thatare 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 acopyright-free picture you find online). * If you do not have any personal pictures of the dish and cannot find anycopyright-free pictures of this specific dish, you could instead use a picture(still copyright-free) of one of the ingredients or something generic. Forexample, if one of your dishes contains a lot of rice, you could use a pictureof just rice rather than the entire dish.Celebrities – Requirements This section will showcase famous people who were born and/or raised inthis 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, smallerpicture) 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 opensthe full, original DVD cover JPG image (not the thumbnail). Toclarify, the smaller version is displayed in the website but the file itlinks 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 orCSS to do the downsampling! After yourself, find at least one other celebrity (they dont have to beworldwide famous; a minor, local celebrity is fine) and provide their nameand 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 takenby 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 asclickable 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 asacceptable resources, then beside/below these images references, include thelink that points to the license policy for the website from which youdownloaded 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 thewebpage. This link must always be visible near the bottom of the screen,regardless of where you are scrolled to in the webpage (hint: review thedifferent 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 dothis, put your cursor in the spot where you want it and add the HTML: (where AnchorName is a uniquename you want to give it, which should relate to its location)o Now add the link using the standard tag and for the hrefvalue you will use #AnchorName, where AnchorName is the name ofthe anchor you want to jump to. This must be the same name you gavethe anchor when creating it in the last step. Links that point to external sites must open in a new tab. To do this, addtarget=_blank within your link tag and ensure that the external linkincludes the http:// or https://, i.e.Check out GoogleSubmission1. Go through this document again and verify that you completed theassignment 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 hometownd. Transfer all the files and subfolders into hometown and rememberto maintain the required folder structure within.3. Verify that all the files uploaded properly.a. Open the following link (replacing username with your Westernusername): http://cs2033.gaul.csd.uwo.ca/~username/hometown/b. You should see your main webpage load there. If you dont, verify thefilename 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 submissiontext 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 providebullet point notes to explain where you included your CSS animationand transition.d. Submit the assignment on OWL. Do not just save it and leave. Ensurethat it is submitted! Check your email right away and look for theautomatic OWL email verifying your submission. Keep this email incase of any discrepancy.转自：http://www.3zuoye.com/contents/9/4817.html
