4_创建超链接和导航条.doc

实验室名称S1-204网页设计与制作教学实验报告学生所在系别计算机 专业 网络 班级08级1/2班 实验日期2010年4月13日学生姓名学号实验名称创建超链接和导航条指导教师陈钰华同组人姓名成绩一、 预习部分1、 实验目的2、 实验内容3、 实验要求4、 实验基本原理5、 主要仪器设备、工具、器件等一、实验目的1了解Fireworks的基本操作。2了解Fireworks的工作环境，认识各种工具。3 掌握网页导航栏的制作方法。二、实验内容1、制作导航栏和弹出菜单。2、用切片工具将设计好的导航栏切割，并导出为HTML和图像格式。3、在浏览器中观看导航栏效果。三、实验要求1、按“实验内容”完成操作。2、完成导航菜单的制作，并能在IE浏览器中正常显示。3、所有实验环节要独立完成，不得抄袭他人成果。四、主要仪器设备、工具PC机一台、Fireworks软件二、 实验操作部分1、 实验操作过程（可由图表示）2、 实验数据、表格3、 实验数据处理及计算4、 实验分析与结论(1)新建文档（77680）像素，背景色为#737e90，用“ 矩形 ”工具画6个（8022）像素的矩形，矩形边框颜色设置为透明，矩形背景色设置为#515764，然后选中所有的矩形，再在“属性”面板中设置矩形圆度为60。(2)在“属性”面板的“效果”弹出菜单中选择“斜角和浮雕-凸起浮雕”命令，在弹出的对话框中设置参数宽度1，对比度75%，柔化1，角度135。(3)重复对每一个矩形进行如上操作，设置好后将它们一字排开，间距为1，底线与编辑区底线重合。利用“矩形”工具再画一个485X10的矩形，背景色为#515764，将这个矩形拖到上面6个矩形的前面，底线与编辑区底线重合（这个矩形的作用在于遮挡上面6个矩形之间的间隙，形成一个倒弓状的按钮排列阵）。(4) 选取“文本”工具，在第一个按钮前定位并输入“设计在线”4个字，设置字体为仿宋，字体大小为12，字体颜色为白色（可选择其他颜色），其他5个按钮分别输入“工具软件”、“程序开发”、“操作系统”、“办公软件”、“网络安全”文本。(5)在Web工具栏中选择“切片”工具，沿着按钮边线进行切割，形成6个切片。(6)鼠标右击第一个按钮上的切片，选择“添加弹出菜单”命令，弹出一个“弹出菜单编辑器”。(7)进行内容的编辑，单击“+”号按钮，添加一个连接内容，在文本字段中输入“网页陶吧”4个字，在链接字段中输入你要链接的网页名称，如web.html，在目标字段中选择web.html页面的显示目标，有_self、_blank、_father等选项，可以根据自己的需要进行选择。同样方法再添加“美工教室”、“FLASH”、“多媒体”等菜单项。(8)进行外观的设置，选择“HTML”格式的链接样式和“水平菜单”的菜单样式，选择“宋体”字体、居中对齐，设置弹起状态文本颜色为#CCCCCC，单元格背景颜色设为#737E90；设置滑过状态时文本颜色为#FFFFFF白色，单元格背景色为#464F5B。(9)对外观进行高级设置。选择单元格宽度为65像素，高度为20像素，但与各边框、文字缩进和单元格间距都为0，边框宽度为1，边框颜色为白色，阴影和高亮都选择深色。(10)进行位置的设置。单击位置设置第2个按钮，将弹出菜单设置在底部， X=0，Y=25，可根据按钮的高度设置Y值，使之达到最佳效果。另外，可根据个人喜好设置菜单的外观。(11)按照（6）（10）的步骤，可以分别制作各个按钮的弹出菜单。在这个步骤中，不需要重新设置菜单的外观、高级和位置等属性，Fireworks已经把制作第一个按钮的弹出菜单的样式记忆下来，只需经过简单的操作便可以完成设计。(12)单击“文件”“导出”命令，保存类型选项选择“HTML和图像”，选中“将图像放入子文件夹”复选框，输入导出文件名称，单击“保存”按钮，导航菜单制作完成。三、学生自我小结和实验体会以及实验改进意见通过这次实验，加深了对使用Fireworks制作按钮、导航栏和弹出式菜单的了解。在实验过程中，按钮的绘制使用了“矩形”工具和“属性”面板，该方法对制作精美复杂的按钮耗时太久，可直接利用Fireworks按钮编辑器和“样式”面板来制作按钮。四、教师评语及实验成绩评定 该生对知