华北科技学院计算机系综合性实验

《华北科技学院计算机系综合性实验》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、华北科技学院计算机系综合性实验实验报告课程名称网页制作实验学期2008至2009学年第2学期学生所在系部计算机系年级2006级专业班级网络B01-1学生姓名WSSWMS学号200607024112任课教师实验成绩计算机系制www.docin.com《网页制作》课程综合性实验报告开课实验室：基础六2008年11月24日实验题目华北科技学院校友会网站的开发一、实验目的使用Dreamweaver、Fireworks、Flash三种软件完成网页的制作。二、设备与环境微机、Dreamwaver8、Fireworks8、

2、Flash8三、实验内容1.按照特定的主题制作一个完整的网站。2.使用Dreamweaver、Fireworks、Flash三种软件完成网页的制作。3.网站中要包括表格/框架/层布局、图像、文本、超级链接、导航、CSS样式。网站页面总数不少于6个。4.至少要包括3个自己制作的Flash动画。上交文件中要包括该动画文件的源文件*.fla文件和导出文件。5.至少要包括3个自己用Fireworks制作的图像文件，并且在每个图像文件中应用至少两种学过的技术手段进行处理。上交文件中要包括该图像文件的源文件*.png文件

3、和导出文件。6.尽可能多地使用学过的技术手段。7.不允许抄袭其他同学的内容，如果两人有雷同，两个人都按照不及格处理。8.不允许从网上下载别人的网站当作考试内容上交。9.在上交文件中主页一律以index.htm命名。10.把所有文件和文件夹放在一个总的目录下,目录以：班级+姓名+学号最后两位的形式命名。例如：信管B061张三03.rar。将index.html放在该文件夹下。最后将该目录压缩成一个*.rar文件。四、实验结果及分析1.网站内容的定位经过反复思考，最终将网页的主题定为“华北科技学院校友会”。该网站

4、主要面向已经从学校毕业的校友，给他们一个相互交流的平台。主要的栏目分为：母校要闻、各地校友会、活动快讯、校友风采、校友社区BBS、校园风景、校友留言、用户中心等。由于时间仓促，只做首页、栏目页、部分内容页、校园风景的专题页面。预留好模板为网站动态化做好准备。2.网站首页的制作网站采取了模板制作的方式，由于首页和内容页相差不是很大，总体的架构不会变化。制作其他页面时只需在模板页基础上稍加修改即可。www.docin.com首页各个模块的布局如下：该页采用Table布局，由表格相互嵌套而成。头部的Logo与ban

5、ner还有导航条都是由Flash制作而成。第一个Flash较为简单，随时间推移，各个文字随之出现，第二个采用ActionScript编写，两个效果如下：www.docin.com首页的其他部分，均采用表格布局形式，具体步骤不再赘述，样式表方面采用内部和外部同时调用，外部样式表位置为【style/styl.css】网页中的超链接采用颜色#333333，无下划线，CSS如下：a:link{color:#333333;}a:visited{color:#333333;}a:link{text-decoration:

6、none;}a:visited{text-decoration:none;}a:hover{text-decoration:none;}a:active{www.docin.comtext-decoration:none;}网页背景CSSbody{background-color:#eeeeee;}去掉头部空条body{margin:0px;}Dreamweaver中的部分截图：www.docin.com1.网站栏目页和内容页的制作网站的首页制作完毕后，只需将中心部分去掉，做成模板，如图：www.docin.

7、com该页制作完后即可添加栏目页和内容页。如图：www.docin.com1.校园风景页面的制作校园风景页面是一个网站相册的形式，为了美观性使用了LightBox特效，点击缩略图后即可打开完整的图片。效果如图：www.docin.com1.页面的发布网站制作完成后结构如下：Flash文件夹（存放flash文件）Images文件夹（存放图片）Scripts文件夹（存放脚本）Style文件夹（存放CSS文件）Index.html（网站首页）Fengjing.html（校园风景专题页）Lanmu.html（栏目页）

8、Jianshezhong.html（网站建设中页面）wz1.html（文章1页面）wz2.html（文章2页面）wz3.html（文章3页面）www.docin.com将所有文件放到服务器目录中，经测试正常，Linux服务器区分大小写，文件名应全为小写。Windows的IIS服务器大小写均可。最终的页面如下：www.docin.com1.心得与体会经过本次www.docin.com网页制作的综合实验