dreamweaver轻松制作自己的站内搜索引擎

dreamweaver轻松制作自己的站内搜索引擎

 

很多个人网站的站长都希望为自己的网站建立一个站内搜索引擎,但一不熟悉ASP、PHP、JSP等动态开发技术,另外自己建立站内搜索也需要空间支持相应的动态技术,所以常不得已放弃。其实,何不借用Google打造站内搜索引擎,来方便网友对自己网站的内容进行查找。
若想在某特定网站内搜索特定的内容(如搜索www.cfan.com.cn中包含关键字“网络”的内容),只需要在Google的搜索栏里输入:“网络 site:cfan.com.cn”即可(不含引号)。如果直接在自己站点的网页上建立一个Google的搜索栏,然后让访问者按Google规定的格式进行查询,那不就能实现Google作为自己站内搜索引擎的功能了吗?但是我们当然不能要求使用者还要特地学习Google对特定网站搜索的格式规范。于是笔者立刻联想到是否可以使用JavaScript脚本使得Google接收的查询关键字后自动加上类似“site:cfan.com.cn”的字符串呢?答案当然是肯定的。在你的网站首页需要放置站内搜索引擎页面的<body>标签的范围内放置如下代码:

<script type="text/javascript">
var domainroot="mysite.com"//个人站点域名,替换成你的网站的网址即可
function Gsitesearch(curobj){
curobj.q.value="site:"+domainroot+" "+curobj.qfront.value
}
</script>
<form action="http://www.Google.com/search" method="get" onSubmit="Gsitesearch(this)">
<p>站内搜索:<br/>
<input name="q" type="hidden" />
<input name="qfront" type="text" style="width: 180px" /> <input type="submit" value="开始搜索">
</p>
</form>

脚本的关键部分在于Gsitesearch函数。语句:“curobj.q.value="site:"+domainroot+" "+curobj.qfront.value”的含义为:将“site:”字符串+变  量domainroot、空格、访客填写的关键字依此合并。既使得搜索格式符合Google的语言规范,又使增加了搜索功能的友好性,不需要用户来遵循Google的搜索规则。
至此,您的专业站内搜索引擎就完成了(见图1 完成的站内引擎)。

如果我们不但要搜索本站的内容,还要让访客同时能搜索兄弟站点或本类网站的内容,该如何修改呢?接下来我们就对我们刚才的代码做一些推广。

<script type="text/javascript">
function Gsitesearch(curobj){
var domainroot=curobj.domainroot[curobj.domainroot.selectedIndex].value
curobj.q.value="site:"+domainroot+" "+curobj.qfront.value
}
</script>
<form action="http://www.Google.com/search" method="get" onSubmit="Gsitesearch(this)">
<p>
<input name="q" type="hidden" />
<input name="qfront" type="text" style="width: 180px" /> <input type="submit" value="立刻搜索" /><br /><br />
站点:
<select name="domainroot">
<option value="www.mywebsite.net" selected="1">本站</option>
<option value="www.friend1site.net">友站1</option>
<option value="www.friend2site.net">友站2</option>
</select>
</p>
</form>
我们只需要将Gsitesearch函数稍做修改,搜索的灵活性就能大大加强。站长只需要增删option选择项,即可实现多站点的内容搜索(见图2 支持多站点的站内搜索引擎)。

 

推荐阅读

    Dreamweaver教程:制作一像素表格

    Dreamweaver教程:制作一像素表格,像素,制作,教程,边框,设置,浏览,象素,Dreamweaver教程:制作一像素表格 ◇制作一像素的表格,实质上是设置

    Dreamweaver闪动分隔线效果制作技巧

    Dreamweaver闪动分隔线效果制作技巧,制作,分隔线,属性,选择,时间轴,变换,单元,Dreamweaver闪动分隔线效果制作技巧 在网页制作中,多彩

    Dreamweaver制作站内搜索引擎

    Dreamweaver制作站内搜索引擎,制作,函数,字符串,网站,搜索,浏览,命令,Dreamweaver制作站内搜索引擎 当我们制作的网站内容越来越多的时

    Dreamweaver阴影文字制作技巧

    Dreamweaver阴影文字制作技巧,制作,文字,单击,命令,网页,保存网页,扩展,Dreamweaver阴影文字制作技巧 在我们制作网页时,需要一些特殊的

    Dreamweaver跳转菜单制作技巧

    Dreamweaver跳转菜单制作技巧,制作,菜单,输入,表单,点击,频道,初始化,Dreamweaver跳转菜单制作技巧 具体操作步骤如下: 点击“插入”-“表

    Dreamweaver制作用户注册表单

    Dreamweaver制作用户注册表单,表单,用户注册,制作,文本域,点击,第二,密码,Dreamweaver制作用户注册表单 在浏览各大论坛时,会发现有些内容

    Dreamweaver制作浮动广告技巧

    Dreamweaver制作浮动广告技巧,浮动,制作,图像,时间轴,点击,关键帧,单击,Dreamweaver制作浮动广告技巧 具体操作步骤如下: 打开wf2.html文

    手机移动网页制作:新建手机网页

    手机移动网页制作:新建手机网页,制作,手机网页,移动网页,网页,文件,格式文件,类型,手机移动网页制作:新建手机网页 下面正式进入Xhtml MP手

    静态网页制作与动态网页制作的区别

    静态网页制作与动态网页制作的区别,制作,动态网页,网页制作,网页,静态网页,网页内容,动态,静态网页制作与动态网页制作的区别 静态网页制

    手机移动网页制作:链接和插入图像

    手机移动网页制作:链接和插入图像,制作,链接,移动网页,图像图像,标签,文本,执行,手机移动网页制作:链接和插入图像 本篇文章继续上文的WML文