week 10

Good practice: eg comments in the script, correct indentation, naming variables

Testing: layout matches design; interactivity working; check using different browsers eg Internet Explorer,

Activity:

Using a test plan like the one shown in Table 20.5, test the website you built in CSS (on page 81) and JavaScript (left) for Keystone Zoo.

Firefox, Opera, Chrome, Safari

Activity:

Explain how scripts are implemented differently in two browsers, such as Internet Explorer® and Firefox®.

Activity:

Using the screen design and prototype web page you created in the previous activity, create the CSS for the layout of the web page.
Test it works in the HTML.
The business has decided to change the design (see screen design below). Alter your prototype web page accordingly.

Links to Learning Outcomes		Links to Assessment criteria
LO 4 Be able to create interactive web pages		P5 create interactive web pages using CSS and a scripting language M3 employ good practice in the design and implementation of web pages. P6 test interactive web pages. D2 evaluate the web pages and discuss improvements.

LO 4 Be able to create interactive web pages

P5 create interactive web pages using CSS and a scripting language

M3 employ good practice in the design and implementation of web pages.

P6 test interactive web pages.

D2 evaluate the web pages and discuss improvements.

Comment - an uninterrupted line of code which describes what is happening and helps developers understand how it works.

Reserved word - a word which is already used in the programming language and therefore cannot be used as a variable name.

Area, perimeter, volume: Calculating, applying calculations to real situations

Using the prototype web page you created in the previous activity:

add an ordered list of your favourite five fruit and vegetables to the main body of text
add an unordered list of your three favourite flowers below the first list. Make sure there is at least one line break
between them .

Activity:

Using the prototype web page you created in the previous activity, create the buttons in the navigation bar, based on the navigation diagram

• for the unclicked link, the text should be black

• when the user hovers over the link, it should become a larger font size

• when the link is visited, it should become a different font

• when the link is active, the background colour of the link should become yellow.

Final Unit Checking Activity:

Describe the three methods of using CSS with HTML.
Describe the structure of the box model
What is the main purpose of a scripting language?
Where is client side scripting processed?
What IS the difference between object-oriented languages (like JavaScript®) and event-driven languages (like VBScript)?
What is the purpose of a funct1on?
What two methods are most commonly used to design CSS?
What is the purpose of pseudo code?
Why should code be commented and indented?

What is the purpose of testing?

Anonymous Assessment - Learners assess an anonymous piece of work containing deliberate mistakes against given success criteria.