讲解CS2204留学生、辅导HTML5语言、讲解Internet Application Development、辅导HTML/CSS/Web

Department of Computer Science
City University of Hong Kong
CS2204 Fundamentals of Internet Application Development
Course Work No. 1 (CW1)
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 cake shop by going through the 3S’s:
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 align with Discovery Enriched Curriculum (DEC) and encourage you to have critical
thinking and investigation, only the basic information of the Web pages are specified and
you are asked to find the matching structure according to requirements. While more than
one structure can fulfill a requirement, some are better (more matching) than others.
Required information to be presented in the Web site are grouped into blocks which are then
grouped into pages. There are 3 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.
Samples of screen shot are given to help you to understand the requirements. Note that the
samples have layout and style effects which are NOT required in CW1. Present all blocks in
sequence. Focus on using matching structures. Style related HTML or CSS should not be
included even if you know how to use them.
2. Structure requirements
There are common information that would appear in all pages (except Design page). Either
iframes or HTML code duplication can be used.
a) a navigation menu with an icon (image) at the top followed by 4 links; the links
point to Home page, Order page, Design page and a dummy page (not pointing to
anywhere, not causing a page reload) respectively - 2 -
b) a header/banner block consists of a logo (could be designed by you or use the
provided image) and title of the Web site; they are separate entities, not 1 single
image
c) a footer with information about copy right and 4 links pointing to the corresponding
pages; the same links as in the navigation menu
The default landing page of the Web site is the Home page.
3. Home Page
d) this page contains information grouped into 6 blocks, 3 of them are the common
header, navigation and footer blocks
e) a video block containing a promotion video; could support multiple video format
but currently only use mp4; the video will autoplay with no control bar; must use
the link
http://courses.cs.cityu.edu.hk/cs2204/chocolate.mp4
f) a block to create an order; the Submit button will load the Order page - 3 -
g) a block containing an image of a cake, its name and nutrition information
4. Order Page
h) contains the common header, navigation and footer
i) a block shows the same order information as in the Home page; this information can
be edited or carried forward from Home page and sent to Print page
j) a menu block contains at least of 4 photos of cakes on sale - 4 -
k) a block contains information of at least 3 ordered items including cake name,
quantity and total, and a button labeled as Print Invoice which on clicking would
load the Print page and send the order information along
5. Print Page
l) contains the common header, navigation and footer
m) a block show the invoice
6. Design Page
This is a 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 now, just put down your name.
7. 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 - 5 -
video mark-up should be written in cross-browser format
use appropriate HTML structural tags (e.g.