CS2204辅导、讲解HTML/CSS语言、辅导CSS留学生、解析、讲解CSS/HTML设计

Department of Computer Science

City University of Hong Kong

CS2204 Fundamentals of Internet Application Development

Course Work No. 2 (CW2)

Learning Outcomes:

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 cake shop 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 align with Discovery Enriched Curriculum (DEC) and 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

requirements 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

should tidy up your HTML in CW1 to make the styling easier by checking against the mark

sheet post in Canvas.

2. Mandatory requirements

Common Structure

a) the blocks defined in CW1 for Home, Order and Print page must be arranged in a way

that has multi-columns alignment, e.g. the common header-navigation-content-footer,

3-columns or a grid

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

Design Page); that may also include the use of color scheme and font type

c) the Web site title overlaps with the logo image as shown; the exact position or angle of

rotation of the title is not important

d) the navigation menu is initially shown as the image icon only; when the icon is mouseover,

the detail menu will be shown; when the mouse moves away from the icon the

detail menu will be hidden; note that the detail menu will stay being shown even the

mouse is away from the icon but on the top of the detail menu; the detail menu, when

shown, should be on top of any other content

- 2 -

e) in the footer block, the text and 4 links (as a unit) should be centered

f) labels, input and buttons in form should be aligned to give a tidy look

g) header and footer rows in tables should stand out; alternate odd and even rows should

have different styles

In all the 3 pages, additional structures may be added to further group individual blocks to

design the layout.

Home page

h) the video and image sizes should be controlled to fit in your layout design

Order Page

i) without assuming the total number of cake photos, 3 menu items are displayed in a

row and remaining ones, if any, will be displayed in following rows; test your page

with 7 images

Print Page

j) on printing, navigation menu and footer block will disappear; the header will be

reduced in size and placed above the invoice, with equal width; the whole page will be

in black and white

3. Free design requirements

You may choose different techniques for 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 techniques and where (the line numbers in your codes) you have used

otherwise no mark will be given. We are not going to find your CSS rules in your codes.

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

meaningful positioning

n) apply 2 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. Present the following information with an ordered list:

1) acknowledge the sources of information and/or ideas, if any, used in your design.

2) where in your styles used what positioning scheme, if any

3) where and what CSS3 techniques are used

4) how many kinds of styles are used, how they are grouped and why

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

- 3 -

no inline style, third party CSS framework/library nor 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

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 ~