Dreamweaver: Lists And Image Maps

Lists and Image maps

Ordered and Unordered Lists

There are two types of lists available with HTML - Ordered and unordered. An ordered list is a sequential list, either by number or by letter. An unordered list is a bulleted list. Both are quite simple to create in Dreamweaver.

To create the list, click on the proper icon in the Properties Toolbar:

 - Ordered List

 - Unordered List

The paragraph you are working on will become either a numbered list or a bulleted list. To create a new bullet, or number, just hit enter. If you would like an extra line below the bullet, hit SHIFT-enter. Once you hit enter again, you will see another bullet or number. When you have finished your list, just hit enter twice. The list will disappear and you'll be able to start on a new paragraph.

Bullets and numbers are not the only way to list information. You've probably seen letters, squares, etc. to present information on other pages. Modifying your list is almost as simple as creating it.

Once you have created your list, go to the Text Menu, select List, and select Properties.

Here you can customize your list. The top menu, List Type, gives you the option of having a Bulleted List, Numbered List, Definition List or a Menu List.

Once you have defined your list, you can define the Style of your list. For Bulleted Lists, you have the following style options:

For Numbered Lists, you have the following style options:

You can also specify a starting number for Numbered lists in the 'Start Count' field.

Unfortunately it isn't easy to nest lists in Dreamweaver. This still needs to be done in the HTML itself, so it might be a good idea to learn the code for lists if you plan on using them extensively.

Image Maps

Dreamweaver offers web designers the capability of creating image maps on the fly. All the tools required are built in. All that is required is to bring the image in and define the different clickable areas.

Once the image has been imported, you'll see a few Map options if you expand the Properties Toolbar:

You can start your work by giving the map a name in the blank field to right of the word Map (a name is required). Then start defining your areas by selecting one of the hotspot tools (the blue shapes on the toolbar). Simply click and drag around the area you would like to make 'hot'. F

Once the area has been drawn, the Properties Toolbar changes:

The 'Link' field is where you enter the url you wish to link to. For this example, we entered http://www.w3nation.com/. The 'Target' field is just like the standard target for any link. You can use the Presets included in Dreamweaver, or give the target your own name by typing in the field. The 'Alt' field is the Alternative text that will be displayed if graphics are turned off.

To complete the map, just do the same for all the other areas you wish to be clickable.

If you have Invisible Elements turned on, you will see an icon next to your image map. Do NOT delete this! This contains the coordinates of your imagemap. If you delete this, the map will not work.

More about Image Maps

There are three different Image Map tools. There is the square tool, as demonstrated before, the oval tool and the polygon tool.

The oval tool works in the same fashion as the square tool. You simply use it do specify a circular hotspot. This tool only draws a perfect circle.

The polygon tool is more flexible with a nonlinear type of design. For example, if you had a picture of a person that you would like to be clickable, this would be the tool to use. With this tool you can click from one area to another. The tool follows your mouse clicks with a path. It will continue following until the path is closed.

The Pointer Hotspot tool is used for selecting the hotspots already defined. Once they are selected they can be moved by dragging with the mouse or using the arrow keys on the keyboard. You can also delete an existing hotspot by using the Delete key.

Once you have selected a hotspot the Properties Toolbar changes to the information defined for that hotspot. If you wish to modify your map later, all you have to do is select it and make the change necessary.

Dreamweaver has 2 buttons on the toolbar that are used for indenting and outdenting text.

The arrow pointing to the right indents the text and the arrow pointing to the left outdents the text. To activate an indent, simply click on the button while your cursor is in the paragraph you would like indented.

The way the text is indented is probably different from what you might expect if you're used to word processing programs. There is no Indent feature within HTML, so Dreamweaver uses the <BLOCKQUOTE> tag. This does create an indent, but it also creates a block of text. See the sample below:

Sample indented text. Sample indented text. Sample indented text. Sample indented text. Sample indented text. Sample indented text. Sample indented text. Sample indented text. Sample indented text. Sample indented text. Sample indented text. Sample indented text. Sample indented text. Sample indented text. Sample indented text. Sample indented text.

As you can see, the text is not only indented on the left, but some space is taken from the right as well. If you would like the text to be blocked further, you simply click on the indent button twice. Here is a sample of the same text with two indents:

Sample indented text. Sample indented text. Sample indented text. Sample indented text. Sample indented text. Sample indented text. Sample indented text. Sample indented text. Sample indented text. Sample indented text. Sample indented text. Sample indented text. Sample indented text. Sample indented text. Sample indented text.

The way Dreamweaver accomplishes this is by nesting a <BLOCKQUOTE> tag within another.

Text will stay indented until you specify otherwise. This includes new paragraphs in your document. In order to return the text to the far left, you must click on the Outdent button.