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

实验室名称S1-204 网页设计与制作教学实验报告 学生所在系别计算机 专业 网络 班级08级1/2班 实验日期2010年4月13日 学生姓名 学号 实验名称 创建超链接和导航条 指导教师 陈钰华 同组人姓名 成绩 预习部分 实验目的 实验内容 实验要求 实验基本原理 主要仪器设备、工具、器件等 一、实验目的 1．了解Fireworks的基本操作。 2．了解Fireworks的工作环境，认识各种工具。 3． 掌握网页导航栏的制作方法。 二、实验内容 1、制作导航栏和弹出菜单。 2、用切片工具将设计好的导航栏切割，并导出为HTML和图像格式。 3、在浏览器中观看导航栏效果。 三、实验要求 1、按“实验内容”完成操作。完成制作能在IE浏览器中正常显示所有实验环节要独立完成，不得抄袭他人成果。 实验操作部分 实验操作过程（可由图表示） 实验数据、表格 实验数据处理及计算 实验分析与结论 (1)新建文档（776×80）像素，背景色为#737e90，用“ 矩形 ”工具画6个（80×22）像素的矩形，矩形边框颜色设置为透明，矩形背景色设置为#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按钮编辑器和“样式”面板来制作按钮。 四、教师评语及实验成绩评定 该生对知识掌握的较扎实，能够熟练的运用知识，并认真实验并填写实验报告。实验报告简洁明了，思路清晰，结构条理。望踏踏实实，继续努力，百尺竿头，更进一步。 实验成绩__________ 指导教师__________ 日期 年 月 日