Chapter 26, "Introduction to FrontPage," took you on a tour of Microsoft FrontPage. You learned about the components of FrontPage and their interaction with each other and your Web server. This chapter sticks to the creation of basic pages in
a web, leaving the use of wizards and WebBots to enhance the pages to the next chapter.
This chapter shows you how to use FrontPage Explorer and Editor to
If you have already written Web pages with another program, you might already know the rudiments of HTML. But until you have put a whole site together, you might not appreciate the real power of a Web publishing program like FrontPage. To begin, the
next section covers some basics of Web site creation. Bear with me if you have already created some of the premier sites on the Internet!
NOTE
The five tutorial lessons that are available in FrontPage Help under the topic "Learning FrontPage" is an excellent start to learning to use the product. You will get a step-by-step introduction to the tools. I heartily recommend that you take the time to work through these lessons.
Any editing session in the FrontPage Editor starts with a page. Use the File menu to create a new file or open an existing one for editing. Figure 27.1 shows the menu selections available from the File menu.
Figure 27.1. The File menu in FrontPage Editor offers several ways to open a file for editing.
As you can see, you can easily create a new file using the New dialog box, or you can open existing files for editing. The choices for opening files are different because of the source of the files. If you are opening a file that you have on a local
drive, you would use the File | Open File dialog box to access a file somewhere on the computer or network. Use Open from Web to open a single file in a set of files that FrontPage knows as a unit called a web. The file will be retrieved from this web
using FrontPage Explorer, and when any changes are made, it will be placed back in the web so that Explorer can maintain the information in its database about the file and its relationship with the rest of the web. The last selection is the Open Location
dialog box that can be used to pull a file from anywhere on the Internet. Figure 27.2 shows the Open Location dialog box with the URL for Sams.net for retrieval.
Figure 27.2. The Open Location dialog box with the URL for Sams.net for retrieval.
NOTE
The Open Location dialog box of FrontPage—similar to the View Source option in the Internet Explorer—enables you to retrieve the images and content from a site. Some of the images and content might be protected by copyright. This is usually noted in the source for the pages or detailed at another visible area of the site.
If you want to create a new page using FrontPage, you are given a wide range of choices using templates and wizards, as shown in Figure 27.3.
These choices offer you preformatted templates that speed up the creation of a new page. They can save you a lot of time in reducing work that you will need to repeat on more than one page. The Normal Page template is used to illustrate standard
formatting changes that you might want to make on your pages.
To help you establish the identity of a site, FrontPage enables you to set standard elements of each page so that all of the pages have the same look and feel. You change these settings on a page-per-page basis, but using common properties throughout a
site gives an overall consistent look. These settings are called page properties, and it is these settings that you will want to set for each page of your site. Some of these settings are not viewable settings, but should still be standardized on
all your pages. Figure 27.4 shows an untitled normal page loaded in the FrontPage Editor.
Figure 27.4. The Normal Page loaded in FrontPage appears to be a blank document.
Although this page looks blank, the HTML code for the file reveals the secret of using a template for an HTML file. Because the template is actually a standard HTML file, this file can be personalized in any fashion so that any files created with the
template will have all the same attributes. Look at the HTML source for the same blank document to see what the file actually contains, shown in Figure 27.5.
To make changes in these properties, use the Page Properties dialog box, which is accessible from the File menu. This dialog box enables you to change all the properties that are associated with the document with which you are working. The changes that
you make in the Page Properties dialog box are reflected when you exit the dialog box so that you can see what effect the change made visually. The HTML source will, of course, also reveal the change. Figure 27.6 shows the Page Properties dialog box and
the properties that you can change from this dialog box.
Figure 27.6. Use the Page Properties dialog box to change properties for the document.
The header or just head section of a document contains information that is normally not shown or used by a browser. The information between the opening <HEAD> and closing </HEAD> tags contains information such as the title of the document,
the base and meta-information if any, and possibly other information. This section is sometimes used by search robots that browse the Web to assist in cataloging the page. You can include keywords that can be used by these robots in indices generated from
their searches.
Note that in this example dialog box, the title is Untitled Normal Page—just as displayed in the Window title of the blank file from Figure 27.4. And if you look again at Figure 27.5, you'll notice the following HTML code:
<title>Untitled Normal Page</title>
This is standard HTML for the Title element, so when you want to title your document you need to do so using the Page Properties dialog box. Title the document Internet Explorer Unleashed—Chapter 27 by entering this in the Title: input area of the
dialog box. The area labeled URL will either contain the name of the current file or the actual URL of the file if retrieved from a web or location. In this example, this is listed as New page, denoting that the file hasn't been saved yet; when you save
the file, the name of the file will be listed in this URL field. Note that neither the Title nor the URL settings are actually displayed in the document. If you want a title to appear on your page, you will need to use another element to do so.
Only those settings under the Customize Appearance section of the dialog box actually modify the appearance of the document itself. Some settings that you make from the Page Properties dialog box won't be displayed at all. The Base URL is one of these.
This is an optional tag that can be added to your page, and it actually adds some value. If you place a Base URL tag in your document, FrontPage inserts the <base href="http://www.somewhere.com/"> tag to the <HEAD> section of your
document, which assists in the resolution of relative tags in the current document. For example, if your document includes the following HTML code:
<a href="somedir/somefile.htm">Some File</a>
and you have a <base href=> tag on the same page, this will assure that the full name of this relative reference resolves to
http://www.somewhere.com/somedir/somefile.htm
NOTE
The <base href=...> tag is an especially good feature to use on any page that is the target of an image map. Some browsers incorrectly leave the map coordinates in the URL that is displayed when such a page is retrieved and resulting links on the page are sometimes inaccessible.
If you are working on a page that is part of a frameset, you can also set the Default Target URL of any links on the page using the Page Properties dialog box shown in Figure 27.6. This is very useful so that you don't have to add this information to
each link separately. Another use for this tag is that when the target attribute is used in a non-framed site, Internet Explorer will open another browser window to display the information. This can be useful to display a series of documents in another
window while retaining the original window in its original state. The target attribute is rendered in HTML as
<a href="http://www.somewhere.com/somefile.htm target="somename">
For details on the use of frames, read Chapter 23, "Tables, Frames, and Style Sheets."
Before you look at attributes that affect the appearance of your page, you need to briefly visit two dialog boxes that are accessed using buttons instead of by selections in the dialog box itself. These are the Extended and Meta buttons on the right
side of the Page Properties dialog box shown in Figure 27.6.
Choose the Extended button to open the Extended Attributes dialog box shown in Figure 27.7, which is used to enter HTML code to the current tag that might not be supported in the current version of FrontPage. This is useful when a newer version of the
HTML standard is released so that support for these changes can at least be viewed in newer versions of Internet Explorer or other browsers that support these changes. Note that in this example, the <BODY> tag is seen as the current tag that any
HTML
added in this dialog box will affect. Also note that any information entered in this dialog box will be ignored by FrontPage and will not be displayed.
You can use the Meta dialog box to add meta-information to the HEAD section of your HTML file. Meta-information is not displayed by a browser, but can be used to provide important information to the server or client that otherwise would be unavailable.
Meta-information can be used to automatically refresh a page after a certain time interval, or even send the browser off to another location.
As shown in Figure 27.8, the only default setting that FrontPage places in this field is
<meta name="GENERATOR" content="Microsoft FrontPage 1.1">
This reveals that the HTML file was created using Microsoft FrontPage Version 1.1. Other information that you might want to include in the meta section is information such as the Expired or Reply-to header. If you have files that are time-sensitive and
might change within a certain time period, you can add the Expired tag to the meta-information and a server will pass this expiration date and time on to the client so that the file will be revisited after the expiration date. The Reply-to header can give
the server an e-mail address for any required correspondence to the author of the document. When you add this information using the Meta dialog box, the information is added, as shown in Listing 27.1.
Listing 27.1. Meta-information added using FrontPage Editor Meta Information dialog box.
<meta name="Expires" content="Sun 07 Jul 1996 21:29:02 GMT"> <meta name="GENERATOR" content="Microsoft FrontPage 1.1"> <meta name="Reply-to" content="gtfinche@ingr.com <Glenn Fincher>">
One <META> tag that you might find very useful is one that assists in implementing Client Pull using the meta-information to refresh a page's information. Client Pull is a method of including information in an HTML document that essentially tells
the browser to come get this document again after x seconds. Client Pull can even used to set up an on-screen slide show of sorts that automatically loads a sequence of HTML documents. You implement this using a Refresh statement in a <META>
tag to cause the browser to refresh the contents per the directives in the tag. For example, the following statement tells the browser to refresh the current page in five seconds:
<META HTTP-EQUIV="Refresh" Content="5">
The client will request the same document from the server every five seconds. Information that is dynamically updated by the server can therefore be automatically updated by the browser as well. Another good use of meta-information is when you are
required to change the location of a file and do not know everyone who might have established links to the original file. If you use HTTP-EQUIV="Refresh=" information, you can automatically send the user to the new location of the information.
For example, if you started out a Web site at one domain, say the domain of your ISP, and you now have your own domain, you could change the default document at your old ISP address to automatically send users to your new address. So if your original
location was something similar to http://www.isp.com/~myplace/ and your new location is http://www.myplace.com/, you could change the default document at the original location to include meta-information similar to the following, which would result in the
browser being automatically sent to your new location:
<META HTTP-EQUIV="Refresh" Content="5"; URL="http://www.myplace.com/">
The body of your document is the only portion that will actually be displayed in a browser. This includes all the information between the opening <BODY> and closing </BODY> tags. The Customize Appearance section of the Page Properties
dialog
box is the section in which changes are made that affect the appearance of the entire document. When you enable any of the settings in the Customize Appearance section, FrontPage will display the changes after you exit the dialog box. The properties that
are available for you to change affect the background color of your document including the addition of a background image and also the colors of hypertext links in the page.
If your pages use background images, check the readability of the text over the background image and change the colors of the default text using the appropriate section of the dialog box. There is currently no easy way in FrontPage to make changes to
the properties of a group of files. But you can set the characteristics of one of the pages and then when you edit the other pages in the set, use the Get Background and Colors from dialog box to retrieve the information from the master page to set the
properties of the current page. This is very useful when you make changes in a site that you want to easily affect many documents. This information is saved by FrontPage in a _vt_shm directory in the same directory as the current file so that the next
time
you open the file for editing it will read the master document and make any changes that are required. If you look at the copy of the file that FrontPage places in the _vt_shm directory, it will contain the following code:
<body stylesrc="filename.htm">
The stylesrc="filename.htm" section of this line is ignored by browsers and is only used by FrontPage to replace the BODY attributes with legitimate HTML code when saved to the Web. The actual file that is accessible from a client does not
contain this code, but correctly formatted BODY information.
NOTE
Any file that contains a bot or similar dynamic content will be copied to a _vt_shm directory in the same directory as the file that it represents. The appropriate HTML content will be generated by FrontPage when you save the file to the Web. The actual file that is accessible from a client does not contain the FrontPage code, but correctly formatted HTML information.
The text colors that you can change with the Page Properties dialog box are those for normal text, hyperlinks, visited text, and the current active link. These colors can still be overridden by the browser, but when used with a background color can add
a certain amount of added interest to your Web pages when used judiciously. A page with a chartreuse background and hot-pink text might appeal to your sense of style, but might not be exactly the color choices you would choose in a corporate site. The
best
use of text color changes is when required over a background image.
TIP
Although I can't show you examples of good use of colors in these pages because the figures aren't in color, a few online locations might give you the best idea of their usage. Microsoft has a number of pages online that illustrate the use of all HTML tags supported by Internet Explorer, but a couple of these specifically discuss using colors and other design elements to enhance your pages. Look at the following:
http://www.microsoft.com/ie/showcase/howto/iedemo.htm
http://www.microsoft.com/intdev/author/roberth.htm
http://www.microsoft.com/intdev/author/roberth/windows.htm
The editing features of FrontPage are equivalent to most word processors while maintaining the specific features that are required for publishing in the HTML environment. Although you can easily learn to use these tools, a brief tour of the available
tools will be helpful.
An HTML editor is only as good as the tools it gives you to easily use standard HTML to format your document. Like other Windows-based editors, FrontPage enables you to access these tools by using icons from standard toolbars or by using menu
selections. If don't you normally use all of the toolbars when you edit your documents, you can easily streamline the interface by removing these toolbars. Or you can remove them all and use the menus to access all the tools. If you are a touch typist you
can use keyboard mnemonics to add HTML formatting as you type your actual content without using the mouse at all. Or if you have information that only needs formatting for presentation, the toolbars enable you to format sections of your document or
individual elements with ease. As a good introduction to all the available tools, each of these toolbars is treated separately here. These toolbars are enabled or disabled using the View menu selection as shown in Figure 27.9.
Figure 27.9. The View menu option enables you to choose which toolbars are normally visible.
These toolbars are organized based on common functionality or discrete area of HTML support the tool provides. Thus the Standard toolbar provides the common file commands like Open, Save, and Close, as well as operations such as Print, Copy, Paste, and
even Spell Check. The Format toolbar provides access to text formatting such as font selection, color, justification, and indentation. The Image and Form toolbars provide tools to create or edit image map information or insert form elements into your
document. The last two selections you see on the View menu are used to enable or disable the display or the status bar at the bottom of the Editor window or the display of normally invisible format information like paragraph marks.
TIP
In each of the screen shots of individual toolbars, I have used the mouse to drag the toolbar from its docked position so that it is a separate free-floating toolbar or palette. You can drag any toolbar from its normal position by holding down the primary mouse button and dragging the toolbar to the new position.
The Standard toolbar, shown in Figure 27.10, provides all the standard file operations such as New, Open, and Save. It also enables you to print or preview your document or run the spell checker. Additionally, you use the tools on the Standard toolbar
to cut, copy, or paste text within the current document or other documents. The Undo button enables you to reverse the last cut, copy, or paste operation while the Redo button enables you to repeat the last Undo operation. The first selection on this
Standard toolbar that is specifically related to HTML is the button that looks like two links of a chain. You'll use this link tool many times as you build your web's content.
Figure 27.10. The Standard toolbar contains the standard tools for file and print operations.
When you want to insert a hyperlink to a location or named anchor, you simply highlight the text that you want to link to another location and click on the Link icon to bring up the Create Link dialog box shown in Figure 27.11. This dialog box enables
you to select from current open pages or other pages in the same web as the target of the link. Or you can also input any standard URL using the World Wide Web tab of the dialog box or even point the link to a new page and have FrontPage create and load
the new page automatically for editing.
Figure 27.11. The Create Link dialog box enables you to input the target of a hyperlink.
NOTE
If you use the Link icon to select a link that already has link information, the identical Edit Link dialog box will be opened instead of the Create Link dialog box. This dialog box will already contain the current link information and automatically open to the correct tab in the dialog box.
You use the Open Pages tab to make the current link point to a currently open page. You can also target the link to a specific, named frame and add extended attributes to the current link. If you want to link this text to another unopened page in the
current web, you use the Browse button from the Current Web tab to choose a page in the currently open web, as shown in Figures 27.12 and 27.13.
The World Wide Web tab of the Edit Link dialog box enables you to input the target using any valid URL. The drop-down list enables you to choose any standard URL to construct this target as shown in Figure 27.14. Or you can also use the New Page tab
shown in Figure 27.15 to add a new page to the web, and either open that new file immediately or add it to the To Do List for the web. If you choose to open the file immediately, the New Page dialog box opens automatically, enabling you to select the type
of file you want to create from the supplied templates as shown earlier in Figure 27.3. Or if you want to work on the file later, the file will be automatically added to the To Do List.
NOTE
At the lower-left of the Edit Link dialog box you will notice the URL: text. This field contains the current URL that will be inserted based on the information that you enter into each of the fields in the dialog box. This gives you immediate indication of the URL that your selection will produce.
Figure 27.15. The New Page tab enables you to create a new page or add to the To Do List for later.
Returning to the Standard toolbar, the next four icons in the toolbar operate much like controls in Internet Explorer. The first two of these are just like the Back and Forward buttons. FrontPage maintains a history list of all the pages that that you
have opened, or links that you've visited so that you can quickly switch through these pages. These same controls are available using the menu selection Tools | Back or Tools | Forward or using the Alt key with either the Left or Right arrows on the
numeric pad.
The next two buttons in this group enable you to reload the current page from the Web or stop network activity if you are retrieving a file from the Net or current web. The next two buttons on the standard toolbar enable you to load the Explorer or To
Do List. This leaves the Insert Table and What's This? icons. The Insert Table icon opens the same dialog box that is accessible from the Table | Insert Table menu selection shown in Figure 27.16. (Table functionality is illustrated later in this chapter.
Complete details on the use of tables can be found in Chapter 22, "HTML 3.0 and Internet Explorer Extensions." Tables are also used in Chapter 29, "Using FrontPage Personal Web Server," to redesign the Sams.net Web pages.)
If you want to find out what a specific tool is used for, click on the What's This? icon—the icon with an arrow and a question mark—and then on the tool that you want to know about. FrontPage Help will then be loaded with the appropriate
information selected.
The Format Toolbar (see Figure 27.17) contains most of the text formatting tools that you will need to use for your documents. The standard formats such as headings (<H1> through <H6>) or lists (<DL>, <OL>, <UL>) are
accessible using either the drop-down list or individual icons in the toolbar. Each of these selections operate either on the current selected text or from the current insertion point forward in the line of text. The same tools are available from the
Insert menu as well so that you can use the mouse or the keyboard to edit your document.
Figure 27.17. Tools from the Format toolbar are used for text formatting.
Next to the drop-down list box are individual tools for Bold, Italic, Underline, and Teletype formats. These each insert the appropriate HTML code in your file to create the desired effect. The colored ABC icon opens a standard color dialog box so you
can change the color of the selected text. The next two icons with either a large or small A character enable you to incrementally adjust the size of the currently selected font. When you use either of these tools, the size of the current font is either
increased or decreased, and the appropriate HTML is inserted to enclose the text that was selected. If you use the View HTML dialog box, you will see code similar to <font size=3>text</font> has been inserted. Browsers that do not support the
<font>...</font> construct will simply ignore the tag and no change will be made to the display of the font.
The next three icons in the Format toolbar apply justification to the currently selected paragraph; aligning the text or other elements on the left margin, centered, or on the right margin. This justification adds the appropriate paragraph alignment
information to enclose the currently selected paragraph with code similar to
<p align="center">some text</p>
TIP
If you want to justify a block of text, clicking anywhere in a block of text and then on the appropriate icon justifies the entire paragraph, not just the fragment of text you might have selected.
The next two icons on the Format toolbar create the two most common list formats. If you want create a numbered list, a click on the Numbered List icon will either begin a new numbered list or format a block of highlighted text as a numbered list. If
you know your HTML, you'd expect this tool to use the ordered list tag <ol> to code this format, and that is exactly what is done—using View | HTML shows that <ol> and individual <li> tags have been inserted to format the
information.
In similar fashion, using the Bullet icon either begins the creation of a bulleted list or formats the currently selected text as a bulleted list. Again, the appropriate <ul>, <li>, and </ul> tags are inserted in your HTML file to
format the text.
The remaining two tools either increase or decrease the indentation of the selected text or line that the cursor is on. FrontPage uses an interesting device for this tool. There is no universal indentation tag; therefore, FrontPage uses the
<blockquote> tag to indent the text. This tag is normally used to indent a block of text evenly from both margins, which might not be quite the effect you were looking for. But because there is no standard tag for indents, this a generally good
compromise. You might also find that some browsers might render any text contained in a <blockquote> using an italicized font, although this is not required by the HTML standard. If you find that this is an effect your users are encountering, you
can
usually use additional opening list tags to add additional indentation.
The remaining toolbars (see Figures 27.18 and 27.19) are used for manipulating image-map information and for adding or entering form elements in your document. Image maps typically require the use of an external program to create the clickable regions
and attach URL information to these regions. Forms can be troublesome because of the many elements you can use and the relative complexity of the code to create a usable form.
Figure 27.18. You use tools from the Image toolbar to create image maps.
Figure 27.19. You use tools from the Form Fields toolbar to insert form elements.
Including an image map tool within FrontPage greatly increases the general utility of the program. It is popular to use image maps for navigation of a site, and this tool enables you to easily create this information. As shown in Figure 27.18, the
Image
toolbar provides the tools you'd expect to find to easily define regions that are clickable, and to add URL information to those regions. After you use the Arrow icon to select an image, the other tools are enabled so that you can easily add URL
information to an area of your image. For example, to define a rectangular region of your image as clickable, you would click the Rectangle icon and then drag the outline of a rectangle around the area that you want to define. When you release the mouse
button, your selected region is shown by a border around the region and the Create Link dialog box is automatically opened so that you can enter the target of the region as shown in Figure 27.20. If the region already has a link defined, the similar Edit
Link dialog box is opened to enable you to edit the current information.
Figure 27.20. The Create Link dialog box enables you to input the target of a clickable region.
An image map is a very useful tool that you have probably encountered in many places on the Web. It is a method of defining regions of an image as clickable by assigning hyperlinks to these regions. Image maps are often used for graphical menus, with
icons representing different locations within a Web site. The regions are defined as simple rectangles, circles, or polygons using a fairly simple list of x,y coordinates. When a user clicks a defined region, the URL associated with the region is
retrieved
from the server; if server-side image maps are being used, the browser is sent to the new location. If client-side image maps are used, the coordinates are embedded directly in the HTML file, thus removing the requirement for server processing. You'll
find
more details on image maps in Chapter 21, "Composing and Editing HTML Pages."
NOTE
FrontPage can create both server-side and client-side image maps. A browser like Internet Explorer will use client-side image map information to resolve clickable regions in an image without requiring server processing of the coordinates. You can tell FrontPage to create client-side image maps by enabling this function in FrontPage Explorer using the Advanced tab of the Tools | Web Settings dialog box. Selecting the Generate client-side image maps option will enable the function. You can also create server-side image map information at the same time by selecting a server-side style from the same dialog box.
The Form toolbar provides access to all of the necessary tools for the creation of interactive forms. Forms are somewhat hard to code because of all of the name=value information, and might actually be easier to code using the Form Wizard available
from
the File | New dialog box, but this basic tool assists in the creation of most simple forms. Most interactive forms require some action to be taken on the server side of the client/server environment of HTTP. The user inputs some information into an
online
form and then clicks on a Submit button to send that information off to the server or other program determined in the forms action directive. All of the combined elements of a form require values to be assigned to their respective values and this
accumulated information is sent to the server for processing. The Form toolbar will enable you to create forms, but it cannot produce the actual program at the server to process the information generated from the form. An exception to this statement are
the WebBots that ship with FrontPage. Several of these are specifically targeted for use with forms. These are talked about in more detail in Chapter 28, "Using FrontPage Bots and Wizards," so their usage is not detailed in this chapter.
Additionally, the use of forms is discussed in greater detail in Chapter 21.
When you need to create a form, whether it is a detailed online survey or a simple e-mail comments form, you need to decide exactly what information you want to collect from your users. The type of information that you expect to receive, and also
process, is of great importance when you design your forms. If you want to collect a series of Yes/No answers to a series of questions, collections of simple radio button choices might be in order. If you want to gather e-mail addresses, usernames and/or
addresses or freeform comments, you need to use variations of text input boxes. All of these elements display as simple widgets, but behind the simplicity lie a number of HTML constructs that are sometimes hard to implement correctly. Each of the tools
that you use from this toolbar requires that you enter several variable names and default information. When creating a form, you need to decide what information you want to receive from it, and then use the tools to set up the form. To demonstrate these
tools, this example creates a simple comment form using each of the elements from the toolbar to collect the following information:
This example starts with a new page in FrontPage, adds a simple text introduction, and then adds form elements using the Form toolbar. The first widget to enter is a simple text box for entry of the user's name. This is the first tool from the toolbar,
and when you click on the tool, you are presented with the Text Box Properties dialog box shown in Figure 27.21. The dialog box needs you to enter a variable name for the result of the user's input. This variable will be sent to the CGI program in a
name=value construct when the user presses the Submit button of the form.
Because this is the first element of a new form, you should also enter the information accessed from the Form button on this dialog box, which will open the Form Properties dialog box shown in Figure 27.22. This dialog box is where you enter the
properties for the entire form, including the script program that will be run when the user presses the Submit button. This example uses one of the bots that ship with FrontPage, the Save Results bot. This bot is described in more detail in Chapter 28;
basically, it records the output of a form into a text file that you can then examine later to gather the results. This bot requires that you enter the name of a file to store the results, so the name results.htm has been entered in the Setting for Saving
Results of Form dialog box shown in Figure 27.23. Another of these input boxes is used for the e-mail input box as well.
Figure 27.22. The Form Properties dialog box is used to input the properties for the complete form.
After you have determined all of these settings, you can add other elements to the form using the other tools on the Form toolbar. To add check boxes, click on the third button on the Form toolbar, which looks like a box with an X in it. The Name field
is used as before—to determine the name=value information that will be sent to the CGI program when the Submit button is pressed. In Figure 27.24, you see that Color1 has been entered as the name and RED as the value. Thus, if this box is checked,
the
information that will be gathered and sent to the CGI program is Color1=Red".
Figure 27.24. The Check Box Properties dialog box is used to input the properties of a check box.
When you add additional check boxes, make sure that each of them has unique name attributes so that you will collect the information that you are expecting to receive.
To add radio buttons, click on the toolbar icon that looks like a radio button, the fourth button on the toolbar.
TIP
These controls are called radio buttons because they operate like radio buttons in that when one is enabled, the others are disabled, similar to pushing a selection button on a car radio.
When you add radio buttons, you are required to enter a group name and value, as shown in Figure 27.25. The group name is used to relate a set of radio buttons to each other so that they function as expected. You can have multiple sets of radio buttons
and each set will operate independently of other sets. When you add additional radio buttons to a set, you need to make sure that all of them share the same group name.
Figure 27.25. The Radio Button Properties dialog box is used to input the for a radio button.
Drop-down list boxes are best used when you have multiple possible selections that would take a large amount of space if you used one of the other choices. These controls can be configured to only allow a single choice out of several, or multiple
choices out of several. When you click on the Drop-Down List icon on the toolbar, you are presented with the dialog box shown in Figure 27.26. This Drop-Down Menu Properties dialog box enables you to enter any number of choices using the Add button. Each
choice has a text component, which is listed as the Choice as well as a Selected attribute, and a value.
The final element that we need to complete our example form is a scrolling text box. This control is used to enable the user to enter freeform text and enable the text to scroll within the input area. Use the Scrolling Text Box Properties dialog box
shown in Figure 27.27 to enter a name for the control and some default text in the control.
The example form needs to more widgets: a Submit button so that the information can be collected and sent, and a Reset button to enable a user to start over with a clean form. Clicking on the button icon opens the Push Button Properties dialog box
where
you name the button and choose its action, either submit or reset, as shown in Figure 27.28. You need to add a button for each choice, so repeat the selection. Note that you can easily change the text on the button, but the only thing this does is make
the
choices easier for your users to understand. When you click on the Submit button, the data from all of the choices in the form are sent to the CGI program for processing.
With this addition, the example form is completed, and Figure 27.29 shows the form as it looks in FrontPage. If you want to see the HTML for the form, choose the menu selections View | HTML (see Figure 27.30).
Figure 27.29. The completed form as it looks in FrontPage.
As you can see, using the Form toolbar makes it much easier to create forms to gather input for a wide range of interactive situations. Considering how much easier it is to create form elements with FrontPage, you might find that you begin to use forms
for more than just the simple comment form.
There are two other increasingly popular HTML tools that FrontPage includes that have the potential of making life a whole lot easier for the webmaster. FrontPage includes an excellent tool to create tables in its already full toolkit. And the addition
of a wizard for creating frames rounds out an already excellent set of capabilities. The final section in this chapter offers a brief discussion of table creation with FrontPage; a discussion of frames can be found in the next chapter, where the use of
the
Frames Wizard is presented in detail.
Since HTML 3.0 was proposed, table support has been an elusive dream for many webmasters. Good results were almost an accident, and certainly a trial-and-error effort. And the trick of using the browser's View | Source to try to understand the
structures was only more discouraging. Such has been the state of table generation. With the advent of HTML 3.2—HTML 3.0 having expired—the specification has only become a little harder to understand. Now there are additional attributes that are
valid for table coding. The Internet Explorer added a few twists to the format, as did Netscape. So a tool to create tables is a real boon to any software for the Web.
NOTE
For detailed information on the HTML specification for tables, look online at
http://www.w3.org/hypertext/WWW/MarkUp/Wilbur/
and also in Chapter 22, "HTML 3.0 and Internet Explorer Extensions."
FrontPage makes the creation of tables almost as easy as it would be using a spreadsheet or word processor program. Tables can be used to store data in a rigid row and column format. Or tables can be used as a layout media—helping to divide the
page into discrete regions that are actually individual cells within a table. Tables can contain text, images, forms, and even nested tables. The most common use of tables on the Web is formatting pages so that they approach a printed document. Table
constructs are somewhat hard to grasp without a good understanding of the layout involved, so the tools in FrontPage are a good place to start in learning how to use this feature. Figure 27.16, earlier in this chapter, shows the Insert Table dialog box.
Remember that you can access this dialog box using either the Table icon from the standard toolbar or using the Table | Insert Table menu selection. If you want to insert a simple uniform three row by three column table, the result would look something
like Figure 27.31, and the resulting HTML code would be similar to Listing 27.2.
Figure 27.31. A three-row, three-column table as it looks in FrontPage.
Listing 27.2. HTML code for a three-row, three-column table.
<table width=100%> <tr><td width=33%></td><td width=33%></td><td width=34%></td></tr> <tr><td></td><td></td><td></td></tr> <tr><td></td><td></td><td></td></tr> </table>
As you can see, the Table tool makes coding a little easier than it would be without the tool. When you have inserted a table into your page, you can use the right mouse button to access the properties dialog box for the current page, current table, or
individual cells, as shown in Figure 27.32. You can also apply text formatting information for the current cell.
You can easily adjust the attributes of a single cell, but what if you want to edit the properties of a range of cells? Using the Table menu, you can select the current row or column or the entire table so that you can easily adjust the properties of
all of the selected elements. As shown in Figure 27.33, you would use the same menu to insert additional rows or columns to the table. Without these Table tools, coding tables would be very tedious.
After you have created a table, adding text, images, or even other tables is as easy as using the appropriate tool and inserting the element in your table. If you want to use tables in your Web pages, you have the tools you need in FrontPage.
In this chapter you've been given a whirlwind tour of all the features that make the FrontPage Editor the tool for the busy webmaster. You should be reasonably comfortable with all of the tools available from the toolbars and be able to create
new pages or edit existing pages easily.
In Chapter 28, "Using FrontPage Bots and Wizards," you learn to enhance pages using some of the wizards and WebBots that are part of FrontPage. You will even learn how you can create your own wizards and WebBots using the FrontPage Software
Development Kit.
