Lesson 3 - Y9 Website Creation - HT6

What company does this icon represent?
A
BBC iPlayer
B
Netflix
C
Amazon Prime
D
Spotify
1 / 16
suivant
Slide 1: Quiz
ComputingLower Secondary (Key Stage 3)

Cette leçon contient 16 diapositives, avec quiz interactifs et diapositives de texte.

Éléments de cette leçon

What company does this icon represent?
A
BBC iPlayer
B
Netflix
C
Amazon Prime
D
Spotify

Slide 1 - Quiz

What is this item called on a website?
A
Logo
B
Navigation System
C
Media
D
Gallery

Slide 2 - Quiz

The following two colours are described as...
A
Contrasting
B
Similar
C
Repetition
D
Proximity

Slide 3 - Quiz

Slide 4 - Diapositive

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.

Slide 5 - Diapositive

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

Slide 6 - Diapositive

Slide 7 - Diapositive

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!

Slide 8 - Diapositive

Slide 9 - Lien

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

Slide 10 - Diapositive

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.

Slide 11 - Diapositive

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

Slide 12 - Diapositive

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

Slide 13 - Diapositive

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! :(

Slide 14 - Sondage

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?

Slide 15 - Diapositive

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

Next week will create our website in Dreamweaver.

Slide 16 - Diapositive