E-Commerce Essentials with Microsoft FrontPage Version 2002 by Greg Holden

From Barnes & Noble

The Barnes & Noble Review
The future of e-commerce may not be with giant, venture-capital-funded "new economy" dinosaurs but with small businesses who know how to keep costs low, serve customers well, and make small, steady, growing profits. If your business has shied away from the Web (or settled for "brochureware"), maybe it's time to take another look. FrontPage 2002 offers powerful resources for building e-commerce sites, and it's now well integrated with Microsoft's bCentral services (giving you a one-stop solution for building catalogs, accepting credit cards, even managing customer relationships).

In this book, Greg Holden walks you through building and managing your e-commerce site with FrontPage 2002 and bCentral. The capabilities at your disposal would've cost thousands of dollars just two years ago -- online catalogues, software for calculating tax and shipping, community forums, and so forth. Now that they're far cheaper, Holden shows how to make the most of them.

Of course, success isn't about bells and whistles, and Holden stays focused on the fundamentals. Who are your customers? What do they want? How can you turn browsers into buyers -- and buyers into repeat customers? It can be done -- by you. With a little help from this book. (Bill Camarda)

Bill Camarda is a consultant, writer, and web/multimedia content developer with nearly 20 years' experience in helping technology companies deploy and market advanced software, computing, and networking products and services. His 15 books include Special Edition Using Word 2000 and Upgrading & Fixing Networks For Dummies®, Second Edition.

From the Publisher

With millions of potential new customers and partners on the Internet, now's the time to get your business on line - and growing - with this hands-on guide to Microsoft FrontPage 2002. With it, you'll learn how to take advantage of the commerce-ready tools built into FrontPage to set up shop faster and easier - without writing a single line of code. From setting up a cart-and-checkout system to delivering top-notch customer care, you get the easy-to-follow steps, checklists, and expert recommendations you need for a successful venture that thrives on line!

DISCOVER HOW TO:

• Focus your business goals, and design your site from the customer's perspective
• Learn what key elements make your site transaction-friendly and encourage repeat business
• Use FrontPage with other Microsoft Office applications to generate great content and deliver real-time data and search capabilities
• Find free and low-cost resources - including Microsoft bCentral small business services - to help build traffic and sales
• Road-test your site before going live - learning how many seconds of download time you have before customers jump ship
• Employ the customer-service tools that build credibility and loyalty, and use feedback to fine-tune your site small-business site

Booknews

Shows small business owners how to build an e-commerce web site with the FrontPage 2002 program. The author offers guidance for identifying customers, organizing the site, setting up an interactive catalog, accepting payments online, marketing to attract customers, and improving the site as business grows. Annotation c. Book News, Inc., Portland, OR (booknews.com)

Product Details

• Table of Contents
• Read a Sample Chapter

Table of Contents

Read a Sample Chapter

• Refining Your Site Structure
• Looking at Your Navigation Links
• Adding and Deleting Pages
• Making Your Site Payment-Friendly
• Providing an Express Purchase Lane
• Avoiding Distractions and Dead-Ends
• Adding Search
• How FrontPage's Search Function Works
• Adding a Search Form to Any Page
• Customizing Search Results
• Adding a Site Map

Form follows function, or so the saying goes. The person who first uttered this maxim wasn't familiar with e-commerce. When it comes to buying and selling online, you might say that form follows functionality. Good form means that you put the content your customers need where they can find it. If they can't find it on your site, it might as well not be there.

Take a moment to review what you've done to this point. You identified the purpose of your site and profiled your primary customers. You obtained an Internet connection and found a Web host. You obtained a domain name and, in Chapter 6, you created the core pages of your site using the Corporate Presence Wizard. Now, you can compare the pages you have to the site map you created in Chapter 6.

The way your site looks is important, but if the content isn't useful and the pages are not easy to navigate, no one sticks around long enough to admire your bright colors and eye-catching graphics. Your goal is for shoppers to quickly find what they're looking for and make a purchase. In this chapter, you will compare your planned structure with the real one you created, add the ability to search the contents of the site, and make sure you have provided all the possible means of moving around the site that your visitor might want.

Refining Your Site Structure

Get out the site map you created during Chapter 6 and compare it to what you created with the Corporate Presence Wizard in the same chapter. You want to determine if what you planned is what you built. Microsoft FrontPage makes it easy to see what you already have by using Navigation view. Do the pages lead into one another the way you want them to? Do you need to add pages or create new links between pages?

Looking at Your Navigation Links

Open your site's home page, then click Navigation on the Views bar to switch from Page view to Navigation view. In Navigation view, the list of the files currently in your web appears in the Folder List. The files and the way they are linked (or not linked) are illustrated in the main content area. As you can see in Figure 7-1, Mama's Antiques has three levels of pages. The Home page is the first level; this page links to a second level with News, Products, and Services; and these link to third-level product and service pages.

Figure 7-1.  FrontPage's Corporate Presence Wizard creates a complete Web site for you. You can add or delete pages to meet your own needs.  (Image unavailable)

However, the site has some "orphan" pages — pages that aren't linked to anything else on the site. Without a link, the prospective customer will never see these pages. Once you have Navigation view open, you can adjust the structure of your site to give "orphans" links, and add content to your existing pages, as well.

Moving a Link

An orphan page just won't be easy to find by your visitors; it has to be linked to another page so its contents can be accessed. It's like arranging the contents of a cabinet in your kitchen. You put the things that are most important near the front, where you can reach them easily. Less important items go farther back. On a Web site, you put the most important contents — your sales products — at the top. Less essential contents go on lower levels.

To move an orphan page, click the page's icon in Navigation view, and then drag the icon, so that it's connected to the page you want. Simply "drawing a line" from one page to another in Navigation view isn't enough, however.

You then have to create a textual link on the page:

1. Enter some text on the originating page (the page that you want to link to the previously "orphaned" page) that will serve as the link text, such as "Search our Web site."
2. Select the text that you want to function as the clickable link. For the text mentioned in the preceding step, this might simply be the word "Search."
3. Do one of the following: Click the Insert Hyperlink button in the Standard toolbar, choose Hyperlink from the Insert menu, or press CTRL+K.

The Insert Hyperlink dialog box opens.

4. In the Insert Hyperlink dialog box, scroll down the list of pages on your site and click the name of the page you want to link to. The page's URL appears in the Address box.

Figure 7-2.  It's easy to create a link from one page to another within your e-commerce site by using FrontPage's Insert Hyperlink dialog box. (Image unavailable)

5. Click OK to close the Insert Hyperlink dialog box and return to the FrontPage window, where the text you previously selected is now formatted as a link.

Putting Your Sales Pages Up Front

A tool like the Corporate Presence Wizard has its advantages and disadvantages. If you're in a hurry, it creates a set of Web pages in the blink of an eye. But this doesn't keep you from having to do some rearranging of those pages. The Corporate Presence Wizard has many of the elements that an e-commerce site needs, but it doesn't emphasize the selling of products and services. That part is up to you.

Once you get a set of pages from the Corporate Presence Wizard, you need to do some rearranging to put your products where they'll be noticed:

1. Go to your home page and make a prominent link to your products or catalog pages.
2. Move your product pages up so they branch right off your home page and have a level of their own.

Figure 7-3.  Move your most important content — your sales items — to the top of your Web site's organization. (Image unavailable)

Make your catalog of goods and services as close to the top level of your site (your home page) as you can. Along with making your site's contents searchable (see "Adding Search" later in this chapter), putting your merchandise in a prominent location with easy-to-find links is the most important way you can improve your customer experience.

Adding Navigation Links

In Chapter 6, you learned how to set up shared borders on a Web site. You saw that such areas could include a company logo that helps unify all of a site's pages. Shared borders can also help to unify a site's organization by providing visitors with links to all of the main pages. Your customers will be able to get to your products more easily if you create a navigational feature called a link bar and put it in a shared border or other standard location on all of your pages.

A link bar is a set of buttons (usually four or five, though there's no rule about how many you can have) that appear at the same location on each Web page. This graphical row of buttons links visitors to important pages on your Web site.

If you use a utility like a Wizard or a template, a link bar is created for you. To edit it, right-click the link bar in Page view and choose Link Bar Properties. The Link Bar Properties dialog box opens.

Figure 7-4.  You can edit your site's link bars to make it easier for customers to find all of the goods and services you have to offer.  (Image unavailable)

The "parent level" of a site is the level above the page that FrontPage is currently displaying. The "child level" is the level below.

If you aren't using a Wizard and you want to create a link bar from scratch, follow these steps:

1. Position the cursor at the location in the currently displayed Web page where you want the link bar to appear.

You can select the link bar later and cut and paste it to a new location if you change your mind about its placement, however.

2. On the Insert menu, click Web Component. You can also click the Web Component button on the Standard toolbar.

The Insert Web Component dialog box appears.

3. In the Component type list, click Link Bars to select it.

A set of link bar options appears in the Choose a bar type list.

Figure 7-5.  Graphics and links are combined automatically in the Insert Web Component dialog box. (Image unavailable)

4. Select a bar type based on navigation structure.

You can read about each link bar's characteristics, which are displayed in the bottom half of the Insert Web Component dialog box, when you select each option.

5. Click Finish if you're in a hurry and you want FrontPage to automatically assign a style to the link bar. Otherwise, click Next and select a theme for your link bar buttons. After you have selected a theme, click Next.
6. Choose an orientation. The link bar buttons can either be arranged horizontally or vertically. Click Finish.

The Insert Web Component dialog box closes and the Link Bar Properties dialog box opens so you can format the link bar further.

---

TECHNICAL TIP:
If you chose the Link Bar with Back and Next links option, after the Insert Web Component dialog box closes you'll see a Create a New Link Bar dialog box displayed. Type a name for the link bar in the Name box, click OK, and the Link Bar Properties dialog box is displayed.)

---

7. Click Finish to add the link bar to your page.

Without the Insert Web Component dialog box, it would probably take you as much as an hour to create the buttons and links required to make a working (not to mention attractive) set of navigation buttons.

Adding and Deleting Pages

Using the Corporate Presence Wizard is great because it gives you a complete set of interlinked pages you can work with. But you have to then adjust the content of the site to meet your customer's needs by adding pages, deleting pages, or moving pages so they are linked differently.

Adding a Page

You can add pages to your site from within Navigation view or Page view. We'll do it from Navigation view. This example shows how to add a product page because that's one of the most important pages an e-commerce site can have. But the steps apply to any sort of page you want to add — a page that provides directions to your business, a page that talks about you and your experience in your field, or a page with any other kind of content.

To add a page to your Web:

1. While in Navigation view, on the File menu, point to New, and then click Page or Web.

The Task pane appears.

2. Click Blank Page.

A New Page icon is added to your site.

3. Click the New Page icon, hold down your mouse button, and drag the icon.

As you drag, a line connects the New Page icon to adjacent pages.

4. Keep dragging the new page until the line connects to one of your Products pages, and then release the mouse button.

Figure 7-6.  By dragging a page's icon you can visually link that page to your site's list of products, then edit the content to describe what you have to sell. (Image unavailable)

Deleting a Page

Sometimes you might want to trim back your Web site because you don't have sufficient content to keep a page fresh. With e-commerce sites, pages that are stale and go unchanged for weeks or months at a time discourage shoppers from returning to you on a regular basis because they aren't sure they're going to find anything new when they return. It's better to have only a few pages that you update regularly rather than dozens of pages, many of which may go unchanged for long periods.

Deleting a page from a web isn't necessarily a straightforward operation — at least not with most Web page editing tools. If the page you want to delete contains links to other pages, all of the references to the deleted page will be broken. With FrontPage, however, you can safely delete a page and have all of the links updated automatically. For instance, if your home page contains a link in its navigation bar to a News page and you decide to delete that page from the web, the navigation bar will lose its News button.

To delete a page from your web:

1. In Navigation view, right-click the page you want to delete, and then click Delete on the submenu.
2. In the Delete Page dialog box, select one of the two options: Either delete the page from the Web altogether or keep the page but remove it from your site's navigation structure (that is, delete any links to or from the page). Click OK.

The page is deleted — as well as any links to it.

Working with Pages in Navigation View

One of the nice things about working in Navigation view is that you not only get an overview of how your site is structured, but you can edit pages instantly. Double-click the Product 1 page, and the page opens in Page view so you can edit it.

Then follow these steps:

1. Right-click the Product 1 banner — the location differs depending on the theme you chose, but chances are it's right near the top of the page. Then click Page Banner Properties on the submenu. In the Page banner box, type a new name for the banner, and then click OK.

Figure 7-7.  Work in Navigation view and you can easily switch to Page view to add content to your site.  (Image unavailable)

2. Click the placeholder text Comment: Replace this image to select it, and then press DELETE or BACKSPACE to delete it.
3. Click the image placeholder to display the Pictures toolbar, and then click the Insert Picture From File button to open the Picture dialog box. Locate the image of the product, and then click Insert to add the image. Resize the image by clicking the selection handles and dragging inward. See Chapter 6 for more information about resizing images.
4. Enter a caption for the product image, and then add a description of the product to the page. When you're done, click the Save button to save your changes. The Save Embedded Files dialog box appears, prompting you to save any files you have added to the page. When you click OK, FrontPage saves the image along with the other files in your Web.

Figure 7-8.  Product pages in the Corporate Presence Wizard include placeholder images, captions, and descriptions that you can quickly replace with your own information.  (Image unavailable)

Repeat steps 1 through 4 for all the products in your site. Then click Navigation on the Views bar so you can return to Navigation view and do some reorganizing.

Making Your Site Payment-Friendly

Encourage your customers to complete the transactions they initiate by making it easy to make the final purchase. Creating a customer-friendly environment is a necessity rather than a luxury. Your competitors with e-commerce stores may already make it easy to make purchases.

The following sections describe some strategies for straightening out the twists and turns of the Web sales maze.

What makes it easy for people to pay?

• Express lane to check out
• Lack of distractions to divert attention
• Easy-to-understand forms
• Secure, private environment
• Credit card payment options
• Non-credit card payment options

Providing an Express Purchase Lane

You don't want to discourage, slow down, or misdirect customers on their way to buying something from you. Customers follow two paths:

• The purchase path. These are the steps required for someone who has decided to make a purchase.
• The search path. These are the steps required to find items and prices for someone who has not yet decided to buy.

On all too many sites, the "purchase path" overlaps with the "search path." In other words, there's no express check out. Even shoppers who know exactly what they want have to do an excessive amount of searching around in order to find the item and purchase it.

One way to point shoppers in the right direction — the path to the check out page — is to make your home page do a little selling right off the bat. Show a few prices for new, specially reduced, or popular items on your home page. Make easily noticeable links to the products you want to feature. The KBkids.com home page (http://www.kbkids.com) wins praise from ZDNet's Best Practices site for its clear navigation, including the specific links in the left-hand column.

Figure 7-9.  Follow KBkids.com's example: Promote special sales on your home page and include specific links that lead shoppers immediately to the areas they'll be interested in. (Image unavailable)

Avoid providing customers with two equally prominent check out paths. Creative Good (in an article entitled "Registration Best Practices" at http://www.zdnet.com/ecommerce/stories/evaluations/0,10524,2685100,00.html) found that at many sites, new customers chose the path for return customers. Customers who get lost on the way to the checkout area are less likely to hand over payment. Make only the new customer path prominent.

Avoiding Distractions and Dead-Ends

Sometimes the best way to get consumers to make a purchase is to simply avoid obstacles and eliminate roadblocks. Stay away from:

• Distracting pop-up windows that annoy visitors who are in a hurry to search, shop, and buy on their own. They make customers feel they're not in control.
• Overcrowded home pages that leave shoppers guessing about how to make purchases or find what they're looking for. Shoppers who can't make a purchase at your site will hurry off to an online store that's easier to use.
• Hard-to-find shopping carts that slow down the completion of purchases. After putting selections in a cart, customers should be able to pay for them quickly, not hunt around for the cart itself.

Make the check out process easy. Improving the clarity and simplicity of your online forms quickly improves the user-friendliness of your check out area, as described in the following section.

Adding Search

Link bars are only one tool for making a Web site more easily navigated by prospective customers and clients. A far more important tool, and a must-have element for any e-commerce site, is a way to search your site's contents.

Studies prove that making a site searchable is the single most important navigation tool for any Web site. Your shoppers will be expecting a way to locate specific items or information based on keywords they enter in a form that lets them search the contents of your site.

Normally, it takes complex programming to index the contents of a site so you can create a search form that actually works. But FrontPage's Search Form template comes ready to work and makes use of a special programming utility called a Search bot that FrontPage uses automatically. Your job is to customize the search page and keep the index up-to-date.

When you create a search form by selecting it in the Page Templates dialog box (see the following section), you only have to link it to another page on your site in Navigation view. You don't need to customize the standard contents, except to delete the placeholder text at the top of the page.

Figure 7-10.  A search form, an essential element of any e-commerce site, is automatically enabled using FrontPage's Search Form template.  (Image unavailable)

How FrontPage's Search Function Works

Let's move step by step through the process of making a site searchable so you can understand exactly what's going on and, more importantly, make the search process work better for your customers.

If your Web site is hosted on a Web server running the FrontPage Server Extensions, FrontPage automatically creates a text index drawn from all of the words contained in your Web site's pages. When you save a page in your site, FrontPage adds any new words to the text index. The index is cumulative: New words are added to the index, but old ones are not removed.

When a visitor enters a keyword into the search form and submits it to your site by pressing the Start Search button, FrontPage checks the text index and displays a list of hyperlinks to the pages containing the search text. The list of results is weighted — in other words, the closest matches are listed first.

Keep an eye on your site's text index periodically, especially if you delete text or entire pages. When you create pages, FrontPage automatically updates your index. But when you delete content, FrontPage doesn't remove text from the index.

You can have FrontPage notify you when your text index needs to be revised, however. First, open the web in FrontPage. On the Tools menu, click Options to open the Options dialog box. On the General tab, select the Warn when text index is out of date check box, and then click OK. Now, whenever you open the web to edit it, FrontPage will notify you if the index is out of date so you can recompile the index.

To manually recompile the text index, open the web in FrontPage. On the Tools menu, click Recalculate Hyperlinks. A message appears to notify you that FrontPage is about to check hyperlinks in the web and synchronize web data, a process that could take several minutes. Click Yes. That's all you have to do. FrontPage then does the updating in the background so you can go on with other work.

Adding a Search Form to Any Page

You don't need to use the Corporate Presence Wizard to create a search form. You can use the Search template if you want to have a separate page solely devoted to searching. Or, you can open an existing page and add the Search Form Web component. The Web Component command enables you to add a simple search form to any Web page. This makes your entire Web site extra easy to navigate — from any page; the user has a simple form from which to conduct a search. The search form takes only a few minutes to configure.

To add a search form:

1. Start FrontPage, and open the page you want to contain the search form. Click inside the page at the spot where you want the search form to appear.
2. On the Insert menu, click Web Component.

The Insert Web Component dialog box opens.

3. In the Component type list, click Web Search to select it, and then click Finish.

The Insert Web Component dialog box closes and the Search Form Properties dialog box opens. This dialog box allows you to change the label that appears next to the search form, the size of the search form, and the buttons that appear next to the search form ("Start Search" and "Reset" are the defaults).

Figure 7-11.  Customize your search box label and size using this dialog box. (Image unavailable)

---

TECHNICAL TIP:
Changing the size of the text box doesn't affect how many characters a site visitor can type in the box. If a site visitor types more characters than will fit in the box, the extra characters will scroll off the left side of the box, but all of the text will be submitted by the search form.

---

4. Change the settings in the Search Form Properties dialog box if you want, and then use the Search Results tab to change the way the results are presented (see the following section).
5. When you're done, click OK.

The search form is added.

By default, the search form includes instructions on how to use the form and query language results visitors can use to find what they want (see Figure 7-10 for an example). You can cut out all the instructions if you want the search box and its accompanying buttons to appear all by themselves.

Customizing Search Results

The Search Results tab in the Search Form Properties dialog box lets you change the way search results are presented. The default selection All appears in the Word list to search box because this enables your visitors to search the entire contents of your Web. When they conduct a search by entering keywords in the search box and pressing the search button, the search engine scours the text index of your site, and then returns a set of results.

Figure 7-12.  The default search results include the titles of documents that contain the search keywords, the date the document was last modified, and the size of the document.  (Image unavailable)

By clearing the options on the Search Results tab of the Search Form Properties dialog box, you can change the search results. You might want to simplify the results by removing the date, for instance.

If you want to restrict the search to a community forum or other discussion area, enter the name of the folder that contains the group's postings. Select the Display score check box if you want to assign a rank to the results of the search — each item on the search results page that is returned to your visitor gets a ranking based on how closely the contents match the search terms. The closest matches are ranked near 100%; matches that aren't as close are assigned lower percentages. You can also select the other check boxes if you want the search results to include the date and the file size of the file being matched. (It's an extra nice touch for visitors if they know that the file is especially large in size.)

Adding a Site Map

Web sites that contain many different products and multiple levels of information provide visitors with an additional navigation tool in the form of a Table of Contents. Many Web sites call this page a site map. It's a list of all the pages in the site, arranged by category.

The Table of Contents page that is automatically created with the Corporate Presence Wizard is relatively simple. You replace a place holding introductory paragraph and create a list of the main features of your site. If you don't use the Corporate Presence Wizard, you can create the Table of Contents page anytime by using one of FrontPage's Templates:

1. On the File menu, point to New, and then click Page or Web to display the Task pane.
2. In the New from template section of the Task pane, click Page Templates to open the Page Templates dialog box.
3. Scroll down the list of page templates, click Table of Contents to select it, and then click OK.

The Page Templates dialog box closes and the Table of Contents template opens in the FrontPage window.

4. On the File menu, click Save to open the Save As dialog box.
5. Enter an easy-to-remember name for the Table of Contents page, such as toc.htm, and then click Save to save the file in your current web.
6. Click Navigation on the Views bar.

The Navigation view of your site is displayed as well as the Folder List. Make sure your home page is visible so you can link to it.

7. On the View menu, click Folder List.

The Folder List appears with your new file displayed.

8. Click the Table of Contents page in the Folder List, and then drag it into Navigation view to link it to another page in your site. (The home page is a logical choice.)
9. Right-click the icon for the Table of Contents page in Navigation view, and then click Rename from the submenu. Enter a new name for the file, and then press ENTER.
10. Switch to Page view, and then delete the placeholder content and replace it with your own content.

Figure 7-13.  A Table of Contents page provides visitors with an overview of your entire site. (Image unavailable)