DD_Latoya_Website

Name: DD_Latoya_Website Version:1

Document History

Version Author Date Comments

1 Leonard Siu 2/02/2016 Created the document

Related Documents
Please insert links to related documents:

Related Document Comment

Latoya Consultancy Project Specification

Approval Signatories

Name Date Approved

N/A

Page 1 of 11

Created: 2/3/2016 Created by: Leonard Siu

 DD_Latoya_Website

Name: DD_Latoya_Website Version:1

TABLE OF CONTENTS

1. Introduction .................................................................................................................................... 3
2. Technical Design ........................................................................................................................... 3
2.1 All web page structure (Home page is used as sample) ................................................................ 3
2.2 Home Page .................................................................................................................................... 5
2.3 Products ......................................................................................................................................... 6
2.4 Hardware Page .............................................................................................................................. 7
2.6 Contact Us ................................................................................................................................... 11
2.7 Other Specification ....................................................................................................................... 11

Page 2 of 11

Created: 2/3/2016 Created by: Leonard Siu

 DD_Latoya_Website

Name: DD_Latoya_Website Version:1

1. Introduction

This is a website for Latoya consultancy. This company sells electronic items such as Laptops,
phones and tablets, as well as provides consultancy services such as repairs and installation. They
would like to display their items in a website. This document provides detailed specification of ABC
Website.

2. Technical Design

The webpages closely resemble the look on the figure and specification below:

2.1 All web page structure (Home page is used as sample)

Original Appearance

Page 3 of 11

Created: 2/3/2016 Created by: Leonard Siu

 DD_Latoya_Website

Name: DD_Latoya_Website Version:1

1. Header (including logo)

Parts details:

2. navigation

4. content

5. Wrapper

6. body

Specification:
All the specification below should be followed. If the specification of the object is not mention, then the
student can select the property value of their choosing.

EXAMPLE: If the width of the border is not specified, then the student can choose any width as long as it
looks neat in the webpage.

BORDERS: Borders should only be present if it’s visible in the picture. If the border is present, you may
select any colors unless specified in a statement. Note that selected colors should make the webpage neat.

ALL PICTURES: ONLY the pictures provided in the project must be used.

FLUID LAYOUT: The following elements should use fluid layout:

• Wrapper height and width
• Header height

1. Body. The background image of the body should be the company logo. As shown above, it should
be:
o repeating and
o use original size of the photo.
o The student should use the logo provided.
2. Wrapper. The wrapper is the other large rectangle inside the body. As shown in the picture above
it should have
o black border with white background.

Page 4 of 11

Created: 2/3/2016 Created by: Leonard Siu

 DD_Latoya_Website

Name: DD_Latoya_Website Version:1

o Rounded corners
o Translucent as seen in the picture above. The degree of translucency should resemble the
picture above.
o For the width, it should resemble the picture above. The height may vary depending on the
size of the content. For the unit for both attributes, the student should use percentage.
The wrapper contains the following parts:
• Header
• Navigation
• Container

3. Header. The header contains logo and the company name.

o Students should use the logo picture provided.
o The logo and the company name should be on the same line as seen in the figure above.
o The company name should be horizontally centered from the beginning to the end of the
header.
o The company name should be vertically centered from top to bottom.
o Do not put a border around the Header.

4. Navigation. The navigation should be centered. Once centered, the margin-left and margin-right
of only the <li id = “Products_li”><a href…>”Products.html”</a><li>can be adjusted.

Note: For mouse behavior, please see the last section: Mouse events specifications

5. Content. Only the contents of “content” section will be different between webpages. Section
contents for each webpages are specified in sections starting from 2.2 of this document.

2.2 Home Page

File name: Home.html

Home Page section:

Create a home page section similar with the appearance of the figure below. Students must select
their own border and border style for the picture indicated below as long as it is neat and
aesthetically pleasing. The student must use the picture provided.

Also, the green text below should be followed in css.

Page 5 of 11

Created: 2/3/2016 Created by: Leonard Siu

 DD_Latoya_Website

Name: DD_Latoya_Website Version:1

3. picture

2.3 Products
File name: Products.html

Products Page section:

This section should display the products in the following categories: Hardware and software as indicated
below:

Page 6 of 11

Created: 2/3/2016 Created by: Leonard Siu

 DD_Latoya_Website

Name: DD_Latoya_Website Version:1

This section should be exactly or closely resemble the appearance of the figure above. Note:
1. For both hardware and software, one picture is placed on top of the other. The picture at
the back is rotated 20 degrees.
2. All front pictures have blue border color, the back pictures have red.
3. Additional information and no action required: When any area of the Hardware section is
clicked, it directs to the hardware page. When any area of the Software section is clicked,
it directs to the software page. Hardware and Software pages are detailed in the next
sections of this document.

2.4 Hardware Page

File name: hardware.html

Hardware Page section:

This section should display the hardware items shown below:

Page 7 of 11

Created: 2/3/2016 Created by: Leonard Siu

 DD_Latoya_Website

Name: DD_Latoya_Website Version:1

Top

Page 8 of 11

Created: 2/3/2016 Created by: Leonard Siu

 DD_Latoya_Website

Name: DD_Latoya_Website Version:1

(continued…)Bottom

This section should be exactly or closely resemble the appearance of the figure above.

Additional information and no action required: When any area of the “You may also like…” Software
section is clicked, it directs to the Software page.

2.5 Software Page

File name: software.html

Software Page section:

This section should display the software items shown below:

Page 9 of 11

Created: 2/3/2016 Created by: Leonard Siu

 DD_Latoya_Website

Name: DD_Latoya_Website Version:1

Top

(continued…)Bottom

This section should be exactly or closely resemble the appearance of the figure above.
Page 10 of 11

Created: 2/3/2016 Created by: Leonard Siu

 DD_Latoya_Website

Name: DD_Latoya_Website Version:1

Additional information and no action required: When any area of the “You may also like…” Hardware
section is clicked, it directs to the Hardware page.
2.6 Contact Us
Contact File name: contact_us.html

Products Page section:

This section should display the locations and contact numbers as seen below:

This section should be exactly or closely resemble the appearance of the figure above.

2.7 Other Specification

2.7.1 Mouse events specifications

Mouse Event Color

Link blue
Visited violet
Hover orange
Active green

Page 11 of 11

Created: 2/3/2016 Created by: Leonard Siu