NOTE: This is the FIRST part of your website project. This task focuses on
the design and initial structure of your site. You are not required to
COMPLETE the entire site for this task. Please make sure you read the
instructions here carefully. Objective
On completion of this unit, students should be able to develop and publish their
own website by using the techniques learnt from this unit. This specification is for
the entire website project. Overview of your Website Project
You need to assume responsibility to build a website for a business of your choice. This online business must be engaged in providing products and/or services, such
as a hotel, a retail store (books, electronic products, cars …), an online travel
agent, and so on. The website should provide online functionalities to enable users
to communicate with the website to get requested information and services, as
well as send queries/feedback. The website must be hosted on a web server so
that users can access it from anywhere using a browser.
Do not reproduce any existing websites, use an existing website template, nor
copy an existing business in any form. However, you can use the existing websites
and online businesses for reference to gain inspiration/ideas on the
design/implementation of your website. This specification document is to provide a
guideline to you for developing your own website. Based on the basic
requirements, you can do more as per your preference and design of the website.
· All web pages on the website need to be hyperlinked properly with the corresponding functionalities, and consistent in style.
· The website must have a Home page, from which users can access the information and functionalities of this online business.
· The website must provide necessary information about the products/services of the business, and other related information such as history, aims, news etc.
· The website must provide a search function to enable users to search for products/services.
· The website must provide a query function to enable users to send queries/feedback to the website.
· The website must provide contact information, such as postal address, map, phone number, email address, and working hours.
· Must use advance techniques and tools like user cards ,popup information, Automatic Slides, labels.
The quality of the website is assessed based on:
· Functionalities are implemented and work correctly.
· The home page could include the following information
· A brief introduction to the background, purposes and functionalities of the website.
Latest news and events.
Other information or resources that you think are attractive to users, such as supporting images, quotations and so on.
· Search can be based on single criterion or multiple criteria.
Query function should provide a form for users to send queries. The form should include relevant fields for users to provide their contact details
(e.g. name, email and phone number). There should be a field for users to enter their query.
· The form validation must include the following checks: All required fields are not blank. Email address should be in email format (e.g., should contain “@” or other patterns). Phone number must be digits and should not exceed a maximum length. Any other checks that you believe are necessary for the website running.
· When a query form is submitted, the form data should be stored in a database, in an appropriate database table.
There should be a way for the administrator to view received queries.
Based on the above website project specification, in this task you are expected to design your own business website by doing the followings:
1. Identify two or three website examples that you are using for inspiration towards the design of your website. Highlight the features/layout/styles in these sample webpages that interest you, and explain why they are of interest.
2. Draw a site map to present the designed structure of your website, and briefly describe the purpose of the website and the content of each page.
A site map depicts web pages, as well as their relationships, on a website. A site map example is as follow.
3. For each web page of your website, create a wireframe to depict the layout of the page content, including interface elements and navigational systems, to best accomplish a particular purpose of the page.
An example of web page wireframe is as follow.
Website Draft Pages
Based on the site map and web page wireframes of your business website, you are expected to finish the following tasks:
For each web page in the site map, design hyperlinks that enable the user to navigate from the page to other pages. Some design questions should be answered, such as:
Where are the hyperlinks placed?
How to create links, via text or images?
Consider to use HTML5 structural elements to configure your web page structures.
Try to use the techniques learnt up to now, such as images, tables, forms, CSS and Bootstrap, to create the draft web pages of your website, providing information as much as you can at this stage in the web pages.
Try to use the learnt HTML coding techniques to present the page content in a professional way and make the web pages readable and understandable.
Add proper comments to improve the readability of the HTML source code. Save the HTML documents and open them in a web browser (e.g., Firefox or Internet Explorer) to check whether the page content is correct and rendered as what you expect.
These draft web pages are to be improved with the progress of your unit study.
NOTE: For this task you are only required to present the design of your website and the draft pages that it comprises. These draft pages do not need to be fully functional, e.g., the search does not need to return responses.
The website which u make in task 1, you had created the draft web pages of your business website. In this project task, you are expected to improve these draft pages to make them more professional and functional. Follow the steps below to do this task.
· Appealing to target audience
· Consistent site header/logo
· Consistent navigation area
· Information page title includes the company/organization/business name
· Page footer area includes copyright, last update, contact e-mail address
· Displays without horizontal scrolling at 1024x768 and higher resolution
· Balance of text/graphics/white space on page
· Good contrast between text and background
· Repetitive information (e.g., header/logo and navigation) occupies less than onequarter to one-third of the browser window at 1024x768 resolution
· Main navigation links are clearly and consistently labeled
· Navigation is easy to use for the target audience
· If main navigation uses images, clear text links are in the footer section of the page
· Navigation is structured in an unordered list
· All navigation links works