论文二稿.docx

论文二稿.docx

《论文二稿.docx》由会员分享，可在线阅读，更多相关《论文二稿.docx（16页珍藏版）》请在冰豆网上搜索。

论文二稿

网页文本动态特效的实现与研究

作者：

王丽丽

指导教师：

王达整个页面设置的左右间距3,2，上下2.5

摘要：

网页文本动态特效相对于对单纯的静态文本页面对广大的互联网用户更加有吸引力。

本文通过使用Dreamweaver制作个人网站，以及在html中嵌入使用脚本语言JavaScript及页面控制语言CSS来实现网页的文本动态特效，对从主页设计到文本动态特效的设计及实现进行了详细的解释和论述。

该主页界面友好简单，完成了文本的动态效果。

关键词：

Dreamweaver；html；JavaScript；CSS；网页文本动态特效

0引言

在Internet飞速发展的今天，互联网成为人们快速获取、发布和传递信息的重要道，它在人们政治、经济、生活等各个方面发挥着重要的作用。

Internet上发布信息主要是通过网站来实现的，获取信息也是要在Internet“海洋”中按照一定的检索方式将所需要的信息从网站上下载下来。

因此网站建设在Internet应用上的地位显而易见，它已成为政府、企事业单位信息化建设中的重要组成部分，从而倍受人们的重视。

但是如今也是张扬个性的年代，个人网站也是顺应了互联网的发展趋势，为扩大自己在社会中的影响力起到了更好更快更全面的包装及宣传作用，。

随着网络的普及,越来越多的电脑爱好者开始接触网络,面对网上一个又一个精彩纷呈的网站,众多的电脑爱好者都按捺不住内心的憧憬开始接触网页设计和制作,而这项工作也不像它的启蒙阶段那样需要直接面对枯燥无味的代码,反复的在程序语言和最终界面之间来回切换,随着一些可视化的操作界面,所见即所得工作窗口软件的不断出现和升级,让进入网页帛作的门槛不可那么高不可及.Dreamweaver无疑是这些软件当中的佼佼者,可能说它是现在最为普及和超强功能的一个网页制作软件。

1网页制作

1.1网页制作简介

网页制作要充分吸引访问者的注意力，让访问者产生视觉上的愉悦感。

因此在网页创作的时候就必须将网站的整体设计与网页设计的相关原理紧密结合起来。

网页是构成网站的基本元素，是承载各种网站应用的平台。

网页制作通常就是将网页设计师所设计出来的设计稿，按照W3C规范用html语言将其制作成网页格式。

1.2网页制作技术

网页技术从1989年到现在经历了从简单到复杂、从静态到动态、从客户端到服务器的巨大发展。

现在的网页技术和动态服务器网页不仅种类繁多，而且功能强大，极大地丰富了信息的表现力，使得网页除了发布信息之外，更日益成为一种享受生活乐趣的新方式。

网页制作技术虽然有很多，比如HTML、DHTML、JavaScript、VBScript、ASP、JSP、PHP等，但总的来说可以分为三类：

静态网页技术、动态网页技术和动态服务器网页技术。

静态网页技术指的就是HTML，即HyperTextMarkupLanguage,它是所有其他网页制作技术的基础，所有的网页对象，包括文字、图片、超链接、Flash动画、表格、列表等都需要通过HTML才能展现出来。

动态网页技术指的就是DHTML，它通过脚本技术（包括JavaScript、VBScript、JScript）、层叠样式表技术（CSS）及稳当对象模型（DOM）的综合能让网页中的对象产生各种动态的变化，比如鼠标移上后弹出快捷菜单、随鼠标条移动的广告图片等。

而动态服务器网页技术是在WWW服务器端动态生成网页的技术，目前非常流行的ASP、JSP、PHP等都属于动态服务器网页技术。

我的个人网站采用的是静态网页技术，因为它是所有其他网页制作技术的基础。

1.3开发环境简介

Dreamweaver是美国Macromedia公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器，它是第一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。

随着互联网（Internet）的家喻户晓，HTML技术的不断发展和完善，随之而产生了众多网页编辑器，从网页编辑器基本性质可以分为所见即所得网页编辑器和非所见即所得网页编辑器（则原始代码编辑器）。

所见则所得网页编辑器的优点就是直观性，使用方便，容易上手，您在所见即所得网页编辑器进行网页制作和在WORD中进行文本编辑不会感到有什么区别。

2个人网站的设计

一个网站项目的确立是建立在各种各样的需求上面的，这种需求往往来自于客户的实际需求或者是出于公司自身发展的需要，其中客户的实际需求也就是说这种交易性质的需求占了绝大部分。

面对对网站开发拥有不同知识层面的客户，项目的负责人对用户需求的理解程度，在很大程度上决定了此类网站开发项目的成败。

因此如何更好地的了解、分析、明确用户需求，并且能够准确、清晰以文档的形式表达给参与项目开发的每个成员，保证开发过程按照满足用户需求为目的正确项目开发方向进行，是每个网站开发项目管理者需要面对的问题。

2.1制作网页的要素

2.1.1网页的整体布局设计

网页设计作为一种视觉语言，要讲究编排和布局，虽然主页的设计不等同于平面设计，但它们有许多相近之处，应充分加以利用和借鉴。

版式设计通过文字图形的空间组合，表达出和谐与美。

一个优秀的网页设计者也应该知道哪一段文字图形该落于何处，才能使整个网页生辉。

多页面站点页面的编排设计要求把页面之间的有机联系反映出来，特别要处理好页面之间和页面内的秩序与内容的关系。

尤其是我们在利用网页效果体现在线营销的意图时，更要注意为了达到最佳的视觉表现效果，而讲究整体布局的合理性，比如一家生产型的企业，它所提供产品的名称、类别、型号、价格、功能介绍应怎样编排才能使浏览者有一个流畅的视觉体验，从而方便他对产品的了解，促成最后的购买。

2.1.2网页设计中色彩的运用

色彩是艺术表现的要素之一，在网页设计中，根据和谐、均衡和重点突出的原则，将不同的色彩进行组合、搭配来构成美丽的页面。

根据色彩对人们心理的影响，合理地加以运用，按照色彩的记忆性原则，一般暖色较冷色的记忆性更强一些。

色彩还具有联想与象征的特质，如红色象征血、太阳；蓝色象征大海、天空和水面等。

所以如果我们在对一家出售冷食的商店进行虚拟店面的页面设计时，应使用淡雅而沉静的颜色，使人心理上感觉凉爽一些，增强人们的购买心理，使得在线营销得到很好的实践效果。

另要注意的是网页的颜色应用虽没有限制，但不能毫无节制地运用多种颜色，一般情况下，先根据总体风格的要求定出一至二种主色调，在已经有了完备的CIS（企业形象识别系统）的企业进行网页设计时，更应该按照其中的VI进行色彩运用。

在色彩的运用过程中，还应注意的一个问题是：

由于国家和种族、宗教和信仰的不同，以及生活的地理位置、文化修养的差异等，不同的人群对色彩的喜恶程度有着很大的差异。

如：

儿童喜欢对比强烈、个性鲜明的纯颜色；生活在草原上的人喜欢红色；生活在闹市中的人喜欢淡雅的颜色；生活在“沙漠”中的人喜欢绿色。

在设计中要考虑众多因素。

2.1.3网页形式与内容相统一

　　要将丰富的意义和多样的形式组织成统一的页面结构，形式语言必须符合页面的内容，体现内容的丰富含义。

运用对比与调和、对称与平衡、节奏与韵律以及留白等手段，通过空间、文字、图形之间的相互关系建立整体的均衡状态，产生和谐的美感。

如对称原则在页面设计中，它的均衡有时会使页面显得呆板，但如果加入一些富有动感的文字、图案，或采用夸张的手法来表现内容往往会达到比较好的效果。

网页设计中点、线、面的运用并不是孤立的，很多时候都需要将它们结合起来，表达完美的设计意境。

2.2网站的内容设置

本网站制作的主要关于我生活学习中的一些事情，主要分为“首页”“简历”“相册”“日志”“联系我”五个板块，从不同方面展示我自己。

同时还链接了简历下载，供用人单位下载。

我将在下面进行详细介绍。

2.2.1首页的设计和目的

首页是一个网站的主索引页，是令访客了解网站概貌并引导其调阅重点内容的向导。

首页是一个网站的第一页，也是最重要的一页。

首页是体现个人主页的主人性格的的重中之重，也是网站所有信息的归类目录或分类缩影。

首页设计要求在保障整体感的前提下，根据大多数人的阅读习惯以色彩、线条、图片等要素将导航条、各功能区以及内容区进行分隔。

以营造高易用性与视觉舒适性的人机交互界面为终极目标。

最上面为通过CSS修饰了的“王丽丽的个人主页”，下面是导航条，包括了网站里的所有主要的网页，清晰明了。

左边以flash按钮的方式列出了一些常用的网站链接，以方便平时上网。

按钮下面是我的英文个性签名，使得网页更加突出个人性格色彩。

中间是对网站三大部分的阐述和简介，以一个指南针和一个flash时钟修饰，右下角是一个世界时间的flash，可以用来查看各个时区的时间，左上角用一个flash作为banner条，具有动态效果，又不显得凌乱。

页面最下方用滚动条的形式显示了欢迎语。

整个页面简洁大方，富有个性，动静结合，达到了我努力营造的比较和谐的效果。

2.2.2简历页面的设计

简历页面是从方便老师查看的角度来进行设计的，为了方便用人单位进行查看，我对简历的每一个部分都同多锚记进行了链接，可以方便快捷的查看每个部分，并且由于网页比较长，我在最后也通过锚记链接到了页首，使界面友好。

并且可以通过点击简历下载来下载我的正式版的个人简历，以供用人单位参考和保存。

网页通过导航条跟各个页面连接。

文字通过CSS进行修饰，整体采用绿色和白色两种色调，主要还是起到即明显又不累眼睛的作用。

文字右上方用Dreamweaver自带的相册生成工具制作，具体方法为插入—媒体—图像查看器，然后按向导进行各个设置，最后就自动生成了一个简介的相册，用来动态的展示我的奖励与证书。

2.3网站的分步实现

2.3.1背景的设置

网页的背景颜色决定了网页的风格，合理的设计和搭配是网页成功的关键，由于是个人主页，所以背景颜色没有特殊的要求，全凭个人喜好，我比较喜欢夜晚的星空，所以用星空作为背景，并保持整个网站的主色调为黑色，看起来眼睛也会觉得很舒服。

对于原有图形利用Photoshop进行处理，调整好大小和颜色在页面属性中插入预先设计好的图片。

2.3.2表格的使用

网页的背景颜色决定了网页的风格，合理的设计和搭配是网页成功的关键，由于是个人主页，所以背景颜色没有特殊的要求，全凭个人喜好，我比较喜欢夜晚的星空，所以用星空作为背景，并保持整个网站的主色调为黑色，看起来眼睛也会觉得很舒服。

对于原有图形利用Photoshop进行处理，调整好大小和颜色在页面属性中插入预先设计好的图片。

2.3.3插入图像

一个纯文本的网页会让人感到索然无味，所以适当的图片是必须的，但是要保证不能太多，不但会喧宾夺主，而且还影响网页的下载速度，让用户因为受不了焦急的等待而离开页面。

通过网络我搜索了与网站内容相关，颜色搭配的一些素材，力在突出我的专业特色，在网页里插入了一些与电子方面相关的图片。

2.3.4文本段落的编辑

文本的编辑是网页设计中比较容易实现的功能，但也是一个网站的主要内容所在，不管网页做的有多么花哨，内容一定要充实，这样才能吸引别人光顾。

在需要输入文字的表格中单击之后即可输入文字。

利用“属性”命令，可以更改输入文字的字体及大小。

在输入文字过程中，若想连续输入空格，则需要单击“编辑—首选参数—允许连续输入多个空格”选中该框即可，也可以按住shift+ctrl+任意次空格。

其中如果想让各个网页的文字有统一的格式，可以用CSS来对文本进行设置，具体CSS的用法在下面详细介绍。

4文本动态特效的应用

除了静态的图片和文字，越来越多的动态效果被应用到网页的设计和制作过程中。

动态文本特效大的应用使网页变得更加生动、有趣、绚丽多彩。

在制作时，可以在网页中插入动态图片和文字，增加意境。

4.1动态特效

网页特效是用程序代码在网页中实现的特殊效果或者特殊的功能的一种技术。

它为网页活跃了网页的气氛,有时候会起到一定的亲切力。

网页特效就是用网页脚本（JavaScript,vbscript）来编写制作动态特殊效果,通常被人们称为网页特效。

HTML（HyperTextMark-upLanguage）即超文本标记语言或超文本链接标示语言，是目前网络上应用最为广泛的语言，也是构成网页文档的主要语言。

设计HTML语言的目的是为了能把存放在一台电脑中的文本或图形与另一台电脑中的文本或图形方便地联系在一起，形成有机的整体，HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字、图形、动画、声音、表格、链接等。

4.2文本动态特效的应用

网页最开始的时候，主要的内容就是文字，因此网页中的文本特效在网页制作中极其重要的。

4.2.1欢迎界面的特效

（1）在网页的下面，我利用HTML提供的marquee命令,即：

欢迎光临我的主页，希望这里可以给你带来轻松与欢笑！

完成了滚动公告板的制作。

具体过程不用记住代码，可以用Dreamweaver自带的“标签检查器”设置标签的属性值，它的功能类似于属性面板，但是比属性面板更强大。

步骤如下：

1.把光标插入点放在需要插入滚动字幕的地方。

2.点击插入面板的“标签选择器”。

3.选择marquee标签，点击“插入”按钮。

4.转换到代码视图。

把光标插入点放在marquee标签内。

5.选择“窗口”“标签检查器”。

然后选择属性，单击未分类前面的＂＋＂，可以在“标签检查器”中设置标签的各种用法。

6.点击behavior设置项右边的下拉箭头，选择滚动字幕内容的运动方式。

7.direction属性设置字幕内容的滚动方向。

8.scrollamount属性设置字幕滚动的速度。

9.scrolldelay属性设置字幕内容滚动时停顿的时间，单位为毫秒。

如果要让滚动看起来流畅，数值应该尽量小。

实例中设置为1毫秒。

如果要有步进的感觉，就设置时间长一点。

10.width属性设置滚动字幕的宽度。

11.style属性设置字幕内容的样式。

实例中设置字幕文字大小，输入了“font:

12px;”。

12.loop属性设置字幕内容滚动次数，默认值为无限。

“-1”也为无限。

（2）在html中设置文字颜色的变化，javascript代码实现逐渐变色文字（欢迎光临我的主页，希望这里可以给你带来轻松与欢笑！

）

4.2.2导航的特效

导航主要有“首页”“简历”“相册”“日志”“联系我”五大部分，当鼠标移动到导航菜单时会显示相应的英文

3.3.3日志的特效

Div+css及javascript的综合应用，制作很漂亮的文字滑动效果，当单击一个日志的标题时，它的内容会自动弹出。

主要代码如下：

先用javascript函数控制文字显现和隐藏的文字特效

window.onload=function（）{

rolinTab（"rolin"）

}

functionrolinTab（obj）{

varlist=$（obj）.getElementsByTagName（"LI"）;

varstate={show:

false,hidden:

false,showObj:

false};

for（vari=0;i

vartmp=newrolinItem（list[i],state）;

if（i==0）tmp.pShow（）;

}

}

functionrolinItem（obj,state）{

varspeed=0.0666;

varrange=1;

varinterval;

vartarH;

vartar=this;

varhead=getFirstChild（obj）;

varcontent=getNextChild（head）;

varisOpen=false;

this.pHidden=function（）{

if（isOpen）hidden（）;}

this.pShow=show;

varbaseH=content.offsetHeight;

content.style.display="none";

varisOpen=false;

head.onmouseover=function（）{

this.style.background="#EFEFEF";}

head.onmouseout=mouseout;

head.onclick=function（）{

this.style.background="#EFEFEF";

if（!

state.show&&!

state.hidden）{

if（!

isOpen）{

head.onmouseout=null;

show（）;

}else{

hidden（）;

}

}

}

functionshow（）{

head.style.borderBottom="1pxsolid#DADADA";

state.show=true;

if（state.openObj&&state.openObj!

=tar）{

state.openObj.pHidden（）;}

content.style.height="0px";

content.style.display="block";

content.style.overflow="hidden";

state.openObj=tar;

tarH=baseH;

interval=setInterval（move,10）;}

functionshowS（）{

isOpen=true;

state.show=false;}

functionhidden（）{

state.hidden=true;

tarH=0;

interval=setInterval（move,10）;}

functionhiddenS（）{

head.style.borderBottom="none";

head.onmouseout=mouseout;

head.onmouseout（）;

content.style.display="none";

isOpen=false;

state.hidden=false;

}

functionmove（）{

vardist=（tarH-content.style.height.pxToNum（））*speed;

if（Math.abs（dist）<1）dist=dist>0?

1:

-1;

content.style.height=（content.style.height.pxToNum（）+dist）+"px";

if（Math.abs（content.style.height.pxToNum（）-tarH）<=range）{

clearInterval（interval）;

content.style.height=tarH+"px";

if（tarH!

=0）{

showS（）

}else{

hiddenS（）;}}}}

var$=function（$）{returndocument.getElementById（$）};

String.prototype.pxToNum=function（）{returnNumber（this.replace（"px",""））}

functiongetFirstChild（obj）{

varresult=obj.firstChild;

while（!

result.tagName）{

result=result.nextSibling;}

returnresult;}

functiongetNextChild（obj）{

varresult=obj.nextSibling;

while（!

result.tagName）{

result=result.nextSibling;}

returnresult;}

3网站的后期维护

3.1网站测试

网站建设好了之后是不能立即发布的，在这之前需要进行一段时间的测试，没有经过测试的