Dynamic Web Templates and Visual Aids
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.
-
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.
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
Margins, Padding, and Dimensions
You can quickly add or remove width or height, or both properties for a block-level item by double-clicking a square resize handle on the selected item. You can also quickly set the margin and padding of any side of a block-level item by dragging the edge of an item or one of the line handles that extend from each corner of the selected item in Design view.
Margin on the left side of a picture
The resize handles appear in the middle of the right and bottom sides, and the lower right corner of a selected block-level item. You set margins by dragging an edge of an item or using the pink margin handles and set padding by pressing SHIFT and dragging the edge of an item or using the blue padding handles. The margins of an item appear shaded in pink and padded areas appear shaded in blue. As you drag, the new margin appears shaded in orange and the new padding appears shaded in green.
You can use these techniques on pictures, tables, layers, applets, inline frames, and block-level items, which include paragraphs, headings (<h1>, <h2>, and so on), lists and list items, forms and form elements, unpositioned divs, address tags, block quote tags, horizontal lines, and <center> tags. When you use any of these techniques, Microsoft Expression Web produces the formatting for you by creating either an inline style or a style that uses a class selector, depending on the associated style application settings.
The handles appear when you select the item or after you select a block-level item and then select one of the following: the dotted border that surrounds the item's block; the item's block-level tab, which appears at the top of the item in Design view; or the item's tag in the Quick Tag Selector bar. For example, if you click a picture, the handles appear immediately; if you select a block-level item, such as paragraph, the handles don't appear until you click the "p" block-level tab on the paragraph, click on the dotted line that appears around the paragraph's block, or click the paragraph's <p> tag in the Quick Tag Selector bar. In addition, you can't see the handles or the margin and padding shading of block-level items unless Block Selection is selected on the Visual Aids submenu on the View menu.
To set the margin, padding, or dimensions of a block-level item
-
In Design view, in your web page, select the item.
Line handles and resize handles extend from each corner of the item. If handles don't appear, do one or more of the following.
-
If you selected a block-level item, on the View menu, point to Visual Aids, and then click Show. On the View menu, point to Visual Aids again, and then click Block Selection.
-
Click the dotted line that surrounds the item's block.
-
Click the visual aid tab at the top of the item.
-
Click the item's tag in the quick tag selector bar at the top of the editing window.
-
-
Do one or more of the following:
-
To set a margin, drag either the pink margin handle or the edge on the side you want.
-
To set padding, press and hold SHIFT, and then drag either the blue padding handle or the edge on the side you want.
-
To add or remove only the width property, double-click the resize handle on the right side of the item.
-
To add or remove only the height property, double-click the resize handle on the bottom of the item.
-
To add or remove the width and height properties, double-click the resize handle on the lower right corner of the item.
-
To create a Dynamic Web Template
-
On the File menu, click New.
-
In the New dialog box, on the Page tab, in the left column click General, in the center column click Dynamic Web Template, and then click OK.
To create a Dynamic Web Template from an HTML file
-
Create or open an HTML file and do one of the following:
-
Add one or more editable regions to the page. On the File menu, click Save.
For more information, see the procedure "To add an editable region to a Dynamic Web Template."
Because editable regions have already been added to the page, by default the file name extension will be .dwt.
-
On the File menu, click Save As. In the Save as type list, click Dynamic Web Template, and then click Save.
-
To add an editable region to a Dynamic Web Template
-
Select the element that you want to define as an editable region.
Note:
If you do not select an element, the element preceding the location of the cursor will be defined as the editable region.
-
In Design view, right-click the Dynamic Web Template, and then click Manage Editable Regions.
—Or—
On the Dynamic Web Template toolbar, click the Manage Editable Regions button .
-
In the Editable Regions dialog box, in the Region name dialog box, type a name for the editable region and then click Add. Repeat to add additional editable regions.
-
A new editable region appears on the page. When an editable region is selected in a .dwt file, it has an orange border and includes a tab with the name of the region.
To view the editable regions in a .dwt file when the regions are not selected, make sure Visual Aids are turned on. On the View menu, click Visual Aids, and then click Show. After Visual Aids are turned on, on the View menu, click Visual Aids, and then click Template Region Labels. For more information about visual aids, see Visual Aids above.
To rename an editable region in a Dynamic Web Template
-
Select the editable region that you want to rename.
-
In Design view, right-click the Dynamic Web Template, and then click Manage Editable Regions.
—Or—
On the Dynamic Web Template toolbar, click the Manage Editable Regions button .
-
In the Editable Regions dialog box, in the Region name box, type the new name, and then click Rename.
To remove an editable region from a Dynamic Web Template
-
Select the editable region that you want to remove.
-
In Design view, right-click the Dynamic Web Template, and then click Manage Editable Regions.
—Or—
On the Dynamic Web Template toolbar, click the Manage Editable Regions button .
-
Make sure that the editable region that you want to remove is selected, and then click Remove.