The area at the bottom of the document window is referred to as status bar and, as with the status bar found in the bottom left of your web browsers window, it is used to display useful information. However, Dreamweaver's status bar is interactive: the details it displays are also options which can be used to select and change elements on the page or, indeed, the document window itself. The status bar has three main components: the tag selector, the window size pop-up menu and the download size/speed indicator. There are also three tools: the select tool, the hand tool and the zoom tool. In this tutorial, we will focus on the tag selector.

Selecting elements with the tag selector

The tag selector is a wonderful visual utility which displays a hierarchical list of HTML tags starting from the currently selected element (which is displayed on the right of the list) and working back to the element(s) which contain it. The BODY tag, which contains all elements on the page, is shown on the left of the list. This, in itself, is useful feedback. However, in addition, if you click any item in the list, the corresponding HTML element is immediately selected on the page.

In the Flash movie below, notice how the contents of the Properties change each time we click on a tag in the tag selector. This is because each click selects a different element within the hierarchy of elements on the page.

Selecting an item using the tag selector is often preferable to clicking on an object. When you click on some objects to select them, it is very easy to accidentally alter their attributes. For example, if you click on the border of a table to select it, you may accidentally change its width without even realising it. For this reason, you will find many references to the tag selector during our Dreamweaver training courses.