网页设计文档

作品 Mechanism

阮代佳 上海第二工业大学 机械电子专业 2007级 吴冰 上海第二工业大学 机械电子专业 2007级

1 作品简介

有些人是把自己的情感寄托在机械里面，所以才有各种各样惊人的科技发明。随着社会在进步，机械已不再是“废铜烂铁”的代名词，而是对机械赋予更深层次的意义：机电一体化。为了满足更多人对机械的兴趣，因此，我们决定设计一个深入了解机械的平台，使非专业人士对机械方面有更多的认识。本网站主要是一个以动静态演示为主的机械展示平台，其中包括了相关机械知识的介绍和资源下载共享等。在相关机械知识的介绍中，我们主要介绍现代化机械的控制系统（数字控制、伺服控制、顺序控制）。同时，在资源下载共享中，我们也提供红绿灯、测试系统等相关下载资源，从不同角度给人展现一个多动态的机械展示平台。为了完成网站的设计要求，我们使用 Dreamweaver CS4、Flash 8.0、Photoshop CS2、VB 6.0等相关技术完成网站的制作。最终结果：登录注册页面，对用户信息进行验证和管理。网站主页，提供一个多动态的机械展示平台和相关链接的设置。

2 作品效果图

图1 登陆界面

图2 诗歌链接

图3 网站主页

图4 四杆机构

3 设计思想

3.1 功能设计

网页Mechanism 主要包括了注册登录系统与相关下载链接两个部分。

注册登录系统供用户使用，需要已注册过的帐号才能进入网站主页。其主要功能有：

1） 动态验证账户和密码：规定只能输入有效字符（0～9，大小写英文字母，输

入的长度为6～12个字符之间）。

2） 提交按钮的使能性设置：只有通过所有相关信息的验证，按钮才有效。

3） 注册登录账户的管理：对于已注册过的账户不允许注册，已成功注册、登录

的用户，实现消息框的提示和页面的跳转。

相关下载链接把用户引入了动态的机械领域，提供免费的下载资源。其主要功能有：

1） 四杆机构：通过用户输入的杆长，显示并模拟四杆机构的运动轨迹。

2） 交通灯： 红黄绿灯，每隔一定时间按一定规律循环切换。

3） 滤波系统：通过对原始数据的处理形成新的数据曲线图。

系统功能结构图如图5所示：

图5 系统功能图

3.2 技术运用

1．动态验证文本域的信息。在注册界面中，利用spry 验证控件和VBScript 脚本代码验证用户注册的信息。通过定时器循环扫描，判断用户信息是否通过验证。确保只有在通过所有验证的情况下，提交按钮才有效。否则，就失效。

2．VBScript 文件流的操作。首先，在Dreamweaver 中创建文件实体createobject("scripting.filesystemobject")，然后，运用opentextfile 方法打开指定文件，最后，在提交用户信息之前，先readline 读取已注册的账号。若存在相同的账号，

则弹出消息框提示：账号已注册。若不存在，运用writeline 方法写入外部文件保存。在登录时，读取已注册的账号和密码。若账号对，密码错，弹出消息框提示：密码错误。若两者都对，弹出消息框提示：登录成功，实现页面自动跳转。否则，弹出消息框提示：用户未注册。

3．VBScript 动态星座日历的绘制。首先，利用Date （）函数计算该年该月的第一天是星期几，其次，利用Isdate （）判断该年该月是否存在28、29、30、31日，从而得知该年该月共有多少天，输出相应的表格及相应的星座图案。当年、月、日改变时，反复调用该过程，更新相应的表格及相应的星座图案。

4．外部CSS 定义按钮样式。在驱动控制和产品介绍的界面中，都有相同的按钮样式，（上一页、下一页、返回主页）。运用方法调用外部CSS 文件，创建相应的类对象，提高了程序的可读性、可移植性。

5．网站首页定时的图片切换与滚动的公告栏显示。开启定时器，运用set cell=cal.rows().cells()方法创建表格单元格的对象，利用cell.style.color 属性，实现相应单元格的颜色变化的特效。通过VBScript 脚本代码，实现变量的累加计数，图片路径与该变量直接关联，从而控制图片切换。此外，定时器控制字符串数组的刷新，实现滚动公告栏的特效。

3.3 技术特色

1、VB 脚本代码的运用。在我们制作的许多网页中，都充分利用VBScript 脚本代码与HTML 超文本语言结合，实现对网页的输出控制。网站首页的滚动切换、星座日历的动态查询等均使用该技术实现。

2、外部文件的调用：在代码的编写方面，我们尽量保持了其简洁与高效。所有脚本代码都在head 中编写，有些重要的脚本代码，为了提高程序的可读性与移植性，我们采用调用外部VBS 文件，完成网页功能设计的要求。还有一些按钮样式，在多个网页的页面中重复使用，为了提高程序的利用率，我们也通过调用外部CSS 文件，实现技术的要求。

3、Flash 制作：flash 主要分为两部分，一部分是对本网站的阐述性展示，另一部分是机械演示等。

4、文件流的操作：将用户注册的账号、密码保存在TXT 文本文件中，在TXT 文件中，账号和密码用逗号隔开，方便读取。运用简单的文件流读写等操作，取代了繁琐的数据库建立与查询，使得本系统设计更加简便，趋于大众化。

4 指导教师自评

5 专家点评