PDA

View Full Version : Starting a Site From Near Scratch



Sailee316
Apr 20th, 2010, 06:43 PM
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 Assignment

Phil Jackson
Apr 20th, 2010, 06:44 PM
would you like a cherry on top sir?

Budreaux
Apr 20th, 2010, 07:04 PM
um, just curious, if your not actually taking a class on html scripting, why would you be asked to create a website that specifies use of css and other web programing code. The only reason I ask is because you state you have no html or xhtml knowledge. The assignment itself seems very specific in it's requirements. Some of the requests appear to require the use of javascript as well (give users the ability to change webpage appearance). This doesn't make any sense.

Don't get me wrong. I'm happy to give advice, but if you don't know code, then the advice is worthless.

BlueTriangle
Apr 20th, 2010, 10:36 PM
He didn't say he wasn't taking a class on html or webdevelopment did he? (I may be wrong, I'm not being cocky... I just didn't read his whole post, I got bored).

By reading some of that it looks like he's taken a BTEC National Diploma... as a Certificate student wouldn't use a forum for help, they'd just fail... because they don't care lol.

Here's what I'd do... only work on pass critera to begin with *That was only pass stuff you showed anyway*
1. Ask your teacher for a 'little' help, maybe a few places which offer tutorial etc.
2. Break your assignment into parts, get the basics... Then fill the pages, then add in javascript and stuff later.
3. Add in your javascript and anything else you need.
4. Run it through a html checker to ensure your code is fine.
5. Submit it and get a pass!

blake3334
Apr 21st, 2010, 12:22 AM
I would go to w3schools.com if you need help learning html and css.

Sailee316
Apr 21st, 2010, 12:36 PM
um, just curious, if your not actually taking a class on html scripting, why would you be asked to create a website that specifies use of css and other web programing code. The only reason I ask is because you state you have no html or xhtml knowledge. The assignment itself seems very specific in it's requirements. Some of the requests appear to require the use of javascript as well (give users the ability to change webpage appearance). This doesn't make any sense.

Don't get me wrong. I'm happy to give advice, but if you don't know code, then the advice is worthless.

Are you saying you cant change the appereance using Javascript. If you can, how would you go about doing that? I do know some html and I have now made all my pages and filled them up with content.

I need help with creating the navigation system using CSS and changing appereance.

thanks

Sailee316
Apr 21st, 2010, 12:37 PM
He didn't say he wasn't taking a class on html or webdevelopment did he? (I may be wrong, I'm not being cocky... I just didn't read his whole post, I got bored).

By reading some of that it looks like he's taken a BTEC National Diploma... as a Certificate student wouldn't use a forum for help, they'd just fail... because they don't care lol.

Here's what I'd do... only work on pass critera to begin with *That was only pass stuff you showed anyway*
1. Ask your teacher for a 'little' help, maybe a few places which offer tutorial etc.
2. Break your assignment into parts, get the basics... Then fill the pages, then add in javascript and stuff later.
3. Add in your javascript and anything else you need.
4. Run it through a html checker to ensure your code is fine.
5. Submit it and get a pass!

Yeah im on a BTEC national diploma course and the stuff I posted is just the pass stuff. Web development is not something I like about this course. Your making it sound easier though than it actually is.

Budreaux
Apr 22nd, 2010, 05:05 PM
Sailee,

the javascript is just used to handle the change function; ie. if you have a selection box that allows the user to change to a specific font or background style (sort of like a page theme) then the javascript makes the change, loading one css style over the other.

this type of script can be found in many forms and flavors across the web. just do a search for something like "user change css styles". that should get you going in the right direction. find a basic code you can modify to fit your needs. if you cant get it to work, post it up in the correct forum and someone will get you the help you need. from what i've seen on these forums, most folks don't have any problem helping you out as long as you've done the majority of the work.

BlueTriangle
Apr 23rd, 2010, 10:42 PM
Yeah im on a BTEC national diploma course and the stuff I posted is just the pass stuff. Web development is not something I like about this course. Your making it sound easier though than it actually is.


Sorry not trying to make it sound easy, I did the same course and I know it's quite hard at times. But I was lucky and knew things like binary and all that crap before I even started so most was easy (for me) but still had parts where I struggled as it is a hard course.

met
Apr 24th, 2010, 09:13 PM
# 1.5) No homework assignments - Do not post your entire homework assignment and request that other members do it for you. This is considered cheating, and your thread may even be used by your school to prove your guilt. Now, you may ask for advice or help on a specific aspect of your assignment that you're having trouble with. Use common sense as far as what's acceptable in terms of soliciting help with homework assignments.


tut tut

Infect
Apr 24th, 2010, 10:38 PM
I would go to w3schools.com if you need help learning html and css.

*cough* or any other sort of web coding *cough*

ridgey28
Apr 25th, 2010, 09:07 PM
Start with the basics. A pen and some paper. Make a rough design of where you want to place things, look at similar sites for inspiration (Don't be tempted to copy though!). Map your thoughts with mind-mapping software.
Do a little light reading on XHTML & CSS.
Use the following for help:
http://www.w3schools.com/
http://www.tizag.com/
http://reference.sitepoint.com/css

Use a decent Web Development editor (Aptana maybe?)
Use Firefox with Firebug (Great for tweaking and debugging), Web Developer Toolbar, HTML validator etc.

Make notes as you go along, take plenty of screenshots etc, comment in your html and css files. Make sure it works in different resolutions, browsers and is accessible by all.

Let us know how you get on.