web前端开发技术实验报告 实验九

20 15 —  2016学年第  二   学期

 Web前端开发技术 课程

实 验 报 告

学    院：  计算机科学技术

专    业：  软件工程      

班    级：  软件15401    

学    号：   01           

姓    名：                

任课教师：  车    娜     

实验九  网页综合设计（一）

一、实验目的

1. 掌握站点的建立，能够建立规范的站点；

2. 了解切图工具，能够运用切片裁切效果图；

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-4 HTML结构图

4.CSS样式：页面导航和版权信息模块通栏显示，其他模块均宽1000px且居中显示，即页面的版心为1000px。除了banner部分的文字为微软雅黑和黑体外，其余文字均为宋体。主体内容中链接文字均显示为#222222、宋体、12px。这些共同的样式可以提前定义，以减少代码冗余。

5.JavaScript特效

在该页面中，分别在头部、banner焦点图和主体内容部分添加了JavaScript特效。具体如下：

•头部

当鼠标移至头部的“我的收藏”时，会弹出一个下拉菜单，如下图所示

图9-5 头部效果图

•banner焦点图

banner焦点图可实现自动轮播，当鼠标移动到轮播按钮时停止轮播，并显示当前轮播按钮所对应的焦点图，同时按钮的样式也发生改变。当鼠标移出时继续执行自动轮播效果。例如，鼠标移上按钮3时的效果如下图所示。

图9-6 banner焦点图

四、实验步骤

1、结构分析

2、样式分析

3、JS效果分析

4、制作页面结构

根据上面的分析，使用相应的HTML标记来搭建网页结构

5、定义CSS样式

搭建完页面的结构后，使用CSS对页面的样式进行修饰。

6、添加JavaScript效果

页面布局和样式设计完成后，通过JavaScript代码实现下拉菜单以及焦点图轮播效果。

五、实验代码及网页效果图

   （仅列出关键代码及主要效果图即可）

1．搭建基本结构

关键代码如下：

效果如图9-7所示。

图9-7 banner布局图

2．定义CSS样式

关键代码如下：

效果如图9-8所示。

图9-8 banner效果

3．添加JavaScript特效

关键代码如下：

六、实验总结

（此处写实验过程或技术上的总结而不是个人情感心得，如下事例）

1．学会了如何运用……等。

2．……