1. Unit 21: Web Graphics A05: Banner Advert
Year 10 ICT OCR Nationals
Unit 21: Web Graphics
A05: Banner Advert

2. Lesson Objectives To recap on what has been done in Unit 21 so far
To understand the requirements for AO5 Pass, Merit and Distinction grades and how to achieve them
To understand the term ‘interactivity’ and to be able to add interactivity to the banner advert by creating a rollover button which links to a website
To be able to animate the banner by adding extra frames (if there is time)

3. A05: Banner Advert Pass Grade:
Create an banner advert which advertises the RecycleGB company
Merit Grade:
Add some form of interactivity to the advert, such as button that links to a website
Distinction Grade:
Add animation to the banner to make it more interesting and eye-catching

4. Interactivity Interactivity is a difficult term to define
Computer games are interactive because you play them and control what happens – you don’t just watch them, you get involved
For an advert it means that the person looking at the advert gets involved with it or controls it in some way
A simple way of adding interactivity to your advert is to add a button which links to a website – you are then controlling what happens.

5. AO5: Banner Advert Task
Continue work on the banner advert you started last lesson
Make sure that the advert is colourful and has text and graphics on it and displays some useful information, i.e. it advertises the RecycleGB company
Add an interactive rollover button to link to the RecycleGB website (

6. Adding Animation
If there is time, try to add some animation to your advert
This is done by adding extra frames to the graphic each with some slight differences – like a ‘flick book’
The advert must then be saved as an ‘animated gif’’
Watch the demonstration on how to do this

7. Plenary What have you learnt today? Assessment requirements for AO5
What interactivity means
How to add simple interactivity
Perhaps how to add animation

8. Unit 21: Web Graphics AO1: Web Graphics Research
A02: Hand drawn designs for RecycleGB
A03: Create RecycleGB Navigation Bar
AO4: Create RecycleGB Rollover Buttons
A05: Create RecycleGB Banner Advert
AO6: Present RecycleGB graphics as a webpage

9. A06: Presentation Create a presentation to present your web graphics
Slide 1: Title slide with your name and Unit details
Unit 21: Web Graphics – A06: Presentation
Slide 2: Navigation bar screenshot, cropped with labels
Show any drop down menus included
Slide 3: Navigation / rollover buttons cropped with labels
Show at least three buttons
Show the three states (Up, Over and Down) of one button
Slide 4: Banner advert cropped with labels
Show an interactive button if included
Show screenshots of stages in any animations included
Slide 5: Web page mock up with all three graphics
Arrange your graphics on a page to look like a website

10. Navigation Bar
Earth image from the web – background removed with magic wand tool
Blue rectangle with gradient fill
Blue rotated rectangle
Orange rectangle with gradient fill
Arial Bold text with inset emboss effect
Arial Bold font with inner bevel effect – size 80pt
Slices over
text to link
fo web pages

11. Rollover Buttons Rounded rectangle with drop shadow effect Up State
Blue
gradient
fill with
drop shadow
effect
Drop
shadow
Removed
and
position
changed
Rectangle
colour
changed
to red
Up State
Over State
Down State

12. Banner Advert Car graphic imported from the internet
Start of animation
Frame added and
car graphic
moved to the left
Middle of animation
Frame added and
car graphic moved
to left. Text added.
End of animation

13. Web Page Mock Up This is what my webpage would look
like with all the graphics on it and a
blue background.

14. Web Page Mock Up This is what my webpage would look
like with all the graphics on it and a
white background.

15. Minimum Work for a Pass
2 navigation bars researched using headings given in table
2 rollover buttons researched using headings given in table
2 banner adverts researched using headings given in table
1 navigation bar drawn by hand and in colour for RecycleGB
1 set of buttons drawn by hand and in colour for RecycleGB
1 banner advert drawn by hand and in colour for RecycleGB
Presentation showing each graphic you have created with labels and explanation
Final slide shows a ‘mock-up’ of webpage with all three of your graphics on it made to look like a real web page