Fine-tuning the Page with Coding Tools

With a click of the Code button, you can change to Code view and easily edit the markup and text that define the look and feel of the Web page you are working with. FrontPage 2003 has many features and tools to help make this job easier.

For starters, FrontPage numbers and indents each line of code by default, as shown in Figure 1-6. You can change these code view options using the General tab of the Page Options dialog box. Choose Tools, Page Options, and then select the General tab. You can now use the fields of the Code View Options panel to manage word wrap, auto indent, line numbers, and the selection margin (the spacing between line numbers and code).

Figure 1-6: Code view makes it easy to edit the markup and text of a page directly.

If you are working with a page that has lengthy sections of code, you ll find that line numbering is an invaluable tool you frequently use to zero in on a specific line of code to make a change. Regardless of whether or not they are displayed, FrontPage 2003 tracks line numbers, so that you can jump to a specific line of code using the Go To Line dialog box.

To display and use the Go To Line dialog box, press Ctrl+G, or choose Edit, and then Go To Line. Next, type the line number you want to access, and then press Enter.

Other coding features that you ll use frequently include:

• Color coding

• Code formatting rules

• Code snippets

Using Color Coding to Easily Distinguish Elements

In Code view, tags, attribute names , attribute values, and other items are color-coded. You have precise control over the color combinations used. To view or modify the color settings, follow these steps:

1. Choose Tools, Page Options, and then click the Color Coding tab.

2. Use the color selection options shown in Figure 1-7 to specify the colors you want to apply. If you later want to restore the original color settings, click Reset Colors.

   
   Figure 1-7: Color-code the markup and text of the page to suit your needs.

3. Click OK when you are finished.

Using Code Formatting to Get Precise Code

The format of code is important, so FrontPage 2003 applies code formatting according to very specific rules. By default, when FrontPage creates tags, the tag names and their attribute names are lower case. Unlike HTML, where tag and attribute case doesn t matter, you ll find that some other markup languages (including XML and XHTML) require that all tags and attribute names be lowercase. With this default setting, you ll be in good shape if you use these markup languages, or transition to them in the future.

You can view and change the code formatting rules by choosing Tools, Page Options, and then selecting Code Formatting. FrontPage applies these formatting rules only when it generates markup. As Figure 1-8 shows, these rules control:

• Tab size , indentation and right margin

• Line breaks before and after start and end tags

• Whether start or end tags should be omitted when generating tag sets

  
  Figure 1-8: FrontPage uses code-formatting rules when generating markup. You can change these rules at any time.

Note  

It s important to note that FrontPage will not modify existing code automatically. If you change the formatting rules, FrontPage does not apply these rules to existing code. If you import or open pages that were created outside of FrontPage, the code formatting rules aren t applied, nor is the code of the page changed in any way. The only time FrontPage might change code within pages is if you elect to optimize pages when publishing them. For more information on the Optimize Published HTML feature, see Chapter 17, Publishing Your Web Site.

Adding Code Quickly with Code Snippets

When you are in Code view, you can add frequently-used code blocks with a few keystrokes, using the Code Snippets feature. All code snippets have a keyword, description and code block.

See Also  

If you want to learn how to modify existing code snippets or define your own code snippets, see Chapter 10, Editing HTML and XML Markup.

You use the keyword to specify which code snippet to insert. For example, if you wanted to insert a JavaScript block, you would use the scriptj keyword. This is only one of several code snippets FrontPage defines. Table 1-1 shows a complete list of predefined code snippets.

Table 1-1: Code snippets defined by FrontPage

Keyword	Purpose
dt2	Adds an HTML 2.0 DOC TYPE declaration to the page.
dt3	Adds an HTML 3.2 DOC TYPE declaration to the page.
dt4	Adds an HTML 4.0 DOC TYPE declaration to the page.
Linkrels	Adds a link relationship tag for specifying an external style sheet.
Metad	Adds a meta tag used to specify the page description for search engines.
Metakey	Adds a meta tag used to specify the keywords for search engines.
Scriptj	Adds a JavaScript block with script and comment tags.
Scriptv	Adds a VBScript block with script and comment tags.

You can easily insert code snippets by following these steps:

1. Press Ctrl+Enter to display a shortcut menu that lists all the available code snippets by keyword and description.

2. Once the shortcut menu is displayed, type the keyword or select the code snippet you want to use.

3. Press Tab or Enter.

Aha!  

Use Code Snippets to Learn Faster
The process for inserting code snippets sounds more complex than it actually is ”trust me. Once you start using this feature, the process will seem very natural and intuitive. After a while, you ll be able to insert code snippets quickly, without ever looking at the shortcut menu options. For example, if you wanted to add a JavaScript block, you would simply press Ctrl+Enter, type scriptj , and then press Tab.