Search ...and You Shall Find

Search ...and You Shall Find

Powerful and easy "hosted search" services like Google help your customers unearth everything from general Web results anywhere on the Internet to pages located on your site.

Search engines share the common goal of bringing content from all over the world together into one convenient place. Hosted search technology can be added to to your Web site in minutes. There's nothing to download or install. The best part is that it's free and easy. To get a handle on hosted search services, it is important to first understand a couple of search techniques familiar to anyone who spend time online - "Web search" and "site search".

Inside the Engine
Web Search

Search sites like Google and Yahoo! have popularized Web keyword search, where users enter words or phrases and click a button to return result pages containing these terms. These sites leverage indexes of publicly available content on the Web and use various algorithms such as Google's well-known page-ranking algorithm to display the most relevant information first.

Site Search
In addition to this level of Web search, most people have also used the simple keyword search found on individual sites. Site search uses the same concepts as the big search engines but on a much smaller scale. However, the goals of a site search are different from those of a Web search. Site search needs to fit seamlessly into any site design. You need complete control over the look and feel of search results.

Make a Good Match
There's an overpopulation of search services right now. However, as a Dreamweaver user it is important to find a vendor that has integrated their services into Dreamweaver so that these services appear as a native feature in the tool. Only a few companies have created extensions for Dreamweaver. The most popular search extension for Dreamweaver has been the Atomz Search extension, which incorporates the Atomz Express Search service into Dreamweaver. However, this is a trial version - it is feature limited and has a 500-page limit. WebAssist recently released the WA Google Search extension that incorporates Google technology into Dreamweaver.

In this article, we'll take you step-by-step through three easy steps to add the Google Free -Search service to your site. First, you define the type of search you would like to add to your site. Next, you define the design properties of the Google results page. Finally, test your pages with the Google service and make any necessary edits. The entire process is visual and does not require any hand coding or knowledge of Google technology.

Google Free WebSearch Wizard
The WA Google Search extension adds a Google tab to the Insert Panel - you will need to select this tab in order to view the Google Search object. Google has many other hosted services and you can imagine that in the future other Google technologies will be available from this Object Panel tab. Click on the Google Search object to open the insertion wizard. This wizard walks you through the process of configuring the Google Search in three easy steps. Once you have successfully completed the insertion wizard, the extension will insert the code into your page and display the Google object in the Design View.

Step 1
The first step in the wizard allows you to define the type of search - either Internet search or Site search. Google offers three different search options with the Google FreeSearch service - WebSearch, SiteSearch, and SafeSearch. The extension will automatically generate the proper code depending on your selection on this page in the wizard.

Follow these steps to successfully complete the first step in the wizard:

  1. From the Google Object Panel, choose the WA Google Search object to start the wizard.
  2. Select the Google Search option if you want to insert a Google search object that will search the publicly available content on the Web.
  3. Select the Google Search with SiteSearch option if you want to insert a Google search object that allows users to search either the Internet or just pages with your domain(s). When you select this option the Domain field becomes enabled - you'll need to update the placeholder domain with your domain(s). Multiple domains should be separated by semi-colons.
  4. Select the Enable SafeSearch checkbox if you want to restrict the results to exclude Web pages containing adult- themed and explicit sexual material.
  5. The preview will automatically update as you change your selections on this page of the wizard. The preview provides instant feedback to you on what the Design View will look like in Dreamweaver after the object is inserted.
  6. When you're ready, click Next to proceed (see Image I).

Step 2
The second step in the wizard allows you to define a custom logo for the results page on the Google server. This step is optional - you can leave the URL text field blank and click Next to proceed if you don't want to show your logo on the Google server. If you would like to add a custom logo you must enter a valid HTTP path to the logo image and enter the design properties for the logo. Your logo will appear at the top of the page, above the Google Search Form. You can also customize the background of the Google Search Form to match your branding.

Follow these steps to successfully complete the second step in the wizard:

  1. In the Logo URL field enter a valid HTTP address to your custom logo. It is common for users to post a custom logo on their Web server and then enter the URL that references the logo image. This image does not need to be used on your site - it can be a custom logo just for Google. Leave this option blank and click Next to proceed if you want to skip this step.
  2. If you're going to use a custom logo, it is recommended that you enter the design properties to ensure the logo is properly formatted on the Google server. The Width, Height, and Alignment options define the positioning of your logo.
  3. The Google Background Color allows you to adjust the background color of the table cell that contains the Google Search Form - use this option to match the Google Search Form with the rest of your page. You can select white, grey, or black for the background color. The background color is white by default.
  4. When you're ready, click Next to proceed (see Image II).

Step 3 : Customize the Design of Your Results Page
The third step in the wizard allows you to define the design properties of the results page on the Google server. This step is optional - you can leave all the fields blank and click Next to proceed if you want to use the standard design for the Google results page. If you want to customize the results page, you can enter a HEX number or use the color picker to define the custom color scheme. You can leave individual fields blank if you just want to override a few of the design properties.

Follow these steps to successfully complete the third step in the wizard:

  1. In the Background section, enter the color and URL to define the background color and pattern for the results page.
  2. In the Text Colors section, enter the HEX color values for Text, Alt, Important, and Faint. Each of the options define the design properties for text that is included in the results page. These Text Color settings are not very inituitive, so I recommended that you define the colors and then do some trial-and-error testing to get the Text Colors defined properly for your requirements.
  3. In the Link Colors section, enter the HEX color values for Link, Active, and Visited. These design properties control the link colors on the entire page. You probably have these colors defined as part of the color scheme for your site.
  4. When you're ready click Next to proceed (see Image III).

Summary Page: Review Google Search Selections
In the final screen of the wizard, review your selected choices. If you see anything you'd like to change, choose Back to find and modify the choice. When you're done, click Finish. The wizard inserts the custom code required to work with the Google server and provides a visual representation in the Dreamweaver Design View. Your site is now ready to work with the Google Search service and you didn't have to write any code or study the Google API to implement this feature on your site.

Google Free WebSearch in Design View
Once you have completed the wizard, the extension will insert the proper code on your page. The extension includes a custom translator, a pattern-matching technique, to properly render the Google object in the Dreamweaver Design View. Additionally, pages that already have the Google Search code footprint are supported by this extension. This enables you to pass your pages on to other developers and, as long as they have the Google extension installed, the page will render correctly. The Google object is represented as an HTML Form with an embedded HTML table for positioning (see Image IV).


Google Free WebSearch Footprint
What's happening behind the scenes in the Dreamweaver Code View? The Google Search code footprint is a hybrid of HTML Form elements and HTML Table cells. You can add code to the footprint to customize further. The only code that should not be changed is the FORM ACTION value. This is the unique identifier for the code footprint and is used to tell Dreamweaver that this is a Google Search object (see Image V).


Edit Google Free WebSearch
Once you have inserted the Google Search service on your page it is possible to visually edit the properties. Dreamweaver has a Property Inspector that is used to edit objects in Dreamweaver. The Google object has a custom PI , but there are too many options to include them all in the small area of the Property Inspector. You must click on the Edit button in the Google Property Inspector to bring up the Edit interface for the Google Search service. There are three tabs in the Edit Interface that correlate to the three steps in the wizard.

Follow these steps to successfully edit the Google Search object:

  1. In the Dreamweaver Design View select any region of the Google Search Form.
  2. Select the Edit button in the Google Property Inspector. Update any of the fields in the Edit Interface and select OK to update the code footprint on your page (see Image VI).

WA Google FreeSearch for Contribute
Macromedia Contribute is the easiest way for individuals and teams to update, create, and publish Web content to any HTML Web site. Contribute allows non-technical users to update Web content while maintaining site standards for style, layout, and code.

The WA Google FreeSearch extension is also available for Contribute. The user experience is exactly the same as with the Dreamweaver extension - except there is a custom Google toolbar for insertion. It is also important to note that Macromedia Extension Manager does not support Contribute so the installer uses platform-specific installers instead of the standard MXP file format.

Download Information
You can download the Dreamweaver and Contribute extensions directly from the WebAssist Online Store. These extensions are free downloads and work with Dreamweaver MX, Dreamweaver MX 2004, and Contribute 2. The extensions work on Windows and Macintosh platforms. Visit to learn more.

More Stories By Eric Ott

Eric Ott has over 10 years of experience as a pioneer in the Web industry. His position at Macromedia as the product manager for Dreamweaver enabled him to define the direction of this highly regarded Web development platform from its early days. His knowledge and experience in Web design and development have given him strong insight into ways to achieve success on the web. Eric is currently the president of WebAssist, the leading provider of extensions for Macromedia MX.

Comments (2)

Share your thoughts on this story.

Add your comment
You must be signed in to add a comment. Sign-in | Register

In accordance with our Comment Policy, we encourage comments that are on topic, relevant and to-the-point. We will remove comments that include profanity, personal attacks, racial slurs, threats of violence, or other inappropriate material that violates our Terms and Conditions, and will block users who make repeated violations. We ask all readers to expect diversity of opinion and to treat one another with dignity and respect.