TDDI48 Part 2: Design and Layout

Written by Jonas Kvarnström with modifications for 2006–2007 by Martin Magnusson. Please report any bugs, inconsistencies or vague requirements as soon as possible.

In the second part of the project you will think up and implement a design for your forum using HTML and CSS. It is much easier to change the layout and organization of a simple set of static HTML pages than completely functional Java or JSP pages that generate HTML on the fly, so you can save time by deciding how the forum should look before implementing it. Later, the static pages will serve as reference or as starting points for JSP pages. The steps for this part are listed below.

  1. Look at existing forums.
  2. Implement a design in HTML.

Step 1: Look at existing forums

The best way to get going is probably to take a look at one of the existing online forums while thinking about how your own forum could look. See for example MozillaZine or the IntelliJ Forums for examples of message boards, or the forums at Javalobby, which have a somewhat different look and feel where only one message is shown at a time. Drupal forums might also be interesting. Try not to get caught up in reading interesting posts though.

You can also look at some of the existing message forum systems, such as Yabb and phpBB.

While looking around, think about some design decisions that you will have to make and feel free to make sketches on a piece of paper or on the computer. Below is a list of points to consider.

Step 2: Implement a design in HTML

Start implementing your ideas using IDEA. Find the web resource directory you created in the web module wizard. We suggested you should call this directory "resources". If you can't find it, check the setting in File | Settings | Paths | Web Module Settings under "web resource directories".

Right-click the web resource directory in the Project or J2EE view of the Project pane, select New | File, and enter "index.html". Create a welcome page.

Once you are done, you can deploy it using Build | Make Project: Ctrl-F9. Then take a look at the deployment directory ~/resin/doc/tddi48 and its subdirectories. Notice that IDEA has copied index.html, web.xml, and the library JAR files to their intended places in the deployment directory.

Experiment with HTML and use CSS for styling. Create protoypes for at least the pages listed below.

Though it may seem like this is something you can do in 20 minutes and then go on with the actual programming, spending more time here will most likely save you time in the end. And don't forget, what you do here will come to good use as a template when you write JSP pages; it will not be thrown away.

Don't forget about the design and usability requirements and the correct HTML and CSS requirements described in the project introduction. You should also validate your page using the HTML validator as described in the HTML/CSS requirements.

(Continued in part 3 of the project...)


Jonas Kvarnström