Creating and Editing Code | Faster Smarter Microsoft Office FrontPage 2003

The more thorough your knowledge of HTML, XML, and XHTML, the better your ability to troubleshoot and adjust the Web pages you create. But that doesn t mean you have to know every last detail of such languages before you start. FrontPage provides you with a variety of features (some new, some improved) to help you generate code more quickly and accurately. If you re an aspiring code jockey, you ll find a variety of utilities that will help jump-start your syntax, as described in the following sections.

Learning Code More Quickly with Code IntelliSense

Errors in writing code, and subsequent debugging, can seriously slow down Web site development. To make sure you enter the right commands the first time, you usually need to refer to a bulky reference book as you type. No more: Microsoft IntelliSense technology provides an instant reference within the FrontPage interface to help you write code more easily.

IntelliSense is a great tool for learning code: you need only begin a tag or statement and, if you need a reminder of the options you can add to it, IntelliSense will complete the statement for you. You can take advantage of IntelliSense in one of several ways:

As you are typing code in Code View, IntelliSense presents you with lists of possible code elements you can add that correspond to the commands you are typing.
Choose View, Toolbars, Code View to display the Code View toolbar, then click List Members , Parameter Info, or one of the options that appear in a drop-down list when you click the Options tool at the right-hand edge of the toolbar.
Choose Edit, IntelliSense, and choose one of the four submenu options (List Members, Parameter Info, Complete Word, or View Code Snippets).

Here s an example of how the first button on the left, List Members, works: List Members acts like a programming tutor: if you re ever wondering about the correct attributes that can be applied to a tag or script command (or if you re simply wondering how to spell them correctly), place the cursor on the element in question, then click List Members. All the available code that you can use with that element appears in a shortcut menu (see Figure 10-5).

Figure 10-5: List members suggests possible code you can add to a tag or command.

The Code View toolbar and View Code Snippets are discussed in the sections that follow.

Note	Code IntelliSense is available for HTML, CSS (cascading style sheets), XSL (Extensible Stylesheet Language), JScript, and ASP.NET.

Ensuring Accuracy with Typing Aids

Typing code is an unforgiving task. One typo, and an image doesn t appear, code instructions appear visibly on the page when they should remain invisible, or another effect doesn t work correctly. To make this exacting task go more quickly, FrontPage presents you with a variety of typing shortcuts. Some are available in the new Code View toolbar, while others are accessed by typing keyboard shortcuts in Code View itself.

Find Editing Tools Quickly with the Code View Toolbar

When you re working in Code View, you ll work more quickly if you have all of the relevant tools available. Many of those tools are located on the new Code View toolbar, which appears when you choose View, Toolbars, Code View.

The previous section explained how the first button in the Code View toolbar gives you a manual way to access IntelliSense code suggestions for what you re typing. The other commands in the Code View toolbar include:

Parameter Info If you are typing script in your Web page code and enter a command that can have more than one possible parameter (such as document. or window.), click the Parameter Info. button and FrontPage will prompt you with parameters you may want to add.
Complete Word Suppose you start to type a command, but you aren t sure how it s spelled. Click Complete Word, and FrontPage automatically completes the word for you.
List Code Snippets Displays bits of frequently used code that can be applied to the element at the insertion point. (See the section Code Snippets later in this chapter for more details.)
Go To Function This option is active only if the cursor is positioned within script that is governed by a function. Click it, and the function command is selected.
Function Lookup If the current page contains JavaScript or other functions, click here, and a shortcut menu appears with a list of those functions displayed. Select a function from the list, and it is highlighted. You and your co-workers can use the Lookup feature to learn how to write better code.
Toggle Bookmark Lets you create a temporary bookmark at the current insertion point, or remove a bookmark if one has already been created. These code bookmarks let you jump back and forth between portions of the Code pane ”for example, between a script block at the top of a page and the script invocation at the bottom. Bookmarks enable you to direct co-workers to parts of the code they need to edit or proofread.
Next Bookmark Moves to the next bookmark on the current page.
Previous Bookmark Moves to the previous temporary code bookmark on the current page, if you have created any.
Clear Bookmarks Removes a bookmark if one has been selected.
Select Tag Selects the tag that controls the text where the cursor is positioned.
Find Matching Tag If you position the cursor in one part of a tag, such as <a>, click here to find the matching tag, such as </a>.
Select Block Selects a block of code that extends over multiple lines.
Find Matching Brace If you are in a script section, this causes the cursor to jump to the nearest matching brace.
Insert Start Tag Inserts the standard brackets, <>, so you can type a new start tag.
Insert End Tag Inserts the standard brackets, </>, so you can type a new end tag.
Insert Comment Inserts the  commands so you can type a comment.
Options Lets you activate (or deactivate) word wrap, line numbers , the selection margin, or automatic indentation for the current code. You can select or deselect options in order to develop a house style guide that your company can use to create and edit Web page code consistently.
Microsoft Script Editor Launches the Microsoft Script Editor application, so that you can create or edit code you see displayed in Code View (see Figure 10-6). Advanced coders in your company will save time launching the Script Editor from within FrontPage.

Figure 10-6: You can launch Microsoft Script Editor from the Code View toolbar if you want to edit some of the current Web page s code.

Keyboard Shortcuts

In a business environment, time is money. And chances are you re being paid, in part, to work quickly and accurately. Since you re creating code mostly by using your keyboard, it makes sense that you should have some keyboard shortcuts to make your typing go more quickly. Some of these are described in Table 10-2.

Table 10-2: Code View Keyboard Shortcuts
Type of Shortcut	Keys to Press	Description
Code Indentation	Tab	Indents selected block of code
	Shift+Tab	Reduces indentation of an indented block
Select Tag	Ctrl+;	Selects tag in which cursor is positioned
Find Matching Tag	Ctrl+:	When you select a tag (such as <head>) this finds the matching tag (such as </head> )
Select Block	Ctrl+	Selects block of code in which cursor is positioned
Find Matching Brace	Ctrl+]	After you select one brace, you jump to the matching brace
Insert Start Tag	Ctrl+,	Inserts the <> characters
Insert End Tag	Ctrl+.	Inserts the </> characters
Insert Comment	Ctrl+/	Inserts the <!-- --> characters

Suppose you re writing a long block of code, and you lose track of the end of the code. Just choose Edit, Code View, and press Ctrl+ (Ctrl and the key twice) to highlight the block of code from beginning to end. You can then scroll down to the end of the block to see what remains. You can even insert a bookmark at the end of the block of code so that you can jump to the end if you need to. You ll find a full selection of menu options and corresponding shortcuts for use in Code View when you choose Edit, Code View, and the shortcut menu appears as shown in Figure 10-7.

Figure 10-7: Keyboard shortcuts make your code creation go more quickly.

Find and Replace ”With a Brain

When you need to make changes to all instances of the same tags or commands in the current page, Find And Replace can be a real time-saver. When you're in Code View and looking for code to find and replace, you can easily make queries that let you search the HTML code for the current page:

Choose Edit, Find, or press Ctrl+F.
When the Find And Replace dialog box appears, click HTML Tags.
Enter or paste the tag you want to find in the Find Tag box.
Choose an action from the Replace Action drop-down list.
Under Search options, choose All Pages if you want to search all pages in the current Web, whether they are open or not. Choose Open Page if you want to search only the pages that are open in FrontPage. Choose Current Page if you want to search only the currently displayed page.
Click Find Next.

After you find the tag, you can click Replace, or Replace All, to make changes. Suppose you expect to make the same search when you re working on other pages or Web sites. FrontPage enables you to set up rules, so you don t have to reconstruct the same search-and-replace criteria every time you want to make such changes. Your fellow Web page editors can use the same search-and-replace rules you do:

Choose Edit, Find, or press Ctrl+F.
In the Find What box, enter the text you want to find.
When the HTML Rules dialog box appears, click New Rule.
When the New Rule drop-down list appears, click Inside Tag if you want the rule to apply to the contents of the tag; otherwise , click Not Inside Tag.
Click New Rule beneath the rule you just created. When the next drop-down list appears, click the tag to which you want the rule to apply (see Figure 10-8).

Figure 10-8: HTML Rules lets you set up rules that you can apply all at once to code searches.

The next time you, or one of your co-workers, open Find And Replace, your rule appears automatically. You can then perform Replace Actions in the Replace tab. You can also click Clear Rules to delete the rule and create new search criteria. Or, in the Find tab, you can click the right-pointing arrow next to the Find What box (see Figure 10-9) to display an extensive set of options for refining exactly what you want to locate.

Figure 10-9: You can search for specific attributes.

Aha!	Edit Text Files You can import HTML, XML or other code files into FrontPage to edit with the typing tools described in this chapter. Pasting code into the Code pane now works the way a code developer would expect. The Code pane treats the pasted text as code, rather than body text.

Speed Up Reusable Code with Code Snippets

When you re developing Web sites that contain dozens of pages, it s likely that many of those pages need to contain similar elements. After all, the consistent use of logos or navigation bars helps establish a corporate Web site s identity, and also makes it more usable. You don t want to have to type the code over and over. You could copy and paste the code from page to page, but you don t have to, because FrontPage goes a step beyond the clipboard. It makes reusable chunks of code available within the FrontPage interface itself in the form of code snippets .