轻轻松松为自己建一个站内搜索引擎

　　提示：请把全角状态下的＜＞改成半角状态下的<>使用

　　很多个人网站的站长都希望为自己的网站建立一个站内搜索引擎，但一不熟悉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
}HTML在线编辑器相信大家见得多了，有些流行的在线编辑器具有很丰富的功能。但美中不足的是，现有的HTML在线编辑器设置字号大小通常只限于1-7号字而已，不能更好地满足人们的需要。能不能实现像Word那样任意地设置字号大小呢？经过长时间的攻关，Bound0终于可以肯定地回答这个问题了，呵呵呵！请大家共同分享此“Eureka之喜悦”吧！

我们通常所见的内嵌在网页中的HTML在线编辑器，其核心本质是一个IFRAME

例如：

<IFRAME id="Editor" Name="Editor" style="WIDTH: 550; HEIGHT: 480"></IFRAME>

令 Editor.document.designMode="ON";

此时这个IFRAME就是一个设计模式的HTML编辑器了，可以通过脚本

Editor.document.selection.createRange().execCommand(command)

对选中的内容执行command，进行编辑操作。

由于浏览器本身提供的编辑功能非常有限，因此现在流行的HTML在线编辑器大都进行了一些扩展。

在本文发表之前，HTML在线编辑器在设计模式下的字号（字体大小）任意设定功能尚无成功实现，本文所述技术不仅在此方面实现了零的突破，还对HTML在线编辑器的其他扩展功能的实现作出了广泛的启示。

现在流行的HTML在线编辑器的功能可以说已经很丰富了，为什么唯独任意设置字体大小这个看起来并不华丽的功能没有被做出来呢？让我们先来了解一下其中的原因好了：

假设编辑区的HTML内容（Editor.document.body.innerHTML）是：

<H1>逍遥主义者的宣言</H1>

<H3>十个小老头
<BR>朱氵太子
</H3>

<P>我们不是败家浪子，我们从不游手好闲；我们不是无用书生，我们从不怨天忧地；我们不是嬉皮士，我们从不玩世不恭；我们不是妄想家，我们从不脱离实际；我们不是阿Q，我们从不麻木颓废；我们不是狂人，我们从不争风吃醋。我们是创造者，我们是改变者，我们是革命者。我们不是在不幸中去幻想幸福的人，我们甚至不是去追求、寻找幸福的人，我们是自己制造幸福的人，我们是快乐的发源者。首先，在我们经历必当经历的经历时，我们不允许自己不快乐！这就是，逍遥主义的真谛。</P>

<P><BIG>将你的梦打开，填进我的希望。谁都不必介怀，一点点的分量。面对别人述说，命运烛转轮回，世间天空海阔，种种因缘寂晦……</BIG></P>

假设选中的是红色的部分，则Editor.document.selection.createRange().htmlText的内容是：

<P>者。我们不是在不幸中去幻想幸福的人，我们甚至不是去追求、寻找幸福的人，我们是自己制造幸福的人，我们是快乐的发源者。首先，在我们经历必当经历的经历时，我们不允许自己不快乐！这就是，逍遥主义的真谛。</P>

<P><BIG>将你的梦打开，填进我</BIG></P>

看见多出来几个蓝色的标签了吧？产生这种现象是因为：“任何时候，document.selection.createRange().htmlText取出来的html代码都是完整成对的，即使当前选中的内容横跨了几个不同的标签”（卖坏梨语），所以IE会自作主张地把不完整的标签补齐。

就是因为这个原因，当选中的内容在Editor.document.body.innerHTML中对应的代码包含不完整的标签时，在Editor.document.selection.createRange()上做pasteHTML可能会吃不进去（有不完整的<table>等时），或者出现明显的BUG。

而现在的HTML在线编辑器所提供的除了基本的Editor.document.selection.createRange().execCommand(command)之外的各种功能几乎都是通过在Editor.document.selection.createRange()上做pasteHTML来实现的。所以字号的自由设定才始终没能实现。

一切关于“问题的解决之道”的方法论都不外乎是“变通”二字的某种讲法。很多朋友对我说，她/他有代码洁癖，即，让她/他写XHTML的话，从来不愿意加上额外的标签（tag）。举个简单的例子，相信很多人从很多地方都看到过的：

<div id="nav"> 
    <ul> 
        <li></li> 
        <li></li> 
        ...... 
    </ul> 
</div>


		
		
		

<     
      
  Micrsoft推出IE7已有一段时间了，相信大家已领略到IE7带来的从视觉和功能上的改进了，不过作为Web设计人员可要注意了：在CSS文件中，如：
.text{
color: #ff0000 !important;
color: #000000;
}
    以上代码在IE7中显示的文字颜色是红的。这一意味着新版的IE7认识!important了。大多数WebStandard设计者都用!important解决IE和Firefox对margin的理解问题，如果不用!important分别设margin值，稍微有点布局的符合WebStandard的网页必然在IE或Firefox下有一个是面目全非的。不要认为微软这个激进的做法不会对现有代码造成影响。
    在IE6、IE7过度阶段，使用IE6的用户依然会不理解带!important的CSS，而使用IE7的用户会和使用Firefox的用户一样理解!important，问题是IE7和Firefox对margin和padding的处理还是不同，换句话说现在开始要找别的方法给微软擦屁股了。



		
		
		

     
      鉴于很多朋友问到如何切图这个问题，又鉴于这个问题可大可小，一两句话是绝对讲不清楚的，所以今天有空闲在家里就举一个简单的例子来说明这个问题吧!OK，让我们开始： 

　　step1:在PhotoShop中打开设计稿，如下图 



　　选择工具板上的slice切片工具，先大刀阔斧的切上一番!技巧： 大面积的色块单独切成一块，尽可能的保持在水平线上的整齐(这个问题你们在后面的制作页面中深有感触)切好的图如下所示： 



　　step2:在PhotoShop中选择file-save for web...来输出，这里要注意一些参数的选择： 




标签：[!--infotagslink--]

  
上一篇: NoahWeb 什么是动作？
下一篇: 网页设计中该如何决定是否使用框架？






您可能感兴趣的文章:

 2015-11-24
 2020-09-09
 2015-11-24
 2016-11-25
 2021-05-06
 2016-10-10
 2014-05-31
 2016-11-25
 2020-05-23
 2020-12-08
 2021-01-16
 2017-05-27
 2020-07-05
 2016-05-13
 2021-01-17
 2021-09-16
 2016-10-10
 2016-11-25
 2016-09-20
 2016-11-25