CS2204- CW2 Fundamentals of Internet Application Development Solved

•     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 3S’s: 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
 

a)         the blocks in CW1 for Home and Order page must be arranged in a multi-column layout; the blocks are defined as follows:

i) header ii) footer iii) shop information block iv) promotion information block v) reservation block vi) menu block

vii) ordered item block

 

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

 

Home page
 

c)          the logo and Web site title sit in the same line and are centered together as one unit

d)         the video should be centered horizontally and clearly visible within the promotion information block 

 

Order Page
e)         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

f)          set the “undo” link to same appearance of the text in the table regardless of whether it has been clicked or not

g)         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 header’s width reduced to that of the table (sizes of the header’s content are also reduced) 

h)         set the 3 menu item headings (i.e. “sushi”, “drink” & “dessert”) to equal width and occupy the whole width of the menu block

i)          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:

 

j)           all menu items are not shown after page load and 3 headings are set with background color

k)         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.

 

m)       use of positioning schemes: static (none) < any 1 other positioning < more than 1 meaningful positioning

n)         apply 2 different kinds of CSS3 techniques: basic (round corner, gradient, transform, etc.) < transition < animation

o)         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).