Dreamweaver: Lists And Menus

Lists and Menus

You can add lists and menus to your document in order to give visitors a predetermined set of choices for a specific piece of information.

To insert a list or a menu either click on the button of the Form Objects Palette or select from the Form Objects menu off the Insert Menu. 

Not much of a list. You'll notice that the Properties palette has changed to reflect the different options available for Lists and Menus.

Here you can decide whether you would like it to be a list or a menu. The default setting is Menu and is what you saw in the example above
They look exactly the same, but you might notice that some of the Properties options are grayed out when it is a list. The difference comes into place when data is entered.

To add some choices to the list, click on the 'List Values' button of the Properties Toolbar.

Enter the first value by typing the name in the 'Item Label' field. This is what the user will see when the form is rendered on the page. You can then enter a value, which depends on the nature of the form. If this is a jumpbox, you would place a url in the value field. Other values will depend on the configuration of the Backend application used to parse the form.

To add a new value, simply click on the + (plus) button. You can then enter a new label and value. You can also get the same result by using the TAB key to move from field to field. It will automatically create a new value once it has reached the end of all existing values. To remove a value, select it by clicking once (highlight it) and click once on the - (minus) button.

You might be asking yourself how you can widen the field. There is no way save for entering longer data. The less amount of characters in the longest label, the smaller the menu. Since we only used 1 character, the menu is 1 character wide.

You can also have a choice preselected when the page loads by using the 'Initially Selected' field of the Properties Toolbar.

Now let's look at Lists. Click on the list button of the Properties Toolbar. You'll notice that the 'height' field and some others are no longer grayed out. The default height is 1, which is essentially the same as a Menu. It becomes a list when the height is changed. Here is a sample with the height set to 5.

Now all selections are visible. You can change the way the field is displayed by changing the height of the List. What if you wanted a visitor to choose between 20 values? You wouldn't want a list that was 20 lines high. For this you could keep the height at 5, or however many lines you prefer, but enter the extra values.

Now a scrollbar appears. You can also allow visitors to select multiple values by clicking on the 'Allow Multiple' checkbox of the Properties Toolbar.

Buttons

So now that you have the means to collect all this information, how do you send it? With a submit button. Dreamweaver offers a few options when it comes to buttons.

To insert a button either click on the button of the Form Objects Palette or select from the Form Objects menu off the Insert Menu. To have it submit the form, you can simply leave it as is. Where it goes was defined when you inserted the form.

You can change the text of the Submit button (as we have done in the sidebar) by changing the Label field of the Properties Toolbar.

Of course the button will stretch depending on the amount of characters in your button.

You can have the button perform one of two actions. The first is submit, which is the default. You can also have the button reset the form. This will clear all information on the form, which is essentially the same as refreshing the page. When you change the action to reset, the label changes with it.

Jump Menu

Dreamweaver offers the ability to easily add a Jump Box to a page. What is a Jump Box? It is a menu that sends a user to a specific URL. This can be extremely beneficial when it comes to adding navigation to a Web site.

The creative geniuses have made this task quite easy. All you have to do is click on the Insert Jump Box button  of the Objects Palette. A dialog box will appear. The rest is easy.

The process of adding selections is very much like adding values to a list or a menu. Specify the name (or label) in the 'Text' field. You then specify the URL (fully qualified) in the URL field. To add more selections, just use the + (plus) and - (minus) buttons.

Once you have added all the values, you can switch the order by using the buttons to the right of the plus and minus.

You can give the field a name, specify the Window to open the URL in (only applies to Framesets), and even throw a Go button in there.

Once you are finished you'll have a full blown navigation system. The Go button isn't even necessary. Visitors will follow the URL once it is selected.