Introducing the document tree

A document tree is very much like a human family tree—it contains parents, children, and ancestors that relate to each other as they would in your family tree. In the document tree, however, these relationships are represented by elements, such as lists, title elements, and paragraphs.

The sample files that accompany this article include a page called tree1.html; open this page in Dreamweaver Design view. It contains an unordered list, an h2 element, and a paragraph that contains an em element (see Figure 1).

Figure 1. Sample file tree1.html in Dreamweaver Design view

Figure 2 shows the structure of the tree1.html document drawn as a document tree. You can see that each element on the page bears a relationship with the body element, while the p, ul, and h2 elements reside in their own family tree branches and bear no relationship to each other. The elements that show below each of these elements are related to their parent—em is a child of p and the li elements are children of the ul element. The h2 element is a bit of a lonely old soul having no relatives at all.

Figure 2. Document tree view 1

You can demonstrate how color is inherited by setting a color property and value against the body. If no color values have been set, then generally your text color will default to black. This is represented by the colored (black) boxes.

Page 2 of 4

Previous Page

Next Page