学号:zhg.
姓名:zhg.
实验报告
----- web程序设计
一.实验课题:
综合使用超文本标记语言(HTML) ,javascript脚本,css样式表以及等多
种技术设计和制作生动多彩的客户端web网页,本网站的功能为一个小
型知识库,可提供小型软件下载,以及c/c++,web技术,java技术,以及其
他有关学习方面的知识,文章,书籍等的介绍的小型网站。
二. 实验目的:
通过综合使用超文本标记语言(HTML) ,javascript脚本,css样式表以及
等多种技术设计和制作生动多彩的客户端web网页,加深对HTML语言，
javascript语言、css样式语言的掌握，以及对主流网页制作工具如
Microsoft Frontpage、Macromedia Dreamweaer、Fireworks等的熟练
使用，从而进一步提高从设计网页到制作网页整个过程中的实际操作能
力，达到学以致用的教学目的。
三. 实验环境:
硬件:Intel 奔腾4处理器,联想显示器.
软件:Microsoft Windows XP,
Microsoft Internet Explorer6.0,
Windows自带记事本，
Microsoft Frontpage,
Macromedia Dreamweaer,Fireworks等。
四. 实验内容:
1. 功能:
●提供软件下载。
但主要是小型软件(主要是与我们学习有关或我们做
的实验报告等一些小的学习资料)的下载链接，即本网页并不直接为
用户提供软件，而是间接地将用户引导到其他的软件下载站。
●提供学术性文章。
主要是与我们当前所学知识相关的一些文章，或
者也包括一些经典代码。
●为初学者提供经典网页欣赏。
本网站的网页的大部分功能均为手写
代码，与工具生成的网页相比易于理解，故可供初学者入门借鉴。
●另外还提供用户登陆界面,和新用户注册界面,以及注册用户上传文
件的界面。
(后面这三项功能目前尚未实现)
2.网站各部分的结构、关系及功能:
本网站的主页为index.html,插入了背景图片universe.jpeg。
然后插入了一个内置框架,该框架内的网页为body.html。
内置框架下面则
为网站版权声明等信息。
如图：（网站初始界面）
Index.html中实现了以下功能：
●Javascript实现动态移动的网页标题功能，
●Javascript实现浏览器底部状态栏动态出现友好提示信息等功能，
●Javascript实现Microsoft agent技术与cookie技术结合实现动画提示浏
览者第几次进入本网站，以及上一次访问的时间。
●通过使用标记<embed></embed>插入背景音乐《梁祝》，用户可以随时关闭。
●Javascript实现（无缝）连续无间隔滚动图片，点击相应图片将进入该权威
性网站
●使用了动态弹出隐藏式菜单，在本菜单中提供了一些实用网站链接功能
网页的主体为body.html,它分为5个框架，内容文件分别命名为shi1.html、shi2.html、shi3.html、shi4.html、shi5.html。
其中各部分的分布如下图：
Shi1.html中为变化交替方式显示图片，为javascript加css虑镜等技术即DHTML实现。
Shi2.html为用户登录页面，使用DHTML显示页面样式，如模糊字体，发光字等。
从登录界面可以链接进入注册页面(register.html)，以及使用默认账号进入登录后的页面（upload.html）。
Register.html页面,提供了诸如、性别、密码、密码确认、兴趣爱好等用户信息。
另外在页面下方还提供了音乐欣赏及音乐网站的友情连接，使浏览者能够在优美的旋律中阅读本站内容（这项功能在shi2.html中也有，即只要一进入主页遍可享受此项功能）。
Upload.html上载页面, 提供了相应表单项，供登录成功的用户上传文件。
Shi3.html是主内容区。
本框架中显示的内容就是本站所提供的各种软件信息（主要包括软件名称、大小、开发语言、适用环境以及软件
功能作者信息等在每个软件介绍文字中都提供了下载链接，点击便可进
入相应下载网站中该软件的下载页面），精彩文章、经典代码等等内容
的正文将在该区域显示。
由于内容较多，网页中各段块的右下方都提供
了“返回顶部”的链接，以便于返回顶部，给浏览者提供尽可能多的方
便。
另外在shi3.html中该提供了特效：
●满天雪花自由飘落，这是使用javascript实现的
●悬浮的钟表，该钟表总悬浮在用户面前，任你怎样拖动滚动条，
另外当您想查看当前时间时，可以将鼠标箭头放于钟表上即可
看到时间显示。
Shi4.html为站内导航功能模块。
提供了c/c++、web技术、java、其他等四个菜单项。
点击相应项将会在左边窗口（shi3所在的）显示相应页面。
然后用户再在主窗口中浏览信息。
Shi5.html为最下面的一个框架，提供了一个走马灯的大图片作为背景，并且实现了动态旋转和闪现效果的图片，以及跟踪当鼠标等彩色闪动雪花，动态变幻位置、大小、颜色的文字。
五. 实验步骤:
1．构思网站主题
这一步就是根据自己的兴趣、想法来设想自己需要建一个怎么样的网站，即该网站主要用于哪些方面的内容。
如本网站的功能为一个小型知识库,可提供小型软件下载,以及c/c++,web技术,java技术,以及其他有关学习方面的知识,文章,书籍等的介绍的小型网站
2．确定网页版式
初步设计网页版式，首先要做的是主页的结构。
一般来说，刚开始的设计并非最终的模式，而是通过不断地学习，制作才能设计出最终页面。
例如本网站最终就是设计一个index.html然后在其中嵌入一个内置框架用于显示主体内容body.html, 而在框架的上、下分别显示其他功能。
Body.html为一个含有5个小窗口的页面。
而这与本人最初地构想不尽相同。
2．搜集相关信息
在确定了要建设的网站类型后，下来要做的就是搜集与之相关的各方面的信息，如本网站中所需要的软件名称、功能说明、作者信息，相关书籍信息，经典代码讲解等。
另外根据页面版式以及网站的主题内容制作一些图片、或flash 等（或者也可以在网上搜集免费的）。
3．设计具体网页内容
在完成了以上步骤后便可以进行具体网页的设计了。
这一步是整个网页设计过程中最关键的一步，当然也是最难的一步了。
要完成这一步，首先得具备一些相对专业性的知识，如HTML、CSS，javascript等语言（或一些专用的网页开发工具如Frontpage、Dreamweaer,Fireworks等的操作技术）。
有了这些知识后就可以开始设计具体的网页内容了。
4．浏览网页
完成以上步骤后，便可以使用浏览器查看已写好的网页了。
在这个过程中要仔细检查各项内容是否正确显示，（对与javascript可以通过浏览器错误提示得到相当大的帮助）并改正即可。
六. 实验结果:
通过本次实验，我的web程序设计的知识及实际操作能力都得到了较大的提高。
目前我已对html、javascript、css有了一定的了解，并能使用这些语言进行一些设计，这极大地提高了设计制作网页的灵活性和网页功能的强大性。
另外对于界面的设计使用网页制作工具软件也是一种很好的选择，经过学期的学习和实验练习，我也学会了Dreamweaver的简单使用，为以后制作大型网站奠基了初步基础。
回顾整个实验过程，我感到任何学科尤其是计算机类的必须多实践，绝不能忽视平时的实验，只有理论联系实际，二者互补学习，才能是整体的学科能力得到最有效的提升。