HTML, CSS and JS 讲解、website程序辅导编程

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