Dreamweaver 4: DIV, Image Map

The <div> tag is often used to place sections of a web page in a particular place on a page. A <div> tag often has an associated style class that defines the properties of the objects such as text that will be placed inside the tag and also its position on the page.

To create a new style for a <div> tag proceed as before. Click the New Rule icon in the CSS palette and complete the first few categories as before. Pay particular attention to Positioning:

Absolute positioning will enable a part of a page to be placed where you want it. Use the other properties such as Width, Height, Top, Left, etc. to define the dimensions and position of the style.

A style with position properties will probably be applied to a <div> tag. To insert a <div> tag choose Insert/Layout Objects/Div Tag and choose from the list of classes.

Once placed a <div> can be dragged around, in which case the position properties will be updated. If you are using the <div> tag to design a page you will probably not want to do this.

A number of <div> tags can be put together to make a page design. See here for more details.

Pseudo-Classes

The following code can be inserted directly into a CSS file to produce styling of link text inside the <a> (anchor) tag.

a:link {color: #0000ff; font-size:x-small; text-decoration:none; font-family:Verdana, Sans-Serif;}
a:visited {color: #000099; font-size:x-small; text-decoration:none; font-family:Verdana, Sans-Serif;}
a:hover {color: #ff0000; font-size:x-small; text-decoration:underline; font-family:Verdana, Sans-Serif;}
a:active {color: #999999; font-size:x-small; text-decoration:none; font-family:Verdana, Sans-Serif;}

Change the colour (color) tags to your own choice to suit your <body> background colour.

Image Maps

An image map is a series of links to other parts of a document that appear inside an image. Various 'hotspots' are defined on the image that the user can click on to jump to other parts of the same page or other pages in the site or outside it. Image maps can be used to create menu bars in graphics programs such as Photoshop or Fireworks or they can be used to make a graphical page with links from a single image rather than text or separate images.

To make an image map search Dreamweaver Help for the topic.

Return