发信人: molcn(冰河) 
整理人: snowypeng(2002-05-23 09:29:24), 站内信件
 | 
 
 
   我们收集了一些非常实用、非常酷的网页设计技巧。使用这些技巧,你可以很容易的实现一些在其他网站看到的功能。也许专业的网页设计者会嘲笑这些雕虫小技,但别理他,这些技巧对你绝对有用,为什么不让你的网页更多姿多彩呢?文章中的代码可以在www.pccomputing.com.cn的这篇文章中找到。 
   淡入,淡出 
   这儿有一种方法能让页面在下载时从一种颜色渐变为另一种颜色。 
   就算你想按自己提供的颜色模式来变化,也是很容易的事。 
   第一步 
   将下列JavaScript代码放在页面的头部。 
   <SCRIPT LANGUAGE="JavaScript"> 
   <!-- 
   function makearray(n) { 
    this.length = n; 
    for(var i = 1; i <= n; i++) 
    this[i] = 0; 
    return this; 
   } 
   hexa = new makearray(16); 
   for(var i = 0; i < 10; i++) hexa[i] = i; 
   hexa[10]="a"; hexa[11]="b"; hexa[12]="c"; 
   hexa[13]="d"; hexa[14]="e"; hexa[15]="f"; 
   function hex(i) { 
    if (i < 0) 
    return "00"; 
    else if (i > 255) 
    return "ff"; 
    else 
    return "" + hexa[Math.floor(i/16)] + hexa[i%16]; 
   } 
   function setbgColor(r, g, b) { 
    var hr = hex(r); var hg = hex(g); var hb = hex(b); 
    document.bgColor = "#"+hr+hg+hb; 
   } 
   function fade(sr, sg, sb, er, eg, eb, step) { 
    for(var i = 0; i <= step; i++) { 
    setbgColor( 
    Math.floor(sr * ((step-i)/step) + er * (i/step)), 
    Math.floor(sg * ((step-i)/step) + eg * (i/step)), 
    Math.floor(sb * ((step-i)/step) + eb * (i/step))); 
    } 
   } 
   fade(0,0,0,255,255,255,150); 
   // --> 
   </SCRIPT> 
   第二步 
   创建自己的颜色模式时,只需调整上述代码最后一行中的参数: 
    fade(0,0,0,255,255,255,150); 
   这七个参数的作用如下:前三个参数用三种原色——红,绿,蓝——表示变化开始时的颜色,紧接着的三个参数用同样的方法表示变化结束时的RGB颜色。最后一个参数表示颜色的变化从开始到结束要经过多少步,这个数字越高,淡入淡出的时间越长,颜色的变化也越缓慢。上述这一行中的参数表示某页面的颜色从黑色(0,0,0)变为白色(255,255,255)要经过150步方可完成。 
   只需轻轻一按 
   这个技巧向你展示如何避免由于页面中存在过多由JavaScript产生的按钮所造成的混乱。你可以将一系列链接放在一个可滚动的列表框中,这样就可以用一个简洁的界面来代替一长串诸如、、 之类的标记。通常访问者在选择一个链接后,点击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文件中插入如下代码 。这段代码将告诉服务器将从何处得到包含文件: 
   <!--#include virtual="/Includes/cheese_text.html"--> 
   然后把你希望出现在各网页上的文字(如第一段引号中的文字)写入一个单独的文件即可。 
   超级Mailto 
   Mailto 能让访问者方便地向网站提供反馈或联系信息。除了自动产生一个email消息外,你还可以使用mailto做许多其他事情。超级Mailto能自动填写抄送和密件抄送,甚至能自动填充主题行。下面介绍如何定制mailto功能。 
   基本的mailto实现方法: 
     
    Click here to send a boring old mailto message 
   当访问者点击这个链接时,会调用他们客户端的email程序,并在收件人框中自动填上收件人的地址。下面,我们将分以下几步介绍如何增加mailto的功能。 
    第一步 
   创建一个基本的mailto,包含收件人的地址。 
    第二步 
    在收件人地址后用“?cc=”开头,你可以填写抄送(CC:)地址,下面这个例子将实现该功能: 
    
    Click here to send an email message to multiple recipients. 
    第三步 
   就像下面这个例子一样,紧跟着抄送地址之后,写上"&bcc=",就可以填上密件抄送(BCC)地址了 (在添加这些功能时,第一个功能以"a?"开头,后面的以"&"开头)。 
    
   Click here to send an email message to multiple recipients (only some of which you know about). 
   还可以把收件人、抄送、密件抄送人的多个地址用逗号分开: 
   <A href="mailto:[email protected], [email protected]"> 
   Click here to send an email message to multiple comma-delimited recipients. 
   第四步 
   在第一步和第二步之后就可以用&subject=填上主题了,下面给出实现所有功能的例子(包括收件人,抄送,密件抄送和主题)。 
 <a href="mailto:[email protected][email protected][email protected]&subject=This is only a test">Click here to send us super ninja email. 
   将自己的主页设置为缺省主页 
   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! 
   要确保该链接指向default.reg所在目录。 
    第四步 
    加入一些文本用来说明点击这个链接后访问者还该做些什么。点击后IE会提示他们如何处理default.reg这个文件(打开或保存)。在这里应选打开文件,在出现提示注册表已更新的对话框后单击OK。 
   这样,访问者下次在启动IE或点击主页按钮时,将会直接进入你的站点! 
   在网页上制作幻灯片 
   谁都可以把度假时拍的照片放在自己的网站上,要是能把它们做成幻灯片效果就更酷了。这里指的不是将一张照片制成一个页面那样的幻灯片,而是指所有照片都在同一页面上显示的真正的动态幻灯片效果。这里我们将向你介绍如何使用层叠式样式表(CSS)和动态HTML(DHTML)制作幻灯片效果,你也许会感到这样做很枯燥,不过,想想这会给你的朋友、家人、同事留下多么深刻的印象吧。记住,由于实现这个效果使用了DHTML,所以只有4.0以上版本的浏览器支持它。 
    当然,实现幻灯片效果需要功能很强的应用程序,我们一时不可能考虑得面面俱到。 
   第一步 
    收集你要显示的图片,并把它们裁剪为相同的尺寸。图片的尺寸不能超过640x480像素,并且所有图片的像素数都相等——如果图片有大有小看起来就很不和谐。 
   第二步 
   在头域中,需要用<STYLE>标记指出正在使用CSS。在<STYLE>标记中,设置幻灯片在页面中播放的位置,并确定播放是以背景色开始,还是以第一张幻灯片作为开始。代码示例如下: 
    <STYLE type="text/css"> 
   <!-- .slides {position:absolute; left: 25%; top:25%; visibility:hidden} --> 
   </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()"> 
   PC Computing slide show! 
   <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 href="javascript:switchSlide(1)"> 
   <IMG src="next.gif" border=0> 
   </DIV> 
   如果不想在Previous和Next上显示图片,可以用文字代替 标记。 
    第八步 
    最后,使用<TEXTAREA>来显示字幕说明,可以通过rows和cols来确定显示行数和列数。 
   下面给出代码: 
    <DIV id="captions" style="position:absolute; left: 320px; top:75px"> 
   Picture caption 
   <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> 
   </DIV> 
   第三步 
    在包含水印的<DIV>容器之后添加该脚本,这样就可以实现水印效果。较好的位置是放在结束的</BODY>标记前。 
   <script language="JavaScript1.2"><!-- 
   // Watermark script by Paul Anderson, CNET Builder.com. All rights reserved. 
   markW = 64; // pixels wide 
   markH = 64; // pixels high 
   markX = 100; // percent right 
   markY = 100; // percent down 
   markRefresh = 20; // milliseconds 
   // set common object reference 
   if (!document.all) document.all = document; 
   if (!document.all.waterMark.style) document.all.waterMark.style = document.all.waterMark; 
   wMark = document.all.waterMark.style; 
   wMark.width = markW; 
   wMark.height = markH; 
   navDOM = window.innerHeight; // Nav DOM flag 
   function setVals() { 
    barW = 0; // scrollbar compensation for PC Nav 
    barH = 0; if (navDOM) { 
    if (document.height > innerHeight) barW = 20; 
    if (document.width > innerWidth) barH = 20; 
    } else { 
    innerWidth = document.body.clientWidth; 
    innerHeight = document.body.clientHeight; } 
    posX = ((innerWidth - markW)-barW) * (markX/100); 
    posY = ((innerHeight - markH)-barH) * (markY/100); 
    } 
   function wRefresh() { 
    wMark.left = posX + (navDOM?pageXOffset:document.body.scrollLeft); 
    wMark.top = posY + (navDOM?pageYOffset:document.body.scrollTop); 
    } 
   function markMe() { 
    setVals(); window.onresize=setVals; 
    markID = setInterval ("wRefresh()",markRefresh); 
    } 
   window.onload=markMe; // safety for Mac IE4.5 
   //--> 
   </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站点得到查询结果页面。 
   另外还有一些软件也有查询功能,但你必须把它安装在服务器上,再指出你要查找的目录,这样它才会去查找你要的文本。使用这种软件的好处是查询结果将出现在自己的站点上,缺点是你必须自己去安装建立这个系统。
 
 
  ----              ,%%%%%%%%,  
            ,%%/\%%%%/\%%  
           ,%%%\c "" J/%%%  
  %.       %%%%/ o  o \%%%  
  `%%.     %%%%    _  |%%%  
   `%%     `%%%%(__Y__)%%'  
   //       ;%%%%`\-/%%%'  
  ((       /  `%%%%%%%'  
   \\    .'          |  
    \\  /       \  | |  
     \\/   冰河  ) | |  
      \         /_ | |__  
      (___________))))))) zjmol.126.com     | 
 
 
 |