DreamWeaver Toolbar: Search Bar

The inclusion of  a search bar allows visitors to search the page titles and text blocks and find what they are looking for.

Features

  • Search for matching text phrazes.
  • Use the search results to navigate the site.

Installation

  1. Open an HTML file in DreamWeaver.
  2. Place the cursor at the insertion point (in code view or design view).
  3. Go to the Zencil toolbar and click the photo gallery icon.
  4. Use the wizard to set the color scheme.

Discussion

Including a search bar is considered a best practice on larger sites.

Code Sample

  • The <style> code may go within the <head> tags or as part of an attached style sheet.
  • The <zencil> tag must go in the html body.
  • <zencil> and <zencil:hidden> tags may be used interchangeably.
  • The "button" attribute of the <zencil> tag may be used to specify an image that will replace the default search button.
<style type="text/css">
/*search bar*/
        #searchbar1 {margin:0px; padding: 0px; }
        #search{ /*mess around with the text feild here*/ }
        #searchsubmit{ /*mess around with the button here*/ }
</style>
<zencil:hidden module="searchbar" name="searchbar1" button="default" fontfamily="Times New Roman, Times, serif" basecolor="#FFFFFF" darkcolor="#000000" mediumcolor="#999999" lightcolor="#CCCCCC" >
  <form id="searchbar1" name="searchbar1" method="post" action="#" >
    <input type="text" id="search" name="search" />
    <input type="submit" id="searchsubmit" name="searchsubmit" value="Search" />
  </form>
</zencil:hidden>
 
    Copyright Clear Site Web Solutions Corporation  |  Victoria, B.C. Canada