Do It On the Web

hinking of launching a retail site on the Internet? If you’re just starting out in e-commerce, you probably want a site that’s inexpensive and simple, but not static. In all likelihood you want what’s called a dynamic site, where customers can place orders and prospects can browse, but you don’t want to start with a site that’s as complex as Amazon.com.

If those are your goals, read on. This article shows you how to build your own basic retail e-commerce site—insiders call it an e-tail site—using Microsoft’s FrontPage 2000, the most widely used do-it-yourself Web site development tool. Other programs include Macromedia’s Dreamweaver, Adobe’s GoLive and SoftQuad’s HoTMetalPro.

When we’re finished, aside from having a virtual store, you’ll be able to

Assemble feedback gathered from Web site visitors on new and contemplated products.

Make it easy for customers to shop at your site—including checking out product availability.

Provide a convenient way to respond to e-mail questions and requests, connecting seamlessly to your database.

START YOUR ENGINES

Let’s create a five-page site about gardening. We’ll call it Gardening Delights. Begin by opening FrontPage and you’ll see this screen ( exhibit 1 ).

Click on File, New, Web and the screen that is shown in exhibit 2 will appear.

Select One Page Web ( exhibit 3 ) and be sure to note in which folder the Web pages will be saved, such as c:my documentsmy webswebs7. You will need this information later when you create an Access database.

Web sites are made up of several pages, each with a file name, title and label. After the Web site is published to a Web server, the title will appear in the upper left corner of the blue title bar. Search engines use page titles as one way to organize their search results. The label identifies the page in FrontPage. For convenience, use the same name for all three.

Depending on how your system is configured, your screen may not look exactly like the one at right. To place the Views Bar along the left side, select View, Views Bar . To place the Folder List next to it, select View, Folder List.

Now select Navigation view and you should see the Home Page in the center of a light blue screen ( exhibit 4 ).

Then name the Web site. Click on Home Page once (to make sure it’s selected) and then click on File, New, Page five times—one for each of the five pages being created, and the screen will look like exhibit 5 .

To give a name to the home page, right-click on it to get a shortcut menu, select Rename , and type Gardening Delights . Press the tab key and the cursor moves to New Page 1. Right-click on it and select a name for the first page, in this case, Garden Catalog . Continue to rename pages 2 through 5: Garden Hints, Search, Food and Recipes . Finally, select View, Refresh to see that the new page file names are the same as their labels ( exhibit 6 ). Remember, you won’t see the page titles until the site is published, although you can check them by right-clicking on each page and selecting Properties.

There is an exception to the advisory we provided earlier about giving each page the same file name, title and label. Notice that the file name for the home page remains index.htm , although the page title and page label have been renamed Gardening Delights . Don’t change this file name. If you do, visitors to the Web site will be forced to type in the page name to find your Web site. Leaving the home page name index.htm (or default.htm ) will make your site much easier to access.

Now add a theme to provide a consistent look to the site. To take advantage of FrontPage’s built-in themes, select Rice Paper . You can adjust a built-in theme’s fonts, colors or graphics. In this sample, change the font type by selecting Format, Themes, Rice Paper . Make sure to apply the theme to All Pages (the default) and that the following boxes are checked: Vivid colors, Active graphics and Background picture ( exhibit 7 ).

To change the font, click on Modify, Text and make your selection. Then click on OK twice. You may have to drag the dialog box up to find the OK button. To do that, hold down the left mouse button on the blue title bar at the top of the dialog box and then move toward the top of the screen.

You will be prompted to save the changes to a new theme name, such as Copy of Rice Paper . To keep the changes, click on OK and then Yes .

Now you can edit the home page. There are two ways to do this: In Navigation view, double-click on the page label or in the Folder List , double-click on the file name. Double-click on Gardening Delights (index.htm) in the Navigation view . At the top of the page, type Gardening Delights .

Center and resize the text as follows: Highlight the text and select the center icon. Select the Font Size drop-down menu and change from Normal to 24 pt . Both are found on the formatting toolbar. Click anywhere on the screen to deselect the text ( exhibit 8 ).

Web page text is formatted in hypertext markup language (HTML); that can be a bit of a challenge in certain formats. While it’s easy to left-align, center or right-align text, it’s often frustrating to control the placement of graphics, text and hyperlinks. Tip: When the graphics and text are in a table, they are easy to move. When done, eliminate the table’s border so the viewer doesn’t see it.

You’ll use this tip to insert a table below the heading Gardening Delights . Select Table, Insert Table . Specify 4 rows, 3 columns, border size=0 . Resize to 85% in the Specify width box. By changing the border to 0—essentially erasing it—you get the structure of a table without its looking like a table. Click on OK ( exhibit 9 ).

Now right-click inside the table for a shortcut menu, select Table Properties and change the Alignment from Default to Center . Click on OK and save by selecting File, Save .

GET THE PICTURE

Graphics brighten up a Web site—so long as you don’t overdo it. Too many dancing hamsters make the page look cluttered and slow downloading. In the next step, you’ll add clip art in the top row of our table. You may not have the same clip art as shown in the example, so select any graphic that’s available.

Click in the first cell of row 1 in the table. Select Insert, Picture, Clipart . Find an appropriate graphic and type flower in the Search for Clips text box. Right-click to insert the graphic. Resize it the same way you change the size of any Windows object: Click on the graphic once to select and then move a corner handle toward the center; using a corner handle maintains the height and width ratio. Then copy the resized clip art to the two cells to the right so you have a row of three graphics. Select File, Save to save the page and also embed the clip art file. You can change the default graphic name to something more meaningful by selecting the Rename button and entering a new file name. At the same time, move the file to the Images folder: select the Change Folder button and double-click on the Images folder. Click on OK, OK ( exhibit 10 ).

In this section, you’ll merge the three cells of the second row of the table and type in a welcoming message. To avoid the double spacing that is HTML’s default format, use a combination of the Shift and Enter keys to create line breaks, which appear as single spacing. Then you’ll add a horizontal line to separate the welcome message from the rest of the page.

Highlight the three cells in row 2 of the table; right-click and select Merge Cells from the shortcut menu. Press the Center Align button on the formatting toolbar and press Enter. Type a welcome message: Welcome to your complete gardening and exotic food site . Press Shift and Enter at the same time for a line break and add Find helpful gardening hints or simple recipes. Shift-Enter for another line break, and add Click below to get the latest catalogs. Do not underline anything here; the words that appear to be underlined in exhibit 11 actually are hyperlinks to be added in the next section. At the end of the third line, insert a horizontal line to separate the welcome message from the remainder of the page. Select Insert, Horizontal Line . Select File, Save .

INSERTING HYPERLINKS

In this section, you’ll connect (hyperlink or link) other pages to our home page so visitors can easily navigate through the site. Two of the hyperlinks are in the welcome message; the other three will be created in the third row of the table.

Before creating these connections, change the file extensions of the garden catalog and the food pages. These pages eventually will have database elements, which require a file extension of .asp (active server page). Change the file name now to save steps later. If the Folder List isn’t visible, select View, Folder List . Right-click on garden_catalog.htm and Rename , changing it to garden_catalog. asp . Press Enter. Click on Yes on the message that reminds you the file may become unusable when the extension is changed. Change food.htm to food.asp in the same way.

Type a label in each cell of row 3 in the table: Garden Catalog for cell 1, Search for cell 2 and Food Catalog for cell 3. Each will be linked to a different page. Highlight the entire row and select the center icon on the formatting toolbar to center the labels ( exhibit 11 ).

To insert a hyperlink, highlight the word or phrase that users will click (for example, gardening hints in the welcome message) and insert the link. Select Insert, Hyperlink ( exhibit 12 ).

Select garden_hints.htm from the Create Hyperlink dialog box, and click on OK ( exhibit 13 ). Repeat the procedure for the other links: recipes is hyperlinked to recipes.htm; Garden Catalog to garden_catalog.asp; Search to search.htm and Food to food.asp. Save the page.

GATHERING INFORMATION

Forms are an efficient method of collecting data from site visitors, and FrontPage features make it relatively painless to create them. Although it’s possible to have the data sent to you via e-mail, dealing with all those messages—transcribing names and addresses into a usable format—requires clerical support. FrontPage creates a Microsoft Access database and the results drop directly into a database on the Web server.

Forms usually are made up of multiple text boxes that contain, among other things, a message or order from a Web site visitor; a Submit button, which sends that message or order to your computer; and a Reset button, which allows the visitor to revise the message or order.

To begin, decide what information you want the visitor to provide—including name, address, item to be ordered and questions. Then insert a one-line text box for each piece of information and type next to the box (referred to as a “label”) instructions to help the user fill out the form. Repeat this until you have a labeled text box for each information box. Here’s how:

Return to the Navigation View . If the Views Bar isn’t visible, select View, Views Bar . Double-click on Garden Catalog ( garden_catalog.asp ). Add the heading Garden Catalog at the top of the page. Add instructions, such as Complete the form to receive our newest 75-page catalog . Press Enter. Left-align the page by clicking on the corresponding icon on the formatting toolbar. Select Insert, Form, One-Line Text Box ( exhibits 14 and 15 ).

Immediately to the right of the text box, press the spacebar twice to insert two spaces between the box and its label. Type Name; this directs users to enter their names in the textbox. Use the key combination of Shift-Enter to create a line break. Repeat, inserting text boxes and labels until you have all the text boxes as shown in exhibit 16 .

You can resize the text boxes to limit the text entry. For example, you may want visitors to use two-character state abbreviations. Right-click the State text box to select it. Select Form Field Properties from the shortcut menu. Change the Width in Characters from default of 20 to 2. Click on OK . You may wish to repeat the procedure to limit the Zip Code text box to 10 characters. All data entered on the form will be submitted when the user clicks on the Submit button.

Occasionally, multiple Submit and Reset buttons appear on the page; this happens when somehow you’ve slipped outside the original form while adding new text boxes. To delete them, click on each text box and button and press the Delete or Backspace keys. Then click inside the original form and add any remaining text boxes.

Each text box has a default name ( T1, T2 , etc.) that becomes a field name in the Access database. These names aren’t particularly descriptive and can be changed easily by right-clicking on the first text box (Name) and selecting Form Field Properties from the shortcut menu. Replace T1 with Name and click on OK . Rename the other text boxes in the same way. Be aware that some characters such as hyphens aren’t allowed in names. Save the page with File, Save ( exhibit 17 ).

THE DATABASE LINK

In this step, you’ll set up the database connection and then instruct the Web form to direct visitors’ responses into a database. Begin by right-clicking anywhere inside the form and select Form Properties from the shortcut menu. Select Send to database and click on the Options button ( exhibit 18 ).

Now click on the Create database button and FrontPage creates an Access database with the same name as the file name ( garden_catalog.mdb ) plus a table called Results .

Click on OK three times ( exhibit 19 ) and save the page by selecting File, Save.

Note that while FrontPage was creating the database, it created a new folder, fpdb, to store the database. It also reminds you to use garden_catalog as the data connection if you plan to display the collected data. When the site is published to a Web server, the database is published with it. Don’t look for test records in the fpdb folder—they’ll be available for viewing, using a browser (Internet Explorer or Netscape), only after the site is published.

Web site visitors aren’t known for their patience; if they can’t find something at your site quickly, they’ll probably leave. Make it easier for them to find a topic on your site by adding a search function, which will look throughout your site for key words or phrases. To maintain the uncluttered look of Gardening Delight’s home page, use a link to access the search function on a separate page.

Return to Navigation View and double-click on Search (search.htm) to edit the page. Add the page heading Search Form and center and format. Add an instructive message such as Type a word in the text box to quickly locate a topic. Press Enter. On a new line, insert the search function: Click on Insert, Component, Search Form . Click on OK and save the page ( exhibit 20 ). Once again, this is a FrontPage component—the Web site must be published to the server before it will work.

To keep track of the number of visitors to the site, add another FrontPage component—the Hit Counter —and place a label next to where the number will appear, such as Visitors. Return to Navigation View . Double-click on index.htm to edit the Gardening Delights page. Highlight the three cells in the bottom row of the table. Right-click and select Merge cells from the shortcut menu, then right-click again and select Split Cell, 2 columns . Click on the center icon. Select Insert, Component, Hit Counter . Choose a style that matches your page. Click on OK and press the spacebar twice to insert two spaces. Then type Visitors and save the page ( exhibit 21 ). This is another FrontPage component that requires special server extensions, so you’ll see results only after publishing to a Web server.

Finally, add an e-mail link so potential customers can contact you. In the remaining empty cell, type Contact Webmaster. Highlight the phrase and select Insert, Hyperlink . Select the e-mail hyperlink icon and enter an e-mail address. Click on OK twice ( exhibit 22 ).

DISPLAYING THE DATABASE

It’s possible to display the contents of a database on a Web page. For example, many companies store their inventory in a database so when they add new items or change the description or price of existing items, they can publish an updated list in a matter of minutes. For security reasons, it’s wise not to post the original, but a copy, on the server.

To show how this is done, use the Food ( food.asp ) page to display a list of exotic foods. Start by creating a new database in Access and name it ExoticFoods.mdb and enter a few records. For simplicity, we are using only two fields and five records.

Open Microsoft Access. Select Create a new database using Blank Access database , and click on OK . At the beginning of this article you were reminded to keep track of the location of your Web file so the inventory database can be stored in the same folder. Accordingly, change the Save In location to match that address. In this example, the Web file is located in c:my documentsmy webswebs7 . Be sure to double-click on the fpdb folder and then change the default name of db1.mdb to ExoticFoods and click on the Create button ( exhibit 23 ).

Double-click on Create a Table in Design View. For this exercise, create two fields, ProdName and Description. Accept the default data type of Text . You won’t make other changes, such as field size or formatting here, although such issues should be considered when creating a real database. Make ProdName a primary key by right-clicking on it and selecting Primary Key from the shortcut menu. Save it and then change the Table Name to ExFoods by typing over the default Table 1 ( exhibit 24 ).

Select V iew, Datasheet View. Enter five records as shown in exhibit 25 . Close the table, the database and Access.

Back in FrontPage, make sure the ExoticFoods.mdb file is in the fpdb folder. If the Folder List isn’t visible, select View, Folder List. Double-click on the fpdb folder and refresh the screen ( View, Refresh ). Return to Navigation View. Double-click on Food ( food.asp ) and type Exotic Foods as a heading at the top of the page. Center and format as before. Type We offer the following fine quality foods as a description and press Enter.

Now create a new database connection with the Database wizard. Select Insert, Database, Results. Click on Use a new database connection and on the Create button ( exhibit 26 ). Click on Add and change the name from the default of Database1 to Food . Make sure File or folder in current Web is selected ( exhibit 27 ). Use the Browse button to find the fpdb folder and double-click on it. Click on ExoticFoods.mdb database ( exhibit 28 ). Click on OK, OK, OK . And then click on Next on the Wizard to find the table where your records are stored ( ExFoods ). Click on Next to show the fields that will be displayed; there are only two fields in this example: ProdName and Description ( exhibit 29 ).

Click on Next . The option that was selected in this example is Table-one record per row ( exhibit 30 ). Click on Next . Then click on Finish . And save the page.

Although it takes many complex steps to create a retail site, don’t feel overwhelmed by the process. Many of the steps are quite intuitive, and once you’ve done it a few times you’ll discover how easy it is. It’s important to get involved in such a process—not that we’re suggesting you should be a Web site builder—because it will give you insights into the technology. After all, it’s a technology that is sweeping the world of business.

A Power Portal Cpa2biz will enable CPAs to conduct e-business through ready-to-go Web sites and services for their clients and employers. The CPA profession’s portal will make it possible for CPAs to create Web sites with a professional Web address and e-mail address without spending a lot of money. Cpa2biz.com, the AICPA- and state-society-sponsored portal under development, will offer a start-to-finish process for easily launching businesses online. Powered by Microsoft’s bCentral Web-based services, cpa2biz will enable you to Register a domain name for a client or employer. Create e-mail addresses. Build or edit a Web site. Access Web hosting services. Sell products and services online. Manage and monitor site activity. When using cpa2biz, there is no software to buy, no files to download and no strong technical skills needed. You just pick the look you want and add graphics and text. You can change text and graphics anytime by using bCentral-provided templates. Plus, cpa2biz helps you with online marketing by listing your client’s or employer’s business in the MSN Yellow Pages directory and with hundreds of search engines. Depending on the Web strategy, you can either build a site from scratch or promote a site that’s already up with a suite of marketing tools that will drive traffic to your site. In addition, cpa2biz will offer other new Web-based solutions, including bCentral Customer Manager, a customer relationship management tool, and bCentral Finance Manager, an online accounting application. These application services and tools are part of the cpa2biz.com mission to provide accountants and small businesses with an affordable, Web-based infrastructure for doing business. The site is designed to enhance the bond between CPAs and their clients or employers and to provide small and midsize businesses with the tools they need to become “e-enabled.”