Learning Outcomes:

• design structures of a set of web pages for a more realistic, commercial-like web site;
• achieve user requirements by using appropriate HTML5 markups;
• produce web pages that can pass through validation

1. Overview

You are required to build a simple Web site for a restaurant by going through the 3Ss: structure, style and script. This CW1 is the first step focusing on structure only. The Web site therefore would not be fully functional until the second and third parts (CW2 & CW3) using CSS and Javascript are completed.

To encourage you to have critical thinking and investigation, only the basic information of the Web pages are specified and you have freedom to design the structure as long as it can fulfill the specified requirements. However, like any design, some structures are better than others.

2. Structure requirements

Required information to be presented in the Web site is grouped into blocks which are then grouped into pages. There are 2 main pages and 1 design page. All content unless specified could be made up by you. If you use information and ideas of other people from the Internet, you MUST acknowledge and quote the source in the design page.

Screen shots of sample blocks (with some styles) are given to help you to understand the requirements. Layout and anything related to styling are NOT required in CW1.

Common Information

There are information that would appear in all pages (except Design page). Either iframes or HTML code duplication can be used.

1. a header/banner block consists of a logo (could be designed by you or use the provided image) and title of the Web site; these are separated, should not be done in 1 single image

1. a footer with information about copy right and a link pointing to the Design page

The default landing page of the Web site is the Home page.

Home Page

1. this page contains information grouped into 5 blocks, 2 of them are the common header and footer blocks
2. the shop information block contains 5 types of information as shown in the screen shot: address, telephone, business hours, signature dishes and location (an image, not an embedded Google Map); use the most structured elements to present these information; at the end, there is an image link pointing to Order page

1. the promotion information block contains a text passage for promotion and special offer, followed by a video which plays automatically (note: check out the autoplay policy for browsers) and continuously

1. the reservation block is a form as shown (the form can be submitted to the same page or dummy internal location)

Order Page

1. contains the common header and footer
2. a block for showing menu items for ordering; it has a heading Menu followed by 3 tabs with names (my examples are Sushi, Drinks and Dessert, you may choose your own names); inside each tab there are menu items
3. each menu item consists of a photo, a box to fill in the quantity and a button labelled

Add

1. the first tab contains 3 menu items while the second and the last tab contain 2 and 1 menu item respectively

1. another block is the Ordered Item block with a heading and date time information, followed by the ordered items as shown in the screen shot
2. at the bottom of the block, there is a link labelled undo; it could be set as a dummy link which will be useful in CW2 and CW3

Design page

This is an additional free format Web page for you to acknowledge the sources of information used in your design. If you use images, icon or text obtained from the Internet, write the source and links in this page. Most information will be put in later for CW2 & CW3. If you do not have anything to acknowledge, just put down your name.

3. Assessment criteria

You will be assessed by how much and how well you can apply what have been learnt from the course, some considerations are:-

• no styling nor Javascript is required
• video mark-up should be written in cross-browser format
• use appropriate HTML structural tags (e.g. <header>, <footer>, <div>, <span>), and give as much structure as feasible
• adopt all possible good practices discussed in lectures
• your work should pass through validation for document type HTML5
• your Web site should be organized in proper folders, e.g. html and images, etc.

4. Due Date and submission

• The due date has been announced in Canvas course home page, the deadline time is 11:55 pm

Submit a zip file of your web site with appropriate folders set up so that it could be test directly by unzip be careful with your URLs; they should work when your submission is test as local files in other computers or as Web pages served by a Web server

• DO NOT include video files in your submission file; DO NOT use Youtube video should use given video links in the server folder http://courses.cs.cityu.edu.hk/cs2204/

barbecue.mp4, barbecue.ogg

cakemaking-s.mp4, cakemaking-s.ogg

5. Miscellaneous information

• You should retain a copy of your submission, the same set of web pages will be used again in CW2 and CW3 for adding styles and Javascript
• Some images are available in Canvas CW1 folder and other free photos, icon or images can be found in http://commons.wikimedia.org

~ End ~