One of the benefits of this revision is that the page now displays properly (IE5/Mac had some display problems with the pop-up menu, and some of the CSS properties were invalid because an underscore was used in the property name: that can cause problems with some browsers parsing the CSS), plus the main table is now accessible. I will soon revise it further to remove all tables used for layout, leaving only the data table. CSS will be used for positioning, as it should be. This will be much better for designers who plan to code in XHTML/CSS without using tables for layout, as you will be able to judge the basic CSS capabilities of your clients’ browsers at the wireframe stage (or test on non-desktop browsers, or screen-readers, depending on your clientele)

An additional benefit is lighter code which will render just that much more quickly (old: 10k, new: 8k), and I optimized the scroll.gif from 27k to

I want to point out that the technique that Xavier mentions results in a scrollable multi select box without checkboxes next to each item. To multi select the user must ctrl+click which is hard for some on the web. The reason for integrating the gif of the scrollbar with the table of checkboxes is to show a forms widget that avoids the ctrl+click interacton. Another problem with ctrl+click is that if you come back and click again, then you lose all of your selections. For forms that the users edits over and over, this could be very bad.

When we used it in a complex budgeting application where people needed to multi select from a list of about 100 items and often change their selections, this widget was eventually implemented in DHTML by our talented dev team. However, the fake scrollable protoype in our wireframe was user-tested to make sure that users were happy with it before the engineering team implemented it.

But, the reason that I included it in this Primer is to get your brain cells going about creative ways to integrate gifs with your forms elements and other elements of a wireframe to quickly approximate functionality. It’s not necessary to go out and spend hours buidling a widget you may or may not use and may not know how to build w/o help. Just do some clever hand waving and you’re set.

Thanks- it was still informative.

As follows in DreamWeaver:
1) from the Forms palette, “Insert List/Menu”
2) Add “List Values”, either from the Properties, or by right clicking on the list
3) In the properties, change Type from “Menu” to “List”. This enables the “Height” and “Allow Multiple” attributes.
4) Change “Height” as desired. If the number of “List Values” is less than Height, than a scrollbar will automatically appear.
5) Check “Allow Multiple”, which does the obvious.

…and that’s it. This has the benefit of being able to easily add as many List Values as you want without doing layout changes (as well as being more “real”).

Dan, thanks for the XHTML version. We do code in XHTML, but we haven’t been able to use CSS for positioning (and ditch tables for layout entirely) for large, public-facing sites yet. Maybe when Netscape 4.x finally dies. =)

Julie, great primer…I wish more IAs would use DreamWeaver!