Digital Media Technology (Spring 2009) / Exercises 3

These exercises focus on CSS and JavaScript. Some of the exercises will again be done in advance, and the rest in exercise group. There's little less things to do now, so do your project work!

Mirror the CSS example (in advance)

Swap the CSS lecture example document's #toc and #content the other way around, as in mirrored. Don't edit the XHTML file, only the CSS file! Note marginals and other paddings! Don't worry about the Finnish, you don't need to understand it :)

Add CSS to the JavaScript image gallery (in advance)

JavaScript lecture's image gallery has a BAD usability problem! Altough usability hasn't been discussed yet, the problem is obvious. Now the final version is translated into English!

1. Copy the gallery for yourself, for example as a zip file.
2. Think, how the usability problem can be fixed with only CSS; don't make changes to the XHTML document. Except: add a <link> element, which brings the external CSS into the document.
3. Make a CSS, which implements your suggested usabality improvement. If you can't think of any improvement, make so, that the image is on the left and other images on the right. An original implementation gives you a parrot stamp!

Fix the image gallery so that it won't broke (partially in advance)

The image gallery trusts for XHTML to follow certain structure. A better way to choose the images whose onClick event handler is set, could be to use a "class" attribute and choose elements based on it.

In advance

• What kind of problems the image gallery structure has?
• How would you fix the problems? By using class attributes, or, some other way? How would you use class attributes? What?

On the excercises (or in advance if you can!)

• Fix the gallery. Now you can also edit the XHTML.

Draw a DOM tree

Because we forgot to do this on lecture: draw the DOM tree of lecture's XHTML example document (link above)! Be careful: the tree can grow big, use your algorithm sense :)

Choose your project work topic!

If you haven't yet chosen a topic: now you have to choose!

Add CSS to your project work (or documentation). Perhaps some JavaScript, too!