Answer Happy

Question 1 (15 marks) (a) Jane is designing the students' union portal for her college, to organize information more clearly, she decides to design a landing webpage having five sections as shown in Figure 1 below: Kowloon Community College Students' Union By the students, for the students Figure 1 Jane starts splitting the landing webpage, namely the index.html, according to the following settings by using framesets and frames: Frameset Settings 1. Horizontal division is 15% for the top frame, 80% for the middle frame and 5% for the bottom frame; 2. Vertical subdivision in the middle horizontal frame is 15% for the left frame, 70% for the middle frame and 15% for the right frame; 3. No frame border in any of the frameset; 4. Frame spacing should set to zero in each frameset. Frame Settings 1. Scrolling should be disabled in each frame; 2. Margin height and width should be set zero in all three vertical frames in the middle horizontal frameset; 3. Resizing should be disabled in all frames. 3

Each frame contains a webpage with some contents and the detailed description of these frames is listed as in the following table (Table 1): Table 1 Orientation Horizontal Vertical Frame top bottom left middle right Name of header footer menu content related Frame Webpage in forest_green.ht medium_purple .html light_yellow indian_red light_yellow02. 01.html .html html frame ml Background #228822 #9370DB #FFFFEO #CD5C5C #FFFFEO color of (forest green) (medium purple) (light yellow) (Indian red) (light yellow) webpage Assist Jane in her landing page design by providing appropriate HTML code for creating these framesets and frames. [3 marks] (6) Jane continues her design for the middle-left frame and wants to create a link panel consisting of multiple links to different information pages. To make things simple, she decides to create a table to accommodate these links as shown in Figure 2 as follows: Student Activities Student Activities Students Exchange Students Exchange Program Program Inter-ship Program Intem-ship Program Extra-curricular Extra-curricular Activities Activities Students' Union Students' Union Students' Stories Students' Stories Alumni Alumni Photo Gallery Photo Gallery mouse off the panel mouse over the panel Figure 2 The table in which the links reside has the following settings as shown in Table 2: 4

Table 2 Table Table Data Width 180px nil 2px 1px groove solid Border width Border style Border color Text alignment blue blue nil center Besides that, the link appearance should be made in accordance with the following settings as shown in Table 3: Table 3 Link type default link active link visited link hovered link Color orange pink red lime Background Color nil red nil gold Text underline nil nil nil nil Furthermore, the background color of the body of this webpage is set to light-yellow ("#FFFFE0%) and default fonts used is Tahoma or Arial if Tahoma is not available. Help Jane to design the link panel by providing the appropriate HTML and CSS code for this webpage. The link panel should contain a table with links appearing as that shown in Figure 2. [5 marks] () Jane moves on to design the webpage at the center panel, she decides that the body of the webpage should follow the specification in Table 4 as follows: Background color Table 4 #CD5CSC (Indian red) Tahoma, Arial 800px * 500px, rounded corners (5%) Font-family Image dimensions Besides that, Jane wants to put a picture of some good-looking students at the center of the webpage. The desired dimensions of the picture are 800px * 500px, and the webpage should look like that shown in Figure 3. 5

Figure 3 Provide the appropriate HTML and CSS code to help Jane achieve the design by positioning the picture at the center of the webpage (students may use the class name: make_center for this portion of CSS code). [3 marks] (d) After Jane has finished designing the students' union portal, she proceeds to create a rollover effect at the center of the website. This time, she has adopted a simple design with HTML, CSS, and JavaScript. The rollover effect looks like that shown in Figure 4, in which the initial picture (students_01.jpg) at the center of the website will change to another picture (students_02.jpg) when the mouse cursor is moved over it. Mouse off the picture Mouse over the picture Figure 4 To make the rollover more efficient and responsive. Jane decides to adopt the technique of image preloading. She makes use of two JavaScript image objects for caching the two pictures. The two 6

image objects are named as Imagel and Image2. Based on the above description, provide the appropriate coding to achieve the desired rollover effect for Jane. [4 marks] Question 2 (15 marks) (a) Briefly describe the four major categories of disabilities and their related coverages. [4 marks] (b) Describe the three misconceptions (or myths) that may be held by the society towards people with disabilities in using websites on Intemet. What are the realities? [4 marks] () Jane would like to adopt web accessibility in webpage design for the students' union. To assist her, write a brief description NOT more than 150 words (students should provide word count) to briefly describe the possible issues, and solutions for dealing with these issues; such that webpages can become more user-friendly to people with disabilities. [7 marks)