Preparing the Search Page and Creating the Search All Link

In this task, you'll begin preparing the search page by removing now-obsolete content from the tours page. As it stands, tours.asp contains static listings of many of the tours. Now that you have built a dynamic listing of the tours (tour_detail.asp), this content is no longer needed on tours.asp. However, the navigation bars throughout the site point to tours.asp under the Find Tours link, so this page is perfect for containing the search interface.

The first activity, not surprisingly, is to delete all of the static tour listings. Next, you'll mock up the overall page layout. Finally, you'll create the first of three search interfaces, though in this case, "search interface" is an overstatement: It is a simple hyperlink to tour_detail.asp that causes that page to display all tours.

  1. Open tours.asp, and change the Choose a Tour heading to Find Tour. Select everything after the heading through the bottom of the table, and press Delete. Enter the following text as body text beneath the new Find Tour page title.

    Use this page to find the tour of your dreams. Once you've made a selection, check out the Tour Price Calculator.

    Newland Tours offers many tours to different parts of the world. To find a tour to your desired destination, use the table below to browse by world region, by country, or view them all.

    Once you delete all of the tour listings, Dreamweaver probably does not automatically redraw the table, so you may have several screens of white space. To remove this space, click the <table> tag in the tag selector to force Dreamweaver to redraw the table. Remember, this is a screen refresh problem in Dreamweaverthere is nothing wrong with the code and the page would display properly in a browser.

    Though the page looks quite different at the end of this step, you haven't done much but replace obsolete static HTML with updated static HTML.

    graphics/12fig01.gif

  2. Link Tour Price Calculator to tour_price.asp.

    Since no tour is specified, you can't send any URL parameters. But the tour price calculator application will still work; it just won't have a particular tour specified as the default in the form's drop-down menu when the page loads.

  3. Create a new line beneath the second body text paragraph, and insert a table with three rows, two columns, cell padding of 3, cell spacing of 0, width of 95 percent, and a border of 1.

    This table contains three rows, one for each kind of search. The left column will eventually contain a description of each search type, while the right column will enable the search itself.

    graphics/12fig02.gif

  4. In order from top to bottom, type the following into the three cells in the first column: By World Region, By Country, and View All Tours. Drag the column divider to the left, so that the right column is wider than the left.

    Once again, before you add dynamic content to a page, most often you'll build static content. Then you drop dynamic content into discrete locations within the page.

    graphics/12fig03.gif

  5. Drag to select View All in the View All Tours cell, and link the page to tour_detail.asp.

    Clicking this link brings up the default version of tour_detail.aspthe version you completed in Lesson 11.

  6. Save, upload, and test the file in a browser.

    graphics/12fig04.gif

    When you click the View All link, you'll be taken to tour_detail.asp, which should function as before. The important thing to remember for later is that when users click this link, no additional variables are sent as URL or form variables.