Platinum Edition Using Windows 98

Previous chapterNext chapterContents


- 36 -

Creating Web Pages with FrontPage Express


by Paul Sanna

Introducing FrontPage Express

FrontPage Express is a near-WYSIWYG HTML page editor that enables you to build pages to be viewed in a web browser over either the Internet or local corporate intranets. First, take a quick look at what "HTML" and "near-WYSIWYG" mean.

WYSIWYG is an acronym for "What You See is What You Get." In the case of web pages, the workspace of a true WYSIWYG web page editor shows you exactly what you will see in a browser. FrontPage Express is actually a "near-WYSIWYG" web page editor because its display of a page is not always exactly the same as a browser's. That said, its display is very, very close to what will show up in a browser window. (In fact, there are no truly and completely WYSIWYG web page editors, partly because different browsers have slightly different ways of displaying certain page elements. This is because HTML is simply a markup language and does not specify the actual appearance of tags within a browser.)

HTML stands for Hypertext Markup Language. In HTML, special character codes are inserted into a text file to generate particular effects, such as bold or the appearance of a graphic, a hyperlink, or a table. When a browser opens a page, the browser reads and then translates the HTML into the text and images you see onscreen. You will see a few examples of HTML in this chapter, but you will not have to write any HTML. This is because FrontPage Express develops the HTML for you. As you lay out your pages in FrontPage Express, the HTML code is automatically written behind the scenes. When you save your work, FrontPage Express saves the HTML codes required to present the page you have developed.

Understanding Web Page Design

Web authoring is a young art, but already there is some agreement about its basic principles. The following guidelines list the fundamentals of text layout and hyperlink design.

Launching FrontPage Express

You can launch FrontPage Express either from the Start menu or from the Internet Explorer browser. When you launch Front Page Express from the browser, the page you were viewing is loaded directly into FrontPage Express. With this technique, FrontPage Express enables you to edit any pages you see on the World Wide Web, right there on your desktop. Naturally, you won't be able to change the web pages you're viewing (unless you are working on a web to which you have rights), but this gives you a great way to see first-hand how real-life web pages are built. Furthermore, you can keep your own copy of the web page you're viewing by saving it as an HTML file on your own PC, and then you can examine it later at leisure. You can, of course, edit that copy you have of the page on your own machine.

In addition, if you are working on an existing web, say for your company or organization, this method makes it easy to select the page you want to work on without having to access the server where the pages are stored.

Here are the two methods you can use to launch FrontPage Express:

Opening Existing Pages

You can open existing pages that are stored locally or on an existing web. Follow these steps to open a page.

1. Choose File, Open from the menu.

2.
If you are opening a page that has not yet been published to a web or if it is stored locally, choose the From File option. Enter the name of the file in the text box. Use the Browse button if you need help locating the file and/or entering its name and location. Click OK.

or

If you are opening a page that already has been published to a web, choose the From Location option. Then enter the URL and the name of the page in the edit box and click OK.

FIG. 36.1 Launching FrontPage Express creates a new blank page in the workspace.

Hiding and Displaying Toolbars

FrontPage Express includes three toolbars. Like toolbars in other applications, the toolbars in FrontPage Express show buttons for common tasks, such as changing text size, indenting, inserting an image, and more. Unlike in other applications, however, you cannot modify the buttons on any of the toolbars.

Here is a description of each of the toolbars:

You can hide or display any of the toolbars. To display or hide a toolbar, just choose View from the menu bar and select the appropriate toolbar from the menu (see Figure 36.2). If a check appears beside the toolbar name, the toolbar is already displayed. If a check already appears beside a toolbar name and you click the name, the toolbar becomes hidden.

FIG. 36.2 Use the View menu to specify the toolbars you want displayed.

You can also drag the toolbars to different locations in the toolbar region. For example, drag the Forms toolbar up to the same line as the Format toolbar. Furthermore, you can drag the toolbars down into the workspace, where they will become floating toolbars.


TIP: Using the View menu, you can control whether or not the status bar is displayed along the bottom of the workspace; you can also turn on or off format marks, which show you symbols for page elements (such as line breaks) and inserted HTML code.

Saving Your Work

At some point, you will want to save the work you have completed on your web page. You have two choices for saving web pages. You can save your work to a file or to an existing web. How you originally opened the page and whether you have started a web will determine which choice you make. Here are your options:


NOTE: Adding a new page to an existing web only works if the server supporting the web has the Microsoft FrontPage extensions installed on it. 

To save a page you are working on to a file, follow these steps:

1. Choose File, Save As.

2.
From the Save As dialog box, choose As File.

3.
Select a folder from the Save As File dialog box, enter a name for the file, and then click Save.

Creating Web Pages Instantly

Almost all the information presented in this chapter helps you build web pages using FrontPage Express' long list of features. Luckily, FrontPage Express provides templates and wizards that remove much of the work that is normally involved with developing a page, such as positioning and formatting text. The list of templates and wizards appears when you choose the File, New command (see Figure 36.3).

FIG. 36.3 You see the list of available templates and page wizards when you choose File, New. The following sections explain how to use the templates and wizards.

Using the Normal Page Template

If you select this option and click OK, FrontPage Express creates a new blank page in the editor workspace. It is exactly the same as if you had clicked the New Page icon on the Standard toolbar.

Using the Personal Home Page Wizard

Many Internet service providers (ISPs) and online services host web pages and even web sites for their subscribers--sometimes at no additional cost. Many universities and colleges also provide this service to their students. This means that even persons without access to the hardware required to run a web server can establish a presence on the web. Many times, this presence is nothing more than a personal home page with a number of links that provides an update on the life and activities of the person who posted the page.

The only requirement for this type of presence is for you to supply the content. FrontPage Express makes it easy to develop these types of pages with the Personal Home Page Wizard. This wizard walks you through the steps required to create a personal page. When you have answered all the wizard's questions, it creates an attractive page that you can then submit to the service that is hosting your web page. Your only work is to supply the details into the preformatted sections, which are created based on your responses to the wizard.

Here is the type of information you might supply for the Personal Home Page Wizard:

To use the Personal Home Page Wizard, follow these steps:

1. Choose the File, New command. The New Page dialog box appears.

2.
Select Personal Home Page Wizard from the Template or Wizard list box, and then click OK. The Personal Home Page Wizard dialog box appears (see Figure 36.4).

FIG. 36.4 The Personal Home Page Wizard helps you set up a personal home page, using pre-established categories of information.

3. From the Personal Home Page Wizard dialog box, select the type of content you would like to include on your home page. Keep in mind that the wizard will create just one page, not a web of linked pages. This means that the more items you select from the Personal Home Page Wizard, the longer your home page will be. After making your selections, choose Next.

4.
In the next dialog box, click in the Page URL text box and specify the filename of the page, as it will be stored on the web. In the Page Title text box, enter the title of the page as it will appear in the browser (see Figure 36.5). FrontPage Express provides a default filename and page title, but you should replace them with meaningful ones of your own.

FIG. 36.5 In this dialog box, you get the chance to specify a filename and page title for your home page.

5. Next, the wizard presents a series of dialog boxes in which you supply personal information that the wizard will use to build your page. What type of information it asks for depends on the choices you made in step 3. For example, if you chose to include biographical information, you would be prompted to select a format for the biographical section of the home page; in this case, you could choose from an Academic, Professional, or Personal format (see Figure 36.6). When you finish with one dialog box, choose Next to move to the next one or choose Back to change information you've already provided.

FIG. 36.6 The wizard gives you a choice of formats for your home page's biographical section.

6. When the wizard has collected all the information it needs to build your page, it displays a dialog box similar to the one shown in Figure 36.7. This dialog box includes a list box that shows each of the major sections you're creating with the Personal Home Page Wizard. This is your opportunity to choose the order in which the sections appear on the page. Choose a section, and then click either the Up or Down button to specify the order of the sections. When you're done, choose Next.

7.
Choose Finish from the final dialog box, and the almost-completed page appears in a window in FrontPage Express. Review the page, and replace any "instructions" that appear with the information required, as shown in Figure 36.8.

FIG. 36.7 You can choose the order of the sections that appear on your personal home page.

FIG. 36.8 When the wizard finishes building your page, you supply some of the detailed information yourself.

Using the Form Page Wizard

The Form Page Wizard creates a web page that collects different types of information from the person viewing the page in a browser. Examples of form pages you might create include an order form (if you were selling something over the Internet) or a list of questions (if you were conducting a survey).

Form pages can contain many of the controls used today in Windows applications (see Figure 36.9). Controls are the onscreen elements--list boxes, buttons, check boxes, and more--used in Windows and in Windows application to operate the system. The Form Page Wizard automatically places on the page whichever controls are necessary to collect the information you require from the user.

FIG. 36.9 Web pages can use many of the controls used in non-web applications.

You should understand one important point about the Form Page Wizard: Your work is not close to being done when the wizard finishes creating your page. The wizard builds many of the controls your page requires based on your responses. However, most of the logic required to put your page to work (such as validating that a zip code supplied does not contain non-numeric values or calculating the total amount of an order) must be completed without the help of the wizard. This warning is not meant to discourage you from using the wizard, though, only to inform you that the wizard alone will not build a fully functioning form.

The following steps get you started with the Form Page Wizard.

1. Choose the File, New command. The New Page dialog box appears.

2.
Select Form Page Wizard from the Template or Wizard list box, and then choose OK. The Form Page Wizard dialog box appears. Choose Next to continue.

3.
In the Page URL text box, specify the filename of the page as it will be stored on the web. In the Page Title text box, enter the name of the page as it will appear in the browser. Choose Next to go to the Add/Modify/Remove dialog box (see Figure 36.10).

4.
To add a question to the form, choose Add. A list of possible types of information your form can collect appears (see Figure 36.11).


NOTE: If the page you specified in step 3 already exists, the wizard will scan that page for any content it believes to be form-related. If it finds questions on the form, it displays them in the list shown in the dialog box in Figure 36.11. This enables you to open an existing form page and modify it, or to continue working on a page you've already started. 

FIG. 36.10 Use the Form Page Wizard dialog box to set up the questions for your form. This one shows contact and ordering information.

FIG. 36.11 The Form Page Wizard can collect many types of information.

5. Scroll through the list presented and select the first of the types of information you want to collect on your form. Notice that when you select a particular type from the list, a note about the type appears in the Description frame beneath the list. Also notice that the prompt for the information, which will appear to the person viewing your page, appears in the edit box at the bottom of the dialog box. If you like, you can customize the prompt by editing the text in the box. When you have selected the information type you want to collect and perhaps edited the prompt, choose the Next button.

6.
Depending on the type of information you selected, you might be presented with another dialog box requesting more detailed information about your prompt (see Figure 36.12). For example, if you specified "contact information" in step 5, the wizard will ask you if your form should request such information from the user as name, title, organization, address, and phone. Answer the prompts in the dialog box and choose Next.

7.
The dialog box described in step 5 appears again. Choose the next type of information your form will request, and then follow the instructions in step 6. Repeat steps 5 and 6 until all the information your form will request is represented in the list box. When the list of prompts is complete, choose Next.

8.
In the next dialog box, you set the presentation style for the form (see Figure 36.13). Specify the styles you want, and then click Next.

FIG. 36.12 You can choose several data items related to contacts in this section of the Form Page Wizard.

FIG. 36.13 You can customize the form's presentation with the option buttons in this dialog box.

9. In the next dialog box, you specify how FrontPage Express should deal with the information the user provides. Choose from these options:

Save Results to a Web Page creates an HTML file.

Save Results to a Text File creates an ASCII text file. Use Custom CGI Script specifies that a CGI script (which you have to write) handles the user's input. You specify the name of the output file in the text box labeled Enter the Base Name of the Results File. "Base name" simply means that this is the filename to which the appropriate extension--HTM, TXT, or CGI--will be added (see Figure 36.14).

Choose Next.

10.
In the final dialog box, click Finish. FrontPage Express creates the page according to your input.

11.
Review the page and replace any "instructions" with the information required. You can also customize many of the fields, specifying the default value, for example. You can display the options available to any of the fields by double-clicking on the field.

FIG. 36.14 In this dialog box, you specify the results file format.

Using the Survey and Confirmation Templates

FrontPage Express templates can also be used to quickly create content for the web. The templates provided with FrontPage Express work differently than the wizards. As you learned in the previous section, the wizards collect information and then build the page for you based on your answers. Templates do not prompt you for information. Instead, you choose the type of page you want to build from a list of templates, and then FrontPage displays a preformatted page with a series of placeholders you can replace with your own information.

For example, if you were to create a page based on the Survey Form template, you would need to replace the sample questions provided by the template (such as "What is your favorite color?") with the questions you want to include in your survey.

Follow these steps to create a page using a template:

1. Choose the File, New command. The New Page dialog box appears.

2.
Select either the Survey or Confirmation template from the list, and then choose OK.

3.
The page appears on the screen. Edit the page to replace its generic content with the information required. Figure 36.15 shows what the Survey form looks like before it's edited.

The usefulness of the Survey template is pretty obvious, but that of the Confirmation template is a little less so. Basically, it's the basis of a custom confirmation page that you can use to tell a user you have recorded the information he sent you. When he clicks the Submit button of a form you provided, assuming you have set that form up to use this custom confirmation page, the confirmation page appears in his browser.

FIG. 36.15 The Survey template can be customized to meet your particular information-gathering needs.

Formatting and Positioning Text

Entering text in FrontPage Express is very similar to entering text in any word processor. You click anywhere on the page and start typing. You can also copy text from another application and then paste it into the page that is currently open in FrontPage Express. FrontPage Express provides a wide range of text formatting options.

You can also specify the position and alignment of text on a line-by-line basis, or you can use built-in styles, which make it easy to apply groups of formatting commands with just one click. The next few sections cover the following formatting topics:

Formatting Text

You format text in FrontPage Express much as you do in other Windows applications. You select the text to be formatted, and then make selections either from the toolbar or from choices on the Format menu.

To format text in FrontPage Express, follow these steps:

1. Select the text to be formatted.

2.
Choose the Format, Font command to open the Font dialog (see Figure 36.16).

FIG. 36.16 From the Font dialog box, you cannot only change fonts and their sizes, but you can also apply special effects such as strikethrough.


NOTE: The font you choose will be used by the viewer's browser only if that font is also installed on the viewer's machine. If that font isn't installed, his browser will use its default font. In connection with this, be aware that FrontPage Express might add Microsoft-specific extensions to a page, and the effects of these extensions might not appear in other manufacturers' browsers. 
3. To specify the typeface for the text, choose the font name from the Font list.

4.
To specify the style for the text, make a selection from the Font Style list. Keep in mind that the choices in the Style list will vary based on the font selected.

5.
To specify the size of the text, make a selection from the Size list box. The choices in the Size list also vary based on the font selected.

6.
Apply effects such as underlining, strikethrough, or a typewriter font by selecting the appropriate check box(es) in the Effects group.

7.
To select a color for the text, click the Color drop-down arrow and select a color from the list that appears. To create a custom color, choose Custom from the list.

8.
To create a subscript or superscript effect, choose the Special Styles tab. Select the appropriate effect from the Vertical Position drop-down list, and then set the amount of vertical offset using the B_y list.

9.
Choose OK.


TIP: If you experiment with character formatting on a large section of text and you mess it up and want to start all over again, you can easily do so. Select the offending text and choose Format, Remove Formatting. Character size, font, color, and attributes (such as bold) all revert to the default of Times New Roman, size 3 (12 point), regular typeface, color black.

Using Styles to Position and Format Paragraphs

To position text in FrontPage Express, you have two options:

The difference between the two is that the table option allows you more precision in placing text on the page, but it also adds an extra layer of work and complexity. The basic rule of thumb is to use a table to lay out a page or a section of a page where graphics and text appear on the same line, such as in columns. Otherwise, the built-in styles and menu commands should suit your needs. Creating tables is covered in detail later in the chapter in the section "Creating and Editing Tables."

To use one of FrontPage Express's built-in paragraph styles and/or menu commands to position text, follow these steps:

1. Click anywhere in the paragraph to be formatted. If you want to format multiple paragraphs, select all of the paragraphs that will be positioned the same way.

2.
To indent the selected paragraphs, click the Indent button on the Format toolbar.

To outdent the selected paragraph(s), click the Outdent button on the Format toolbar.

To choose a built-in style, choose one from the drop-down list on the Format toolbar. Table 36.1 provides a short description of each FrontPage Express built-in style.

Table 36.1  FrontPage Express Built-In Styles

Style Name Formatting Description
Address Italics, no indent, double spaced
Bulleted List Bullet, indented, single spaced
Defined Term Single spaced, first line left aligned, subsequent lines indented
Definition Single spaced, first line indented, subsequent lines further indented from first
Directory List Same as bulleted list
Formatted Bullet, single spaced
Heading 1 Bold, left aligned
Heading 2 Bold, left aligned
Heading 3 Bold, left aligned
Heading 4 Bold, left aligned
Heading 5 Bold, left aligned
Heading 6 Bold, left aligned
Menu List Bullet, indented, double-spaced
Numbered List Same as standard numbered list


TROUBLESHOOTING:

I wanted to change from Normal to Formatted style when I was part way through a paragraph. When I used the Paragraph Properties dialog box to do this, the whole paragraph changed to Formatted style. The same thing happened when I tried to do it using the Change Styles box. What's going on? Changing a paragraph style isn't the same as changing character style (such as applying bold or selecting a font). Character style changes (those you apply with the Font dialog box) affect only selected text or whatever characters you type after the change. However, when you select a paragraph style (the selection method makes no difference), the style is always applied to the entire paragraph. You cannot break the paragraph into chunks and apply a different style to each chunk.


Using Line Breaks to Control Text Formatting

Sometimes you need to keep short lines of text together and not allow a blank line of text between them. The trouble is, if you try pressing Enter where you want the text to break, you always get a blank line. The solution is to insert line breaks. A line break orders a browser to jump to the very next line of its window.

The procedure is simple: To keep short lines of text together, press Shift+Enter when you reach the end of the line. This inserts an HTML line break tag into the text stream, which orders a browser not to leave a blank line before the start of the next line of text. If you've turned on Format Marks (with either the View menu option or the Show/Hide Format Marks button on the toolbar), you'll see a line break symbol in the FrontPage Express workspace. These symbols, of course, don't show up in a browser.

Line breaks don't define the end of a paragraph. Therefore, the paragraph style affects all the text between the end of the previous paragraph and the start of the next, completely ignoring the presence of the line breaks.

Creating Bulleted and Numbered Lists

You can easily add a bulleted or numbered list to your web pages. FrontPage Express even provides a few styles of each so you can customize your lists to a certain extent. You can quickly format a list as a bulleted or numbered list from the Format toolbar, or you can make more specific choices from the Bullets and Numbering dialog box. Follow these steps:

1. Enter the list of items to be bulleted on the page. Be sure to press Enter at the end of each line.

2.
Select all the paragraphs in the list.

3.
To create a bulleted list, click on the bulleted list button the Format toolbar. To create a numbered list, click on the numbered list button on the Format toolbar.

4.
If you want to exert a bit more control over the appearance of the bullets or numbers, choose Format, Bullets and Numbering from the menu. Select either the Bulleted or Numbered tab, select the format, and click OK.


TIP: A fast way to start a list (of any kind) is to use the Change Style drop-down list box. It contains all the types of lists that FrontPage Express supports. Alternatively, click the Bulleted List button or the Numbered List button on the toolbar to start a list of that type.

Adding Horizontal Lines

You can add horizontal lines anywhere on your web page. These lines are useful for breaking your page into sections. You can specify the color, weight, alignment, and size of the line.

To add a horizontal line, follow these steps:

1. Click on the page in the location where you want the horizontal line to appear.

2.
Choose Insert, Horizontal Line from the menu. A line appears on the page.

If you are content with the appearance of the line on the page, your work is done. If you would like to customize the line, continue to step 3.

3.
Double-click anywhere on the line, and the Horizontal Line Properties dialog box appears (see Figure 36.17).

FIG. 36.17 You can customize the appearance of a horizontal line on your page.

4. You can specify whether your line is a fixed length (in pixels) or whether it occupies a specific percentage of the width of your page. To specify your preference, select either Percent of Window or Pixels from the Width frame, and then enter the appropriate value in the scrolling list box.

5.
Specify the height of the line (in pixels) in the height scrolling list box.

6.
In the Alignment area, specify whether the line should be left-, center-, or right-aligned by selecting the appropriate option.

7.
Select a color from the Color drop-down list.

8.
To create a solid line with no shadow effect, select the Solid Line (No Shading) check box.

9.
Choose OK to put your changes into effect.


CAUTION: Often when sizing various page elements, you get a choice between sizing in pixels and sizing by percentages. Generally, you should choose percentages. If you choose pixels and the user has his display set to a resolution different from yours, the element might not fit his screen properly.

Inserting and Managing Hyperlinks

The capabilities of HTML allow page developers to provide links to other web sites, and links on those web sites to other sites, and so on. Hyperlinks help the user navigate through the web (or just through your site) by means of following relevant, related information. You will most likely want to provide hyperlinks on your pages to other locations on the web.

To add a hyperlink, follow these steps:

1. Enter the text that will be used as a link. The text might be a word, or phrase, or a name that brings the user to a specific place on the web, or it might be the actual URL for the location that will be linked. Keep in mind that the text you want to use as a hyperlink might already have been entered. For example, you might provide a link from a word in a paragraph you entered when you first began developing the page.


NOTE: You might prefer to add hyperlinks when you have completed almost all of the other work on your page instead of worrying about the links as you develop your page. You can add hyperlinks at any time, so you might want to focus on the content of your page first and then add hyperlinks at the end. 
2. Select the text you entered in step 1 (or whatever text you want to use as the link).

3.
Choose Insert, Hyperlink from the menu. The Create Hyperlink dialog box appears (see Figure 36.18).

4.
You can create a hyperlink to a page that exists on the web, to a page you already have open in FrontPage Express, to a bookmark on an open page, or to a page that has not yet been created.

To create a link to an existing page on the World Wide Web,
choose the World Wide Web tab (refer to Figure 36.18). Select the appropriate protocol from the Hyperlink Type drop-down list (more than likely, http: will be the type), and then specify the URL in the URL text box. Click OK.

FIG. 36.18 Use the Create Hyperlink dialog box to set up links to pages open in FrontPage Express, to locations on the World Wide Web, or to a new page.

To create a link to a page you have open, including the current page, choose the Open Pages tab (see Figure 36.19). Each of the pages currently open in FrontPage Express is named in the Open Pages list. Click the name of the page, and then click OK to create the link. Keep in mind that this procedure will create a link to a specific file in a specific location in a directory. If the target file is moved to another directory, the link will become invalid.

FIG. 36.19 You can create a link to any page currently open in FrontPage Express.

To create a link to a bookmark on an open page, choose that page from the Open Pages list, and choose the appropriate bookmark from the Bookmark drop-down list. Then click OK. (To find out how to place a bookmark on a page, see the section, "Creating Bookmarks.")

To create a link to a new page,
choose the New Page tab. Enter the title of the page you want to create in the Page Title text box, and enter the filename of the page in the Page URL text box. Click OK, and the New Page dialog box appears (it was described earlier in the section "Creating Web Pages Instantly"). Select the type of page you want to create and click OK. Keep in mind that if you choose a page type based on a wizard, the appropriate wizard will be launched. If so, follow the onscreen directions. If not, click OK to create the link.


TIP: An easy way to specify a hyperlink to a World Wide Web target is to open that page in your browser when you define the link. The URL of the page currently open in your browser automatically appears in the URL text box of the Create Hyperlink dialog box. This eliminates any chance of typing the address wrong when you create the link.

If you need to modify the properties of a link, click on its text and choose Edit, Hyperlink. The Edit Hyperlink dialog opens. Except for its title, this dialog box is identical to the Create Hyperlink dialog box discussed in the previous steps.

To remove a hyperlink, select the hyperlink text and choose Edit, Unlink.


TIP: If you put the cursor over a hyperlink but don't click it, the URL of the destination appears in the FrontPage Express status bar. This is handy for identifying the link's destination without actually having to go there.

Creating Bookmarks

A bookmark is a label that points to a specific location on your page. Users don't see bookmarks. A bookmark is used with hyperlinks when you want to provide a link on one page to another location on the same page. As an example, if you want to provide a link from the table of contents that appears on the top of the page to the relevant section later in the page, you would need to create a bookmark.

Here is how you create a bookmark on your page:

1. Select the text that is to serve as the bookmark.

2.
Choose the Edit, Bookmark command. The Bookmark dialog box appears (see Figure 36.20).

FIG. 36.20 Creating a bookmark makes it easy to create a hyperlink to a specific position on a page.

3. By default, the text you selected to bookmark appears as the name of the bookmark. If this is acceptable, choose OK. If you would like to specify some other text as the bookmark, enter the text in the Bookmark Name text box, and then choose OK.

4.
The dialog box closes. Click anywhere outside the bookmark text, and you'll see that it now has a dashed underline. This tells you that there is a bookmark at that position. The dashed underline does not appear in a browser.


TIP: To clear a bookmark, click anywhere in the marked text and choose Edit, Bookmark, Clear. The bookmark vanishes.

Adding Graphics

It's rare to find a web page without at least one graphic element. You can certainly add an aesthetically pleasing element to your page by adding some sort of graphic, even if you're not an artist. Many applications today come with dozens of clip art images you can borrow and use on your page. For example, Microsoft Word provides a wide selection of clip art, and you can borrow any of those images for use with FrontPage Express. In addition, your local software store probably stocks a selection of graphics libraries available on CD, each of which stores thousands of different images.

Your challenge as a web page developer, then, is not to create the graphics, but rather to decide how to integrate one or more graphic elements into your page. In this section, you'll look at how to add images to a web page. The first order of business, however, is to introduce two primary types of graphics used on the World Wide Web.

Understanding Graphics Types

Many software applications available today let you produce anything from the most basic to the most complicated drawing. Some of these applications save the drawings in a specific format, which means that only applications capable of reading the format can use the graphics. While many applications can read and write different formats, graphics for the web usually are found in two formats: GIF and JPEG.

GIF (pronounced jiff) is a graphics format developed by the online service CompuServe. While a number of versions of the GIF file exist, the most common one supports 256 colors. GIF is probably the most widely used format on the web, and almost every browser and image editor supports this format.

The GIF format also supports a process known as interlacing. An interlaced image is displayed in the browser in stages, which enables the user to begin viewing the image much sooner than he could if the graphic were not interlaced. You can specify for any GIF image you include on a FrontPage Express page to be interlaced by simply checking the Interlaced option when you select the image to be loaded.

Another option that FrontPage Express supports for GIF files is transparent images. When an image is created, a transparent color index is selected. This color blends with the background color of the browser when the image is displayed (only if the browser supports the display of transparent images). This effect blends the focal part of the graphic--such as a picture of the author of this chapter--with the background of the browser to give the appearance of a borderless image.

The other major web graphical format is JPEG. JPEG (pronounced jay-peg) was developed by the Joint Photographic Experts Group. The standard JPEG may contain up to 16 million colors. The most interesting, colorful, and detailed images you see on the Internet are most likely JPEG graphics. Considering the great resolution JPEG images provide, you may be wondering why all graphics are not JPEG format. One of the problems with JPEG images is that because of the detail they support, the file usually must be compressed when it is downloaded. And the compression process sometimes results in a loss of detail. In addition, a loss of detail sometimes occurs when a JPEG image is reduced from its original size to the size needed by the individual who is building the page.


TIP: The GIF format is best for images without continuous-tone shading, such as line art drawings. JPEG is the format of choice for graphics with continuous-tone shading, usually photographs.

Inserting a Graphic

You can insert a graphic from two different sources: from a file on your computer or network or from another site on the web. When you insert a graphic from the web, you are actually creating a pointer to the web site where the graphic is located; the graphic is not actually copied to your web site. With that in mind, you should be sure that any graphic you are referencing on another web site will not be moved later.


NOTE: You should also be sure that the viewers of your page will, in fact, have access to the referenced site if that's the approach you use to display the graphic. Thanks to proxy servers and intranet restrictions, many sites are unavailable to users on a company LAN. 


TIP: The best method for including a graphic from another web site into your page is to copy the image. To do so, right-click on the target graphic, and then select the menu choice that saves the graphic locally. That way, you have your own copy of the graphic file. Remember, however, that copyright law applies to the Internet and the web: Many images are for free use, but not all. Don't use copyrighted images without permission from the owner. If you put something like a Disney character on your site, for example, you're asking for legal trouble.

To insert a graphic onto your web page, follow these steps:

1. From the menu, choose Insert, Image. The Image dialog box appears (see Figure 36.21).

2.
To insert an image stored on your computer or a network resource to which your computer is attached, choose the From File option and then enter the name of the file in the edit box. Use the Browse button if you need help locating the file and/or entering its name and location.

To insert an image stored on a web site, choose the From Location option, and then enter the URL for the site and the name of the image in the text box.

3.
Choose OK, and the image appears on the screen

FIG. 36.21 You add graphics to your page by using the Image dialog box.

Managing the Size of Your Graphic

When you insert an image into your web page, the image occupies an area on your page matching its size. In other words, if the image is 100 pixels wide by 100 pixels tall, it will occupy a 100*100-pixel area of your page at the location where you inserted it. You might want to increase or decrease the size of the graphic. You can use either of two techniques to do so:

Adding a Hyperlink to Your Graphic

You may want to provide a hyperlink with a graphic on your web page. This gives the user the capability to link to another site via a graphic instead of a word or phrase.

To add a hyperlink to a graphic, follow these steps:

1. Insert the image into the page using the method described previously.

2. Click the image to select it and choose Edit, Hyperlink to open the Create Hyperlink dialog box.

3. Set up the link using the techniques you learned earlier in this chapter.

Specifying Options for Your Graphics

As you learned earlier in the chapter, depending on the format of your graphic, you might be able to specify a number of options for it, such as whether a GIF graphic is interlaced.

To specify options for a graphic, right-click on the graphic, and then choose Image Properties. The dialog box that appears will contain options appropriate to the image type you selected.

Using Backgrounds

You can add character to your web pages by adding a background image or colors. When you add a background image to your page, any text or graphics you add to your page appear against that background. The size of the graphic determines how your background appears. FrontPage Express will tile the graphic across your page, which means it copies the graphic across the page and down to the bottom. Therefore, if you require a broad background, such as the sky and clouds, be sure your graphic is at least 640*480 pixels. If you prefer a tiled effect, such as a company logo, almost any size is suitable.


TIP: An attractive effect is to present a border down the left side of the page. To create this effect, the graphic you use should be 640 pixels wide, but the illustration or picture to use as the border should occupy the leftmost area of the graphic. If you use a graphic that is wide as the screen, FrontPage Express cannot wrap the image. Instead, it repeats the image down the page.

To specify a background image or color for your page, follow these steps:

1. Select File, Page Properties from the menu. The Page Properties dialog box appears. Choose the Background tab (see Figure 36.22).

FIG. 36.22 You can specify a background image and color for your page.

2. To add a background image, choose the Background Image check box, and then enter the filename and location of the image in the edit box. Use the Browse button if you need help locating the file and/or entering its name and location.

3.
To specify a background color for the page, select the color from the Background drop-down list.

4.
Choose OK.

Creating and Editing Tables

Tables are a critical component of all but the most basic of web page designs. However, the application of tables in web pages isn't strictly to handle columns and rows. Tables also make it easy to position graphics and text at any location required. By merging and splitting rows and columns, you can use tables to place graphics and text in locations that would be difficult to access using only indenting and alignment commands.

Adding a Table to Your Page

You can add a table to your web page from either the Standard toolbar or the menu. If you use the menu, you can specify a number of options for your table when it is created (such as cell padding and border size). When you use the toolbar to create the table, your choices are limited to the number of columns and rows. Of course, after you create a table with the toolbar, you can always select the entire table to customize it. To do so, choose Table, Table Properties from the menu.

The following list explains each method for creating a table:

FIG. 36.23 You can add a table to your page quickly by using the toolbar.

Adding Rows or Columns

Even with the best planning, you might discover a class of information you didn't allow for and decide you need a new row or column in your table for it. To add either one, select the existing row or column that is to be adjacent to the new one. Choose Table, Insert Rows or Columns. The Insert Rows or Columns dialog box appears. Fill in the data for the number of rows or columns you want to insert and specify where they should go relative to the selection you made. Then choose OK.

FIG. 36.24 The Insert Table dialog box provides you with more options than you have when you create a table from the toolbar.

Selecting Table Components

After you create your table, it is likely you will need to customize it, possibly modifying its size or changing column layout, for example. In order to customize a table in FrontPage Express, you must first select either the entire table or the component of the table you want to work with. The following list explains how to select the various components of the table.

Deleting a Table or Parts of a Table

When you're experimenting, you need to know how to delete an experiment gone wrong. To get rid of a table entirely, click anywhere in it, choose Table, Select Table, and press the Delete key. Another way is to double-click in the left margin to select the entire table, and then press the Delete key or choose Edit, Clear.

You remove columns or rows using the same method: Select those to be cut, and then press Delete. If you delete a cell (as distinct from deleting its content), all the cells to its right slide over to fill the empty space, and a gap appears at the right side of the table.

Splitting and Merging Rows, Columns, and Cells

You can use other techniques to further define the layout of the rows and columns in your table. These techniques are useful when you want to vary either the row or height of cells with respect to other cells in the same columns or row. You can merge columns, rows, and cells together to achieve this type of effect. Figure 36.25 shows an example of a table in which a combination of splitting and merging is used to create a fairly elaborate layout.

FIG. 36.25 You can use merged and split cells to put information precisely where you want it. The following list outlines the techniques for splitting and merging columns, rows, and cells:

FIG. 36.26 You can split cells into columns or rows--as many of each as you need.

Inserting a Table Within A Cell

Another method for customizing the layout of information in a table is to insert a table within a table. This gives you the capability to group and lay out one set of data or content within the context of a larger table. Figure 36.27 shows an example of a table within a table layout.

To insert a table within a cell of another table, select the cell and then repeat the steps given in the section "Adding a Table to Your Page."

Customizing Your Table

In addition to merging and splitting the table and the rows, columns, and cells in your table, you can customize a number of other aspects of a table in FrontPage Express. The following list explains the options and techniques you can use to customize your table:

FIG. 36.27 You can insert a table within another table.

Adding Content to a Table

Now that you have learned how to format and structure a table, here is a quick word on how to enter content. To add text, click in the cell and start typing. All of FrontPage Express's text formatting tools are at your disposal.

As for images, links, and other components, you add these to a table cell by clicking in the cell and continuing as if the new element were standing by itself on the page. The fact that it's in a table makes no difference at all.

Adding Sound and Video

The appeal of a web page can be significantly enhanced by the inclusion of multimedia content, such as sound and video. Many web pages you can browse through today include video clips that you can view online, such as excerpts for upcoming films. Other web sites provide background music as you browse through their pages. Integrating sound and video are simple exercises in FrontPage Express. In this section, you will learn how to integrate video and background music into your web pages.

Adding Video to Your Page

Video is an attractive option for a web page, and adding it to a page is no longer a difficult procedure. New video production hardware and software tools make it easy to develop video at the desktop. Download speeds have increased with new technologies, such as streaming, in which the video clip (as well as other multimedia content) is played as it is downloaded. Faster modems are also coming into wider use, steadily improving the behavior of multimedia content on the web.

To add video to your web page, follow these steps:

1. From the menu, choose Insert, Video. The Video dialog box appears (see Figure 36.28).

2.
Enter the name of the file containing the video content in the From File text box. Use the Browse button if you need help locating the file and/or entering its name and location.

3.
Choose OK, and a placeholder appears on the page. This corresponds to the position on the page where the video will be played when the page is opened.

4.
To customize how the video will be displayed, right-click on the placeholder and choose Image Properties from the shortcut menu. Then choose the Video tab (see Figure 36.29).

FIG. 36.28 You specify the video you want to add to the page in the Video dialog box.

FIG. 36.29 You can control how often the video runs from the Image Properties dialog box.

5. To specify that you want the video to start immediately when the page is opened, choose the On File Open check box. Alternatively, if you want the video to be started when the user's mouse passes over the video, choose the On Mouse Over option.

You can choose the number of times the video should repeat by entering a number in the Loop box. To repeat the video as long as the page is open, choose the Forever check box.

6.
When you finish specifying your preferences, click OK.


NOTE: On File Open works only with Microsoft browsers, which recognize the FrontPage-specific code added to the page by FrontPage Express. 

Adding a Background Sound to Your Page

You can add a sound to your page and have it played automatically when the page is opened. The sound can be played once, you can specify that it should be played a certain number of times, or you can choose to have it play as long as the page is open.

To specify a background sound for your page, follow these steps:

1. Select File, Page Properties from the menu. In the Page Properties dialog box, choose the Background tab.

2.
In the Location text box, enter the name of the file with the background sound. Use the Browse button if you need help locating the file and/or entering its name and location.

3.
Specify the number of times the sound should repeat by entering the number in the Loop box. To increment or decrement the value shown in the box, click the up or down button beside the control. To repeat the sound for as long as the page is open, choose the Forever check box.

4.
Choose OK.


NOTE: If you insert background sound using this technique, it will be heard only by users with Microsoft Internet Explorer browsers version 3 and above. Netscape Navigator users won't hear the sound because Navigator browsers require a Java applet to produce background sound. 

Advanced Web Editing Tools

As the web has grown in popularity and complexity, so has the technology surrounding it. This section provides an overview of the more advanced features of FrontPage Express.

Using WebBots

WebBots are prepackaged functions you can add to your web pages. Instead of developing a function from scratch (such as a feature allowing your user to search your web page or site for a specific word or phrase), you can use a WebBot to add that type of feature. FrontPage Express comes with three WebBots: Timestamp, Search, and Include. Each WebBot is described here:

Knowing that WebBots are designed to save the user work, you would expect that it would be easy to integrate one or more on a web page. Fortunately, this happens to be the case.

To add a WebBot, follow these steps:

1. Click on the location on the page where the WebBot component should be installed.

2.
Choose Insert, WebBot Component from the menu. The Insert WebBot Component dialog box appears (see Figure 36.30).

FIG. 36.30 Using WebBots saves you from doing the complicated programming work needed for advanced web functions.

3. From the list, select the WebBot Component you want to integrate. Then choose OK.

4.
Depending on the WebBot you select, you may need to specify additional options (such as the format of the date and time presented with the Timestamp WebBot). Proceed through the appropriate dialog boxes, choosing Finish at the end.

If you position the mouse pointer over a place on the page where there is a WebBot, the pointer turns into a small robot-like figure. This is the WebBot cursor. Even if you can't see the WebBot itself, the WebBot cursor appears to tell you it's there. If you want to edit the properties of an existing WebBot, double-click while the WebBot cursor is visible, and the properties dialog box for that WebBot will appear.

Adding an ActiveX Control

ActiveX Controls combine the convenience of Java applets with the permanence and functionality of Netscape Navigator plug-ins. Like Java applets, ActiveX Controls can be automatically downloaded to a user's system if they are not currently installed or if the installed version isn't the most recent. Like plug-ins, ActiveX Controls remain available to a web browser continuously after they are installed. (For more information on Java applets, see the next section.)

ActiveX Controls build on Microsoft's highly successful Object Linking and Embedding (OLE) standard to provide a common framework for extending the capability of web browsers. ActiveX Controls, however, are more than just simple web browser plug-ins or add-ins. Because of the nature of ActiveX Controls, they can be used to extend the functionality of Microsoft browsers and any programming language or application that supports the OLE standard.

To insert an ActiveX Control, do the following:

1. Start FrontPage Express and load a document into the workspace.

2.
Choose Insert, Other Components, ActiveX Control to open the ActiveX Control Properties dialog box (see Figure 36.31).

FIG. 36.31 The ActiveX Control Properties dialog box helps you install and configure these controls on your page.

3. Click the Pick a Control drop-down arrow to open the drop-down list of controls that are installed on your system.

4.
Choose the control you want. Then click the Properties button and use the properties dialog boxes to customize the control to suit your purposes.

ActiveX Controls can be complicated to use; they all require parameters of one kind or another, and the page designer must know these parameters to make the controls work. Several controls are installed along with FrontPage Express, but at the time of this writing, Microsoft had not made documentation of these controls available.


NOTE: The list of controls that appears displays all the ones installed on your system. These will primarily be "run-time" controls that cannot be used at "design time" (like in FrontPage or Visual Basic) without a license. To obtain documentation on a control, you must usually purchase a development license from the company that makes it. Various tools (such as the Object Viewer included with Visual Basic 5) are available that can help you determine a control's properties, methods, and events. 

Adding Java Applets

Applets are specialized Java programs especially designed for execution within Internet web pages. To run a Java applet, you need a Java-enabled web browser such as Netscape Navigator 3.x or 4.x or Microsoft's Internet Explorer version 3.x or 4.x. These browsers are capable of recognizing applet tags within an HTML web page and then downloading and executing the specified Java program (or programs) in the context of a Java virtual machine.

Assuming you've created or downloaded an applet, use the Insert, Other Components, _Java Applet command to open the Java Applet Properties dialog box shown in Figure 36.32.

FIG. 36.32 To add an applet to a page and configure it quickly, use the Java Applet Properties dialog box.

The Applet Source is the name of the source file; this always has a CLASS extension, and the filename is case-sensitive. The Base URL is the URL of the folder containing this file. You must add to it any parameter names and values required by the applet. You can find a selection of ready-made applets to download and experiment with at http://www.gamelan.com.

Adding Netscape Plug-Ins

Starting with version 1 of Navigator, Netscape provided ways to enhance its browser with helper applications that support data formats beyond the built-in graphics and HTML. With Netscape Navigator version 2, Navigator began supporting plug-ins, which provided another means of extending the range of data types that can be presented on or with a web page.

FrontPage Express's plug-in insertion command generates the <EMBED> tag, which is recognized by both Navigator and Internet Explorer. Essentially, the <EMBED> tag is a type of link: Objects specified by it are automatically downloaded and displayed when the document is displayed. To insert a plug-in, choose Insert, Other Components, Plug-In to open the Plug-In Properties dialog box (see Figure 36.33).

FIG. 36.33 Use the Plug-In Properties dialog box to embed objects in a web page so browsers that support plug-ins can use them.

In the Data Source text box, type the name of the file you want embedded. The MIME type of the embedded file tells a user's browser which plug-in to use. If the browser is Netscape Navigator and it doesn't have the right plug-in, it offers to download one for the user.

Including a PowerPoint Animation

This procedure assumes you have already created a PowerPoint Animation file from a slide presentation. To include it in a web page, choose Insert, Other Components, PowerPoint Animation to open the PowerPoint Animation dialog box (see Figure 36.34).

FIG. 36.34 You can insert a PowerPoint Animation file as either an ActiveX component or a Netscape plug-in.

Locate and select the animation file. Then choose one of the dialog box's two radio buttons to indicate whether the file will be inserted into the page as an ActiveX Control or a Netscape plug-in. In order to view the PowerPoint animation, you must first download and install the PowerPoint Animation Player as an ActiveX Control or a Netscape plug-in. You can download the player from www.microsoft.com.

Using Marquees

Marquees are those boxes that have text moving through them. Opinions vary on their best use: Some people keep the text moving, others prefer to slide it into view and then leave it static. Your own design sense will be your best guide here.


CAUTION: The <MARQUEE> HTML tag is specific to Internet Explorer browsers; it will not work in Netscape browsers. Netscape implements marquees through Java applets.

To insert a marquee, first choose Insert, Marquee to open the Marquee Properties dialog box (see Figure 36.35).

Use the Text box to type the text you want to scroll, and use the other properties in the dialog box to adjust the marquee's onscreen behavior.

Hand-Coding HTML in FrontPage Express

You're bound to run into situations in which you need to modify a page's HTML code directly. To do this, open the page you want to modify. Then choose View, HTML. In the window that opens, you can directly edit the HTML produced by FrontPage Express.

FIG. 36.35 Make scrolling text look the way you want with the Marquee Properties options.

The HTML view provides what is essentially a text editor. The editing tools are fairly basic, but all the essentials are available: Cut, Copy, Paste, Select All, Find, and Replace.


CAUTION: FrontPage Express does some basic syntax checking of any HTML inserted through the HTML view. If it spots what it thinks is a mistake, it will try to correct it, often by inserting <P> tags into and around the offending code. Unfortunately, if you insert valid HTML code that is not recognized by FrontPage Express, the editor will still "correct" the code, even though it's perfectly legal. If this happens to code you insert, you'll have to use the HTML Markup command, as described in the next section.

Using the HTML Markup Command

This is the only safe way to include HTML code that FrontPage Express doesn't directly support. Code inserted with the HTML Markup command is left alone by FrontPage Express, even if the code is incorrect. To use the command, follow these steps:

1. Choose Insert, HTML Markup to open the HTML Markup dialog box.

2.
Type the desired HTML into the text box. When you finish, click OK to close the dialog box.

After you close the dialog box, you don't actually see the output of the inserted code; instead, a yellow question mark icon appears in the place where the code was inserted. This icon appears even if the code is recognized by FrontPage Express, and it actually signals the presence of the HTML Markup WebBot. To edit the inserted HTML code, double-click on the question mark icon to open the HTML Markup dialog box again.


TIP: If you don't see the yellow icon, your Format Marks are turned off. Choose View, Format Marks to turn them on.

Publishing Your Pages to a Web Site

When you have created all the pages for your web, you probably will want to publish the pages to a web so that other users can access the pages. Simply saving the pages you've created in FrontPage Express isn't enough, however. You must publish the pages to a specific web so that web server software (which is different from both FrontPage Express and your browser and must be installed separately) can process requests from users for the pages. This web server software (on which a web is created) must reside on a computer that browsers can access. There are two general steps for publishing your pages to the web:

1. Establish or locate a web site on which to publish your web and pages.

2.
Publish the pages.

The next two sections cover those steps in detail.


NOTE: Remember that you must have the FrontPage extensions installed on the server and that you also must have appropriate "write" permissions for that server. 

Establishing or Creating a Web Site

As you learned earlier in this chapter (in the section, "Using the Personal Home Page Wizard"), many Internet Service Providers host home pages for subscribers. If you plan to provide more than a single page of information, you might want to consider a host site with greater capabilities. A search of the web will turn up dozens of companies interested in hosting your web site for a nominal amount per month--usually less than $50.

If you have access to the server and are interested in learning the technology, Windows NT Server includes the software to host a web site. In addition, Windows NT Workstation and Windows 98 both provide web hosting software perfect for local webs, such as via intranets.

Publishing Your Pages

Windows 98 provides the tools to publish your web via the Web Publishing Wizard. This wizard is available from the Internet Explorer menu, which you access from the Start, Programs menu. If you do not see the Web Publishing Wizard on the menu, it probably has not been installed.

You can install the wizard from either the Windows 98 or Internet Explorer CD, or you can download it from Microsoft's site on the Internet. The wizard walks you through the steps of publishing your pages and creating a starting home page. The steps are easy to follow, and there is no requirement for in-depth web server knowledge.

When You Should Upgrade to FrontPage

As you become more adept at web page development or when your web site development projects grow in complexity, you might consider upgrading to Microsoft FrontPage 98. FrontPage Express is very similar to FrontPage 98's web editor, so you should find it easy to get into the more advanced package. Here are the main differences between FrontPage Express and FrontPage 98:


Previous chapterNext chapterContents


© Copyright, Macmillan Computer Publishing. All rights reserved.