分享
 
 
 

主页制作动态技术

王朝other·作者佚名  2006-01-08
窄屏简体版  字體: |||超大  

主页制作动态技术

作者: 濮 青

来源: 起点工作室

传统的主页以文字和简单图像所构成,比较平实单一。现在,随着W3C组织(www.w3c.org)定义的新的HTML 4.0规范的出现,多种动态主页技术层出不穷,如CSS、ASP、DAO、CGI、JAVA脚本等,这些都极大地丰富了主页创作的手法和技术,给每一个网页设计者带来了更强大的工具。如今的主页是真正的由图象、动画、声音、视频集于一体的,且具有良好交互界面的新型多媒体动态主页。许多在过去想都不敢想的动态效果,如今借助于这些新技术可以轻而易举地实现。本文就网页编制过程中一些动态效果的实现加以描述,希望各位能够借以活跃一下你的网页。

一、菜单技术

菜单技术通常与框架(Frame)相结合,一般左侧框架为菜单项,主菜单点击一下可以出现子菜单,再点一下隐去子菜单,非常有趣和实用。菜单技术的实现可以有以下两种技术:

1、多页技术:Macromedia的主页即采用这种技术。就是先做一个没有展开项的主菜单的页面,然后分别制作每一个主菜单项展开后的页面,主菜单有多少项,就得做多少个子页面与之相对应。例如:

<a name="abc"></a>;

<a href="menu_2.htm#abc"><b>Click here!</b></a>

......

<a name="abc"></a>

<a href="menu_1.htm#abc"><b>Click here!</b></a>

list 1<br>list 2<br>list 3<br>具体实现时,一定要注意标签<a name="">的定义和使用,要做到一一对应,否则就会乱套。另外,当菜单项很多时,记住只有当前列出的子菜单处用<a name="">来定义,别的主菜单项应分别链接到它相应展开的页面去。

这种方法实现得很简单,而且任何浏览器均可支持,但它的缺点也是明显的。首先是慢,来回调用各个页面必然带来长时间的等待,只有页面上都是文字时,才感觉不到停滞;再就是编制困难,虽然技术简单,但是一个一个地制作实在是有点麻烦。因此,这种技术还是有一定的局限性的。

2、DHTML技术:在Microsoft主页上就采用这种技术。DHTML是比较新的技术,因此对于一些"古老"的浏览器来说,这种菜单实现方式就无能为力了。例如:单击"点击这里"立刻就出现了下面的菜单,再点一下又隐去了,与多页技术相比,速度较快:

<style TYPE="text/css">

.NV1{font-family:Arial;font-weight:bold;font-size:.9em;

cursor:hand;margin-top:10;text-indent:-14;margin-left:14;}

.NV2{position:relative;font-size:.9em;font-weight:normal;}

</style>

......

<script TYPE="text/javascript">

function clikker(a,b){

if(a.style.display==''){a.style.display='none';b.src='photo.gif';}

else{a.style.display='';b.src='photo.gif';}}

</script>

......

<div CLASS="NV1"ID="BB"onClick="clikker(BB1,BBp);">

<dd><img ID="BBp"SRC="photo。gif"ALT="*"ALIGN="MIDDLE"

BORDER="0"WIDTH="11"HEIGHT="11">

点击这里

<div CLASS="NV2"ID="BB1"STYLE="display:'';"

onclick="window.event.cancelBubble=true;">

<a HREF="http://abc/">点击这里</a></div></dd></div>

在源代码中,.NV1和.NV2是CSS字体定义,clikker函数是控制菜单项显示和隐藏的,其中变量a控制文字,变量b控制图片(图中未显示)。在实际应用时,请注意div所定义的范围,不要在点击时把别的主菜单项也隐去了。

DHTML技术的实现方式相对比较高明,它速度快,制作比较简单,只需要一个页面就行了。不足之处是至少需要IE 4.0或NC 4.0以上版本的支持。

二、文字变色

这是Web上最常见的技术,当鼠标划过某个元素时,该元素立刻改变颜色,有时还会发出声音,就象多媒体教育软件一样。如果颜色调配得好,页面就会非常令人喜爱。实现文字变色的方法也有好多种,这里只简单地介绍其中的两种。

1、单纯使用CSS技术,目前还只有IE 4.0支持这种技术。例如:

<style type="text/css">

BODY{background:white;}

A:link{color:red}

A:visited{color:maroon}

A:active{color:fuchsia}

A:hover{color:blue}

</style>

在这个示例中,链接文字起初用红色显示,当鼠标划过文字时变为蓝色,点击访问时改为紫红色,访问之后又变为栗色。由于Netscape还不支持link、visited、hover等CSS属性,因此,如果各位使用Communicator浏览器的话,就看不到这些效果了。

2、利用JavaScript脚本:例如:

<script language="JavaScript">

function MM_changeProp(objStrNS,objStrIE,theProp,theValue){

var theObj=eval((navigator.appName=='Netscape')?objStrNS:objStrIE);

if((theObj!=null)&&(theProp.indexOf("style.")!=0&&

theObj.style!=null))

eval(((navigator.appName=='Netscape')?objStrNS:objStrIE)+'.'+theProp

+'="'+ theValue+'"');}

</script>

......

<span class="css1"ID="x"

onmouseover="MM_changeProp('','document.all[\'x\']','style.color',

'red','SPAN')"

onmouseout="MM_changeProp('','document.all[\'x\']','style.color',

blue','SPAN')"

改变文本颜色</span>

由于IE 4.0和NC 4.0对对象的控制机制不同,因此脚本需要先检查浏览器,然后再作相应的处理。MM_changeProp()函数实现了这一种文本变色方法。这种方法需要在应变色的每个地方都用SPAN定义ID并添加onmouseover和onmouseout,这与第一种方法相比麻烦了不少。因此,一般还是选择上一种方法。

三、动态按钮

这里的动态按钮既不是gif动画,也不是FrontPage中提供的各种特效按钮。这种动态按钮的情况是:

当鼠标划过某一个按钮时,它会忽然动一下,似乎在诱惑着去点击它,很有意思。下面介绍实现方法。准备两幅图片,由于是按钮,不必很大,颜色也不必太花,简单的gif就行,两幅图要有一些差别,以免动了以后看不出来变化。它的实现代码为:

......

toc1on=new Image(42,197);

toc1on.src="on.home.gif";

toc1off=new Image(42,197);

toc1off.src="home.gif";

......

function img_act(imgName)

imgon=eval(imgName+"on.src");

document[imgName].src=imgon;

......

function img_inact(imgName)

imgoff=eval(imgName+"off.src");

document[imgName].src=imgoff;

......

<a href=http://www.microsoft.com/

onMouseover="img_act('toc1')"

onMouseout="img_inact('toc1')">

<img src=home.gifwidth=100 height=50 border=0 name="toc1"></a>

应该注意的地方有两处:

1.一定要给img赋一个名字,然后在源图片定义处应用这个名字。

2.注意源文件中的各种符号,特别是引号,还要注意源图片文件的路径,最好用相对路径,以免站点上载后无法正常显示。当然,这种交换图片的方式也需要4.0以上版本的浏览器的支持。

四、提示的话

把鼠标放到一幅图片上就能出现提示信息,就像好多软件的按钮给出功能提示一样。这一功能在网页编辑中很容易实现,源代码如下:

......

<imgSRC="../images/button_who.gif"NAME="who"

title="我的个人小档案"ALT="我是谁^_^">

......

Title这一属性很有用吧!它可用于除了BASE、BASEFONT、HEAD、HTML、META、PARAM、SCRIPT、STYLE、TITLE以外的所有元素中,以定义鼠标划过时的提示信息。

以上就网页编制过程中的一些动态技术进行了讨论。Web上有许多设计精美、技术先进的页面,分析它们的源码是很好的学习途径。计算机技术在不断地进步,面对这些纷至沓来的新技术:DHTML、CSS、XML等,只有迎难而上去掌握它,并把它应用到自己的网页上,才能使网页更加活跃生动起来

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有