act as containers for the content. The properties we've outlined will serve as the formatting and positioning attributes for the <div> tags we'll add next. Inserting DIV Tags Now that the style rules have been defined for each section of the page, we can start adding the <div> tags that will serve as containers for our content. Because we've already outlined the style rules using ID selectors in an external style sheet, we need only to insert three <div> tags into the page with IDs that match the ID selector names we created. To demonstrate this, let's insert a <div> for the Header portion of our page. You can do this by clicking the Insert Div Tag icon located second from the left in the Layout category in the Insert bar. Clicking this icon launches the Insert Div Tag dialog (see Figure 11.14). Figure 11.14. Use the Insert Div Tag dialog to create a new <div> tag in the page.   Although the dialog allows you to enter a class name and pick an insertion point for the tag, all we care about is entering the ID name that represents the ID selector we've defined within our style sheet. Because we're creating the header of the page, select the Header option from the ID drop-down menu and click OK. The layer is created, complete with the dimensions, placement properties, and the background image we defined. By default, Dreamweaver adds the text Content for id "Header" Goes Here within the layer. Select this text and delete it so that we can add the header.gif image into the layer. When you've deleted the text, drag the header.gif image, located in the Images folder, into the layer. The result of the design resembles Figure 11.15. Figure 11.15. Add the header.gif image into the Header layer. [View full size image]   Now you're ready to create the second <div> tag that will define the navigation layer. To do this, click the Insert Div Tag icon located in the Layout category of the Insert bar. When the Insert Div Tag dialog appears, select the Nav option from the ID drop-down menu and click OK. As you'll see, the Nav layer is added just below the Header layer. Again, remove the Content for id "Nav" Goes Here text so that we can begin to define the navigational elements that will appear within this layer. When the placeholder text is deleted, let's add the first navigation element, Home, to the layer. Do this by following these steps: 1. Add the icon_arrow.gif image to the layer. 2. Select the image, add a V Space value of 2, and choose the Absolute Middle option from the Align menu in the Properties Inspector. Setting these two properties gives you some spacing between arrow images vertically in the layer. Also, by setting the alignment to Absolute Middle, we'll be able to add our Home link just to the right of the image so that it lines up to the absolute center of the arrow image. 3. Select the arrow image, copy it, place your cursor next to the image, press Shift+Enter to create line break, and paste. Repeat this process a few more times until you have a total of five arrows spanning vertically down the layer. 4. Insert the text Home just to the right of the first arrow image. 5. Highlight the text and type the link index.htm in the Link text box in the Properties Inspector. Also choose the Link option from the Style menu in the Properties Inspector to associate the correct style rule for the navigation link. Now you can add the rest of the navigation elements: HelpDesk (helpdesk.htm), Company Directory (companydirectory.htm), Employee Store (employeestore.htm),