N5 - Web Design and Development

Identify the end-user and functional requirements of a website problem that relates to the design and implementation at this level.

Describe and exemplify the website structure with a home page, a maximum of four linked multimedia pages, and any necessary external links.

Describe, exemplify and implement, taking into account end-user requirements, effective user-interface design (visual layout and readability) using wire-framing:

• navigational links

• consistency across multiple pages

• relative vertical positioning of the media displayed

• file formats of the media (text, graphics, video, and audio)

Describe and identify the implications for individuals and businesses of the Copyright, Designs and Patents Act 1988 relating to:

• web content (text, graphics, video, and audio)

Compare a range of standard file formats:

• audio standard file formats WAV and MP3 in terms of compression, quality, and file size

• bit-mapped graphic standard file formats JPEG, GIF, and PNG in terms of compression, animation, transparency, and colour depth

Describe the factors affecting file size and quality, relating to resolution, colour depth, and sampling rate.

Describe the need for compression.

Describe, exemplify and implement prototyping (low fidelity) from wireframe design at this level.

Describe, exemplify and implement internal and external Cascading Style Sheets (CSS):

• selectors, classes and IDs

• properties

  • text:

    • font (family, size)

    • color

    • alignment

  • background colour

Read and explain code that makes use of the above CSS.

• website, page, URL

• hyperlink

Describe, exemplify and implement HTML code:

• HTML

• head

• title

• body

• heading

• paragraph

• DIV

• link

• anchor

• IMG

• audio

• video

• lists — ol, ul and li

Describe and implement hyperlinks (internal and external), relative and absolute addressing.

Read and explain code that makes use of the above HTML.

Describe and identify Javascript coding related to mouse events:

• Onmouseover

• Onmouseout

Describe and exemplify testing:

• matches user-interface design

• links and navigation work correctly

• media (such as text, graphics, and video) display correctly

• consistency

Evaluate solution in terms of:

• fitness for purpose