在本章中,我们将学习如何向网站添加搜索选项或搜索框.如果它是一个大型站点,那么您需要在站点中有一个搜索框,以便用户可以轻松找到任何数据.有许多免费的可用,如Windows Live,谷歌等.
以下步骤说明如何添加Windows实时搜索框到您的网页,然后设置搜索表单以搜索整个网站或仅搜索您的网站.
步骤1 : 创建一个新的HTML页面并将其命名为 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>
步骤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 .
第10步 : 保存页面并在浏览器中预览.现在,您将在网页中看到Google搜索选项.