Saffron Stroke - Your Web Design Resource » tag

Quick Tag Editor Tool in Microsoft Expression Web 2

Minal — Sat, 04 Apr 2009 10:32:59 +0000

The Quick Tag Editor enables you to quickly add, modify or wrap a set of tags around other tag or set of tags while working in Design view or Code view of a web page. You also have access to IntelliSense in Quick Tag Editor.

To access Quick Tag Editor:

1. Switch to Design or Code view in your workspace and place the cursor at the position where you want to add or modify or wrap an HTML tag.

2. Do any one of the following:

· Go to Edit > Quick Tag Editor or

· key in the shortcut keys CTRL + Q or

· On the Quick Tag Selector bar located at the top of the document, select the tag you want to modify, click on the small arrow next to it and from the menu; choose Edit Tag, Insert HTML or Wrap Tag.

The Quick Tag Editor looks as shown below:

3. The editor gives you three options:

· Edit Tag – enables you to edit a current tag with its attributes and properties, along with addition of new tags.

· Insert HTML – lets you add HTML to the page

· Wrap Tag – lets you nest tags by adding tags inside the one selected by you.

4. The drop down menu on the left of the Quick Tag Editor lets you select either of the above mentioned functions. The next box is where you enter your HTML and the right most buttons; green right mark means Enter and the red cross means Cancel.

How can I use Visual Aids in Microsoft Expression Web 2?

Minal — Tue, 24 Feb 2009 10:00:19 +0000

Visual Aids in Microsoft Expression Web 2 help you with these

1. See elements that are empty, invisible or with hidden border and styles.

2. ASP.NET non-visual controls and errors.

3. Size of margins and padding around your tags.

4. Determine which tags are written around specific content in your page.

To show or hide a Visual Aid;

· Go to View > Visual Aids and then choose a Visual Aid or

· On the Status Bar right click on Visual Aids and then click on the Visual Aid.

Let us take a closer look at all the Visual Aids:

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 over 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.

Quick Tag Selector in Microsoft Expression Web 2

Minal — Sat, 21 Feb 2009 10:00:49 +0000

A Quick Tag Selector bar is located at the top of the editing window in your Expression Web workspace. It makes it easier for you to select, edit and remove tags while working in Design or Code view of a web page. To view the Quick Tag Selector bar, go to View > choose Quick Tag Selector. See image below:

The Quick Tag Selector is to be read from left to right to follow the order of the hierarchy of tags. For instance; in the image above, contains

which in turn contains

. Place your cursor inside the tag in Design view or Code view and that particular tag will be selected in the Quick Tag Selector bar at the top. The drop down arrow besides each tag in the Quick Tag Selector bar displays a menu as shown above. Let us see what each option does:

1. Select Tag selects the start and end tags along with the content of those tags.

2. Select Tag Contents selects only the content inside the tags.

3. Edit Tag… displays the Quick Tag Editor window, which enables you to add, modify or wrap tags.

4. Remove Tag removes the start and ends tags, leaving the content intact.

5. Insert HTML… displays the Quick Tag Editor window that lets you insert HTML into your web page.

6. Wrap Tag… displays the Quick Tag Editor window that lets you insert nested tags into a selected tag.

7. Tag Properties… opens the Tag Properties dialog box or task pane related to the tag.