Lesson 3 - Y9 Website Creation - HT6

What is a brand?
A
A logo that identifies a product.
B
A company that does something.
C
A style of fonts.
D
A brand is the way a product, company, or individual is perceived by those who experience it.
1 / 18
suivant
Slide 1: Quiz
ComputingLower Secondary (Key Stage 3)

Cette leçon contient 18 diapositives, avec quiz interactifs, diapositives de texte et 2 vidéos.

Éléments de cette leçon

What is a brand?
A
A logo that identifies a product.
B
A company that does something.
C
A style of fonts.
D
A brand is the way a product, company, or individual is perceived by those who experience it.

Slide 1 - Quiz

Cet élément n'a pas d'instructions

What is typography?
A
The style of text used.
B
This includes photos, images, illustrations, shapes and symbols.
C
The particular group of colours or colour scheme that is to be used across all products.
D
The layout of text and graphics.

Slide 2 - Quiz

Cet élément n'a pas d'instructions

What are graphics?
A
The style of text used.
B
This includes photos, images, illustrations, shapes and symbols.
C
The particular group of colours or colour scheme that is to be used across all products.
D
The layout of text and graphics.

Slide 3 - Quiz

Cet élément n'a pas d'instructions

Slide 4 - Diapositive

Cet élément n'a pas d'instructions

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

Cet élément n'a pas d'instructions

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

Slide 6 - Carte mentale

Cet élément n'a pas d'instructions

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 7 - Diapositive

Cet élément n'a pas d'instructions

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:

Slide 8 - Diapositive

Cet élément n'a pas d'instructions

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 9 - Diapositive

Cet élément n'a pas d'instructions

Slide 10 - Lien

Cet élément n'a pas d'instructions

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!

Slide 11 - Diapositive

Cet élément n'a pas d'instructions

Slide 12 - Lien

Cet élément n'a pas d'instructions

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

Slide 13 - Diapositive

Cet élément n'a pas d'instructions

Slide 14 - Vidéo

Cet élément n'a pas d'instructions

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)

Slide 15 - Diapositive

Cet élément n'a pas d'instructions

Slide 16 - Vidéo

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?

Slide 17 - Diapositive

Cet élément n'a pas d'instructions

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 18 - Diapositive

Cet élément n'a pas d'instructions