网页设计的锦囊妙计日期：2009/11/11 15:20:52　　

第一步

　　将下列JavaScript代码放在页面的头部。

　　

　　<SCRIPT LANGUAGE="JavaScript">

　　

　　</SCRIPT>

　　

　　第二步

　　创建自己的颜色模式时，只需调整上述代码最后一行中的参数：

　　

　　 fade(0,0,0,255,255,255,150);

　　

　　这七个参数的作用如下：前三个参数用三种原色——红，绿，蓝——表示变化开始时的颜色，紧接着的三个参数用同样的方法表示变化结束时的RGB颜色。最后一个参数表示颜色的变化从开始到结束要经过多少步，这个数字越高，淡入淡出的时间越长，颜色的变化也越缓慢。上述这一行中的参数表示某页面的颜色从黑色(0,0,0)变为白色(255,255,255)要经过150步方可完成。

　　

　　只需轻轻一按

　　这个技巧向你展示如何避免由于页面中存在过多由JavaScript产生的按钮所造成的混乱。你可以将一系列链接放在一个可滚动的列表框中，这样就可以用一个简洁的界面来代替一长串诸如<OL>、<UL>、<BR>之类的标记。通常访问者在选择一个链接后，点击Go按钮即可进入所选择的页面。

　　你也可以去掉点击Go按钮这一步，让访问者一选中链接就马上进入新页面：

　　

　　第一步

　　将下面的代码放入你要显示的可滚动列表框的页面中：

　　 <FORM name="QuickIndex" >

　　

　　<SELECT size=5 name="URL"

　　 onChange="if(options[selectedIndex].value)

　　 window.location.href=

　　 (options[selectedIndex].value)">

　　

　　<OPTION value="ss01.html">Fade in, fade out</OPTION>

　　<OPTION value="ss02.html">Click 'n' go</OPTION>

　　<OPTION value="ss03.html">Timing your splash page</OPTION>

　　<OPTION value="ss04.html">Easy includes for everyone</OPTION>

　　<OPTION value="ss05.html">Super ninja mailtos</OPTION>

　　<OPTION value="ss06.html">Home sweet home page</OPTION>

　　<OPTION value="ss07.html">Slick slide show</OPTION>

　　<OPTION value="ss08.html">Add a watermark</OPTION>

　　<OPTION value="ss09.html">Search me</OPTION>

　　</SELECT>

　　

　　<NOSCRIPT>

　　<INPUT type=submit value="Go">

　　</NOSCRIPT>

　　</FORM>

　　

　　第二步

　　上面例子中<OPTION>标记的value属性表示可选择的链接。将value的值及其后的文本换成自己的内容就行了。可以根据需要使用任意多个<OPTION>标记。

　　

　　第三步

　　千万别忘了上述代码的<NOSCRIPT>项。由于一些老版本的浏览器不支持JavaScript增强了功能的列表，使用<NOSCRIPT>就可以给使用这种浏览器的用户访问您的站点的按钮。如果你在我们下边的实例中的网站看到这个按钮，说明你的浏览器不支持JavaScript（如果你用的是Navigator 2.0，那也看不到这个按钮，因为它连<NOSCRTPT>都不支持）。注意，要使Go按钮有效，还须有一个能处理这种表格的CGI程序。

　　为了给页面节省出更多的空间，你可以将这种列表框变为只占一行的下拉列表框，为此，去掉上述代码<SELECT>标记中的size=5。将第一个<OPTION>标记的value属性赋为空值（value=""），用它作为说明，选中它时并不起作用。如

　　<OPTION value="">Go to page:</OPTION>。

　　

　　封面页的定时方法

　　你也许想通过封面页表现一些特别的东西，比如说公司的的股票上市了、孩子的生日等。同时你还要确保访问者能进入真正的主页。为什么非要让访问者自己进入主页呢？最好的做法是在进入封面页后一定时间自动进入主页。

　　

　　第一步

　　在页面的头域中写入下面一行：

　　 <META http-equiv="refresh" content="10; URL=index.html">

　　

　　第二步

　　可以根据你的需要来调整封面页停留的时间。在这个例子中，我们把它设为10秒（就是上述代码中的10），这个时间只是一个近似值。可以根据网页上的内容来调整这个时间间隔，原则是能确保访问者有足够的时间来阅读网页。最让人感到气愤的是，还没把网页内容看完它就进入下一页了。

　　这里还有一个问题，使用meta 标记刷新时,时间是从页面开始下载算起的。如果用户线路速度较慢或网络发生阻塞，可能还没等页面全部下载就进入下一页了。为了避免上述现象，可以去掉<META>标记，而在体<BODY>域中用如下语句代替：

　　

　　onload=setTimeout("location.href='index.html'",10000)

　　

　　onload的事件句柄在页面结束下载才被激活。与使用meta标记刷新不同，onLoad接受的参数单位是毫秒，而不是秒。这种方法只能在支持JavaScript的浏览器上正常工作。为了支持早期的浏览器，同时考虑meta标记刷新方法可能造成的超时操作，应该在封面页中提供一个进入下一页的链接以备不测。还要注意的是，网站的起始页应有一个缺省的文件名，当用户访问网站时就自动下载这一页，例如index.html或homepage.html。如果要先显示一个临时的封面页，就必须把封面页的名字改为缺省的起始页名字，而把主页改为其他名字。在启用或禁止封面页时要特别注意这一点。

　　

　　在所有页面中包含特定信息

　　如果你有一个出售干酪的站点，那一定希望尽可能多地发布广告信息。就像下面这样的广告:“如果您对干酪有兴趣，请快快访问――huckie 在线干酪公司，我们可以提供符合您口味的各式各样的干酪，我们是干酪在线超市”。

　　如果想在所有的页面发布这条广告，并不需要将它拷贝下来再粘贴到每个页面上；要想同时改变所有页面上的这条消息，也不必对它再进行拷贝和粘贴。

　　应该怎么做呢？用Server-side includes(SSI)，这是解决这种站点维护问题的最佳方案。要是站点上的每一页都有一个标准的导航条，干脆就把它做成一个SSI, 这样当改变结构或增加选项时，就只需改动一个文件。如果您已有链接的JavaScript或DHTML文件，将其设置为SSI方式，这样一来访问者在访问时只需在服务器上下载一次该页面。

　　和样式表一样，SSI最大的好处在于，当你要做一些改动时只需改变一个包含文件，该变化就会在所有的页面同步。

　　下面介绍SSI的工作原理。当服务器读取HTML文件时，发现有插入标志就插入一段其他代码。然后服务器整理所有代码，形成最终的文件。所有这些都在幕后执行，访问者感觉不到。

　　下面就是如何实现SSI。

　　第一步

　　确保你站点的服务器的配置支持SSI。

　　如果你的站点建在ISP上，则可以从ISP管理员处确认该ISP是否支持SSI。如果不支持，则可以要求它支持SSI。

　　如果你有自己的服务器，可以参考NCSA 的HTTP SSI 文档(http://hoohoo.ncsa.uiuc.edu/docs/tutorials/includes.html)。

　　

　　第二步

　　创建一个存放包含(Include)文件的目录。

　　第三步

　　创建包含文件。我们的例子使用的是chess_text.html。注意不要加入开始符和结束符，只要创建要包含的HTML文本就可以了。

　　

　　第四步

　　在页面的HTML文件中插入如下代码。这段代码将告诉服务器将从何处得到包含文件：

　　

　　

　　然后把你希望出现在各网页上的文字（如第一段引号中的文字）写入一个单独的文件即可。

　　

　　超级Mailto

　　Mailto 能让访问者方便地向网站提供反馈或联系信息。除了自动产生一个email消息外，你还可以使用mailto做许多其他事情。超级Mailto能自动填写抄送和密件抄送，甚至能自动填充主题行。下面介绍如何定制mailto功能。

　　基本的mailto实现方法：

　　 <A href="mailto:person@buider.com">

　　 Click here to send a boring old mailto message</a>

　　当访问者点击这个链接时，会调用他们客户端的email程序，并在收件人框中自动填上收件人的地址。下面，我们将分以下几步介绍如何增加mailto的功能。

　　

　　第一步

　　创建一个基本的mailto，包含收件人的地址。

　　

　　第二步

　　在收件人地址后用“?cc=”开头，你可以填写抄送(CC地址，下面这个例子将实现该功能：

　　<A href=mailto:person@builder.com?cc=second_person@builder.com>

　　 Click here to send an email message to multiple recipients</a>.

　　

　　第三步

　　就像下面这个例子一样，紧跟着抄送地址之后，写上"&bcc=",就可以填上密件抄送(BCC)地址了（在添加这些功能时，第一个功能以"a?"开头，后面的以"&"开头）。

　　

　　<A href="mailto:person@builder.com?cc=second_person@builder.com&bcc=third_person@builder.com">

　　Click here to send an email message to multiple recipients (only some of which you know about)</a>.

　　

　　还可以把收件人、抄送、密件抄送人的多个地址用逗号分开：

　　<A href="mailto:person@builder.com, second_person@builder.com">

　　Click here to send an email message to multiple comma-delimited recipients.</a>

　　

　　第四步

　　在第一步和第二步之后就可以用&subject=填上主题了，下面给出实现所有功能的例子（包括收件人，抄送，密件抄送和主题）。

　　 <a href="mailto:person@builder.com?cc=second_person@builder.com&bcc=third_person@builder.com&subject=This is only a test">Click here to send us super ninja email</a>.

　　

　　

　　

　　将自己的主页设置为缺省主页

　　Microsoft和Netscape 都将各自浏览器的缺省主页设为自己的站点，这有助于它们的网站获得更多的访问者。但是为什么只有它们能这样做而占尽风光呢？为什么不让人们在第一次启动浏览器时，进入你自己的站点呢？其实你可以很轻松地让访问者把缺省的主页改为你的页面。

　　如果访问者使用的是IE浏览器，那么改变他的主页设置很简单。对于使用Netscape Navigator的访问者就不同了，就连我的Navigator在使用基于Java的设置方法时也老产生运行时错误（我用的是最新版本）。唯一可靠的方法就是让使用Netscape的用户在Preference菜单中手工调整缺省主页的设置。

　　因为现在有几乎半数的网上冲浪者都使用IE，因此这个技巧对你的站点仍然很有用。下面就是具体实现步骤。

　　

　　第一步

　　在一个空文本文件中，贴入如下字符：

　　 REGEDIT4

　　

　　 [ HKEY_CURRENT_USER\Software\Microsoft\Internet Explorer\Main]

　　"Start Page" ="http://yoururl.com/"

　　

　　第二步

　　将这个文件存为default.reg，并把它放在你的Web服务器上的任何一个目录下，因为这个文件只是供访问者下载的。

　　

　　第三步

　　在你的主页中加入一行文本，如“Make PC Computing your home page!”，将它的链接指向default.reg文件：

　　

　　 <a href="default.reg">Make PC Computing your home page!</a>

　　

　　要确保该链接指向default.reg所在目录。

　　

　　第四步

　　加入一些文本用来说明点击这个链接后访问者还该做些什么。点击后IE会提示他们如何处理default.reg这个文件（打开或保存）。在这里应选打开文件，在出现提示注册表已更新的对话框后单击OK。

　　

　　这样，访问者下次在启动IE或点击主页按钮时，将会直接进入你的站点！

　　

　　在网页上制作幻灯片

　　谁都可以把度假时拍的照片放在自己的网站上，要是能把它们做成幻灯片效果就更酷了。这里指的不是将一张照片制成一个页面那样的幻灯片，而是指所有照片都在同一页面上显示的真正的动态幻灯片效果。这里我们将向你介绍如何使用层叠式样式表(CSS)和动态HTML(DHTML)制作幻灯片效果，你也许会感到这样做很枯燥，不过，想想这会给你的朋友、家人、同事留下多么深刻的印象吧。记住，由于实现这个效果使用了DHTML，所以只有4.0以上版本的浏览器支持它。

　　当然，实现幻灯片效果需要功能很强的应用程序，我们一时不可能考虑得面面俱到。

　　

　　第一步

　　收集你要显示的图片，并把它们裁剪为相同的尺寸。图片的尺寸不能超过640x480像素，并且所有图片的像素数都相等——如果图片有大有小看起来就很不和谐。

　　

　　第二步

　　在头域中，需要用<STYLE>标记指出正在使用CSS。在<STYLE>标记中，设置幻灯片在页面中播放的位置，并确定播放是以背景色开始，还是以第一张幻灯片作为开始。代码示例如下：

　　

　　 <STYLE type="text/css">

　　

　　</STYLE>

　　

　　第三步

　　在头域中，设置完CSS后，就可以插入你的JavaScript代码了。在var numSlides后设置幻灯片的数目（这个值不要太大，因为每幅画都需要数千字节左右），这里用了5幅画。

　　

　　<SCRIPT language="JavaScript1.2">

　　var numSlides = 5;

　　var currentSlide = numSlides;

　　

　　第四步

　　使用下面代码可以在幻灯片中加入字幕说明，当然你要把这里引号中的文字换成自己的话。

　　

　　 var captionTxt = new Array(numSlides);

　　 function setUpCaptions() {

　　 captionTxt[1] = "Entrance to Pier 39."

　　 captionTxt[2] = "Sea Lions lounging around the pier."

　　 captionTxt[3] = "Boats docked on the Pier."

　　 captionTxt[4] = "Underwater World whale mural."

　　 captionTxt[5] = "Alcatraz, or, The Rock."

　　 }

　　

　　第五步

　　在字幕说明的JavaScript后放入下面的代码。由于Navigator 4.0和IE 4.0对CSS的解释不同，我们在脚本中加入了检测浏览器版本的对象检测。如果用的是Navigator，则它定义某些定制的对象，使这些代码也能在其下正常工作。在后面加上</SCRIPT>标记表示脚本在这里结束。

　　function setUp() {

　　if (!document.all) {

　　 document.all = document;

　　 for (i=1;i<=numSlides;i++)document.all[("image"+i)].style=document.all[("image"+i)];

　　 }

　　switchSlide(1);

　　}

　　

　　function switchSlide(sDir) {

　　newSlide = currentSlide + sDir;

　　if (!newSlide) newSlide=numSlides;

　　if (newSlide > numSlides) newSlide=1;

　　document.all[("image"+newSlide)].style.visibility="visible";

　　document.all[("image"+currentSlide)].style.visibility="hidden";

　　// remove the next line if you don't want captions:

　　document.all["captions"].document.forCaptions.captionsText.value=captionTxt[newSlide];

　　currentSlide = newSlide;

　　}

　　

　　//-->

　　</script>

　　

　　注意脚本后部的注释：要是不想使用字幕说明，则去掉注释下面那一行。

　　

　　第六步

　　用</HEAD>标记结束头域，在体域中使用下面的代码。注意代码中每幅图像都使用了<DIV>标记，并使用<IMG src>引入图像。

　　<BODY onLoad="setUp()">

　　<B>PC Computing slide show!</B>

　　<DIV id="image5" class="slides"><IMG src="fifth.jpg"></DIV>

　　<DIV id="image4" class="slides"><IMG src="fourth.jpg"></DIV>

　　<DIV id="image3" class="slides"><IMG src="third.jpg"></DIV>

　　<DIV id="image2" class="slides"><IMG src="second.jpg"></DIV>

　　<DIV id="image1" class="slides"><IMG src="first.jpg"></DIV>

　　

　　

　　第七步

　　为了方便访问者察看特定的图像，可以增加一些用于定位的按钮。你可以采用老式的超级链接，但是专现在专为Next和Previous按钮设计的图案非常多，可以使用现成的图案。下面的代码就是使用next.gif和previous.gif作为按钮图案来实现这个功能

　　 <DIV style="position:absolute; top:350px; left:100px">

　　<A href="javascript:switchSlide(-1)">

　　<IMG src="previous.gif" border=0></A>

　　<A href="javascript:switchSlide(1)">

　　<IMG src="next.gif" border=0></A>

　　</DIV>

　　

　　如果不想在Previous和Next上显示图片，可以用文字代替<IMG>标记。

　　

　　第八步

　　最后，使用<TEXTAREA>来显示字幕说明，可以通过rows和cols来确定显示行数和列数。

　　下面给出代码：

　　

　　 <DIV id="captions" style="position:absolute; left: 320px; top:75px">

　　<B>Picture caption</B>

　　<FORM name=forCaptions>

　　<TEXTAREA name="captionsText" wrap="virtual" rows=25 cols=20"></TEXTAREA>

　　</FORM>

　　</DIV>

　　

　　

　　添加水印

　　从传统意义上讲，水印是用来鉴别真假，因为他们的存在并不影响印刷在该页上内容的清晰度。后来GeoCities 把水印的概念引入数字时代。在页面制作时利用这个技巧，在页面上就可以作出一个半透明的标志，它就像独立的悬浮在页面上一样。尽管这很麻烦，但能产生非常漂亮的效果。

　　这里有几种在主页上产生水印效果的方法。例如，如果访问者使用的是IE浏览器，只需用<BODY background="graphic/g.gif" bgproperties=fixed>就可产生水印效果。但这对Navigator不适用，它会自动的将图片平铺显示。

　　为了兼顾不同的浏览器，必须使用动态HTML(DHTML)来实现这个功能。GeoCities采用服务器端来检测访问者使用的浏览器，并针对不同的浏览器（IE或Navigate）采用不同的实现方法。我们编写了一种单一的客户端脚本，它能在上述两种浏览器上工作，甚至还可以给您更大的选择余地。

　　

　　第一步

　　创建或设计水印图案。它可以是支持任何HTML语言的图像格式，尽管图像的的尺寸是准确的，您还必须将它的尺寸提供给脚本。同时您还需花时间从页面的整体上来考虑水印的设计。水印是否设计为透明的？是否要和背景色协调？应该有多大？我们建议这一步一定要细心，以免遮蔽页面或扰乱访问者的注意力。

　　

　　第二步

　　确定把水印放在不支持DHTML浏览器的何处（比如说底部）。然后在<DIV>标记中嵌入属性 id="waterMark",stytle="position:absolute"。

　　

　　<DIV id="waterMark" style="position:absolute">

　　<A href="/index.html"><IMG src="/Images/watermark.gif" width=90 height=90 border=0></A>

　　</DIV>

　　第三步

　　

　　在包含水印的<DIV>容器之后添加该脚本，这样就可以实现水印效果。较好的位置是放在结束的</BODY>标记前。

　　

　　<script language="JavaScript1.2">

　　</script>

　　

　　你可以根据自己的水印来调整这个脚本前面的五个设置变量。

　　 markW = 64; // pixels wide

　　 markH = 64; // pixels high

　　 markX = 100; // percent right

　　 markY = 100; // percent down

　　 markRefresh = 20; // milliseconds

　　

　　 markW和markH变量分别和水印宽度和高度（用象素数表示）相等。如果水印中包含HTML文本，那么文本的宽度大约和该像素宽度相等。markX和markY用于确定水印在页面中的位置，它们是用所在位置与离开屏幕右上角尺寸的百分比来表示的。例如，如果它们均为50则表示位于屏幕的中央，如果分别为100和0时，表示位于屏幕的右上角。最后，调整markRefresh确定浏览器更新水印位置的频度，单位是毫秒。当这个值较低时，在滚动页面和水印本身更新的延迟时间较短，但这会向浏览器提出更多的更新请求。

　　

　　加入搜索功能

　　现在主要的站点上都有搜索功能。访问者利用这个功能可以很方便地找到所需的信息。但是构造一个搜索引擎对于大多数网站设计者来说是不可能的，因为必须要将网站中的文本编入索引，此外还要构造一个查询系统，用于用户输入关键词并返回查找结果。

　　幸运的是，现在有几种免费的方法能在网页中轻松加入搜索功能。其中有Thunderstone's Webbinator(www.thunderstone.com/webinator),PicoSearch(www.picosearch.com)和ht://Dig(www.htdig.org)。另外还有一些公司在提供主机服务的同时还附带这种站点查询功能。

　　为了说明这有多容易，我们将和你一起在你的站点中加入一个免费的PicoSearch。你可以在任何站点安装PicoSearch而不必考虑主机的拥有者是谁,而上述其他几种方法需要在服务器上安装一些软件。它唯一的缺点是在用户查询结果页上会出现一些广告。

　　

　　第一步

　　到PicoSearch的新用户注册页(www.picosearch.com/newaccount.html)输入注册信息。在点击完Submit按钮后，服务器会分析你的站点。

　　

　　第二步

　　在你的站点加入PicoSearch的索引后，它会提示你是否预定这项服务，如果选择预定，则它会给你发送一份包含HTML代码的email，你可以在网页中使用这段代码。这段代码可以创建一个查询框。当访问者填完之后，就可以在PicoSearch站点得到查询结果页面。

　　

　　另外还有一些软件也有查询功能，但你必须把它安装在服务器上，再指出你要查找的目录，这样它才会去查找你要的文本。使用这种软件的好处是查询结果将出现在自己的站点上，缺点是你必须自己去安装建立这个系统。

网页设计的锦囊妙计 日期：2009/11/11 15:20:52

咨询总机：010-62346005

网页设计的锦囊妙计日期：2009/11/11 15:20:52　　