Add a Search Box to Your Website in Expression Web

Author: Pat Geary

Web site: http://www.expression-web-tutorials.com/

FrontPage provides the Web Search web component (a.k.a. webbot) to enable you add a search form to your website. The Web Search webbot relies on FrontPage Server Extensions to maintain a list of words found in each page in your website, and provides little opportunity to customize the form’s appearance. With Microsoft support and web hosting support for FrontPage Server Extensions both going away, it’s a good time to learn some new modern techniques for adding search to your website.

There are a number of free search options available (for a list of some that I have used, see http://www.genealogy-web-creations.com/adding-search-engine.html), or if you are using paid hosting, there may be one available through the host. In this article I’ll show you how to add a Windows Live Search box to your website, and alternatively, a Google Search box.

Once you decide which of the search engines you want to use, where should you place the search form on your page? I would place the code for your search box on every page of your site in a conspicuous place near the top. I prefer to place the search box at either the top of the page or as part of the left side navigation using a very simple box styled using CSS.

Add Windows Live Search to your website

The following steps show you how to add a Windows Live Search box to your web page in Expression Web, and then set the search form to search the entire Web or only your website.

1. In the Code view of your page, put your cursor where you want the search form to appear.
2. Paste the following code into the page:     

   <!-- Site search from Live Search-->
     <form method="get" action="http://search.live.com/results.aspx">
     <input type="hidden" name="cp" value="1252"/>
     <input type="hidden" name="FORM" value="FREESS"/>
     <table style="background-color: #ffffff;"><tr><td> <a href="http://search.live.com/">
      <img src="http://search.live.com/s/affillogoLive.gif" style="border:0px;" alt="Live Search"/></a></td>
     <td>
     <input type="text" name="q" size="30" />
     <input type="submit" value="Search Site"/>
     <input type="hidden" name="q1" value="site:YOUR DOMAIN NAME GOES HERE"/>
     </td></tr></table>
     </form>
     <!-- Site Search from Live Search -->

   If you switch to the Design view of your page, you should see a Windows Live logo, search box, and  search button:

   

3. To restrict the search form to search only your website, return to the Code view of the page and find this line of code:

   <input type="hidden" name="q1" value="site:YOUR DOMAIN NAME GOES HERE"/>

4. Then replace the text “YOUR DOMAIN NAME GOES HERE” with the URL of your website. For example:

   <input type="hidden" name="q1" value="site:http://www.microsoft.com/expression"/>

   If you don’t want to restrict the search box to search only your website, then simply delete that entire line of code.

   Note: If your website is written in a language otherthan French, English, or German, then find this line of code:

   <input type="hidden" name="cp" value="1252"/>

   and replace the value “1252” with the code page number of the language your website is written in. For a list of code page values for all languages, see http://msdn.microsoft.com/en-us/goglobal/bb964654.aspx

That’s it! Windows Live also offers an Advanced Search Box that lets you search multiple website that you specify, the entire Web, or apply a Live Search Macro. For more information, see the "Advanced Search Box" heading on the following page: http://search.live.com/siteowner.

Add Google Search to your website

The following steps show you how to add a Google Search box to your web page in Expression Web, and then set the search form to search the entire Web or only your website.

1. In the Code view of your page, put your cursor where you want the search form to appear.
2. Paste the following code into the page:     

   <div style="border: 1px solid black; padding: 4px; width: 20em; text-align: center; margin: 0px auto 0px auto">
         <table border="0" cellpadding="0">
         <tr>
         <td>
         <input maxlength="255" name="q" size="25" type="text" value="" />
         <input type="submit" value="Google Search" /></td>
         </tr>
         <tr>
         <td align="center" style="font-size: 75%">
         <input checked="checked" name="sitesearch" type="checkbox" value=" " />
         Only search this website<br /></td>
         </tr>
         </table>
         </div>

   If you switch to the Design view of your page, you should see a search box, search button, check box, and check box label:

   

   The next steps enable users to restrict the search to only your website.

3. In the Design view of your page, click on the checkbox in the search box.

   

4. Go to the Tag Properties task pane, and set the Value property to the URL of your website, such as http://www.microsoft.com/expression:

   

   If users select the checkbox in your search form, the search is now restricted to your website. To set the form to search the entire Web, leave the value blank.