• design styles and layout for the web pages of a more realistic, commercial-like web site;
• achieve user requirements by using appropriate CSS styling techniques;
• able to organize style sheets for better Web site styling
• 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 CW2 is the second step focusing on style. The Web site therefore would not be fully functional until the third part (CW3) using Javascript is completed.

To encourage you to have critical thinking and exploration, requirements are divided into 2 main groups: mandatory and free design. The mandatory ones must be fulfilled according to specification while free design can be done according to your own ideas which will then be assessed according to the level of difficulty of the techniques used and good practices taught. You may add or modify HTMLs in CW1 to make the styling easier.

2. Mandatory requirements

Overall

1. the blocks in CW1 for Home and Order page must be arranged in a multi-column layout; the blocks are defined as follows:
2. i) header ii) footer iii) shop information block iv) promotion information block v) reservation block vi) menu block

vii) ordered item block

1. a common theme/layout could be recognized in and applied to all pages (excluding Design Page)

Home page

1. the logo and Web site title sit in the same line and are centered together as one unit
2. the video should be centered horizontally and clearly visible within the promotion information block

Order Page

1. for the ordered items table, the heading, footer, odd and even rows can be seen and identified distinctly; text in the description column are aligned left and all quantity text are aligned right
2. set the undo link to same appearance of the text in the table regardless of whether it has been clicked or not
3. when the Order Page is printed, only the header and the ordered items table is printed; with the ordered item table centered in the page and the headers width reduced to that of the table (sizes of the headers content are also reduced)
4. set the 3 menu item headings (i.e. sushi, drink & dessert) to equal width and occupy the whole width of the menu block
5. 3 menu items are displayed in a row and together take up the whole width of the menu block (menu items, if more than 3, are displayed in following rows); add HTML if needed, to build 4 menu items for the sushi menu and 3 for drink menu

WITH CSS ONLY (i.e. no Javascript) implement the following:

1. all menu items are not shown after page load and 3 headings are set with background color
2. when the headings are pointed by mouse cursor: the heading background color is set to white (or the background color of the menu); the corresponding group of menu items are displayed while the other groups are hidden; note that the menu items will not go away as long as the heading or any menu item is being mouse-over; if the cursor moves away from any heading and menu items, the display goes back to the initial stage, i.e. as in (j)

[HINT: the technique is to set CSS property of one element by mouse-over another element; need to think in terms of using a selector (relationship) for the menu item group that involves the corresponding heading and then apply the hover pseudo class to the heading]

3. Free design requirements

You are required to use CSS techniques to meet each of the following requirements. Marks will be awarded according to the stated level of difficulty. You MUST write down clearly in the Design Page what and where (i.e. the line no. where your CSS rules start) you have used the techniques, otherwise no mark will be given. We are not going to find your CSS rules in your code.

1. use of positioning schemes: static (none) < any 1 other positioning < more than 1 meaningful positioning
2. apply 2 different kinds of CSS3 techniques: basic (round corner, gradient, transform, etc.) < transition < animation
3. how styles are grouped into style sheet(s)/embedded style

Design page

This is the free format Web page for you to acknowledge the sources of information used in your design. Write down clear explanation for items (m) to (o).

4. 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 inline style, third party CSS library or Javascript is allowed
• Adopt 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, images, css, etc.

5. 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 and cakemaking-s.ogg

6. Miscellaneous information

You should retain a copy of your submission, the same set of web pages will be used again in CW3 for adding 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 ~