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

Making the Search Come to Life

Now you have set up your Atomz Search account and created the search field. There's still one element missing from your HTML: a form-based link to your account on Atomz.com. This is necessary so that users will see your site's index. You're going to create a dummy Search button and plug the code it generates into your site.

  1. Create a new document in Dreamweaver. Choose File>New>Basic Page>HTML. Open the Insert>Atomz tab. Click the Atomz Search object. Click Continue. Enter your email address and password. You only have to do this once if you leave the Save my login information box checked in the next dialog box.

    The extension connects you to the Atomz server and lists some options. Because you've only set up one account, you don't have a choice there. However, after you're finished with this project, you can create many accounts for various sites using just one login. For now, do not check the Use advanced search form option. Click OK.

    NOTE

    As an alternative to using the AtomzSearch Extension to generate a search page, you can log in to Atomz.com, click the HTML link on the left, and get the appropriate snippets for your simple or advanced search pages.

  2. Open the split view to see the HTML behind the scenes. Take note of the </form> tag. The tag is the same as the one you edited earlier.

  3. On the next line, notice the name="xxx" value. This should read "sp-q", just like you added earlier. Next, find the two lines of hidden form tags. You'll be adding these between the form tags on all of the pages of the site. These codes are unique to your site, so it's critical that you copy these correctly.

  4. Note the five lines starting with the text field tag and ending with the two hidden tags. Remove the <br> tag and the Submit tag. Change the textfield line to read: <input name="sp-q" type="text" size="14">.

    You should have the following text left (your sp-a value will be different than the one shown here):

    <input name="sp-q" type="text" size="14">
    <input type=hidden name="sp-a" value="sp9001d008">
    <input type=hidden name="sp-f" value="iso-8859-1">
  5. Highlight these three lines of code and copy them. Choose Edit>Find and Replace. In this dialog box, set the following, but don't close the Find and Replace box just yet:

    Find In: Entire Current Site Search For: Source Code Replace With: Paste your three lines of HTML

    Open the index.htm file you were working on in the last stage of this project. In TML view, highlight only the line with your textfield tag (not the hidden tags) and copy it.

    <input name="sp-q" type="text" size="14">
  6. Back in the Find and Replace dialog box, in the box next to Source Code, paste this one line of HTML. Click Replace All. This action updates every page in the site with your unique hidden tags. This is necessary because each account generates unique login information. Not to mention, if you haven't used Find and Replace in Dreamweaver, you're missing one of its most powerful features!

  7. Now that you've fixed the HTML in all your pages, upload the entire site to your live server. If you still don't have a live server, please skip ahead and read the section, "Setting up a 'Live' Site," for some ideas on resources you can investigate.

  8. You can view your pages on the live site, but the search feature won't work yet. You have one important step to complete before you get to see some amazing results.

  • + Share This
  • 🔖 Save To Your Account

Discussions

comments powered by Disqus