ASP Programming for the Absolute Beginner

226

ASP Programming for the Absolute Beginner

Pictures toolbar

			Y
FIGURE 10.14		L
FrontPage allows
you to manipulate		M
graphics after they
	A
are inserted into
		F
your Web pages.
	E
	T

Adding Tables to Organize Your Information

The greatest HTML tag ever invented? Well, maybe not quite that good, but you will quickly come to love—and hate—the <TABLE> tag. The good news is that FrontPage does a lot of the dirty work for you in designing and formatting tables, so you can have more time to be creative in deciding how to best present the content on your page.

The best way to learn tables is to experiment. So, let’s do a little table experimenting.

1. Create a new page within FrontPage.

TRICK	You can quickly access recently opened files and Webs by selecting File, Recent
	Files, or File, Recent Webs.

2.From the Table menu, select Insert, Table. This produces the Insert Table dialog box. See Figure 10.15.

3.For now, go ahead and leave the default values in the Insert Table dialog box as they are. When you click OK, a table is drawn to the parameters you set within the Insert Table dialog box (that is, 2 rows by 2 columns). See Figure 10.16.

As you can see, using the Insert Table command isn’t difficult. But FrontPage’s table features don’t stop with this simple (and, arguably, boring!) Insert feature. Rather, you can format and design your tables—not to mention insert graphics and text into the various table cells—to produce some really nice effects.

Team-Fly®

FIGURE 10.15

Accessing the table

features of

FrontPage.

FIGURE 10.16

You can quickly produce tables for your Web pages with the Insert Table feature.

Formatting Tables

To access the table formatting features, click in any cell within your table. Then, from the Table menu, select Properties, Table. This displays the Table Properties dialog box, as shown in Figure 10.17.

227

C h a p te r

10

A S P

a n d

H T M L

S c r i pt i n g

w i t h

F ro n t P a g e

2 0 0 0

FIGURE 10.17

The Table Properties

dialog box.

228

ASP Programming for the Absolute Beginner

Let’s examine the different features of the Table Properties dialog box:

•The Layout section enables you to set the alignment of the table cells, as well as cell padding and cell spacing.

•The Borders section enables you to define both the size and color of your table borders.

•The Background section enables you to select images and graphics to use as background within your table. See Figure 10.18.

In addition to controlling the entire table properties, you can set specific cell properties of your tables. You can access the Cell Properties dialog box by selecting Properties, Cell from the Table menu, or right-clicking on the table and selecting Cell Properties from the pop-up menu. See Figure 10.19.

FIGURE 10.18

The first table uses ClipArt graphic as a background image, whereas the second table uses a simple design.

FIGURE 10.19

Use the Cell Properties dialog box to set specific cell characteristics within your table. Note the features are similar to the Table Properties dialog box.

Of course, once you initially insert your table, you can edit it by adding and deleting rows, columns, and cells.

•To insert an element into your table, click within your table, then select Insert from the Table menu and choose Rows, Columns, or Cells.

TRICK	You can also add a caption to your table by selecting Insert, Caption from the Table
	menu. This will place your cursor directly above the table, from which you can
	add text.

•To delete an element, first select the element in the table. Then, from the Table menu, select the Delete Cells option that is highlighted, as shown in Figure 10.20.

Finally, you can also split and merge cells in a table to produce some interesting table structures.

1.In the table you created in the first exercise, select the first cell by clicking within the cell, then from the Table menu, click Select, Cell. The cell is highlighted.

2.Next, right-click in the selected cell and select Split Cells from the pop-up menu. See Figure 10.21.

3.The Split Cells dialog box will now appear. Go ahead and split the cell into four columns.

4.Next, select the upper-right cell, select Split Cells from the Table menu, and split this cell into two rows. See Figure 10.22.

FIGURE 10.20

In this example, the cell has been selected and can now be deleted from the Table menu.

FIGURE 10.21

Select Split Cells from the pop-up menu, when you right-click on a selected table cell.

229

C h a p te r

10

A S P

a n d

H T M L

S c r i pt i n g

w i t h

F ro n t P a g e

2 0 0 0

230

ASP Programming for the Absolute Beginner

FIGURE 10.22

The Split Cells

dialog box. Here, we

are splitting the cell

into four columns.

TRICK

In addition to splitting cells, you can also merge cells. To merge cells, select all the split cell elements you want to merge. Then, from the Table menu, select Merge Cells.

Adding Text and Graphics to Your Tables

The table we’ve created is a little boring. Let’s take some time to spice it up with text and graphics, in the process demonstrating what a powerful design element tables can be.

TRAP

As with nearly every element of Web design, tables are no exception to the “Test in different browsers” rule, to ensure that your tables (and entire Web site, for that matter) look neat and well-designed in both Internet Explorer and Netscape Navigator (and, other browsers, too, if you have access to them).

Netscape and IE can (and do) render tables differently. Sometimes, the differences are so small they are unnoticeable; other times, it seems as if you’ve created two entirely different versions of your table! Test, test, test!

1.Let’s get rid of the boring table we have on the page right now. Select the entire table, then from the Table menu, select Delete Cells. This will erase your table.

2.Now that you have a clean slate, let’s begin again. From the Table menu, select Insert, Table. Within the Insert Table dialog box, leave the number of rows set at 1, but change the number of columns to 2. Click OK.

3.The table is inserted. Now, select the right cell, right-click, and select Split Cells. From the Split Cells dialog box, divide the cell into two rows.

4.The basic structure of the table is now defined. Now, add a graphic to the left cell (that is, the cell that hasn’t been split). Click in the cell, then from the Table menu, select Properties, Cell (or right-click in the selected cell and select Cell Properties from the pop-up menu).

5.In the Background section of the Cell Properties dialog box, click on Browse. The Select Background Picture dialog box appears. See Figure 10.23.

6.Browse through the image files (if you have any) on your machine, or click on the ClipArt button and find a graphic that appeals to you. Your graphic will be inserted in the left cell (in the sample table I’ve drawn above, the music pages are simple ClipArt).

7.Finally, format the two remaining (right) cells any way you want.

Take some time now to play around with formatting your table. Split and merge cells, add and delete elements, and format text and graphics.

FIGURE 10.23

Either select a graphic from your computer or click on the ClipArt button and browse until you find something that appeals to you.

Working with FrontPage Components

At this point in your initial Web page creation, you have inserted and formatted some text, as well as placed a graphic or two on your page. Now, take a moment to investigate a unique feature of FrontPage as a Web development tool: the FrontPage components.

You can use the components to easily include some of the more common functionality you find on well-designed Web pages, such as

•Hit counters. Are used to visually track the number of visitors to your site. Well positioned, the hit counter can serve as a powerful PR tool, reflecting the (you hope) popularity of your site by highlighting the numbers of visitors who have loaded your site into their browser.

•Hover buttons. Allow special effects to occur when the user “hovers” his or her cursor over the button. For example, you could place within your Web page a hover button titled Song Excerpt. When the user hovers the cursor over this particular button, a short excerpt of a song (which you would also insert into the Web page) would begin to play.

•Marquees. Allow you to have text scrolling across the top of a page, much like an electronic marquee at a professional sports arena. Within FrontPage, you can customize not only the text that appears in the marquee but also the direction and speed at which the text scrolls.

•Search forms. Are essential tools for any well-designed site because they allow users to quickly enter a term (or terms) about which they are interested in learning more.

You can view the FrontPage components by selecting Component from the Insert menu (see Figure 10.24).

Now you insert the marquee component into the sample Web page:

1.Click underneath the picture you inserted during the preceding exercise.

2.Go to the Insert menu, select Component, and then choose Marquee from the list of options. This opens the Marquee Properties dialog box (see Figure 10.25).

3.Enter some text into the Text field. (Try to type a sentence or two, instead of just one word, so that you can see the full marquee effect in action.) Leave the other options as they are, and click OK.

231

C h a p te r

10

A S P

a n d

H T M L

S c r i pt i n g

w i t h

F ro n t P a g e

2 0 0 0

232

ASP Programming for the Absolute Beginner

FIGURE 10.24

The FrontPage 2000

Component menu.

FIGURE 10.25

The Marquee

component

dialog box.

4.On your Web page (within FrontPage, that is—after your page is published, you will see the marquee in action), you will see the text you just typed into the Marquee Properties dialog box. Your Web page should now look something like Figure 10.26.

TRAP

Note that the marquee is only guaranteed to work 100% of the time when you use Internet Explorer. Again, use caution when relying too heavily on these Microsoftcentric capabilities that are built into FrontPage, lest visitors to your Web site using browsers other than IE may experience errors or a loss of your desired functionality.

5.Ready to see the marquee in action? Take a look at the bottom of the FrontPage window, and notice the three view tabs: Normal, HTML, and Preview. Up to this point, you have been working in Normal view. To get an immediate feel for how your page will look when it is live, you can click the Preview tab. Do that now.

You should see the text you inserted in the Marquee dialog box scrolling across the screen (see Figure 10.27).

You should note that the Preview tab might not render a completely accurate representation of how your page will look in a Web browser. What do I mean? Not all elements you insert into your Web pages will be immediately visible using the Preview tab. Some elements (including some components, such as the hit counter component) have to be published first to be seen in action.

View tabs

FIGURE 10.26

Your Web page is starting to develop. You’ve inserted text, a graphic, and a marquee component.

FIGURE 10.27

Your text scrolls

across the page.

This is why the installation of a Web server (again, either the PWS or IIS) is crucial. It allows you a complete development environment on your own computer so that you can get a true picture of how your site will function when it is live on the Web.

233

C h a p te r

10

A S P

a n d

H T M L

S c r i pt i n g

w i t h

F ro n t P a g e

2 0 0 0

TRICK

The HTML view tab displays the HTML code used to build your Web pages. By utilizing HTML view, you can go in and tweak the HTML, as well as ASP code, to your specifications.

234

ASP Programming for the Absolute Beginner

Saving Your Web Pages

You’ve done some significant Web page construction. Like all work on a computer, it is a good idea to save your work frequently, and FrontPage is no exception.

Go ahead now and save your Web page:

1.If you are still in Preview view from the preceding exercise (if your text is still scrolling across the screen, you are still in Preview view), click the Normal view tab.

2.From the File menu, click Save As. This opens the Save As dialog box (see Figure 10.28).

3.Using the Save In field, navigate to the folder on your hard drive where you’d like to save your Web page.

4.In the File Name field, give your Web page a name. Leave the Save as Type field set to Web pages.

5.Click Save to save your page. If you inserted graphics into your page (which you probably did if you followed along in the exercises), you are also presented with the Save Embedded Files dialog box (see Figure 10.29). Click OK to save these embedded pictures, along with your Web page.

Validating Forms

As with many things dealing with Web design, form validation used to be a difficult programming task. But, as with many Web-related tasks now, the use of FrontPage makes things a whole lot easier.

FIGURE 10.28

The FrontPage Save As dialog box. Note the similarities to Save As dialog boxes in the other Office applications.

FIGURE 10.29

The Save Embedded

Files dialog box.

In this section, we’ll take a look at how you can incorporate form validation into your own Web pages, to be sure you are capturing all required information from visitors to your site.

Determining Required Form Fields

To begin our discussion of form validation, the first thing to do is create a new page.

1.First, create a new page within FrontPage, and insert the form elements so that your page looks like Figure 10.30. Go ahead and save it as FormA.htm.

2.For this initial example, let’s pretend that we’ve determined the textbox field (Enter Your Full Name Here:) to be a “required” field. Double-click on the actual form element to display the Text Box Properties dialog box. See Figure 10.31.

3.When the Validate button is clicked, the Text Box Validation dialog box is displayed. Note that different form elements will display different validation dialog boxes. For example, Radio Button Validation when a radio button is selected for validation. See Figure 10.32.

This box appears complicated, but in actuality is quite simple to work with. Let’s take a closer look at the different types of “validation” properties you can set:

•The Data Type drop-down menu enables you to set the specific type of data that can be entered into the form element. Depending on which data type you

FIGURE 10.30

Preparing to set

validation properties

on a form.

FIGURE 10.31

Click on the Validate

button to display the

form elements

validation

properties.

235

C h a p te r

10

A S P

a n d

H T M L

S c r i pt i n g

w i t h

F ro n t P a g e

2 0 0 0