HTML, CSS and JS 代做、website程序代写编程

日期：2018-05-16 01:37

USFP ITA Software for Business

Your task is to edit and format the given website template

? Demonstrate your understanding of HTML, CSS and JS, by changing the template to suit

your given business using your own words, colours, images and video.

? Demonstrate your understanding of your fictional business and its target audience.

Required website content

? Images (resized and cropped using Photoshop – exported for web as PNG24)

o Logo = 225px X 200px (transparent background)

o 4 generic images = 900px X 400px (slider box)

o 1 product image = 400px X 640px (background removed and replaced with a

solid colour background)

o 5 product images = 400px X 640px (backgrounds not removed)

o 4 product images = 400px X 300px (backgrounds not removed)

o 2 product images = 400px X 250px (backgrounds not removed)

? Short written business description or mission statement

? Captions for slider box images

? Attribution & Copyright details for all product images

? Mobile video of yourself promoting your business (upload to YouTube)

? YouTube embed code for video

? Hex codes for a colour scheme to suit the business

Assessment requirements

Students are required to upload their web project folder as a zipped folder to Study Smart.

The link will remain open until 6:00pm, Friday 25 May 2018

Marking Criteria Grade

Image editing 5

Browser page tab 0.25

YouTube 0.25

Suitable for given business 5

Alt text 1

Attributions & Copyright 2

Live site 3

CSS 3

JS 0.5

2

Follow the guidelines below

? Download the web template folder from Study Smart (found under Topic 4)

? Unzip the folder

? Rename the folder using your preferred English name, followed by your student number

(no capital letters, no spaces)

? Store this folder in your student folder (do not leave on the desktop or store on a USB)

? Move all of your prepared images to the “image folder” located in the template folder

(do not delete the images already in that folder)

? Your images must be captioned using lower case, no spaces

? REMEMBER: style changes in the ita.css file must be made 3 times (beneath each ‘brace’

for each device display)

? REMEMBER: style changes in the slider.css file are only made once

? REMEMBER “alt” text (description of image) must be written for every image

Step 1:

HTML

? Change the browser tab title to your given business name

? Insert your business logo image

? Add your company name

? Insert 4 slider images to generically showcase your business

? Change slider captions to reflect your business

CSS

? Change to text colour of your company name

? Change the text colour of the slider image captions

3

Step 2:

HTML

? Change the paragraph text to reflect your business mission statement

CSS

? Change the web page background colour to suit your business

? Change the “mission statement” heading colour

? Change the paragraph text colour

Step 3:

HTML

? Copy and paste the code for the 6 “coloured squares” to create a page with 12

“coloured squares”

? Replace the “coloured squares” with images (cropped to the correct sizes) of your

products/services

? Insert the correct <a href="#"> for product images Attribution and Copyright

4

Step 4:

HTML

? Give your video an appropriate title

? Copy and paste the embed code for your YouTube video

CSS

? Change the text colour of the video title

? Change the text colour for “Contact Us”

? Change the web page footer background colour