Reformatting HTML

In addition to the way FrontPage produces HTML, many are frustrated with FrontPage's handling and formatting of HTML. Although it is not specifically an optimization issue in the truest sense of the word, you can set FrontPage to follow specific code formatting rules and reformat any existing HTML to those rules.

By formatting, we mean the spacing, tabbing, and tag elements FrontPage places in the HTML. The HTML is, in fact, a text file and is not subject to font sizes, and so on.

TIP

Some users seem to obsess over their HTML formatting, whereas others don't care as long as it works. If you find yourself in the second category, don't worry: HTML formatting is 99% a matter of designer preference.

Obviously, if you are working with a team or intend on handing your site off to another programmer (or team) later, the HTML formatting issues should be discussed and determined as part of the initial design process.

Code Formatting

Selecting Page Options from the Tools menu will open the Page Options dialog box. The Code Formatting tab, seen in Figure 29.7 lets you set, specifically, how you would like FrontPage to format the HTML it produces.

Figure 29.7. You can tell FrontPage exactly how you would like it to code HTML through the Code Formatting tab of the Page Options dialog box.

NOTE

Code Formatting is set on a page-by-page option and is not standardized across your entire site.

The tool divides HTML formatting into two areas: Formatting and Tags.

Formatting options can be set as follows:

• Tag names are lowercase Some users prefer uppercase, whereas others prefer tags be in uppercase. You can set that issue here.

  NOTE

  A lot of the industry is moving toward lowercase tags by default. This both encourages standardization and helps in issues of markup through XHTML and the like. It is a good idea to use lowercase in most cases.

  
  

• Attribute names are lowercase Similar to the previous option, you can toggle this option on or off based on preference.

• Allow line breaks within tags Some like to see all tag content contained within a single line, whereas others like to see a tag opened and closed on a separate line for easier distinction. You can set that option here.

• Tab size Lets you set the exact spacing for a tab.

• Indent You can set how far an indent is spaced in either tabs or characters.

• Right margin Some developers don't like scrolling left/right and want a specific right margin set for their code. You can do that here.

• Insert tabs as spaces If you would like to see all tabs set as spaces, check this option.

The second Tags area lets you set how FrontPage handles each specific tag. A modification of the <script> tag is shown in Figure 29.8. To set tag handling, select a tag from the Tags list and set the variables as desired.

Figure 29.8. The Code Formatting for the <script> tag is now set to have a dual line break before and after the tag. Contents are also sent to indent to make for easier reading.

The first option is to set line breaks before and after the start and before and after the end of each tag. If you want to set apart a certain tag with clear whitespace, you can set this accordingly.

If you want to omit the start or end tag for any selection, you can toggle that choice. In addition, you can choose whether contents within a tag are indented.

NOTE

If HTML standards don't allow the omission of start or ending tags, the option will be grayed out. In XHTML, all tags must have a start and an end.

TIP

If you are one of the many who dislike the way FrontPage formats the paragraph tag with the unnecessary open tag, you can turn that off with this option.

If you find that you've made a mess of your HTML formatting rules, the Reset button at the bottom corner will bring things back to the default settings.

Formatting Code Based on an Existing Page

If you have brought an externally coded page in to FrontPage (or coded a page from hand using the Code view) and want FrontPage to mimic the formatting options set by the page, you can tell FrontPage to base formatting on the existing formatting in that page. To do so, click the Base on Current Page button at the top of the Code Formatting tab. FrontPage will then set the site-wide and tag-specific formatting to the standards found within the page you are working on.

NOTE

This option sets formatting based on HTML currently in that page and doesn't call formatting from any other page.