Microsoft Expression Web - 搜索页面

在本章中,我们将学习如何向网站添加搜索选项或搜索框.如果它是一个大型站点,那么您需要在站点中有一个搜索框,以便用户可以轻松找到任何数据.有许多免费的可用,如Windows Live,谷歌等.

Windows Live Search

以下步骤说明如何添加Windows实时搜索框到您的网页,然后设置搜索表单以搜索整个网站或仅搜索您的网站.

步骤1 : 创建一个新的HTML页面并将其命名为 SearchPage .

SearchPage

第2步 : 转到格式菜单,然后选择动态Web模板 → 附加动态Web模板... 选项.选择master.dwt文件,然后单击打开按钮.

动态模板

第3步 : 让我们在可编辑区域内添加以下代码.

<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:http://www.microsoft.com/expression"/> 
         </td> 
      </tr> 
   </table> 
</form>

Region

步骤4 : 保存页面.转到文件菜单,然后选择在浏览器中预览.

保存页面

第5步 : 您将在网页中看到Windows Live Search.让我们在搜索中输入内容并单击"搜索站点"按钮

搜索站点按钮

第6步 : 如您所见,它将在网上搜索.如果您想将搜索限制为仅限于您的网站,则必须使用以下名称指定您的网站域,而不是 www.microsoft.com/expression

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

第7步 : 同样,您可以通过在可编辑区域中添加以下代码来添加Google搜索选项.

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

第8步 : 保存您的HTML页面,您将看到一个搜索框,搜索按钮,复选框和复选框标签.

搜索方框

第9步 : 要限制用户仅搜索您的网站,请选中该复选框,然后转到"标记属性"面板,并将"值"属性设置为您网站的网址,例如 www.microsoft.com/expression .

CheckBox

第10步 : 保存页面并在浏览器中预览.现在,您将在网页中看到Google搜索选项.

Google搜索选项