Starting from:
$30
CS2204- CW1 Fundamentals of Internet Application Development Solved
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 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 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.
a) 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
b) 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
c) this page contains information grouped into 5 blocks, 2 of them are the common header and footer blocks
d) 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
e) 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
f) the reservation block is a form as shown (the form can be submitted to the same page or dummy internal location)
Order Page
g) contains the common header and footer
h) 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
i) each menu item consists of a photo, a box to fill in the quantity and a button labelled
“Add”
j) the first tab contains 3 menu items while the second and the last tab contain 2 and 1 menu item respectively
k) 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
l) 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.
• 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 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 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.
a) 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
b) 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
c) this page contains information grouped into 5 blocks, 2 of them are the common header and footer blocks
d) 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
e) 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
f) the reservation block is a form as shown (the form can be submitted to the same page or dummy internal location)
Order Page
g) contains the common header and footer
h) 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
i) each menu item consists of a photo, a box to fill in the quantity and a button labelled
“Add”
j) the first tab contains 3 menu items while the second and the last tab contain 2 and 1 menu item respectively
k) 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
l) 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.
1 file (828.1KB)
