can see, the options for both Code and Design view are combined into one menu. The only other feature that is added is the Design View on Top option. Selecting this option allows you to position the Design window on the top and the Code window on the bottom or vice versa. Figure 2.15. The View Options menu in Split Code/Design view. [View full size image]   Visual Aids The Visual Aids menu, like the View Options menu, allows you to customize how specific visual aids are displayed or not displayed in the Document window. A visual aid constitutes any piece of functionality within the Document window that aids in viewing elements that would otherwise not be shown within the browser. For instance, if you create a new table in the Document window with a border of 0 pixels, it would be difficult to add elements in the cells of that table because a border doesn't exist to allow you to see the boundaries of the specific cells. As an aid, Dreamweaver adds a temporary border at design time to allow you to visually see the outlining boundaries of the table's cells. At runtime, however, your table will still appear borderless. This temporary border that Dreamweaver adds is considered a visual aid. Like the table example, Dreamweaver includes visual aids for other pieces of functionality. These visual aids are available in this menu and are outlined next: Hide All Visual Aids: Select this option to hide all visual aids in the Document window. Layout Block Options: As you will see in Chapter 7, "Advanced Page Formatting Using Style Sheets," a layout block is an HTML element that can be positioned anywhere on your page simply by dragging the element around the Document window. Specifically, layout blocks are <div> tags that include the display:block, position:absolute, or position:relative attribute style. Although Dreamweaver provides numerous visual aids for viewing layout blocks, none are more obvious than the ones listed in this menu. For instance, you can choose the Layout Block Outlines option to show the outlines of all layout blocks on the page. You can also choose the Layout Block Backgrounds option to show or hide the assigned background colors for each layout block on the page. Finally, you can choose the Layout Block Box Model option to show or hide padding, margins, and so on for a selected layout block. Layer Outlines: Layout blocks, also known as layers in Dreamweaver, are similar to layers in print publishing programs in that they can be dragged and moved around freely on the page. Because layers are borderless by default, you can choose this option to temporarily show or hide the outline/border for the layer. Table Widths: A visual aid, discussed with more detail in Chapter 6, "Web Page Structuring Using Tables," table widths allow you to quickly see and manipulate the width of an entire table or the individual columns within a table. Table Borders and Frame Borders: As mentioned earlier in this section, choose the Table Borders option to show or hide the temporarily assigned border to a table when the border attribute is set to 0. You also can show or hide frame borders when the border attribute of a frame is set to 0. Image Maps: Choose this option to show or hide image maps on the page. This feature is discussed with more detail in Chapter 3, "Building a Web Page." Invisible Elements: Some HTML elements don't have visual representations in a browser. For example, anchor tags don't appear in browsers. However, it can be useful while you're creating a page to select such invisible elements, edit