长春大学
20152016学年第二学期
Web前端开发技术课程
实验报告
学院：计算机科学技术专业：软件工程班级：软件15401学号：01姓名：任课教师：车娜
f实验九网页综合设计（一）
一、实验目的
1掌握站点的建立，能够建立规范的站点；2了解切图工具，能够运用切片裁切效果图；3完成首页面的制作，并能够实现简单的JavaScript特效；
二、内容及要求
1建立一个站点，完成网站的初始化设置；2利用Fireworks工具，对效果图进行裁切；3完成主页的布局，以及对css公共样式进行初始化设置。4完成头部区域、导航菜单、ba
er焦点图以及通知公告区域的制作；5使用滑动门技术，实现导航菜单在鼠标进过时显示特殊背景效果。
三、实验原理
图91效果图
1建立站点：打开Dreamweaver工具，在菜单栏中选择【站点】→【新建
站点】选项，在弹出的窗口中输入站点名称。然后，浏览并选择站点根目录的存储位置，如下图所示。
图92建立站点
2
f2切片：打开Fireworks工具，选择工具箱中的切片工具，拖动鼠标左键，
根据网页需要在图像上绘制切片区域。绘制完成后，在菜单栏上选择【文件】→【导出】选项，导出后的图片存储在站点根目录的images文件夹内，切图后的素材如
下图所示。
图93切片图像
3HTML结构：整个页面大致可以分为头部、导航、ba
er焦点图、通
知公告、主体内容、版权信息等六个模块，具体结构如下图所示。
图94HTML结构图
4CSS样式：页面导航和版权信息模块通栏显示，其他模块均宽1000px
3
f且居中显示，即页面的版心为1000px。除了ba
er部分的文字为微软雅黑和黑体外，其余文字均为宋体。主体内容中链接文字均显示为222222、宋体、12px。这些共同的样式可以提前定义，以减少代码冗余。
5JavaScript特效
在该页面中，分别在头部、ba
er焦点图和主体内容部分添加了JavaScript特效。具体如下：
头部
当鼠标移至头部的“我的收藏”时，会弹出一个下拉菜单，如下图所示
图95头部效果图
ba
er焦点图
ba
er焦点图可实现自动轮播，当鼠标移动到轮播按钮时停止轮播，并显示当前轮播按钮所对应的焦点图，同时按钮的样式也发生改变。当鼠标移出时继续执行自动轮播效果。例如，鼠标移上按钮3时的效果如下图所示。
四、实验步骤
1、结构分析
图96ba
er焦点图
2、样式分析
4
f3、JS效果分析
4、制作页面结构根据上面的分析，使用相应的HTML标记来搭建网页结构5、定义CSS样式搭建完页面的结构后，使用CSS对页面的样式进行修饰。6、添加JavaScript效果页面布局和r