unit 2 - website creation - wordpress.com · unit 2: website creation this resource is licensed to...

© ICT Resources for Schools 2011

Unit 2: Website Creation This resource is licensed to George Mitchell School

OCR Unit 2 Scenario: Aquastranza

You have been asked to design and create a multimedia website of at least five pages for a new theme park called Aquastranza. In addition to the traditional roller coasters and rides found at theme parks Aquastranza will have an indoor/outdoor water park and plenty of healthy eating options. The theme park will feature: o a large water park with tropical indoor and heated outdoor areas, flumes, slides, river

rapids, wave pools, whirlpools and simulated beaches o have‐a‐go water sports including: jet‐skiing, surfboarding, water skiing, rafting, windsurfing

and sailing, all under the guidance of qualified instructors o twenty rides for younger visitors (no height restrictions), thirty family rides and fifteen

extreme rides for the serious adrenalin junky o healthy eating restaurants, snack bars and cafés and a shop selling organic picnic foods o sheltered picnic areas with free barbeque facilities o an on‐site family hotel o The park is open from 10.00 am until 10.00 pm every day from 1st March to 30th November. o Entry fees are as follows: o Adult: £18.00 o Child: £9.00 o Family (two adults and two children): £30.00 o Large family (two adults and up to four children): £40.00 o Hotel rooms are available from £50.00 for a double room and £70.00 for a family of 4. The management of Aquastranza wants the website to perform the following functions: o to promote the theme park o to inform the general public about the activities and facilities available at the park o to encourage families and young people to visit the park o to promote the on‐site hotel o to seek feedback from people about the website and how it could be improved You will be required to design the website before creating it. Once you have created the website you will test it and evaluate what you have done.



Before you begin…. Set up folders to store your work for Unit 2

1. Create the following folders: OCR Nationals Level 2 ICT >Unit 2 – Website Creation

> Website Proposal > Website Design >Website Creation(in this folder create:)

>Images >html_files >Other_files

>Website Testing >Website Evaluation > Website Documentation

2. Produce screen prints to show how you set up the folder structure for unit 2.

Task 1: Proposal

1. Read the project brief and understand what you need to do for the project 2. Create a new word document and add the title Website Proposal 3. Add your name, centre name and number in the document footer 4. Use the following questions to form your paragraphs:

o What have you been asked to do for this project o What is the purpose of the website? o Who is the target audience of the website? List and explain. o How many pages must the website have and what information must these pages contain? o How will you ensure that your website meets its purpose and target audience? o What must you do before creating the website? o What will you do once the website has been created

5. Save your Proposal document in the correct folder 6. Print your work

PASS (Grade C)

Produce a proposal for a website. This will include some details of purpose and target audience.

MERIT (Grade A/B) Produce a proposal for a website. This will include details of purpose and target audience.



Task 2: Design a Multimedia Website Site Plan

1. Open a new word document 2. Add the title Aquastranza Site Plan 3. Add your name, centre name and number in the document footer 4. Draw a structure chart showing the pages you will create and how they will be linked together. (You must have 6

pages including the homepage) 5. Save your site plan 6. Print your work

Website Overview

1. Open a new word document 2. Add the title Aquastranza website overview 3. Add your name, centre name and number in the document footer 4. Copy and complete the table below to plan out what each page within your website will contain:

Webpage title Text Images Multimedia Components e.g. sound, video, animation

Remember, one of your web pages must be a feedback form!

5. Explain how many hyperlinks you will have in the website and what they will be 6. Explain the different ways in which the user can navigate around the website 7. Explain the design of your website:

a. What background colour will you use? Give reasons why. b. What font style will you use? Give reasons why. c. What size font will you use for your headings? Give reasons why. d. What colour font will you use for your headings? Give reasons why. e. What size font will you use for the normal text? Give reasons why. f. What colour font will you use for the normal text? Give reasons why.

8. Print out your work



Website House Style

1. Open Microsoft Publisher 2. Click File and then New 3. Click on Layout Guides 4. Change the margin guides to 1cm 5. Click File and then Page Set‐up 6. Change the page orientation to landscape 7. Click File and then Save and save the document as ‘Template Design’ 8. Use text boxes to design the layout of your website Template (see example below) DO NOT COPY THIS!

PASS (Grade C)

o Produce a simple house style

MERIT (Grade B) o A suitable house style

DISTINCTION (Grade A) o Produce a detailed house style



1. Open a new word document 2. Add the title ‘House Style’ 3. Add your name, centre name and number in the document footer 4. Open your Template from last lesson and produce a print screen of it 5. Paste the print screen and annotate your template to show the following and explain why you are using them in

relation to target audience and purpose

o Background colours o Font styles and colours used on the button o Font styles and colours used for the Page Title o Font styles colours used for the Page Content o Font emphasis used e.g. Bold, italic etc o Where you have positioned banner o Where you have positioned the navigation buttons o Label the different ways of linking the pages together i.e. navigation buttons and the back and next buttons

6. Print out and save your work

+

PASS (Grade C) o Produce a simple house style

MERIT (Grade B) o A suitable house style

DISTINCTION (Grade A) o Produce a detailed house style



Web page plans

1. Open your Template Design 2. Copy the template page by right clicking on page 1 and selecting ‘Insert Duplicate Page’ 3. Repeat this step (one for each page of your website)

4. Enter the page title and then begin designing the contents of each page of your website using the checklist on the next page.

Example:




Design Plan Checklist:

PASS (Grade C) Your design plans MUST show Tick

o Images

o text

o internal links for linking the pages together

o links to other websites (2)

o Rollover buttons (1)

o Hotspots (2)

o Feedback Form

MERIT (Grade B) Your design plans MUST show Tick

o Images

o text

o Tables

o animations (banner)

o Hotspots (1)


o Drop down menu

o video

o sound


o links to your e‐mail (1)

o Tables

DISTINCTION (Grade A) Your design plans MUST show Tick

o Images

o text

o Tables

o animations (banner)

o Hotspots (2)


o Drop down menu

o video

o sound


o links to your e‐mail (2)

o Clock



Sources Table

1. Open a new word document 2. Add the title ‘Sources Table’ 3. Add your name, centre name and number in the document footer 4. Copy and complete the table below sourcing all the multimedia components you will use in your website

Page Component (e.g. images, animation, sound, video)

Source (e.g. full link to the website) Have you downloaded and saved this in your Unit 2 website folder?

5. Produce screen‐print(s) of the folder(s) containing all the multimedia components downloaded for your website. 6. Print out and save your work

PASS (Grade C) Produce a site plan, basic house style and simple page plans for five web pages showing a possible link system

between them.

Source and store components to use in your website.

MERIT (Grade B)

Produce a site plan, a suitable house style and page plans for at least five web pages showing a clear navigation

structure and showing the position and details of most components (eg images, text, animations, interactive elements, video, sound).


DISTINCTION (Grade A)

Produce a site plan, a detailed house style and page plans for at least five web pages showing a clear navigation structure and showing the position and details of all components (eg images, text, animations, interactive elements, video, and sound).




Task 3: Create a Fit for Purpose Multimedia Website Produce the web pages in Macromedia Dreamweaver using your template and your design sketches:

o Produce a homepage and at least five other pages o Adhere to the chosen house style o Insert/import and align text o Format text and colour to the chosen house style o Set text attributes (size, colour, appearance) o Use a range of different components, e.g. images, animations, o Use interactive elements, video, sound o Optimise components for use on the Internet, e.g. file size,

o Consider download times PASS (Grade C)

Show basic competence in producing web pages containing text and images.

There may be errors in the text, but meaning will be clear.

Images must be suitable for purpose.

A method of navigation to all pages must be evident.

Provide evidence showing a basic folder structure although folder and filenames may not always be suitable.

MERIT (Grade B)

Produce web pages containing text and images. There will be consistency to the layout and house style of the web pages, although there may be some exceptions.

Meaning of text will be clear but there may be some errors.

A range of suitable images will be evident. Image optimisation will be evidenced by showing that image size has been altered for some image files. Images will be of good quality and scaled in proportion.

A method of navigation to all pages must be evident.

Provide evidence of a suitable folder structure. Folder and filenames will be suitable for purpose.

Some backup procedures will be evidenced.


Candidates will produce web pages containing text and images. There will be consistency to the layout and house style of the web pages. Styles will be consistently applied to text used on the web pages.

Meaning of text will be clear and there will be minimal textual errors.

A range of suitable images will be evident. Image optimisation will be evidenced by showing that image size has been altered for image files as appropriate. An explanation of the need for your images to be optimised will be given. Images will be of good quality and scaled in proportion.

An effective method of navigation to all pages must be evident.

Provide evidence of a suitable folder structure. Folder and filenames will be suitable for purpose.

Full back up procedures will be evidenced.



Task 4: Create functioning Hyperlinks Use different types of hyperlink as part of the navigation system in your website, e.g.

o menus o navigation bar o text hyperlink o image hyperlinks o image maps o buttons o hyperlink to email o hyperlinks to external website

PASS (Grade C)

Link together all pages. Linking methods may not be consistent and may lack structure.

At least one link to an external website will be included.

MERIT (Grade B)

Link together all pages, Linking methods should be consistent and will allow the user to access all web pages from

the home page, and show a clear structure.

At least one link to an external website and at least one email link will be included.


Link together all pages. The method of navigation is consistently placed on all pages to create a fully functioning hyperlink system. Linking methods should show a well‐structured approach.

At least one link to an external website, an email link and an image map will be included.



Task 5: Include Interactive Elements Insert Interactive elements into your website: e.g.

o rollover images o flash objects o interactive buttons o user controls (for audio, video)

PASS (Grade C)

Include at least one interactive element in your website.

MERIT (Grade B)

Include at least two different types of interactive elements in your website. At least one will be a rollover button or image.

DISTINCTION (Grade A) Include at least three different types of interactive elements in your website. At least one will be a rollover button

or image. At least two of the interactive elements will be created by yourselves using appropriate software

A consistent approach should be adopted where interactive elements are used.



Task 6: Create a user form for capturing user information or feedback Create a form allowing feedback/information to be given either by printing out the form or submitting it online on the following:

Ease of use

Appearance of website

Ease of navigation

Use of interactive elements.

Other design features The form must include:

Component Tick

o A table

o Radio buttons

o Check boxes

o Text boxes

o Drop‐down menus

o Submit button set to send to a real e‐mail address

o Reset Button

The send button must be set to send information to your e‐mail address.

PASS (Grade C)

Create a simple form that can be printed out for the user to fill in to give some information or feedback.

The layout of the form might not be appropriate.

MERIT (Grade B)

Create a user form using at least one form field to gather information or feedback that the user can fill in and would be able to submit using a ‘submit’ button.

The form will be mainly well laid out and easy to use.


Create a well‐designed user form using a range of different form fields to gather information or feedback that the user can fill in and would be able to submit using a ‘submit’ button.

The form will work as intended and will be well laid out and easy to use.



Task 7: Test Website

1. Open a new word document and add the heading ‘Testing’ 2. Add your name, centre name and centre number in the document footer 3. Set the page orientation to Landscape 4. Produce a test table like the one shown below and test the following areas of your website:

o navigation system o hyperlinks o use of consistent house style o use of different components o interactive elements o user form o ease of use

Test No

Components How will you test this component?

Did the component work as expected? If no explain why not.

Actions to be taken Screenshots before changes and after

5. Test your website and complete the test table 6. Print out and save your work

PASS (Grade C)

Provide evidence of testing your website, ensuring that all internal and external hyperlinks and navigation system work effectively. Any broken and/or faulty links will be fixed.

MERIT (Grade B)

Provide evidence of testing your website, ensuring that all internal and external hyperlinks and navigation system work effectively. Any broken and/or faulty links will be fixed.

Further tests will cover most of the main areas of your website and will be appropriate.


Provide evidence of testing your website, ensuring that all internal and external hyperlinks and navigation system

work effectively. Any broken and/or faulty links will be fixed.

Further tests will cover all of the main areas of your website and will be appropriate.

Use the tests to identify any action that is required to solve any problems identified. For the tests carried out, you will provide annotated code or screen shots highlighting before and after changes where appropriate.



Task 8: Evaluate Website

1. Open a new word document 2. Add the title ‘Evaluation 3. Add your name, centre name and number in the document footer 4. You need to evaluate the website you have created for Aquastranza. Use the following questions to form your

paragraphs and use screenshots to illustrate examples from your work:

What was the purpose of your website?

Who was the target audience?

Does your website meet the purpose of the website, if so how?

Is the website suitable for the target audience? How did you make it suitable?

Comment on the quality of your website

What information does your website give?

Is there enough information in your website? Does it tell your target audience everything that they should know?

Is the information easy to read in terms of font style, size and colour?

Is the website easy to use?

How did you help users find information?

Is the website accessible by all types of users (e.g. visual impaired, hearing impaired etc)

Did you use ALT tags for images? Were they effective?

What are the strengths (good points) of your website?

What are the weaknesses (bad points) of your website?

What are the strengths of your own personal performance? What can you do well?

What are the weaknesses of your own personal performance? What did you not do well?


PASS (Grade C)

Produce an evaluation of your website. This will cover: suitability of the website for purpose and audience (as identified by the candidate). You will support your comments with examples taken from your website.

MERIT (Grade B)

Produce an evaluation of your website. This will cover: suitability of the website for purpose and audience (as identified by the candidate), and readability.

Support your comments with examples taken from your website.


Produce an evaluation of your website. This will cover: suitability of the website for purpose and audience (as identified by the candidate), readability, usability and accessibility.

Support your comments with examples taken from your website.



Task 9: Website Documentation

1. Print‐out all the pages of your website and annotate all the components 2. Open a new word document 3. Add the title ‘Setting up the website’ 4. Add your name, centre name and number in the document footer 5. Open your website in Dreamweaver 6. Use print‐screens to explain the following:

Inserted images

Formatting text e.g. font style, size and colour

Inserting sound

Inserting videos

Inserting rollover buttons

Inserting external hyperlinks

Adding hotspots

Lining the web pages together

Adding e‐mail links

Adding Flash objects e.g. advertising banner

Adding drop down menus (For Distinction Only)

Using JavaScript (For Distinction Only)

Using Cascading Style Sheets for formatting text (For Distinction Only)

Backing up the website Screen‐prints showing accurate filenames of website files


unit 2 - website creation - wordpress.com · unit 2: website creation this resource is licensed to...

Documents