Chapter 1

Learning Your Way Around


CONTENTS

If you're reading this book, you're probably already somewhat familiar with the Internet. The fastest growing part of the Internet is the World Wide Web. Most people don't become interested in designing their own web pages unless they have seen pages created by others. You realize that the Internet is a great way to tell the world about yourself or your company. This book shows you some ways to do just that. You have the right development tool in FrontPage; it's a powerful, well-thought-out product. FrontPage should satisfy the novice in its simplicity and ease of use. You'll be amazed at how easy FrontPage makes it to produce professional-looking Web pages. FrontPage should also appeal to the more experienced Web page developer in its support of extended features and custom code. Get ready to learn how to develop and manage Web sites the easy way!

You'll work primarily with two parts of the FrontPage development package-the FrontPage Explorer and the FrontPage Editor. Their screens are shown in Figure 1.1.

Figure 1.1 : The FrontPage Explorer and the FrontPage Editor work together to help you develop and manage your Web site.

FrontPage Explorer Basics

When you installed FrontPage on your system, the first thing you probably did was open the FrontPage Editor and start designing pages. You probably then took a peek at the FrontPage Explorer and realized that was where the real power was. What sets FrontPage apart from other development tools is that it enables you to manage your web site through the FrontPage Explorer. By using the FrontPage Editor in conjunction with the FrontPage Explorer, you can manage web sites far more easily than you can with other page editors. For example:

With the FrontPage Explorer, you control and maintain the contents of your web. You can import and export any type of file into your web. Images are displayed on your pages or downloaded from your site. Other types of files can be placed in your site for downloading or viewing, providing that the user has the correct software to display them.

The FrontPage Explorer is also used in conjunction with the FrontPage Server Administrator to administer your web site. Using the Web Permissions dialog box shown in Figure 1.3, you can assign multiple web administrators or authors and allow them access to your entire web or to only parts of it. In addition, you can provide access to end users, providing restricted access to certain parts of your Web site if desired. IP addresses of administrators, authors, and end users can also be restricted.
Figure 1.3 : You can authorize multiple administrators, authors, and end users to gain access to your entire web or to only parts of it.

Opening the FrontPage Explorer

To open the FrontPage Explorer from Windows, choose Microsoft FrontPage | FrontPage Explorer from the Start menu.

To open the FrontPage Explorer from the FrontPage Editor, use one of two methods:

About the Root Web

The first time you start the FrontPage Explorer, one web exists on the server. This is the root web. If you already have pages on the Internet through a local service provider, consider FrontPage's root web to be the equivalent of your home directory. Whereas the URL of the home page on your Internet service provider's server might look something like this:

http://www.yourserver.com/~yourdirectory/index.htm

the home page in the root directory of the FrontPage server on your home computer would have a URL that looks something like this:

http://localhost/index.htm 

or

http://yourservername/index.htm

The root web, shown in Figure 1.4, serves some special purposes in FrontPage. Because it serves as the entryway to the other webs on your server, certain things are placed here. For example, you'll notice a couple of image map handlers in the root web-one for NSCA image maps and the other for CERN image maps. These handlers are there in case you work with a service provider that doesn't have the FrontPage Server Extensions installed. They provide an alternative set of instructions for image-map handling. Check with your service provider to see which image-map dispatcher would be the best for you to use. It's best not to delete the handlers from the root web unless you're certain you won't need them.

Figure 1.4 : The root web is the main entryway to the pages in your webs.

Webs-How to Make Them

There are several ways to create webs in FrontPage, all beginning with the FrontPage Explorer's File | New Web command. You can use the Web templates or Web wizards, you can create new pages based on page templates and wizards and save them to your site, or you can build your entire web site from the ground up.

You can configure the webs on your server in any way you choose. If you start off small, say a home page and a few link pages, you can place the pages in the root web. A simple diagram is shown in Figure 1.5. This method is perfectly acceptable if you don't expect your site to get too big.

Figure 1.5 : If your web is small, you can locate all the pages in the root web.

As your Web site grows, you can create new webs on your server that become subwebs of the root web. The chapters in this section show you many ways to create new webs. Each web will have a directory of its own beneath the root web, as shown in the simple example in Figure 1.6. Each new web can focus on certain topics or areas of interest. The home page in your root web links to the home pages of all the other webs on your server.

Figure 1.6 : As your web grows, you can create new webs that focus on specific topics and link them from a home page in your root web.

TIP
If you have already started creating all your pages in the root web, an easy way to move them from the root web into a new web on the same server is to use the FrontPage Explorer's Copy Web command. This command copies all pages, files, and images into the new web with links intact. You can then delete the original pages from your root web and create a new home page in the root web that provides a link to the home page you moved into the new web.

Webs-How to View Them

The FrontPage Explorer screen is divided into two windows, as shown in Figure 1.7. The left portion contains the Outline View of your web. The right portion can display the contents of your web in Link View or in Summary View. The following sections explain what these views do.

Figure 1.7 : The FrontPage Explorer workspace is divided into two windows.

Outline View-Your Web Hierarchy

The left side of the FrontPage Explorer Window contains the Outline View, which shows a hierarchical representation of the pages in your currently opened web. The hierarchy can be expanded to show all pages that are linked to the selected page. The home page is designated by an icon that looks like a little house (appropriately).

NOTE
By default, FrontPage names your home page index.htm. Refer to Chapter 23, "Web Maintenance and Administration," to learn how to change the default name of the home page.

Link View-Contents at a Glance

Link View, shown in the right portion of Figure 1.7, graphically displays the incoming and outgoing links to a page. Pages are displayed as icons, with the title of the page labeling the icon. Links to and from the pages are displayed as arrows, and pages that are included within the page are displayed as circles.

To display your pages in Link View on the right side of the FrontPage Explorer screen, use one of two procedures:

NOTE
If you right-click on any of the page names or icons in Outline View, Link View, or Summary View, a pop-up menu appears that gives you quick access to some commonly used commands. Six commands are associated with the pop-up menus:
Move to Center (Link View only). To display this command in the pop-up menu, select one of the pages that link to or from the page displayed in the center of Link View. Then right-click to open the pop-up menu. This command moves the page that you selected into the center of the Link View and displays its links.
Find In Outline (Summary View only). Locates the selected page in Outline View.
Open. Opens the page in the FrontPage Editor.
Open With. Opens the page in another editor that is configured with the Tools | Configure Editors command.
Delete. Deletes the selected page from the web.
Properties. Opens the Page Properties dialog box for the selected page.

Summary View-Making Sense of Large Webs

Summary View, shown at the right in Figure 1.8, displays all the details of all the files in your web. It displays the title, filename, size, type, modified date, the name of the person who modified the page, the page URL, and comments for the page. The file list can be sorted in any of these categories, which is quite handy for large webs. A pop-up menu, shown in Figure 1.8, appears when you right-click on a selected filename.

Figure 1.8 : Summary View is especially handy when your web contains many pages, images, and files.

To display your pages in Summary View on the right side of the FrontPage Explorer screen, use one of two procedures:

Displaying the Status Bar and Toolbar

The FrontPage Explorer has a status bar and toolbar that can be displayed or hidden.

The status bar is located at the bottom of the FrontPage Explorer workspace and provides brief descriptions of what each menu command or toolbar button accomplishes. To display the status bar in the FrontPage Explorer, choose View | Status Bar. Repeat the command to hide the status bar.

The FrontPage Explorer toolbar, shown in Figure 1.9, is located beneath the Menu List. The buttons on the toolbar provide quick access to the commands you most commonly use in the FrontPage Explorer. To display the toolbar in the FrontPage Explorer, choose View | Toolbar. Repeat the command to hide the toolbar.

Figure 1.9 : The FrontPage Explorer's toolbar provides quick access to the most commonly used commands.

You'll find 11 commands on the FrontPage Explorer toolbar:

Importing and Exporting Pages

To include files in your web pages or make them available for download by end users, you need to import files into your web. To accomplish this task, perform five steps:

  1. From the FrontPage Explorer, choose File | Import. The Import File to Web dialog box appears. (See Figure 1.10.)
    Figure 1.10: The Import File to Web dialog box.
  2. Click the Add File button to select files to add to your Import List. The Add File to Import List dialog box appears.
  3. Type the name of the file you want to import or use the Look in box to select a file from a drive and directory on your hard drive. Multiple files can be selected as follows:
  4. To import your files to the web, click Import Now. As the files are imported to your web, they are removed from the import list.
  5. Click Close to exit the Import File to Web dialog box.

TIP
The easiest way to import existing pages that you have out on the World Wide Web already is to first use an FTP program to place the files in a directory or directories on your local computer. Then, you can use the File | Import command to import the pages and images into your FrontPage web.

NOTE
Files already listed in the Import List are files that were previously selected for importing but have not yet been imported into your web. Files remain on the Import List until you import or remove them from the list.

You should keep in mind a few important points when you import pages and images into your web. By default, web pages (.htm or .html extension) are placed into the main directory of your current web. Images are placed in an images subdirectory beneath that.

If your existing directory structure differs, it's easiest to edit the URLs of the pages before they are imported into your web. For example, assume that you have existing Web pages on the World Wide Web that do not exist on a FrontPage-enabled Web server. The main pages of this site are placed in its root directory. Beneath the root directory, you have a subdirectory called Interests, which contains pages that describe your hobbies and interests. You have another subdirectory called Inventions, which contains pages that describe some of your original inventions and creations. Your images are stored in a subdirectory called Graphics. To ensure that the links between these pages are not broken, you need to duplicate the same directory structure in your FrontPage web.

You can use the Edit URL button in the Import File to Web dialog box to place the imported files into the appropriate directories in your FrontPage web. However, the directories must already exist in your web to use this button.

NOTE
You can also create subdirectories in your web and rename or move a page at a time after the files are imported into your web. See "Renaming or Moving Pages" later in this chapter.

To duplicate the directory structure in your FrontPage web, follow these steps:

  1. Create a new web in the FrontPage Explorer. Import the main pages that exist in the root web of your original web site into this directory.
  2. Switch to the Windows Explorer (Windows 95) or the File Manager (Windows NT) to duplicate the existing directory structure beneath your new FrontPage web directory. For example, your new FrontPage web is located in the C:\FrontPage Webs\Content\MyNewWeb directory on your hard drive. Create three new subdirectories beneath this directory, naming them Interests, Inventions, and Graphics.
  3. Switch back to the FrontPage Explorer and use the File | Import command to import the files from your original web directories-Interests, Inventions, and Graphics-into your FrontPage web. The files are added to the import list.
  4. After files are placed in your Import List, use the Edit URL button in the Import File to Web dialog box to direct each page or image to the correct subdirectory. Edit the URL of each page in the Edit URL dialog box shown in Figure 1.11. You can copy portions of a URL from the dialog box and paste them as necessary when you edit each page URL.
    Figure 1.11: You can use the Edit URL dialog box to import pages into directories that exist beneath your web directory.
  5. After all the URLs are correctly edited, use the Import Now button in the Import File to Web dialog box to import the files to the Web. The files are imported into your new FrontPage Web site one by one and are placed into the appropriate directories at the same time.

To remove a file from the Import List, follow four steps:

  1. From the FrontPage Explorer, choose File | Import. The Import File to Web dialog box appears.
  2. Select the file or files you want to remove from the Import List.
  3. Click the Remove button.
  4. Click Close to exit the Import File to Web dialog box.

To save a copy of a page to a hard drive on your local or network computer, use the File | Export command in the FrontPage Explorer. The original page remains in your current web. Follow four steps:

  1. From the FrontPage Explorer, choose File | Export Selected. The Export Selected As dialog box appears.
  2. Use the Save In box to locate the folder on your hard drive to which you want to store the page or file.
  3. Use the File Name field to change the name of the file, if desired.
  4. Click Save to export the file.

Selecting Pages

You can open more than one page at a time in the FrontPage Editor. One easy way to open multiple pages is to select them from the FrontPage Explorer as follows:

After you select the pages, click and drag the selection of pages into the FrontPage Editor. Release the mouse button in the FrontPage Editor window. Each page is retrieved from the server and opened in the Editor. This method allows you to work within several pages at a time.

Renaming or Moving Pages

When you rename or move a file in your web, you should follow five steps to change any links on the pages in your web that reference the file you want to rename or move:

  1. In the FrontPage Explorer, select the file you want to move or rename from any view.
  2. Choose Edit | Properties or right-click on the name or icon of the page and choose Properties from the pop-up menu.
  3. In the Properties dialog box, select the General tab.
  4. In the Page URL field, edit the URL of the page. If you want to move the file to a different directory, precede the filename by the directory into which you want to move it. If the directory does not exist in your current web, FrontPage creates it for you.
  5. Click OK. If there are existing links to the page that you are moving or renaming, FrontPage asks if you want to update the links on the pages.

Exiting the FrontPage Explorer

To exit the FrontPage Explorer, choose File | Exit. Before you exit, FrontPage closes the current web.

FrontPage Editor Basics

The FrontPage Editor is used to create your web pages. Although you can use the FrontPage Editor as a stand-alone editor, in most cases you get far more benefit from the FrontPage Editor when you use it in conjunction with the FrontPage Explorer.

NOTE
Framesets rely on creating links between other pages in your current web, so you need to have a web opened in the FrontPage Explorer. To learn more about frames, see Chapter 14, "Frames-Pages with Split Personalities."

The FrontPage Editor is a WYSIWYG editor, meaning that what you see on your page is a good representation of how the page looks on the web using the most popular browsers. Figure 1.12 shows a web page and graphics as they appear in the FrontPage Editor. Individual browsers handle certain features differently (tables are a good example), so it's wise to keep a variety of browsers on hand to fully test your pages before you send them out.

Figure 1.12: You create and edit pages in the FrontPage Editor.

Bear in mind also, as you design your pages, that each visitor who navigates to your site can control how he or she views your page. A user can customize the text size, font, color, link colors, viewing of graphics, and more in his or her browser. There isn't much you can do about this except be aware that it happens and offer alternatives in case a user chooses to turn off the graphics.

The FrontPage Editor does a great job of conforming to standards and generating "legal" HTML code. It makes your job a lot easier as a result: You can create forms and frame sets in a flash, add color and emphasis to text, add images, create image maps and transparent GIFs, and use a host of other great features, all without touching a bit of HTML code. You can view the code, though, by using the View | HTML command in the FrontPage Editor. An example is shown in Figure 1.13.

Figure 1.13: You can view the code of your pages using the View | HTML command.

Of course, you will occasionally want to implement features beyond those supported by the FrontPage Editor. In addition, if the pages you import contain features beyond those that are supported, you want to "protect" them from being checked for compliance in the FrontPage Editor. You use the HTML Markup bot in these cases. Insert your code into the dialog box shown in Figure 1.14, and you're on your way.

Figure 1.14: The HTML Markup bot allows you to incorporate features beyond those supported by the FrontPage Editor.

Opening the FrontPage Editor

To open the FrontPage Editor from Windows, choose Microsoft FrontPage | FrontPage Editor from the Start menu.

To open the FrontPage Editor from the FrontPage Explorer, use one of two methods:

Pages-How to Use Them

Throughout this book, you'll use the FrontPage Editor to generate pages that can be saved to your web. You'll learn how to create pages from templates and wizards and how to create pages on your own. The pages range from simple, text-only pages to those with advanced features, such as forms, frames, and tables, that enhance your page layout. You begin each page with the File | New command in the FrontPage Editor. The rest can be as straightforward or as creative as you choose.

Windows to Your Pages

When you have several pages open at once in the FrontPage Editor, you can arrange the windows to overlap each other or to tile in the FrontPage Editor workspace:

Displaying the Status Bar and Toolbars

Like the FrontPage Explorer, the FrontPage Editor has a status bar and toolbars that can be displayed or hidden.

NOTE
To return toolbars back to their positions in the FrontPage Editor menu area, click the floating toolbar and drag it back into the menu area. An outline of the toolbar follows your cursor. Position the outline where you want the toolbar to appear, and release the mouse button.

Standard Toolbar

The Standard toolbar, shown in Figure 1.16, provides a quick way to access common page creation and editing commands. To display this toolbar, choose View | Standard Toolbar.

Figure 1.16: The Standard toolbar.

The Standard Toolbar contains 21 buttons:

Format Toolbar

The Format toolbar, shown in Figure 1.17, contains buttons that access text and paragraph style formatting commands. To display or hide the Format Toolbar, choose View | Format Toolbar. The Format toolbar contains 15 buttons:

Figure 1.17: The Format toolbar.

Image Toolbar

The Image toolbar, shown in Figure 1.18, provides commands that allow you to create image maps and transparent GIFs. To display or hide the Image toolbar, choose View | Image Toolbar. The Image toolbar contains six buttons:

Figure 1.18: The Image toolbar.

Forms Toolbar

The Forms toolbar, shown in Figure 1.19, provides commands that allow you to place form fields on your page. To display or hide the Forms toolbar, choose View | Forms Toolbar. The Forms toolbar contains six buttons:

Figure 1.19: The Image toolbar.

Printing Your Web Pages

You can print your pages from the FrontPage Explorer. When the pages print, all text and images (with the exception of your background image) are printed. You can preview one or two pages before you print them.

Previewing a Printed Page

To preview your pages before they are sent to the printer, follow two steps:

  1. Choose File | Print Preview or click the Print Preview button. The pages display in the preview similar to the way they display in a word processor, and they are paginated and assigned page numbers as required. An example is shown in Figure 1.20. You can use the buttons on the toolbar to print the page, navigate to the next and previous pages, display one or two pages in the preview, and zoom in or out from the page view.
    Figure 1.20: You can preview one or two pages before they are printed.
  2. Click Close when you're done previewing the page.

Printing Your Page

To print your page, use the File | Print command. If you need to specify margins or special printing options, complete steps 1, 2, and 3 of the following nine steps:

  1. Choose the File | Page Setup command to specify a header and footer and set up the print margins for your printed pages.
  2. Choose Options from the Print Page Setup dialog box to select printer options from the Print Setup dialog box shown in Figure 1.21.
    Figure 1.21: You can specify printer settings using the Print Setup dialog box.
  3. Click OK to close the Print Setup and Print Page Setup dialog boxes.
  4. In the FrontPage Editor, choose File | Print or click the Print button on the Standard toolbar. The Print dialog box appears.
  5. If you want to print your page to a file, choose Print to File from the Printer section; otherwise, skip to the next step.
  6. In the Print Range section, choose the range of pages you want to print.
  7. In the Copies section, choose the number of copies of the page you want to print.
  8. Click Collate if you want to collate multiple printouts (printer must support collation).
  9. Click OK.

Exiting the FrontPage Editor

To exit the FrontPage Editor, choose File | Exit. FrontPage prompts you to save changes to any pages edited since the last save.

Workshop Wrap-Up

Now you have a general idea of what the FrontPage Explorer and the FrontPage Editor do and how they work together to help you manage and build your web site. You'll learn far more in the rest of this book about how to use these tools to build your own web sites.

Chapter Summary

This chapter introduced you to the FrontPage Explorer and the FrontPage Editor. You learned how you can use them together to build a web site on your local computer, how to import existing content into your webs, and how to print your web pages to your printer.

Next Steps

The chapters in this book are arranged in five sections that guide you from the most basic steps to publishing your web pages on the Internet. In brief, you learn the following in each section:

Q&A

Q:
Do I have to use the FrontPage Explorer while I develop my Web site?
A:
You don't have to, but if you don't there will be some types of pages you won't be able to create, such as frames. The FrontPage Explorer is what sets FrontPage apart from other Web page editors. As your site grows, you'll realize how much easier the FrontPage Explorer makes it to manage your site.
Q:
Why do I have to run the FrontPage Server while developing my site?
A:
Think of the FrontPage Personal Web Server as your own little Internet on your own computer. As you develop your pages and links, the FrontPage Explorer uses the running server to make sure they work. You can also use your browser to connect to your internal Web site and browse through it in real, runtime mode, exactly as you would see it on the Web. This gives you the opportunity to fully test your site before you publish it on the Web. You can also use this same server software if you want people to dial in through the Internet to your local computer (you would probably want a dedicated phone line and dedicated Internet connection for this, though).
Q:
What makes the FrontPage Server Extensions so special, and why are they necessary?
A:
The FrontPage Server Extensions allow you to apply advanced features to your web site, including special access permissions and custom scripts that tell forms what to do and how to run. These features might otherwise require you to write custom scripts and are implemented at times by bots in FrontPage. FrontPage knows how to handle these bots, but the software on your remote server won't know how to unless the extensions exist on that side as well. Chapter 24, "Working with the FrontPage Servers," provides more details on this topic.
Q:
Does this mean that to develop a Web site with FrontPage I have to use a provider that has the FrontPage Server Extensions?
A:
Not necessarily, but to achieve the most benefit and ease of use with the package, that would be preferable. If you know how to write your own scripts to handle advanced features, you can do that instead. I've noted throughout this book when a feature requires the FrontPage Server Extensions.
As far as using the bots, you can use those discussed in Chapter 15, "Automating Pages with Bots," whether or not the Server Extensions exist on your remote site. Again, refer to Chapter 24 for more-detailed information on what you can and can't use without the Server Extensions.