个性测试网页设计论文.docx

个性测试网页设计论文.docx

《个性测试网页设计论文.docx》由会员分享，可在线阅读，更多相关《个性测试网页设计论文.docx（13页珍藏版）》请在冰豆网上搜索。

个性测试网页设计论文

个性测试网页设计

校全购

【摘要】当代社会，随着人们对计算机的广泛使用，已经对网络不再感到陌生。

网络科技飞速发展的今天，电脑信息技术与各行各业进行了有效的结合。

面对千姿百态、丰富多彩的主页，使网络技术发挥的淋漓尽致。

在这个平台上，个性测试提供了一个全新人类的自我剖析方式。

本文主要分析了个性测试网页的特点，包括个性测试网页的设计目标，框架结构和个性测试网站的运行实现等，重点介绍了个性测试网页中各模块的详细思路和实现方法，以及部分源代码的说明。

主要使用了Dreamweaver8网页设计工具，利用了它的可视化编辑，可以快速地创建页面与编写代码相关的功能。

校全购大学生自己的购物网

【关键词】网页制作软件；HTML语言；JavaScript语言

1引言

1.1现代网页制作浅谈

随着互联网的进一步发展与成熟，网络的带宽进一步加阔，网络应用也越来越广泛。

网页制作更是日新月异，层出不穷。

涌现了很多琳琅满目的网站，使得整个互联网多姿多彩。

从功能来讲，Dreamweaver自身有明显的特点：

首先Dreamweaver引入了图层的概念，可以在Dreamweaver中直接制作一些动画效果。

另外Dreamweaver具有增加插件的功能，用户可以安装各种插件来增强自己的Dreamweaver。

最后Dreamweaver中又新增了资源管理器、内建参考手册。

就目前来说DREAMWEAVER已经占据网页编辑软件霸主的位置。

我们再来谈谈动画网页制作软件——Flash。

与其说Flash是一个动画网页制作工具，还不如说它是一个功能强大的多媒体制作工具更为恰当。

利用Flash可以独立制作出非常精彩的多媒体网页，包括动画的制作、声音效果的添加等。

另外Flash对Internet的支持，主要表现在它采用了流控制技术，不用等整个动画的Movie下载完，就可以开始播放，对于一个Internet冲浪者来讲，这是一件很有吸引力的事情。

同时Flash采用了矢量图形的制作方法，当对一副图进行任意的缩放时，它的质量并不会发生变化，而且文件很小，利于网络传输。

Fireworks是Macromedia公司推出的图像处理软件，与其他图形处理软件的设计思想都很相似，但它又有很多自己的特色。

Fireworks是一个人完全为网页制作者设计的图形处理软件，对制作基于网络的图形有特殊的支持，能够自由的导入导出各种图像。

Fireworks作为第一款为网络实际而开发的图像处理软件，能够自动切图，生成鼠标动态感应的JavaScript。

2设计分析

2.1设计思想

个性测试网页是网络中点击率较为高的网页，其中包括十二星座的情感、事业、运气，以及心理测试、周公解梦、八卦占卜的具体剖析等，使其内容极为丰富，追逐当代社会青年的快速发展脚步。

网页样式采用个性化进行整体设计，主要采用表格方式进行排版，以黑色为背景色，整体风格时尚、动感。

该网页主要采用静态网页设计，该方式有浏览速度快，易搜索，易保存等特点。

其中添加了JAVA脚本语言，使整体效果更加完美。

2.2设计工具选择

MacromediaDreamweaver8进行网页设计

MacromediaFlash8进行动画制作

MacromediaFireworks8进行图片处理

2.3框架设计

2.3.1首页框架理念

网站采用Dreamweaver8进行网页的编辑和排版。

整体网页采用表格方式进行定位。

首页中主要分为三版块：

顶部的广告宣传和悬挂导航，中部的星座排行、心理测试、休闲娱乐为了，底部的注册商标，三部合一的设计使页面更美观内容更丰富，这也是网页布局的惯例，符合中国人的中庸式传统审美观。

其中表格设置的边框宽度为1，填充宽度也为1，加以颜色的填充，使表格更加的具有立体完美感。

网页的顶端插入的悬挂导航，可以通过超链接的方法实现，使访客快速浏览版块内容，顶端也插入了一段以奥运为主题FLASH动画，使其效果琳琅满目。

中部的两个FLASH广告和一段滚动字幕，更使网页具有动态WEB页的效果。

2.3.2框架设计风范

校全购大学生自己的购物网

网站首页主要采用黑色为主色调，感观神秘、时尚、诱惑突出了个性这一主题（如图1所示）。

首页主要包括三大主题:

星座排行榜、本月测试榜及快乐你我他，使娱乐与休闲于一体，每一栏目中均有相关链接，使访客随心所欲的浏览。

图1

3网页编辑与制作

3.1Dreamweaver8网页编辑

Dreamweaver提供了强大的设计工具，主要用于对Web站点、Web页和Web应用程序进行设计、编码和开发。

利用其可视化编辑功能，可以快速地创建页面而无需编写任何代码。

Dreamweaver还提供了许多与编写代码相关的工具和功能。

还可以借助Dreamweaver使用服务器语言，例如ASP、ASP。

NETHEPHP等，生成支持动态数据库的Web应用程序。

3.1.1首页编辑

先打开Dreamweaver8软件，如图2所示：

图2

图2

然后点击创建新项目中的“HTML选项”，即打开新创建的WEB页，将其保存在目标文件下，并命名，如图3所示：

图3

单击属性面板中“页面属性”按扭，即弹出一个对话框，并将其背景色设置为黑色，如图4所示：

图4

然后根据设计思想，插入三大版块的表格，并对其进行初期边框的设置，效果如图5所示：

图5

框架设置完成后，将图片、广告、文字、FLASH等插入其中，并对其进行调整和设置。

页中主要采用表格方式进行排版，使板块顺次井条，使访客能够一目了然，整个页面没有超过两版。

最终效果如图6所示：

图6

在首页中还加入了背景音乐，使网页使浏览者耳目一新，具有更深的印象，声音文件采用MID格式的小容量音乐，音效动感、欢快。

代码如下：

\web\media\0245.mid"loop="-1">

3.1.2子页编辑

子页中包括各种十二星座的个性和爱情、各种不同的心理测试、精美壁纸和小故事以及娱乐的FLASH游戏等，使用不同风格的主题,突出课题中”个性”二字。

制作均以Dreamweaver8软件为主，运用其可视化编辑功能，在整体页面中采用表格方式进行定位和排版，制作过程如首页编辑方法相似。

各个页面均设有按纽和超链接供浏览者进入查看。

其中壁纸预览效果如下图7所示，FLASH休闲小游戏的运行页面如下图8所示:

图7

图8

3.2Flash8动画制作

一个以个性为主的网站一定有一个别出心裁的Flash动画，这样不仅给浏览者留有深刻的印象，同时也突出了网站的个性与风格。

但Flash相对Dreamweaver制作较复杂，设计到帧、时间轴、按钮等方面。

虽然Flash采用了流控制技术，但考虑到本身Flash的文件大小。

FLASH动画设计风格为简洁、鲜明。

以黄色为背景色，红色为字体色，两种暖色调的集合，再配以动感的背景音乐，衬托出首页的个性效果。

内容上主要以奥运为主题，包含十个关键字：

为奥运加油！

为中国喝彩！

动画效果从两端到中间，再左右旋转居中，反复播放。

最终效果如下图9所示:

图9

3.3Fireworks8图片处理

本网站还运用了Dreamweaver8与Fireworks8交互的特点。

在Dreamweaver中创建网站相册,下面简单介绍下制作过程：

打开Dreamweaver8，然后点击“命令”菜单中的“创建网站相册”命令。

如图10所示:

图10

然后出现如图11的对话框，在当中空白处填写相应的标题和信息。

图11

单击“确定”按钮，就会自动打开Fireworks8进行图象的批处理，效果如图12所示:

图12

完成后，即会提示“相册已建立”的对话框。

4JAVA脚本语言的应用与实现

在本网站中我主要在首页用了显示系统时间信息特效。

这效果不仅实用性很强，而且对浏览器的负担也很小。

效果如图13所示:

图13

代码如下:

--

varenable=0;today=newDate（）;

varday;vardate;

vartime_start=newDate（）;

varclock_start=time_start.getTime（）;

if（today.getDay（）==0）day="星期日"

if（today.getDay（）==1）day="星期一"

if（today.getDay（）==2）day="星期二"

if（today.getDay（）==3）day="星期三"

if（today.getDay（）==4）day="星期四"

if（today.getDay（）==5）day="星期五"

if（today.getDay（）==6）day="星期六"

date=（today.getYear（））+"年"+（today.getMonth（）+1）+"月"+today.getDate（）+"日";

document.write（"

9pt;color:

#000000;'>"+date）;

document.write（day+""）;

-->

5运行测试分析

网站制作完毕后，我对网站运行测试,在浏览器IE6.0下进行本地计算机（XP系统下）测试。

在调试过程中发现了某些浏览器插件在访问带有JavaScript的网页时会提示安全信息，浏览者在了解网站安全性能后会取消对JavaScript效果的屏蔽。

此外未发现其他问题。

6结论

个性测试网页的设计使我在专业技能方面有了一个新的跨越,结合个性化的设计和趣味化的内容,让我对网页设计产生了浓烈的兴趣，实际操作中也体验到了Dreamweaver制作软件的强大优点。

校全购大学生自己的购物网

参考文献

[1]赵靖[编].巧学巧用Dreamweaver、Fireworks、Flash制作网页[M]，北京:

人民邮电出版社,2004（6）

[2]卢晓飞[著].网页设计与制作教程[N]，机械工业出版社，2003（8）

[3]汤倩[著].Dreamweaver8完美网页制作[M]，人民邮电出版社，2003（6）

[4]成昊、王诚君[著].DreamweaverMX2004[N]，科学出版社，2000（9）

致谢

通过三年专业理论的学习和实践技能的操作，使我对计算机这门学科更加感兴趣，在临近毕业的时候我制作了这个个性测试网页的设计，一方面将三年所学的知识尽可能的在这个网页中得到发挥，另一方面也作为检验自己学习成果的手段。

最后谢谢我两位指导老师的辛勤指导,并且感谢在座各位答辩老师的考察,今后我会继续努力学习，不断提高自己，争取在专业技能方面有一个质的飞跃。

校全购大学生自己的购物网