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

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