of the navigational elements to the Nav layer. [View full size image]   Finally, let's add the content layer. Again, you can accomplish this task by clicking the Insert Div Tag icon in the Insert bar. When the Insert Div Tag dialog appears, choose the After Tag option from the Insert menu, choose the <div id="Nav"> option from the menu that becomes enabled, and choose the Content option from the ID drop-down menu. Click OK. The new layer is added below the Header layer but just to the right of the Nav layer. With the layer firmly in place, you can add the content that will fill that area. For instance, you might want to add the subheader_about.gif image as the subheader within the layer. You might also decide to add the text contained in the welcome.txt file in the Assets folder. Next, you might want to add the intranetsymbolism.gif image so that it appears as though the text wraps around it. When you've finished, the result should closely resemble Figure 11.17. Figure 11.17. Add text and images to the new Content layer. [View full size image]   With your design complete, test the page in a browser by choosing the Preview in Browser option from the Document bar or by pressing F12. As you'll see, the design renders without problems (refer back to Figure 11.1). Of course, our design efforts don't have to stop here. We might want to create another layer with associated properties for our company events. Furthermore, we might want to add yet another layer with associated properties for the footer of the page. As you can begin to see, the design and implementation is simple. Even better than the implementation is what has been added to the HTML. Switch to Code view. And notice that the code is much cleaner and is minimized to roughly 15 lines of code as opposed to the 100 or so lines which was the case when we were working with tables. Converting Layers to Tables for Backward Compatibility In the previous sections, we used layers to create a standards-compliant, table-less web page. Although the design was simple to create, it doesn't do us or our users much good if they're using older browser versions such as Netscape 4.x. As you saw back in Figure 11.2, the page doesn't look very good in Netscape 4. To solve this problem, we have to re-create the site using a backward-compatible model in tables. Before you become frustrated at the thought of having to rebuild the page using tables, know that there's any easy and automated way of accomplishing this task in the Convert Layers to Tables feature. Using this feature in conjunction with the Check Browser behavior, we can guarantee that our users will see the appropriately formatted page regardless of what browser version they are using. To run through this process, choose Modify, Convert, Layers to Table. The Convert Layers to Table dialog appears, similar to Figure 11.18. Figure 11.18. The Convert Layers to Table dialog facilitates the process of converting our layers-based design to one that uses tables.   The following functionality is exposed in the Convert Layers to Table dialog: Table layout: Most accurate: Clicking this radio button creates a cell for every layer, plus an additional cell for any spacing required to fill out the area. Table layout: Smallest: Collapse empty cells: Clicking this radio button specifies that the layers' edges should be aligned if they are positioned within the specified number of pixels. We'll choose this option and leave the pixel width at the default of 4.