When you work on pages in Design view, you may sometimes want to modify page elements that are not usually visible in that view, such as content regions or the margins and padding. In this case, visual aids make it possible to view all of these invisible or blank page design elements, thus giving you complete control of page structure and layout. Visual aids make it easy to work on the content, design, layout, and structure of the page.
This article introduces the visual aids, describes what each visual aid does, and shows you how to quickly show or hide them when you work in Design view.
In this article
What are visual aids?
Visual aids are indicators that you can display on a page in Design view to see all invisible and empty elements and properties on the page. You can use visual aids to identify elements that have invisible and empty styles, such as blank HTML tags and invisible Microsoft ASP.NET controls. Visual Aids also allow you to see the margins and padding of page elements, content blocks, and content regions (only on ASP.NET pages and Dynamic Web Templates) on a page.
When you hide the visual aids, the page layout in Design view closely matches the page layout in the browser, as shown in the following illustration.
In the next illustration, the same page — still in Design view, but now showing the default visual aids — appears differently.
When you show the visual aids, some of the elements are displayed in dotted borders in various colors. Each dotted border represents a separate visual aid. In the preceding illustration, for example, the Visible Borders visual aid shows the content regions in pink dotted borders, table elements in white dotted borders, and uneditable regions shaded in gray. Depending on which visual aids you select, you can also see the content regions, elements marked with hidden or invisible styles, invisible ASP.NET controls, and ASP.NET control errors on a page. The next section describes each visual aid in detail.
What does each visual aid show?
This section identifies the visual aids that are available in Microsoft Office SharePoint Designer 2007, describes the use and behavior of each visual aid (and also any limitations on its use), and illustrates the appearance of each visual aid in Design view.
A page in a Microsoft SharePoint site typically has many page and design elements. To better isolate and see what each visual aid does, it might help to create a blank page and insert a few elements.
The Block Selection visual aid is displayed in two ways:
When you click inside a block, a dotted rectangle appears around that block.
The corresponding tag name also appears in the Quick Tag Selector. You can click this tag to select the block and show the margins and padding.
The Block Selection visual aid can be used for the following tags only: paragraph, list, list item, form, unpositioned div, address, block quote, horizontal line, and center.
Note: The dotted rectangle, margin, and resize handles are available for some elements such as images, positioned divs, and tables, even when the Block Selection visual aid is not selected.
You can select a block in the Quick Tag Selector by clicking the arrow and then clicking Select Tag. When you do so, the block's margins and padding are displayed, along with handles. You can use the handles to resize the block and its margins and padding. Margins appear shaded in red, and padding appears shaded in blue, as shown in the following illustration.
Note: Selecting a block by using the Quick Tag Selector displays the block's margins and padding, even if you do not show the Margins and Padding visual aid.
1. The Quick Tag Selector displaying the corresponding tag name
2. Margins displayed shaded in red
3. Padding displayed shaded in blue
4. Resize handle for the block
5. Resize handle for the margin
To move absolutely positioned elements (such as images) around on the page, you can drag them. You can drag the tag that corresponds to the block of that element anywhere on a page.
The Visible Borders visual aid displays dotted borders around the elements that have hidden borders or no borders on a page. Visible borders are displayed around the elements such as tables, positioned elements, form containers, and content regions. Intrinsically styled elements such as images do not display visible borders when the visual aid is selected. Visible borders are also displayed around sized elements (elements with a specific width and height) that have no borders. When you resize a paragraph and then click elsewhere on the page, the paragraph element displays visible borders.
On a master page, the content regions display pink dotted borders, table elements display white dotted borders, and uneditable regions are shaded in gray, as shown in the following illustration.
1. Content regions display pink dotted borders.
2. Table elements display white dotted borders.
3. Uneditable regions are shaded in gray.
The Empty Containers visual aid displays a dotted rectangle around empty elements on a page, as shown in the following illustration.
Note: In Design view, Office SharePoint Designer 2007 collapses empty elements because most browsers do. When you show the Empty Containers visual aid, all empty elements on a page are displayed, which may change your page layout in Design view but not in the browser.
1. Empty elements on a page enclosed by dotted rectangles
Margins and Padding
The Margins and Padding visual aid displays the margins and padding around page elements. Margins appear shaded in red, and padding appears shaded in blue. This visual aid displays the margins and padding of every page element.
Note: You cannot use the Margins and Padding visual aid to modify margins and padding. Instead, select the element and use the Block Selection visual aid, which allows you to drag the resize handles.
1. Padding displayed shaded in blue
2. Margins displayed shaded in red
CSS Display:none Elements
The CSS Display:none Elements visual aid displays the elements that are defined in the page's corresponding style sheet as display:none.
Note: Such elements do not appear in the browser.
CSS Visibility:hidden Elements
The CSS Visibility:hidden elements visual aid displays the elements that are defined in the page's corresponding style sheet as visibility:hidden.
Note: Such elements are invisible in the browser, but their layout remains visible in Design view.
ASP.NET Non-visual Controls
The ASP.NET Non-visual Controls visual aid displays all invisible ASP.NET controls — for example, HiddenField or Data Source controls — on a page.
1. Appearance of ASP.NET Non-visual Controls on an ASP.NET page
ASP.NET Control Errors
The ASP.NET Control Errors visual aid displays an error message when an ASP.NET control on a page encounters an error (such as the failure to connect to a data source, or the presence of incorrect page properties).
Template Region Labels
The Template Region Labels visual aid displays a purple border around content regions and also displays a placeholder indicating the name of each content region.
Note: This visual aid can be shown only on pages that are created from either ASP.NET master pages or Dynamic Web Templates.
1. Content regions outlined in purple on an ASP.NET master page
Show or hide the visual aids
When you are working in Design view, you can quickly show or hide the visual aids. For example, you might want to show them so that you can more easily work with content regions. Or you might want to hide them so that your page layout in Design view closely matches the page layout as it will appear in the browser.
Open a page for editing in Design view.
Note: The Visual Aids command is available only in one of the Page views. Also, the Visual Aids command is not available for files such as style sheets where you do not work with design elements.
To show or hide the visual aids, do any of the following:
On the View menu, point to Visual Aids, and then click Show. This shows or hides all visual aids that are selected on the submenu. To show or hide each visual aid, click it on the Visual Aids submenu.
Press CTRL+/. This shows or hides all visual aids that are selected on the Visual Aids submenu.
Double-click the visual aids indicator on the status bar. This shows or hides all visual aids that are selected on the Visual Aids submenu.
Note: The visual aids that you select on the Visual Aids submenu remain selected until you choose not to show them. This means that when you press CTRL+/ or double-click the status bar indicator to show the visual aids, you always see the visual aids that are currently selected on the Visual Aids submenu.
The following illustration shows how to show or hide the visual aids.
1. Click Show to show or hide all visual aids that are selected.
2. Click any individual visual aid to show or hide it when Show is selected.
3. Appearance of selected visual aids. These are also the default visual aids.
4. Appearance of visual aids that are not selected.
To quickly find out whether Visual Aids is turned on or off, you can check the status bar. You can also double-click the Visual Aids section of the status bar to switch the Visual Aids setting between On and Off.
Also, when you rest the pointer on the Visual Aids section of the status bar, a notification explains how the current status of the Visual Aids setting affects your page layout in Office SharePoint Designer 2007.