Lesson 3 - Y9 Website Creation - HT6

• Computing
• Lower Secondary (Key Stage 3)

What is a brand?

1. A logo that identifies a product.
2. A company that does something.
3. A style of fonts.
4. A brand is the way a product, company, or individual is perceived by those who experience it.

What is typography?

1. The style of text used.
2. This includes photos, images, illustrations, shapes and symbols.
3. The particular group of colours or colour scheme that is to be used across all products.
4. The layout of text and graphics.

What are graphics?

1. The style of text used.
2. This includes photos, images, illustrations, shapes and symbols.
3. The particular group of colours or colour scheme that is to be used across all products.
4. The layout of text and graphics.

KO: To create the assets for the website

• Identify the assets that make up a website.
• Create a banner and a set of button graphics to be featured on the website.
• Understand how a website is a document used to display text, visual and media assets.

What assets (things) would you expect to see on a website?

Website Assets

A website could contain the following assets:

• Text
• Images
• Video
• Audio
• Data capture forms
• Interactive features, such as gallaries, quizes, games and interactive maps

Scenario

You need to choose one of the following scenarios - you will use this for the whole half term, so choose wisely :)

Download the logo for the company of your choice from the list below:

Bakery Logo

Sportswear Logo

Travel Logo

Creating website assets

In today's lesson you are going to be creating website assets, specifically you are going to be creating:

• A website banner
• 4 rollover buttons

Before we make the assets in Canva, check out an example of a website created using Dreamweaver and Canva - pay special attention to the banner at the top of the page and the buttons, as you will be creating these today!

hillbillyrockers.rf.gd

Create a website folder

Create a website folder in your Y9 area on the home drive.

Inside that folder create another folder called assets.

All of the assets you save today will be saved in your "Asset" folder inside your website folder!

www.canva.com

Create the banner

Your first task is to create the banner for the website. YOUR BANNER SHOULD INCLUDE YOUR CHOSEN LOGO!

Log into Canva.

Follow the video guide on the next slide (I recommend splitting your screen, so you can watch the video at the same time).

• Remember to set the custom size to 1024px by 300px
• You can include your banner on your website from the previous lesson by going to the "All your designs" tab in the Canva editor
• Once the banner is complete save it to your asset folder as a PNG (remember to adjust the download settings in your browser).

Create the buttons

Your second task is to create the buttons for the website.

Each button needs two instances - 1 for the buttons normal state and 2 for the buttons rollover state

Follow the video guide on the next slide (I recommend splitting your screen, so you can watch the video at the same time).

• Remember to set the custom size to 256px by 40px
• Remember to name each of your buttons (like shown in the video)
• Once your buttons are complete save them your asset folder as a PNG. Your browser will download the files as a zip file to your asset folder and you will need to extract the buttons once the zip file has downloaded.

Buttons to create:

• Home X2 (A normal and a rollover version)
• About X2 (A normal and a rollover version)
• Video X2 (A normal and a rollover version)
• Contact X2 (A normal and a rollover version)

This video takes the students through the process of making the website banner

Peer Assessment

Look at your partner's logo

• Do you agree with their choice of colour? 
• Can your text be easily read? 
• Does it contrast against the other colours in your logo?
• Suitable graphics and font styles used.
• Have they included any effects?
• Is there any effects / tools in Canva you could use to improve your product?
• Will it look good on the website?
• Does it look professional?

Assets Save 

Make sure that you have downloaded your banner and buttons into your website folder.

Next week will create our website in Dreamweaver.