轻松拥有自己的站内搜索引擎
若想在某特定网站内搜索特定的内容(如搜索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"＞ 一.外观 1 不要先决定网页的外观，然后强迫自已去适应它，应该从你的访客对像，你要传 达的讯息以及你的制网目标推导出一个最适合的网页架构。 2 每页排版不要太疏或用太大的字，尽量避免看你的网页时需要作很大的卷动，要 知道在一页的上部分是显眼而宝贵的地方，不要只放着几个粗大的字或图片。 3 最好不要用 800x600 以上的分辨率设计网页。常用的分辨率是 640x480 及 800x600 。 明智的网页设计者是处处照顾浏览者，绝不会炫耀自己有专线、有17 寸的显示器等。 4 不要于每页插入太多的广告牌。相信你亦不喜欢浏览一些贴满广告的网页吧，你要考虑到该页内容与广告的比例，摆放的位置亦很重要，不妨多参考别人的做法。广告太多，只会令人烦厌。 5 不要每页都采用不同的背景图片，以免每次转页都要花时间去下载，采用相同的底色或背景图片还可增加网页一致性，树立风格。 6 底色或背景图片必须与文字对比强烈，易于阅读，这并不是要求你永远使用鲜亮的背景配搭深色的文字，但深色背景常要求与主题配合，有较多的顾虑，若你的网页 是文章式或包含大量文字，不妨在底色与文字的配搭上下些工夫，力求让访者能舒适阅读你的文章。 7 不要把图片白色当透明，要知道别人的作业系统不一定把内定底色设为白色，解 决方法除了真的把该网页的底色设为白色之外，最好还是以图片编辑工具为图片设好透明颜色。 8 太长的一页要使用内部连结，明智的网页设计者是不会让浏览者看网页时作太大 的卷动。常见的内部连结应用例子如 FAQ （常见问答）。 二.标记运用
曾经我指出的网页设计中的十大错误，至今在很多站点上依然可见，并且影响着页面的可用性。也就是说，这三年来情况并未得到多大改善。 不幸的是，新的网络技术及其应用导致了一个全新层次的错误。以下是其中最严重的十个。 一. 破坏或减慢“后退”按钮 (我的看法：有时候对页面的适当控制是必须的。) “后退”按钮是网络用户的生命线，同时也是继超文本连接后最常使用的导航特征。用户可以随意尝试网页所指向的任何地方，而只需点击一两次“后退”按钮就可以回到系统已经保存的的先前页面。 当然，如果站点犯了以下某一错误的话，那么“后退”按钮就无法工作： 打开 新的浏览窗口 (参见错误二)。 使用 立即重定向 (immediate redirect)：每当用户点击“后退”按钮时，页面就会跳转至我们不希望访问的位置。 禁止缓存：这样做使得“后退”操作不得不重新向服务器发送请求；所有的超文本都应当是次秒级（sub-second）的，这样做会使得返回的时间加倍。 二．打开新的浏览窗口（增加用户对站点的粘度，有时候打开新窗口是有作用的，不认同此观点） 打开新的浏览窗口就像一个吸尘器推销员在上门推销时，直接将烟灰缸里的杂物倾倒在消费者家中的地毯上。拜托！不要用任何窗口污染我的屏幕(尤其在当前操作系统低劣的窗口管理技术下)！如果我需要一个新窗口，我会自己打开的。 设计者打开新窗口的本意是要让用户留在他的站点上。但是却忽略了控制用户的机器所带来的负面效应，这种策略恰恰弄巧成拙，因为当用户想通过“后退”按钮返回先前的站点时，已经做不到了。用户通常注意不到新窗口已经被打开，尤其当他们的显示器很小，而窗口又正好是最大化时。因此，当用户想要返回原来的站点时，面对的却只是一个不可用的灰色“后退”按钮。 三．GUI (图形用户界面) 部件的不规范使用 一致性是最重要的可用性原则之一：当事物遵循相同的原则运作时，用户不用担心发生意外，因为他们根据先前的经验已经很清楚将会发生什么。就像你每次在牛顿的头顶上释放一个苹果，它一定会砸中他的脑袋一样。 用户的期望实现得越多，他们就越感觉是自己在控制整个系统，并且更加喜欢它。相反地，用户则会感到可靠程度不够。想想，当我释放苹果时，它变成了西红柿并朝着天空蹦出一英里，多荒诞！ 交互的一致性是打开新窗口不合理的又一原因：点击链接的标准结果是目标页面在当前的浏览窗口中加载，取代现有页面。出现其它的任何情况都违背了用户的期望，令他们感到对网络的控制不稳定。 目前，在网上违背一致性最严重的是 GUI 部件，如单选按钮(radio button)或多选框(checkbox)的应用。这些设计要素的正常行为方式在 Windows 界面(UI)标准，Macintosh 界面标准 以及 Java 界面标准 中均有规定。遵照哪种标准取决于你的主体用户所使用的平台（多数情况为 Windows），但由于这些标准都非常接近，所以基本没什么影响。 例如，单选按钮的标准表明，它应该被用于从一系列对象中挑选一个，但这一选择直到用户点击确定按钮确认后才生效。不幸地，我见过许多网站将单选按钮当作了动作按钮，一点击就立即得到结果，这样做严重偏离于标准接口的设计，并使网络用起来更加困难。 四．缺少传记（不认同，难道我做了什么事非要一定让所有人都知道？） 据我1994年的第一次网络研究显示，用户希望了解网络信息背后的那些人。尤其是作者的传记和照片，因为这有利于让网络不再冷冰冰，而变得更可靠，更温情。个性及观点通常都强于匿名的文字。 至今仍然有许多站点不采用专栏和署名的方式来发表文章。即使有署名的，也常忘记在作者的署名上添加链接以帮助读者找到该作者的更多文章。 用 mailto: 链接来代替作者传记尤其糟糕， 今天就网页结构进行一下讨论。 一个网页的结构的好坏，对网页的加载速度有着很大的影响！ 1、关于框架结构 一般情况下，应尽量避免使用框架结构，因为浏览器必须对框架中的每个页面分别进行请求！这必然会增加服务器的负担。另外，现在还有少数用户使用的浏览器并不支持框架结构显示。 当然在一些地方，框架结构还是显得非常方便，比如：聊天室、论坛、社区、软件下载。 2、关于表格 表格的应用不仅仅限于，在一些内容列表的时候时候，对于网页的整个布局，表格有着非常重要的作用。为了能使大量的内容在网页上布置的井井有条，一般通过没有边框的来将网页分块，然后将不同的内容放在不同的单元格中。表格的使用是有一些技巧的： 首先，尽量避免使用结构复杂的表格，因为结构复杂的表格，有可能使浏览器多次刷新表格。 其次，能将一个表格分为两个或两个以上的时候因为分为两个，因为浏览器只有在整个表格的内容全部读入以后再输出显示，如果表格中的内容非常的多，那么在加载过程中，浏览器在表格读入完毕以前将一直显示空白。 最后，表格嵌套不要超过3层，层次太多的话在加载表格的时候会使浏览器花大量的时候处理表格结构。 新浪网的首页页面时候很好的例子，大家可以保存它有编辑软件打开查看其结构。 熟练的使用表格是作出美观的网页所必须的！ 事关大小 字体的大小总是一个困扰人的问题，用绝对单位还是用相对单位？或者具体来说，用什么单位？ex? em? pt? px? 百分比? 让我们看看 CSS 2.1 Spec 中的说明: 相对大小包括：em, ex, px 绝对大小包括：in, cm, mm, pt, pc em 就是相对 font-size 制定的大小而言的，例如 margin: 1.2em 就是指设置 1.2 个字符宽度的 margin，当 em 本身用于 font-size 时，指的是它所继承元素的相对大小。 百分比也是相对 font-size 而言的。 因此我认为，em 和百分比都不适合设置字体的大小，因为相互变动的因素太多了，修改一个地方就有可能影响很多其他的地方。ex 是根据拉丁字母的 x 的高度而言的，这不适合汉字的大小，所以也否决了。px 是根据当前显示设备的解析度而言的，同一个 px 对应不同的设备——比如屏幕或纸张——实际的大小会有一定差异。 所以我认为，如果网页中应该存在作为绝对参照系的长度，那么 pt 和 px 应该是首选，其他的长度根据这个绝对参照系，按照百分比或者 em 来变动。 下面谈谈网页和印刷中大小造成的差异。99% 的网页是用来在屏幕上阅读的，而问题在于，屏幕的解析度要比纸张低得多，所以如果直接把字体按照纸张上印刷的那个大小显示，肯定是看不清的，仅就英文字体而言，许多细微的点划、衬线都没法在那么低的解析度下表现出来，所以我们只能用专门设计给屏幕显示的字体。 这些字体的优劣是很难评述的，有一种看法认为，尽管纸张印刷中都倾向于有衬线 (serif) 的字体比无衬线 (sans-serif) 的要易读，但屏幕上无衬线的字体反而要好一些。所以微软把 Verdana 吹捧为了最适合网页使用的字体。我通常也偏向于使用 Verdana、Arial 多于 Times、Georgia。 对于中文字体的情况有所不同，中文字体在屏幕上的清晰显示依赖的是点阵字体，或者简单的说，就是微软随 Windows 提供的宋体和新宋体 (simsun & nsimsun)，这套字体是华康公司 (Dynalab) 设计的，对 9pt 到 12pt 左右的字体都设计了对应的点阵字体。其中使用得最广泛的是 9pt, 10.5pt 和 12pt 的字体：
那么比这个大小要大的汉字呢？就要依赖操作系统的字体圆整 (anti-alias，以下简称 aa) 技术了，一般大家认为， R语言 install.packages 无法读取索引的解决方案 基于element-ui封装可搜索的懒加载tree组件的实现
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＞
关于字体的讨论，其实无论是国外还是国内，都已经有不少，可是我发现绝大部分的内容或者有失偏颇，或者不够全面，下面我试图将自己一段时间内的观点总结一下，以求提出一个比较容易接受的 CSS 字体选择的建议。
相关文章