Checking Out the Cool Code Tools | Microsoft Expression Web For Dummies

Expression Web figures that most designers will spend time flipping between Code view and Design view. You can work in both views easily by choosing Split view (click the Split button in the lower-left corner of the editing window). To make working with code easy, the folks at Microsoft built in a lot of code tools, some of which, like the Quick Tag Selector bar, give you access to the code directly in Design view.

Code view

If you're comfortable working with HTML, the easiest way to access and edit your page's code is to switch to Code view. Click the Code button in the lower-left corner of the editing window. There you find the HTML, nicely laid out, numbered by line, and color-coded so that it's easier to read (see Figure 14-5).

image from book
Figure 14-5: Code view shows only the code for the page.

Quick Tag Selector bar

As you add text and formatting to your page, notice the line of HTML tags growing near the top of the editing window (see Figure 14-6; although you can't see the flashing cursor in the figure, it's inside the italic text overall size). This tool is named the Quick Tag Selector bar because it gives you instant access to the page's HTML without having to switch to Code view. (If you don't see the Quick Tag Selector bar, choose View Quick Tag Selector.)

To watch the Quick Tag Selector bar in action, click anywhere inside the page. Click a word, a picture, a list-anything. The HTML tags that appear inside the Quick Tag Selector bar are the tags, in order, that affect whatever you just clicked.

If you already know how to use HTML, the contents of the Quick Tag Selector bar probably make sense to you. If you don't know how to use HTML, or if you're just beginning to learn, the Quick Tag Selector bar is an excellent tutor-because when you click a tag on the Quick Tag Selector bar, Expression Web highlights the tag's contents in Design view and Code view. In this way, you can begin to see how HTML operates.

image from book
Figure 14-6: The Quick Tag Selector bar.

When you hover your cursor over a tag on the Quick Tag Selector bar, a little down-arrow button also appears next to the tag. To edit that HTML tag, click the button to display a menu of options:

Select Tag: Select the opening and closing tags and their contents.
Select Tag Contents: Select only the contents of the tag.
Edit Tag: Add attributes to the tag by using the Quick Tag Editor (see the next section).
Remove Tag: Remove the opening and closing tags, but leave the tag contents alone.
Insert HTML: Insert HTML at the location of the cursor by using the Quick Tag Editor (see the next section).
Wrap Tag: Insert HTML that surrounds (or wraps around) the selected tag by using the Quick Tag Editor (see the next section).
Tag Properties: Open the Properties dialog box pertaining to the selected tag. Or open the Tag Properties task pane, which shows the tag's attributes.

Tip

The Quick Tag Selector bar is a useful tool for precisely selecting elements in Design view. For example, if you want to replace heading text with something else but you don't want to delete the heading tags, click in the heading tag and, click the heading tag's drop-down arrow on the Quick Tag Selector bar. From the drop-down list that appears, choose Select Tag Contents. Then replace the selected text by typing new text. Or use the Quick Tag Selector bar to delete a whole paragraph that you no longer need by clicking in the paragraph, clicking the paragraph tag's drop-down arrow, and choosing the Select Tag option. Press the Delete key and the paragraph departs to cyber-heaven, taking its tags along with it.

Quick Tag Editor

Like the Quick Tag Selector bar, the Quick Tag Editor gives you easy access to your HTML code so that you can edit a selected tag, insert new HTML tags, or wrap a tag around one or more existing tags. Use the Quick Tag Editor in either Design view or Code view of your Web page.

To edit an HTML tag by using the Quick Tag Editor, follow these steps:

In either Design view or Code view, select the tag you want to edit.

You can either place your cursor somewhere inside the tag (such as somewhere in a paragraph, if you want to edit the paragraph's tag) or use the Quick Tag Selector bar to select the tag you want to edit.
Choose Edit Quick Tag Editor and then, from the drop-down list box in the left-hand portion of the Quick Tag Editor, select Edit Tag.

If you're working in Design view, in the Quick Tag Selector bar, click the down-arrow button next to the tag you want to edit and then select Edit Tag.

The Quick Tag Editor appears with the contents of the selected tag, as shown in Figure 14-7.

Figure 14-7: The Quick Tag Editor.
Make any necessary changes to the tag and click the Enter button (the green check mark) to close the Quick Tag Editor and apply the changes to the tag.

For example, in Figure 14-6, we could change the  tag (bold) to  (italic) by selecting the word strong and typing em in its place.

If necessary, the Quick Tag Editor changes the closing tag to match. (Using our example, the Quick Tag Editor automatically changesthe  tag to .)

To close the Quick Tag Editor without making any changes, click the Cancel button (the red X).

To wrap an HTML tag around existing content or other tag, follow these steps:

Select the content, tag, or tags around which you want to wrap another HTML tag.

You can do this in a variety of ways. Here are some examples:
- Wrap a  tag around some text in a paragraph: In Design view or Code view, select the text.
- Wrap a tag around a single tag: In either Design view or Code view, place your cursor anywhere inside the tag; when you select Wrap Tag, the whole tag gets selected.
- Wrap a <div> tag around several other tags, such as an unordered list (the <ul>, each <li></li> pair, and the closing </ul> tag): To make sure that you select all the tags for the various list parts, in the Quick Tag Selector bar, click the <ul> tag. You can also click the down-arrow button next to the tag and select Wrap Tag directly from the Quick Tag Selector bar (and then skip ahead to Step 3).
Choose Edit Quick Tag Editor and then, from the drop-down list box in the left-hand portion of the Quick Tag Editor, select Wrap Tag.
In the text entry area of the Quick Tag Editor, type the tag you want to wrap around the selected tags or content and then click the Enter button (or press the Enter key on your keyboard).

For example, to wrap a  tag with a class attribute around the selected content, type . Notice that, as you type, the Expression Web IntelliSense feature helps you along the way with drop-down menus of suggestions. We tell you how to use IntelliSense later in this chapter.

Using the Quick Tag Editor to insert HTML is most useful in Code view. To do so, follow these steps:

Place your cursor in the location where you want to insert HTML.
Choose Edit Quick Tag Editor (or press Ctrl+Q).
From the drop-down menu, choose Insert HTML and type the HTML in the text entry area.
Click the Enter button (or press the Enter key).

If you use this method to insert an HTML tag, IntelliSense assumes that you want to add the closing tag along with it, which it does, right after the opening tag (for example, ). In Code view, you can simply click between the tags and add the content.

IntelliSense

As you type HTML tags, Expression Web helps you format your code correctly by automatically closing tags and by popping open menus of tags that are valid for where you are in the HTML code. Expression Web also highlights errors so that they're easy to spot. This code watchdog, named IntelliSense, is like a Code view spell checker combined with an autocomplete function.

To insert code from a pop-up code menu, use the up-and down-arrow keys on your keyboard to highlight the code you want to insert (or type the couple of letters of the tag you want to add), and then do one of the following:

Press the Tab or Enter key on your keyboard.
Double-click the item.
On the Code View toolbar, click the Complete Word button. (We talk about the Code View toolbar later in this chapter.)

Tip

If you don't like the way IntelliSense works, or you do like it but wish that it did something a little differently, you can change it. Choose Tools Page Editor Options and then click the IntelliSense tab to change the Expression Web IntelliSense settings.

Code View toolbar

After you switch to Code view (or if you're working in the code portion of Split view), pop open the Code View toolbar by choosing View Toolbars Code View. The Code View toolbar gives you quick access to many useful code goodies. Table 14-3 lists the buttons and describes what they do. Like most other toolbar buttons, most of their capabilities are also available as commands and keyboard shortcuts. Choose Edit Code View and then choose from the menu.

Table 14-3: Code View Toolbar Buttons
Open table as spreadsheet
Button	Button Name	What It Does
	List Members, Parameter Info, Complete Word	Depending on where you are in your code, displays shortcut menus for inserting code.
	List Code Snippet	Displays a shortcut menu for inserting a code snippet. (We explain code snippets later in this chapter.)
	Follow Hyperlink	When the cursor is in a hyperlink, goes to and opens the hyperlink destination.
	Previous Code Hyperlink, Next Code Hyperlink	Works like the Back and Next buttons in a browser, allowing you to scroll through hyper-link destinations you've followed.
	Toggle Bookmarks	Toggles on and off temporary code bookmarks. (We talk about code bookmarks later in this chapter.)
	Next Bookmark, Previous Bookmark	Goes to the next or previous code bookmark.
	Clear Bookmarks	Removes all code bookmarks from the page.
	Select Tag	Selects the opening and closing tag and all the contents of an HTML element.
	Find Matching Tag	Finds the other tag (either opening or closing) in a tag pair when you put your cursor inside a tag and click to select it; click again to find the other tag in the tag pair.
	Select Block	Selects all the style declarations inside the CSS style rule in which your cursor is located.
	Find Matching Brace	Finds the curly brace that either ends or begins a style rule when the cursor is located next to one of a CSS style rule's curly brace.
	Insert Start Tag, Insert End Tag	Inserts the angle brackets for an opening or closing tag.
	Insert Comment	Inserts the opening and closing characters for a comment. (We talk about using comments later in this chapter.)
	Script Editor	Launches the Microsoft Script Editor, which allows you to add programming scripts (VBScript or JScript) to your code. (See the Microsoft Script Editor Help for instructions.)
	Function Lookup	If you have scripts in your page, jumps to the code containing the function you select from the drop-down list.
	Options	Lets you choose different options for how code is displayed in Code view

Code snippets

Expression Web can also save frequently used bits of code as snippets so that you don't have to type them over and over. To create your own code snippet, follow these steps:

Choose Tools Page Editor Options, and from the dialog box that appears, click the Code Snippets tab.
Click the Add button.

The Add Code Snippet dialog box appears.
In the Keyword text field, type a unique word for the code snippet.

When you want to insert your code snippet, you type this word, so use one that describes the code snippet's function to you.
In the Description text field, type a description of the code snippet.
In the Text Entry field, type the code that will be inserted when you select the code snippet.
Click OK to save the code snippet.

To edit a code snippet, choose one from the list and click the Modify button. Make any necessary changes and click OK. Delete a code snippet by selecting it and clicking the Remove button.

To insert a code snippet in your page's HTML code, place your cursor where you want the code snippet to appear, press Ctrl+Enter to display a list of saved snippets, and then double-click the snippet you want to use.

Find and Replace in Code view

While in Code view, you can use the Expression Web Find and Replace function to automatically update HTML tags throughout the page (or even your entire site). If you're a frequent HTML user, you know that this feature is a major timesaver. To access HTML Find and Replace, choose Edit Find (or Edit Replace), and from the dialog box that appears, click the HTML Tags tab.

Code bookmarks

You can use code bookmarks to mark a line of code so that you can find it more easily later on. Code bookmarks don't show up in your Web page's content, and Expression Web deletes all code bookmarks when you close a page. These bookmarks work only in Code view (or in the code portion of Split view).

To insert a code bookmark, follow these steps:

Place your cursor in the line of code you want to mark with a code bookmark.
On the Code View toolbar, click the Toggle Bookmarks button.

Or choose Edit Code View Toggle Bookmarks.

A teal rectangle appears in the left margin, next to the code line.

To remove a code bookmark, place your cursor in the line of code containing the bookmark and, on the Code View toolbar, click the Toggle Bookmarks button. (Refer to Table 14-3, earlier in this chapter, for other code bookmark buttons.)