Lab Demonstrators

Dr Wei Liu

Prof. Michael Wise

Dr Rowan Davis

Mr Leo(Yingjie) Lei

Mr Saeed Danesh

 

Consultation Hour

Time: 1-2pm Thursdays

Venue: Wei's office

 

Admin Enquiries

CITS1231 Week 7 Lab: Multimedia and Forms

In this lab's exercises, you will:

• Create a multi-media web site with a video and interactive Java applet animation;

• Provide a form which allows potential students to request information about CSSE courses.

Learning Activities:

• Creating a web page using multi-media

• Creating an interactive web page using a form

Contents

Creating a multi-media site

(This is from Tutorial 8, Case Problem 3 of your text book, page 477)

The following zip file contains the data files needed for this exercise: Cmplx.class, Controls.class, flogo.jpg, FracPanel.class, fracttxt.htm, mandel.avi, Mandel.class, mandel.jpg, mandel.mov, taken from tutorial 8 case 3 data files.

Save the file into a directory called lab06 under /WWW/CITS1231. Unzip to find all the data files you need. The same set of data files is also available at this external page. However, browsing external pages will consume your Internet quota.

Here are the instructions (from our text book for the exercise).

Fractals are geometric objects discovered by mathematicians that closely model the sometimes chaotic world of nature. Doug Hefstadt, a mathematics teacher at Franklin High School has just begun a unit on fractals for his senior maths class. He's used the topic of fractals to construct a Web page to be placed on the school network, and he needs your help to complete the Web page. He has a video clip of a fractal that he wants placed on the Web page, along with a Java applet that allows students to interactively explore the Mandelbrot Set, a type of fractal object. He wants your assistance in putting these two objects on his Web page. A preview of the page you'll create is shown in the text book.

To create the fractal Web page:

1. Use Expression Web to open fracttxt.htm from the lab06 folder. Enter your name and the date in the comment section of the file and save the file as fractal.htm.
2. Locate the div element with the id "movie" and insert the embedded movie clip mandel.avi.
3. Set the size of the video clip to 104 pixels wide by 120 pixels high. The clip should not start automatically.
4. For browsers that do not support embedded media clips, display a link to the mandel.avi and mandel.mov files. Be sure to indicate the size of the video file as well as the format. Hint: Use the noembed tag which you can learn about in the text book or (external link).
5. Locate the div element with the id "applet" and insert a Java applet for the Mandel.class file.
6. Set the size of the applet to 350 pixels wide by 280 pixels high.
7. For browsers that do not support Java applets, display the text "Your browser does not support Java applets".
8. Save your changes to the file.
9. Open the Web page in your Web browser and verify that the video and applet play correctly (you may need to resize the space allocated to the applet.)

Two-way traffic: adding a form to a web page

---

Design and build a web page with a form to collect requests from potential students for information on courses offered by CSSE at UWA.

Make the prospective student request page so that it fits in to the CSSE web site in terms of links and style.

We need the following information collected: name of prospective student, their email, optional address, optional contact phone number, type of student (local TEE, local mature, international), expected start date, whether they are undergraduate or postgraduate and which courses they are interested in, and any special requests or comments.

The courses available are: BCompSci, BCM, BSc(CompSci), BE(Software), Combined Bachelor degrees, Diplomas, Graduate Certificates, Masters in IT, Masters in Computer Science. Students can be interested in more than one course.

Please use an appropriate type of input tool for each piece of information: input text box, radio buttons, check boxes, text areas etc.

Also use labels and other HTML layout controls to make the page convenient and straightforward to use.

To help you develop the form there is a server-side script available at which you can send your form's information to. It will tell you what variables your form has sent and what values it has given to each form.

Reflection and Review Time

---

We do need time to digest the materials covered so far in the lectures and the labs. So here is a good opportunity for you to

• complete the previous labs if you haven't done so
• implement and test out all the examples in the lecture notes
• be on top of the submission two
• for your Project final submission, you should start forming into groups if you prefer to work in pairs. Discuss your design ideas and show your initial page design to the lab demonstrator. Read the and the to find out what is required for the project.
• study for the forthcoming .

With our study so far, you should be comfortable at:

• converting relative URLs into abosulate URLs;
• the use of <a name=""> and <a href="">;
• writing simple HTML pages using <h1> ... <h6>, <p>, <table>, <img>, <a>, <ul>, <ol> and <dl>, without having to refer to a reference;
• the three ways of incorporating CSS into HTML documents and be able to use sensible type of style sheets for site, page and inline content presentation.
• writing style sheets using simple class selectors, id selectors, element selectors and pseudo-class selectors.
• using the basic form controls such as textbox, selection list, textarea, check box and radio buttons without having to refer to a reference.

The midterm test will contain short answer questions for explaining bsic concepts and some questions on HTML and CSS coding.

Note, if you try to use the code in the lecture notes, it is better to write the code up again for getting yourself familarise with the syntax of HTML and CSS. Moreover, cut and paste from the powerpoint program will give you problems, as the quotation marks in powerpoint are not recognised in plain text files. This subtle difference of the quotation marks may make you think that the lecture examples do not work. So if you do cut and paste, make sure to replace all the quotation marks by the just entering normal quotation marks through the keyboard.

The University of Western Australia

School of Computer Science and Software Engineering

University information

This Page

Website Feedback:
wei(at)csse(dot)uwa(dot)edu(dot)au