Adding DIVs

The DIV element is a generic box in which you can insert content, just like you did in table cells! In this next exercise you will create boxes to divide the page into discrete areas. You will give each of these boxes a name that describes its function and meaning in the document. For example, the top DIV is named "header" because it includes header information. Giving each area of the page a descriptive name conforms to the web standards concept of the semantic web.

Adding a DIV Header Tag:

With the Simpson Web page open, click somewhere within the "The Simpson" heading text to select it.

In the tag selector in the status bar at the bottom of the Document window, click the <h1> element to select it.

H1 Selected

Locate the Insert panel. If you do not see it on screen, choose Window > Insert to make it visible. It should appear on the right side of your document window.

Select the Common category of the Insert panel if it is not already selected

Click the Insert Div Tag icon. Depending on which workspace you are using, you may not see text that describes the icon.

Insert DIV Tag

In the Insert Div Tag dialog box, type header for the ID. Note that you are using an ID instead of a class. In the image floating exercise you used a class, which can be used multiple times on one page. IDs must be unique and you can only use them once per page. Because each area of the page will be unique, the ID is the appropriate choice.

Header

Click OK.

Dreamweaver adds a dashed line around the area that now falls within the DIV or division of the page. The line is just a visual effect to help you see where each DIV on the page lies. You will not see this line in your browser. (If you do not see the dashed line, you may have turned off the CSS Layout Outlines under the Eye icon in the Document toolbar.)

If you were to look at the code for the new DIV, you would see that the heading is nested inside a "box" much like a table cell:

Header Code

I also want to include the family photo to the header section. An easy way to do this is to go to the code section by clicking the Code view button Code and cut the </div> tag and place it under the family picture as shown below:

Extend Header

Adding a DIV to Linked Text:

Place your cursor anywhere in the line of link text.

Link Text

Select the p element in the tag selector at the bottom of the page.

P tag

Your link text should now be all selected because the text is embedded in a paragraph tag.

Link Text Selected

Select the Insert Div Tag icon in the Common category of the Insert panel.

In the Insert Div Tag dialog box, type sidebar in the ID field.

Side Bar

Click OK.

Adding a DIV to the Content Area:

Next you will switch to Code view so that you can select multiple elements. The header and sidebar were easily selectable in the tag selector because there was one parent element in each, an h1 and a p. The content region will have images and h2heading which are embedded in multiple paragraphs. The most reliable way to select everything from the opening tag of the first element to the closing tag of the last element is to make the selection in Code view.

Code

Click Code View at the top left side of the Document window.

Locate the first paragraph of text that includes the image code. Select everything from the opening p tag to the closing p tag right before the footer text. The text you need to select is shown below highlighted in blue.

Content

Click Design View at the top left side of the Document window to return to Design view.

Click the Insert Div Tag icon in the Common category of the Insert panel.

In the Insert Div Tag dialog box, type mainContent in the ID field.

ID

Click OK.

Adding a DIV to the Footer Paragraph:

Return to the Design view by clicking on the Design tab located at the top left section of the document window.

Design View

Place your cursor anywhere within the footer text.

Footer

Click the p element in the tag selector at the bottom of the Document window.

Paragraph Tag

Click the Insert Div Tag icon in the Common category of the Insert panel.

In the Insert Div Tag dialog box, type footer in the ID field.

Click OK.

Footer

Your page is now divided into four separate boxes (the header, sidebar, mainContent, and footer DIVs) that you will use with CSS to manipulate the layout. Dreamweaver gives you visual cues for recognizing where each DIV is located.

CSS