Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > Adobe Dreamweaver

  • Print
  • + Share This
  • 💬 Discuss
From the author of

Creating the Web Site

In this project, you're going to add the search functionality onto an existing framework. All the pages are setup as a skeleton of the complete site with placeholder images and text. There's even a search form pre-built on each page.

You can create a search form many different ways. For now, we're going to concentrate on a simple site search, so let's back up and see how the form was built.

  1. Open any page in your new 08_search_engine site except for index.htm in the root folder. The images for the navigation structure were created and sliced in Fireworks. Because Fireworks auto-named the resulting GIF files and created the table, the file names are cryptic. For now, concern yourself only with the two last cells in the first row of the table. They contain the Search graphic, a text input field, and a GO graphic that will serve as the submit button. These cells are surrounded by an HTML form tag, which makes it possible to capture and process the search request.

    NOTE

    The size and position of the graphics and form fields required some tweaking after the original importing from Fireworks. Also, because of the differences in the way browsers display form fields, you'll need to experiment with your settings to make the form look acceptable in all major browsers. As a general rule, test it in Netscape first. If the form fits and looks OK there, it should fit fine—Internet Explorer's forms are always more compact.

  2. Now open index.htm in the root folder. Notice that the cells for the Search function are blank. You'll be putting it all together in the next few steps. First, to ensure predictable alignment, highlight both cells, and select Horz: Left and Vert: Top in the Cell Properties bar.

  3. Now you set up the form tags. Click in the first empty cell. Insert a blank form by selecting Insert>Form. Open the split view so you can dig into the HTML. Click inside the form area in Design view and look above in the HTML view. You should see the opening form tag.

  4. Highlight the <form> tag and move it before the preceding <td> tag. Edit the line to read: <form method="get" action="http://search.atomz.com/search/">

  5. Click in the second empty cell. Notice where the cursor moves in the HTML view. Select the closing form tag </form> and move it after the </td> tag of the second empty cell. It's very important that you get the tag after the second cell, or you'll have some strange alignment and Dreamweaver may add a second </form> tag in the next steps.

    NOTE

    Dreamweaver will automatically place a set of </form> tags around any new text field. This can give your form elements (and elements surrounding them) strange gaps and alignment. Pay close attention, especially when you are aligning graphics and form elements.

  6. Next, you need to place the Search graphic. Insert in the first empty cell the file goodmans1_r1_c5.gif from the Images folder. Insert a line break <BR> (press Shift[pl]Enter or Shift[pl]Return) after the graphic.

  7. Next, insert a Text Input field immediately below the graphic by choosing Insert>Form Objects>Text Field. In the Property inspector, set the field values to TextField Name: "sp-q", Char Width: "14", as follows: <input name="sp-q" type="text" size="14">.

  8. In the empty cell on the right, you need to insert an image field. Using Insert>Form>Image Field, insert the file goodmans1_r1_c6.gif from the Images folder.

  9. Save the file and preview it in a browser. The page should look like the other page you previewed earlier.

  • + Share This
  • 🔖 Save To Your Account

Discussions

comments powered by Disqus