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

长 春 大 学 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．…… 6