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