Building a Site from Scratch, Web Site Coding/Building Options

[Sailee316]

Hi. I was recentley given an assignment to do and I'm having trouble starting it as I know hardly anything about HTML or XHTML. I have been given a Liquid Column 3 template which I have to use to pass this assignment. I have attatched this to this post along with the actual assignment. It would be very helpful if anyone can have a look through and offer any guidance or support. Thanks!



Assignment Context & Tasks
Designing and Creating a Website for Aquastranza
You have been asked to design and create a multimedia website of at least seven 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:
A large water park with tropical indoor and heated outdoor areas, flumes, slides, river rapids, wave pools, whirlpools and simulated beaches.
Have-a-go water sports including: jet-skiing, surfboarding, water skiing, rafting, windsurfing and sailing, all under the guidance of qualified instructors.
Twenty rides for younger visitors (no height restrictions), thirty family rides and fifteen extreme rides for the serious adrenalin junky.
Healthy eating restaurants, snack bars and cafés and a shop selling organic picnic foods.
Sheltered picnic areas with free barbeque facilities.
An on-site family hotel.
The park is open from 10.00 am until 10.00 pm every day from 1st March to 30th November.

Entry fees are as follows:
Adult: £18.00
Child: £9.00
Family (two adults and two children): £30.00
Large family (two adults and up to four children): £40.00
Hotel rooms are available from £50.00 for a double room and £70.00 for a family of 4.

The management of Aquastranza want the website to perform the following functions:
To promote the theme park
To inform the general public about the activities and facilities available at the park
To encourage families and young people to visit the park
To promote the on-site hotel
To seek feedback from people about the website and how it could be improved.
To gather information on visitors to the web.

The management of Aquastranza want the website to adhere to their in house style as follows:
The site should make maximum use of CSS and XHTML.
The web site should be fully accessible to all people, and provide options for the visitor to amend font size etc to suit their abilities. This can be achieved through a set of instructions or providing some scripted option.

Navigation throughout the site should be consistent.
No tables are to be used for the layout other than in the feedback form page
The first page is to use the liquid three column layout and all other pages can use either a liquid three columns or liquid two column layout depending upon content.
Choice of font is up to you but options must be available in the event the user does not have the font installed.
The site is to make use of JavaScript and therefore some form of check needs to be implemented in order to provide visitors with instructions on how to enable JavaScript.
You have full autonomy on the content as long as it is family theme park related.

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.
Task 1: Design a multimedia website of at least seven pages (P4, P5)
You need to produce a design for a multimedia website of at least seven pages for Aquastranza theme park. Your design should meet the specification given in the scenario. This design will act as the plan for the website you are going to produce. The design you produce will be implemented in Tasks 2, 3, 4 and 5.

Use the activities below to produce evidence for your assignment.

Produce a site plan for the website containing at least seven pages:
Show an overview for all pages
Show an overview of the navigation system
Show how each of the pages are linked.

(This should be a diagram produced using any appropriate software.)

Produce a house style for the website:
Colour scheme
Font styles (font family, size, colour, emphasis) for headings and body text
Position of navigation system (showing links)
Position of other common components (e.g. company logo).

Produce page plans for at least seven WebPages showing:

The layout of all the different components (text, images, multimedia and interactive elements)
The chosen navigation system (buttons, textual hyperlinks, hotspots etc.)
The links.

(This should be a diagram produced using any appropriate software.)


End Of task 1



Task 2: Create at least five multimedia WebPages (P4, P5)

Using the designs and components that you collected and stored when completing Task 1, you should now create at least seven multimedia WebPages using appropriate web-authoring software.

Use the activities below to produce evidence for your assignment.

Create a suitable directory/folder structure for the website. This should allow you to save your pages

Sub-directories/folders with suitable names
Suitable filenames
Files in appropriate locations.

(Evidence for this must be done using screenshots.)

Produce the pages you have designed in task one.

Apply the house style by using a cascading style sheet
Create the navigation system using rollover buttons (use cascading style sheets to create the effect)
Insert/import and align text
Set text attributes
Use a range of different multimedia components.

A minimum of five different images must be included. Images must be suitable for purpose.

End Of task 2

Task 3: Create functioning hyperlinks (P4, P5)

In this task you will create hyperlinks to link the pages together, link to other websites on the Internet and link to email, where appropriate. Menu buttons for linking internally are to make use of CSS and not JavaScript in order to provide functionality to the visitor.

Use the activities below to produce evidence for your assignment.

Create hyperlinks that link the pages together and that link to external websites. For example:

Menus
Navigation bar
Text hyperlink
Buttons
Hyperlink to email (this should be to your own email address)
Hotspots/image maps.

(Evidence would best be presented by providing the website in electronic format, but could also be evidenced through the use of annotated screenshots with Tutor Witness Statement(s) and/or highlighted printouts of HTML code.)

End Of task 3


Task 4: Create interactive elements (P4, P5)

In this task you will add some interactive elements to the pages.

Use the activities below to produce evidence for your assignment.

Create interactive element(s) using JavaScript only. For example:

Rollover images
Interactive buttons
User controls (for audio, video)

(This evidence would best be presented by providing the website in electronic format, but could also be evidenced through the use of annotated screenshots with Tutor Witness Statement(s) and/or highlighted printouts of HTML code.)

End Of task 4

Task 5: Create a user form for capturing user feedback (P4, P5)

In this task you will create a form for Aquastranza to capture user feedback about the website and how it could be improved.

Use the activities below to produce evidence for your assignment.

Create a form to be printed out or submitted online. This form should seek opinions about user experience e.g.:

Ease of use
Appearance of website
Ease of navigation
Use of interactive elements.

Consider using the following form elements when creating your form:

Tables
Text boxes
Radio buttons
Check boxes
Drop-down menus.

(This evidence would best be presented by providing the website in electronic format, but could also be evidenced through printouts of the actual form, screenshots, annotated where necessary and/or printouts of HTML code.)

End Of task 5


Task 6: Test the website (P4, P5)

In this task you will print out the pages of the Aquastranza website. You will then test a number of areas of your website using a test table. This will enable you to ensure the website works appropriately.

Use the activities below to produce evidence for your assignment.

From a web browser, print out each page of the Aquastranza website.

(All webpages must be printed from a web browser. However, where the page layout does not enable the full contents of the page to be shown, screenshots of the website when viewed in the browser must also be provided.)

Produce a test table for use when testing the website. You must conduct all of the following tests:

Suitability for target audience
Use of consistent house style
Navigation system
Use of different components
Interactive elements
Hyperlinks
User form
Ease of use.

(The test table could be produced as a word-processed document.)

Where appropriate, for the tests carried out.

Provide annotated printouts of the WebPages, HTML code or screenshot printouts highlighting the problem areas
Make the necessary amendments to solve the problem(s)
Provide annotated WebPages, HTML code or screenshot printouts highlighting the changes that have been made.

End Of task 6







In order to gain a distinction you will need to complete the following three tasks.

Task 7: Change the layout of a web page by changing the external CSS (D1)

In this task you will provide the user with an option to change the colour scheme throughout the website by using a different external Cascading Style Sheet. How you advise the visitor on the way to use a different Style sheet is up to you but should not require them to edit any code.

(This evidence would best be presented by providing the website in electronic format, but could also be evidenced through printouts of the actual form, screenshots, annotated where necessary and/or printouts of HTML code.)

End Of task 7

Task 8: Show how existing interactivity could be extended or additional interactivity introduced into a web page (D1)

In this task you will extend or create a new web page that extends or uses additional interactivity . For example this could take the form of:


Setting and displaying cookie information

Checking that a visitors details are correct using regular expression with a JavaScript

End Of task 8

Task 9: Evaluate the impact of using CSS to control layout (D3)

In this task you will evaluate the website you have created and the impact of using CSS to control layout.

Use the activities below to produce evidence for your assignment.

Evaluate the website you have created for Aquastranza. Consider the quality of the website and the impact of using client side scripting as opposed to basic html in terms of:

Suitability for purpose and target audience (e.g. content)
Readability (e.g. use of colour, language)
Usability (e.g. navigation, ease of use)
Accessibility (e.g. ALT tags for images, size of text).
Control of layout

You must support your comments using examples from your website.

End Of task 9



End of Assignment

This post has been edited by Sailee316: Apr 20 2010, 11:38 AM