Lesson 3 - Y9 Website Creation - HT6

• Computing
• Lower Secondary (Key Stage 3)

What company does this icon represent?

1. BBC iPlayer
2. Netflix
3. Amazon Prime
4. Spotify

What is this item called on a website?

1. Logo
2. Navigation System
3. Media
4. Gallery

The following two colours are described as...

1. Contrasting
2. Similar
3. Repetition
4. Proximity

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.

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

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!

www.canva.com

Create the banner

Your first task is to create the banner for the website.

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).

Saving the Banner

You need to create a website folder / asset folder and then you need to save your banner into your asset folder. Once your banner is saved you can move onto the button task.

a) Save the banner

b) Create the buttons

* Create the banner

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
• About X2
• Video X2
• Contact X2

*) Save the banner

*) Create the buttons

Link) Create the buttons

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
• About X2
• Video X2
• Contact X2

*) Save the banner

*) Create the buttons

Link) Create the buttons

Progress Check

How are you currently doing with the asset development?

I am smashing it! :)

It is going OK.

I am struggling, it is hard! :(

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.