Digital media technology, autumn 2007

Exercise 3 (24.9.-28.9.)

In prevous exercises we built a home page for Firma OY using frames for layout. The functionality of the page relied on the use of the file system folders and the possibility to load material on separate frames. This time our goal is to build a similar page without frames. File http://www.cs.helsinki.fi/u/laine/dime/s07/h07_3_1.html contains the material to be shown. An example of a product sheet is in file http://www.cs.helsinki.fi/u/laine/dime/s07/tuote_1.html. To obtain some functionality without scripts and actual programming the product sheet will be shown in an inner frame (iframe).

1. Position the elements according to the image in exercise 2.1. You probably need to add at least div-elements in the original contents file so make copies of the files above. Note: The product menu need not function the same way as discussed in last week's exercises.

2. Improve the layout as follows:

• Use Arial or some sans-serif font. The name of the company may use some other more fancy font..
• The name of the company should be blue and centered
• Contact information should be right justified, and the contact information part of the page should have a background color different to the other parts of the page.
• The title of the product menu should have a background color and borders or a background image.

The product sheet should have

• A centered title on a background image as wide as the frame
• The image of the product as 250px wide and 2cm from the left edge of frame.
• The price of the product in a box drawn on the right hand side of the image.
• The description of the product in a box with 2cm margin on both left and right, a thin border and the text 10% smaller than the base text. There shoud be empty some empty space between the border and the text and a light background color.

3. There are many ways to implement menus with CSS. Study them and implement the menus on the page so that

• Product groups are indicated with a folder like marker image. Link text is not underlined. The active item is marked but earlier selections are not. (Note: The fuctionality of the product group mehu is not very good - this should actually work so that that only the items in a selected group are visible and a link is not needed. This kind of behaviour may be obtained for example with JavaScript. How?
• Items of the product menu are on separate lines without any list marker. The selected item is marked.
• External links on the right are button like elements. Active item is not marked. The button seems to go down when the cursor is on it.

4. Product group and product menus may be implemented in many different ways. Here we have two separate menus. A two level menu is one choise. They may be implemented in CSS or as CSS and Javascript combinations. Stydy some alternativest (Internet). Find out why CSS-solutions do not necessarily work on Internet Explorer.

5. Traditionally JavaScript has been used to carry out checks on form data before submitting the form. Construct a small form that has a date field and a numeric field. Write Javascript to chect the styntax of these fields. The common way to inform the user about errors is a pop-up alert-box. This is not consides as good user interfase design. You may inform about errors also on the form itself for example by making a hidden error message visible. Use this better way.