Visual Aids are user interface elements that make it easier to work with Web pages. Expression® Web offers nine different Visual Aids to make it easier to position items and locate elements on the Web page. Visual aids help you see empty or invisible elements and elements with hidden borders. You can also use visual aids to find elements that have hidden or invisible styles, as well as 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.
To access Visual Aids; select Visual Aids from View menu and select the desired visual aid from the sub menu.
NOTE: The Status bar displays the current status of the Visual Aid. You can turn it on or off just by double clicking on the Visual Aids area of the Status bar.
Following Visual Aids are available on the Visual Aids menu:
1. Block Selection= This is enabled by default. Expression® Web displays a block selector for HTML blocks. A Block selector is a small tag indicator, when you hover your cursor in a block a dotted rectangle appears around the tag. When you select the block a shaded area is displayed indicating padding around the element.
2. Visible Borders= This selection displays dotted borders around HTML elements that don’t have borders. For instance, a table in Expression® Web, Visual borders will render a dotted border around every cell even if the table has no border.
3. Empty Containers= The Empty Containers Visual Aid displays borders around certain elements that act as containers for other elements. For example, an HTML form is visible by default in Design View, even when the form has no controls in it.
4. Margins and Padding= This shows the margins and padding around all elements; margins appear in red and padding appears in blue. You cannot use Margins and padding visual aid to change margins and padding.
5. CSS Display: none elements= Shows elements that are hidden by a style that includes display: none.
6. CSS Visibility: hidden Elements = Shows elements that are hidden by a style that includes visibility: hidden.
7. ASP.NET Non-visual Controls= Shows a rectangle for ASP.NET controls which don't display anything.
8. ASP.NET Control Errors= Shows an error message when an ASP.NET control encounters an error, such as not connecting to a data source.
9. 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.
The Browsers read the Document Type (DocType) information to determine which version of HTML is used in the web page. You can set a default DocType so that Microsoft® Expression® Web automatically inserts a DocType declaration on all the new pages. You can also choose not to automatically insert a DocType declaration on new pages.
The DocType declaration on a web page also determines the schema Expression Web uses to coerce incompatibility notifications and IntelliSense for HTML and script. Expression Web uses the secondary schema if a page has an unrecognized or missing DocType. If there is an incompatibility or error in your HTML, Expression Web displays it as an icon in the status bar. The Code Error Detected icon indicates an error in the code on your page. The HTML Incompatibility Detected icon indicates an incompatibility with the HTML schema you selected.
To set the default DocType declaration that Expression Web inserts when you create new pages
On the Tools menu, click Page Editor Options.
In the Page Editor Options dialog box, on the Authoring tab, select the DocType and Secondary Schema you want to use for all new files.
NOTE: To prevent Expression Web from inserting a DocType declaration, in the DocType box, select None.
To change the DocType declaration in an existing page
In Code view, in your page, edit the DocType declaration. Here's an example of a DocType declaration.
<! DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
When you format items in a web page, Microsoft® Expression® Web produces that formatting by generating new styles in an internal cascading style sheet (CSS) or modifying existing styles in the CSS.
Expression Web generates and modifies styles for you in Auto mode (default) or Manual mode. No matter which mode you choose, when you format an item that doesn't have a style, Expression Web generates and applies a new style for you. For example, if you select a paragraph of plain text in your web page and apply color to the text by using the Font Color button in the Common toolbar, Expression Web creates a new style and applies it to the text to format its color. If you then format another property of that same paragraph of text, such as the paragraph's font-family, Expression Web adds a new property declaration to the generated style it just created.
In Manual mode, you can write your own CSS to simplify your design process. You also have additional control provided by the Style Application toolbar.
TIP: If you're new to writing CSS, use Auto mode. If you're an experienced CSS author that can write your own CSS, use Manual mode to streamline your design process.
Conclusion
We have learnt about the various task panes, menus and toolbars, status bar and visual aids. We also covered how to set various properties and Document Type information. You have now gathered basic knowledge of the interface and how to start working in this interface.