Visual aids
Microsoft Expression Web includes many visual aids you can use in Design view. Visual aids help you see empty or invisible elements and elements that have hidden borders. You can also use visual aids to find elements that have hidden or invisible styles, in addition to ASP.NET controls that aren't visible on a page. Finally, you can use visual aids to see which tags are used around specific content, and you can see the size of margins and padding around your tags.
Note
Visual aids can change the appearance and layout of your page, so they should be turned off for your page to appear as close as possible to how it appears in a browser.
To show or hide a visual aid
With a web page open, do one of the following:
On the status bar, right-click Visual Aids and then click the visual aid.
On the View menu, point to Visual Aids, and then click the visual aid.
To show or hide all visual aids
With a web page open, do one of the following:
On the status bar, either double-click Visual Aids or right-click Visual Aids, and then click Show.
On the View menu, point to Visual Aids, and then click Show.
Visual aids
Block Selection Block selection shows in two different ways. When you put your cursor in a block, a dotted rectangle appears around the tag, with a tab displaying the name of the tag. You can click the tab to select the tag. When you select a block, margins and padding display. You can use the handles to resize margins and padding by using this visual aid. For absolutely positioned elements, you can click the tab displaying the name to move the object on the page.
Note
Block selection visual aids show for the following block elements: paragraph, list, list item, form, unpositioned div, address, block quote, horizontal line, and <center> tags. Other types of elements show the dotted rectangle and margin and resize handles even when visual aids are hidden.
Cursor in a block element
.gif "Cc295543.c4aa38c2-28a5-42b2-bcdc-3c2860b44a78(en-us,Expression.10).gif")
Selected block element
.jpg "Cc295543.7442abb3-09b3-4a33-aeeb-eb544dc7bed7(en-us,Expression.10).jpg")
**Visible Borders **Shows dotted borders around elements that have hidden borders.
.gif "Cc295543.2c4e0643-c7db-43b4-8006-1774f339c034(en-us,Expression.10).gif")
**Empty Containers **Shows a dotted rectangle around empty elements.
Note
In Design view, Expression Web collapses empty elements like most browsers do. When you turn on the Empty containers visual aid, empty elements will be displayed, which may change your page layout.
**Margins and Padding **Shows the margins and padding around all elements: margins appear in red and padding appears in blue. You cannot use the Margins and padding visual aid to change margins and padding. Instead, turn on the Block selection visual aid and use the handles that appear. For more information, see Set margins, padding, and dimensions in Design view.
.gif "Cc295543.d6385678-0769-44c3-a9e7-c17007aaeee3(en-us,Expression.10).gif")
**CSS Display:none Elements **Shows elements that are hidden by a style that includes display:none.
**CSS Visibility:hidden Elements **Shows elements that are hidden by a style that includes visibility:hidden.
**ASP.NET Non-visual Controls **Shows a rectangle for ASP.NET controls which don't display anything.
**ASP.NET Control Errors **Shows an error message when an ASP.NET control encounters an error, such as not connecting to a data source.
**Template Region Labels **Shows a border around editable template regions, including a tab with the name of the region, in pages based on Dynamic Web Templates or ASP.NET master pages. For more information, see Dynamic web templates.
.jpg "Cc295543.fd989dbc-5f1a-4cf0-85d4-379b0f11e9a2(en-us,Expression.10).jpg")