Revealing Markup Tags with Code View | Faster Smarter Microsoft Office FrontPage 2003

If you ve used a Web page creation progam before, you re aware that its primary purpose is to enable you to add images, format text, and design the overall look of Web pages, without having to enter Hypertext Markup Language (HTML) commands by hand. But FrontPage s Code View makes it easy to peek behind the curtain and work with the code that controls how Web pages (and Web sites) work. That includes not only HTML and XML, but Cascading Style Sheets (CSS) and advanced coding environments that FrontPage supports, like Active Server Pages (ASP), Active Server Pages .NET (ASP.NET), and scripting languages, such as JScript and VBScript.

Understanding Web Page Effects by Formatting Code

Whenever you want take a look behind the curtain, and examine the instructions that make text, images, colors, and other Web page contents appear the way you want them to, you need only to click the Code button beneath the page you are viewing and switch to Code View. The cursor is automatically positioned in the line of code that corresponds to the element where the cursor was last positioned when you viewed the page in Design View.

The ease with which you can switch to Code View means that, any time you are wondering what makes a particular Web page feature work, you can view the code to learn how to create the same effect the way a professional programmer would. Any time you select an image or other object, or position the cursor within a block of the text in the Web page you have under construction, you can instantly switch to Code View to examine the code that makes that element appear the way it does. Try it yourself: open a Web page that contains a table, and position your cursor within one of the table cells . Click Code, and you switch to Code View (see Figure 10-1), where you can view the attributes for that cell .

Figure 10-1: Learn how Web page effects are achieved with Code View.

By taking the time to customize the look of your page s code, you, or others in your company who are responsible for editing Web pages, can edit more easily later on. If you ve been assigned to learn how scripts are used in Web pages, you can highlight them in a font or color of your choice. If you develop Web pages as part of a team, formatting your code makes it easier for your colleagues to edit or track down problems. The sections that follow suggest ways in which you can format your code.

Aha!

Make Your Code Wrap
You ll notice that, in Figure 10-1, the code extends off the screen to the right. You have to scroll to view it. You can change this by activating word wrap: choose Tools, Page Options, and then click the General tab. Check the box next to Word Wrap, then click OK. The General tab also lets you de-activate line numbers , the selection margin to the immediate left of the lines of code, and automatic indenting of scripts or HTML, so that new lines in the Code pane are aligned with the line above.

Customizing Code by Changing Colors

One way to customize the way FrontPage presents Web page code is to change the colors used to present various elements. Choose Tools, Page Options, then click the Color Coding tab to view the elements you can colorize, which are summarized in Table 10-1:

Table 10-1: Web page code elements you can format
Element	Description
Background	Controls the background color against which the Web page code appears. You can make the code easier to read for everyone in your office.
Normal text	Controls the color of the body text that is contained on the current Web page. Changing the body text color enables you to highlight the contents that visitors to your Web site actually see.
Bookmarks	Controls the color of text, or other contents you have bookmarked, so that you can link to them.
Tags	Controls the color of HTML tags so that you can find and edit them quicker.
Attribute names /values	Controls the color of names and attributes that accompany tags.
Comments	Controls the color of comments that you or someone else has inserted into the Web page code.
Script elements	Controls the color of various parts of scripts that are contained within a Web page, such as Jscripts or VBscripts, so that you can edit them more easily.
DWT elements	Controls colors assigned to parts of Dynamic Web Templates that are contained on the current page.
Layout elements	Controls the colors of Layout table tools such as borders, text, and labels.
Web part elements	Controls the colors of any Web parts that have been inserted in a Web page.

Suppose you need to leave messages for others in your company who will be editing the Web pages later. You ll make the comments easier to find by highlighting them in a special color. To change the color of comments, follow these steps:

Click the Code tool to switch to Code View.
Evaluate the current color used to display comments. Add your own HTML comment, as shown in the following example:
Choose Tools, Page Options, and click the Color Coding tab.
Choose a color from the Comments drop-down list, as shown in Figure 10-2.

Figure 10-2: Change the color of comments or other code so that you or your coworkers can more easily find elements you need to revise .
Click OK.

Aha!

Create Your Own Colors
If you don t like the colors that FrontPage provides by default, you can create your own in one of two ways. Click Custom Colors, and choose a color from the color wheel that appears. Or, you can clone a color from a Web page by clicking More Colors, Select, selecting a color with the eyedropper, and then clicking the color next to the element in the Color Coding tab to which you want to assign the new color. You can use the eyedropper to click not only a color in More Colors, but also in a Web page, or any other open window.

Change the Default Font

Courier is typically used to display Web page code because it s a monospaced font: adjacent lines of code line up, so they are easier to read. Unless you have a typeface preference, you should probably stay with Courier. But you can change the font by choosing a new one in the Code View section of the Default Fonts tab of the Page Options dialog box (see Figure 10-3).

Figure 10-3: Change font selection and size to make Web page code more readable.

You may, for instance, change the size in which code is displayed to make it more readable. Choose a new font size from the Size drop-down menu list in the Default Fonts tab of the Page Options dialog box.

Note	Keep in mind, though, that the bigger the type, the more likely you ll have to scroll to read entire lines of code. For a long and complex Web page, this can be a lot of extra work for you, and for the other members of your organization s team of Web developers.

Change Other Formatting to Make Code Readable

Besides the font type, size, and color, and word wrap, the other attributes you may want to change in order to make your code more readable are are spaces and line breaks. The Code Formatting tab of the Page Options dialog box contains such controls:

Allow Line Breaks Within Tags Tells FrontPage to break lines, even if the break occurs within a tag, which might make code difficult to read. On the other hand, it means you won t have to scroll horizontally in order to read all of a page s code.
Tab Size And Indent Controls how much code is indented. Indenting makes it easier to read the attributes and values that follow a command.
Right Margin Specifies how much the code is indented from the right. A narrow column of code enables you to see other panes within the Front Page window, or other windows such as Web browsers.
Tags This box lets you apply line break settings to individual tags. Breaking a line of code after a tag doesn t affect the contents of the Web page, but it helps you locate a particular segment of the page s code more quickly. For instance, breaking the line after the <script> and </script> tags lets you quickly see all of the code contained between them.

One of the most powerful controls on the Code Formatting tab enables you to base the formatting of all the code that FrontPage presents by basing it on the formatting of the current page. Once you have adjusted the code so that it looks the way you want it to, click the Base On Current page button to make the same settings apply to current pages as well. Such consistency enables you to instruct your co-workers to look for the same elements ” look for the green comments within the HTML code, for instance.

Previewing a Design in Split View

You already know that FrontPage s Design View lets gives you a WYSIWYG (What You See Is What You Get) view of a Web page ”what you see in Design View is pretty much what you and your Web site visitors will see when they access the page online. But you ll edit more quickly if you can view the finished design and the code that underlies it simultaneously . Split View, one of FrontPage s most useful new features, splits the current page display into Code and Design View.

To switch from the current view to Split View (as shown in figure 10-4), press the Split button in the row of view buttons beneath the page display area. When the view splits, the Code View reflects where you are in the Design View, and vice-versa. The two views are, in fact, interactive: scroll down through the code, and the design view scrolls correspondingly, so that you can keep track of where you are in the code (or on the designed Web page). Move the drag bar up or down to resize the two views.

Figure 10-4: Split view lets you check code changes in near-real time.

The big advantage of using split view is the ability to preview a change you make in the code for the current Web page. Once you make a change in Code View, you can see the effect instantly in Design View by pressing F5, or by selecting View, Refresh.