Learner name / Assessor name
Ken Wake
Date issued / Completion date / Submitted on
05/03/2012 / 19/03/2012
Qualification / Unit number and title
BTEC Level 3 National Extended Diploma in I.T / Unit 20 Client-side Customisation of Web pages
Assignment title / Assignment 1 – XHTML, CSS AND THE Box Model
In this assessment you will have opportunities to provide evidence against the following criteria.
Indicate the page numbers where the evidence can be found.
Criteria reference / To achieve the criteria the evidence must show that
the student is able to: / Task no. / Evidence
P1 / Explain how XHTML files access CSS / 1
P2 / Explain the features of the Box Model for CSS / 2
P4 / Design web pages using CSS to control layout. / 3
M1 / Assess different implementation styles of CSS / 4
M3 / Employ good practice in the design and implementation of web pages / 5
D2 / Evaluate the web pages and discuss improvements / 6
Learner declaration
I certify that the work submitted for this assignment is my own and research sources are fully acknowledged.
Learner signature: Date:
Assignment brief
Qualification / BTEC Level 3 National Extended Diploma in I.T
Unit number and title / Unit 20 Client-Side customisation of web pages
Start date / 09th Sept 2011
Deadline / 19th Dec 2011
Assessor name / Ken Wake
Assignment title / Assignment 1 – XHTML, CSS And The Box Model
The purpose of this assignment is to give the learners the opportunity to:
· 1 Demonstrate a thorough understanding of XHTML, CSS and the Box Model.
· 2 Be able to describe CSS Selectors and identify their properties.
· 3 Be able to explain the advantages of using Box Model technique in terms of accessibility
· 4 Be able to design valid, accessible web pages.
Scenario:
You are employed by Gates and Co as a member of the web development team. You have been asked to create a Standards Compliant website which is accessible to the widest range of users and devices possible.. The site must be constructed using the XHTML TRANSITIONAL coding standard with CSS and utilising Box Model technique. Initially you will create a single page template and demonstrate how it meets the client’s defined needs.
Task 1
Explain the different ways a web page can access styling information stored in an external stylesheet, the advantages and disadvantages of each method and how a stylesheet can be tailored to a specific output medium. Use coding samples to illustrate your main points.
(P1)
Task 2
Explain the main features of the XHTML/CSS Box Model technique. Within your explanation, explain how its usage can make web pages more accessible and how we can ensure our code is valid. Use diagrams and screenshots to illustrate your answers.
(P2)
Task 3
a/ Produce a wireframe diagram for a single web page based on the defined brief. Explain the purpose of each area of the page, explain and document the XHTML and CSS code which will make the page layout as you have specified.
Ie.. Name the page divs and show the XHTML and corresponding CSS for each div.
b/ Produce the web page utilising XHTML/CSS based on the wireframe.
(P4)
Task 4
Given the cross-browser problems which can occur in web page design, research how different stylesheets could be used when a page is rendered in different versions of Internet Explorer. Produce a short step-by-step tutorial which explains the technique; include code examples, screenshots and an introduction which explains why the problems occur.
(M1)
Task 5
1/ Produce a document which discusses all aspects of website accessibility and how we, as web designers can enable our pages to be viewable by the maximum number of users or devices.
2/ Produce a paper which discusses the subject of cross-browser compatibility and how we can manage its problems. Produce evidence of research on which browsers are currently the most popular and explain how we might tailor our web solutions to work in most popular browsers.
(M3)
Task 6
Produce a report which names and discusses the main criteria of web page performance evaluation. Discuss performance metrics in terms of accessibility, search engine friendliness and usability. Create a test plan and indicate how you would maximise the effectiveness of your testing and how you would indicate a need for improvement.
(D2)
This brief has been verified as being fit for purpose
Assessor / Ken Wake
Signature / Date
Internal verifier / Peter Bilbie
Signature / Date / 01/11/2011
Deliverables
1/ Report containing –
a/ CSS Access methods (p1)
b/ Box Model Features (p2)
c/ Comprehensive wireframe (p4)
d/ Web Page (p4)
d/ Cross Browser IE problem (m1)
e/ Accessibility issues (m3)
f/ Cross-browser compatibility general issues (m3)
g/ Web page performance
Page 3 of 3