9 on 17/01/2023 11:1
Task 3: web design and development (part A)
A baby shop requires a web page to promote its products. The web page should contain the
following elements:
♦ A page title containing the shop’s name ‘Babylicious’
♦ Four different sections:
— the company logo, name, address and telephone number
— information about feeding products and an external link to baby food recipes
— information about baby furniture with an interactive photo
— information about toys and gifts, and a video of one of the toys being played with
3a State two functional requirements for the web page.
Functional requirement 1 (1 mark)
Functional requirement 2 (1 mark)
♦ Check your answers carefully, as you cannot return to part A after you hand it in.
♦ When you are ready, hand part A to your teacher or lecturer and collect part B.
Candidate name________________________ Candidate number______________________
Version 1.0 26
ownloaded by [email protected] from 217.181.30.9 on 17/01/2023 11:1
Task 3: web design and development (part B)
3b Open the babyshop.html file in both a web browser and HTML editor.
A wireframe design for the feeding section is shown below.
hyperlink to nhs website
https://www.nhs.uk/start4life/weaning/recipes-and-meal-ideas
Implement the wireframe design for the feeding section using HTML and style the
page using CSS as follows:
♦ The page background should be the colour palegreen (#98FB98):
— the top section should have the background colour lightyellow (#FFFFE0)
— all other sections should have a background colour lightblue (#ADD8E6)
♦ The size of company logo is 648px by 136px:
— all other images are sized 320px by 240px
♦ The font for all text should be Calibri and the colour darkblue (#00008B).
♦ The text size of the paragraphs should be size 14px.
Your teacher or lecturer will provide you with a folder containing the required files.
(7 marks)
Version 1.0 27
ownloaded by [email protected] from 217.181.30.9 on 17/01/2023 11:1
3c The shop wants to promote a free music download to eligible customers.
The design for the promotion is shown below.
Calming Music
All customers who spend £100 or more will receive a free download of our
calming music album. A preview is available below.
Edit your HTML file to implement this change.
(1 mark)
Print evidence of the following:
♦ HTML and CSS code.
♦ Web page as viewed in a browser.
Version 1.0 28
ownloaded by [email protected] from 217.181.30.9 on 17/01/2023 11:1
3d Functional requirements for the web page are shown below.
The web page should include:
♦ the company logo, name address and telephone number.
♦ a list of furniture products for sale, including one photo of a furniture product.
The photo of the baby furniture should be interactive.
♦ images of toys for sale, with a description of each toy. A video of a toy in use
should be included.
♦ a list of feeding products and a picture of one feeding product.
♦ details of a free gift available for orders over £100. A sample of the free gift
should be included.
♦ a feeding section containing a link to recipes on the NHS website.
Evaluate your web page in terms of fitness for purpose against these criteria.
(2 marks)
3e Describe how JavaScript has been used to make the web page interactive.
(1 mark)
Candidate name________________________ Candidate number____________________
Version 1.0 29
ownloaded by [email protected] from 217.181.30.9 on 17/01/2023 11:1
3f The finished web page was shown to customers. A comment from the feedback is
shown below.
“There is a lot of information on a
single page. It is hard to spot what
you are looking for quickly.”
Create a navigational structure diagram to show how the web page could be split into
different pages, showing all links.
(2 marks)
Candidate name________________________ Candidate number____________________
Version 1.0 30
