Department of Computer Science City University of Hong Kong CS2204 Fundamentals of Internet Application Development Continuous Assessment No.

1 (CA1) Learning Outcomes: Able to produce a set of realistic web pages taking reference from commercial web sites; Able to achieve user requirements by using appropriate XHTML mark ups; Able to produce web pages that can pass through validation 1. Overview

You are going to build a simple web site modeled after a financial news web site (e.g. http://hk.finance.yahoo.com/). Some characteristics of news web site design are multicolumns, dividing into many sections and packing together a lot of information. This web site consists of 3 pages :a) b) c) Finance (Home) page - provides different kinds of information and advertisement spaces; Video page plays different video using embedded multimedia object; User registration page - presents a form for user registration or personal information update

Although the pages below show layout and format, you only need to produce in this assignment XHTML in the pages in sequential order and all related layout tags or attributes, e.g. color, width and height (except Object tag), should NOT be included. 2. Home page details

-1-

 To help you to understand, you should think of the page as consisting of a header, a content section and the footer but you should forget about the layout at this time; you can write your XHTML in a logical sequence of (e.g. top down and left to right); The different parts, marked by numbers of the page are described as follows : (1) is the header that will appear in all pages. It consists of a logo, title and a line showing the date and time item (4) followed by a menu item (5) with 3 links each of which points to the Finance, Video and Registration pages, and a horizontal line; The content section, item (2) is different for different pages; Inside the content, all shaded boxes represent headings; item (6) is about news update, there are a heading and a list of links pointing to the details of individual news items (the links can point to dummy destinations); Item (7) is for foreign exchange, it consists of a heading and a table showing at least 5 currencies, buy and sell prices, and with a table heading; Item (8) is the Editors Choice, consisting of a heading of the news, a photo, a subheading and a passage describing the news; Item (9) is other news following the Editors Choice, consisting of a heading, subheading and a paragraph; Item (10) is an advertisement space coded with an image link which points to the Video page; Item (11) consists of two headings (i.e. HK and DJ), followed by two images supposed to be showing the charts of stock markets; Item (3) is the footer which will again appear in every pages with a line of text as shown, the dots should be replaced by your name. 3. Video page details

The header and footer are defined and the same as in the previous page; The content consists of 3 parts : Item (1) is an embedded FLASH player object, link of the file to be played is http://www.youtube.com/v/ZXFtI11Q178?version=3; The object should be coded in a cross-platform way which should work in both IE and Firefox; -2-

 Item (2) are some thumbnail images of some videos with their corresponding titles; Item (3) is the title of the playing video, in a larger heading.

4.

User registration page details

The header and footer are defined and the same as in previous pages; After the menu is a form for users to input their personal information for registration or update The form should have two main groups of information : personal and interests about financial news Personal information include title (Mr or Miss or Ms), last name, first name, contact phone no., email address, address, password, confirm password Interests information include multiple selection of four types : stock, derivatives, precious metals and commodities; also provides a text area for user to input a brief description in addition to the type selection The normal submit and reset buttons should be present Remember to ignore the layout of the form for this assignment 5. 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 Frames, nor JavaScript should be used and do not use any style attributes (except the multimedia object Firefox cannot play without a certain size); use appropriate XHTML tags for different requirements; your work should pass through validations for document type XHTML 1.1; your web site should be arranged in directories properly, e.g. XHMTL, images, etc.

-3-

6.

Due Date and submission The due date has been announced in Blackboard course home page, the deadline time is 11:55 pm Submit a zip file (no rar file please) of your web site with appropriate folders set up so that it could be test directly by unzip

7.

Miscellaneous information You should retain a copy of your submission, your same set of web pages will be used again in CA2 for CSS layout control; Some images will be set up in Blackboard (in the image folder under CA1 folder) for your use or you can find your own images (please note that most of the images in the Web are copyrighted).

~ End ~

-4-