一、 上机要求html怎么做下拉式多级导航栏
1、 掌握切片工具的使用，能熟练制作下拉菜单，在Dreamweaver中插入。
2、 能制作风格一致的导航条，在Dreamweaver中插入。
二、 上机内容
1、 导入一张图片，使用切片工具对该图片进行切割，在Fireworks中保存并插入Dreamweaver中。
2、 制作如下风格一致的导航条并在网页中插入。
3、 制作如下图的下拉菜单，并在网页中插入。
三、 上机步骤
1、 步骤如下：
（1）文件—导入菜单，导入一幅JPG图片。
（2）选中工具箱中的切片工具，拖动鼠标在图片上画出一个矩形区域。
（3）这个操作可以反复进行，在图像上画出多个切片区域。如图所示。
（4）使用指针工具依次选中每一个切片，使用优化面板分别进行优化。在每一个切片的优化工作进行之后，文件—导出菜单进行导出，选择HTML和图象。
（5）在Dreamweaver中打开一张网页，插入—图象—Fireworks Html，选择刚才保存的网页文件插入。
2、 步骤如下：
（1）文件—新建，新建一个文档，在新文件中选择“编辑—插入—新建按钮”打开按钮编辑器。在按钮的编辑窗口有5个选项卡，其中前4个分别对应4种不同的按钮状态。
（2）选中“释放”选项，这里我们先绘制一个圆角矩形，添加文字，将字号设置为20，得到如图所示效果。
（3）制作按钮的鼠标滑过效果。单击“滑过”选项，单击“复制弹起时的图形”按钮可将“释放”状态按钮的一个副本粘贴到“滑过”窗口中，然后对其进行编辑以更改它的外观。在这里我们单击属性面板的综合模式后的下拉列表，选择“变亮”，将按钮的颜调整，使之变亮，字号变为19。
（4）制作按下鼠标后的按钮状态。单击“按下” 选项，单击“复制滑过时的图形”按钮将“滑过”状态按钮的一个副本粘贴到“按下”窗口中，然后对其进行编辑以更改它的外观。这里单击属性面板的“效果”按钮为按钮添加阴影效果。
（5）单击“按下时滑过”选项，进入滑过按下的按钮状态的编辑，这里直接点击“复制按下时的图形”将按下的状态复制过来。
（6）这样，一个按钮的四个状态我们就编辑好了，关闭按窗口，完成按钮的创建。按钮出现在画布中并成为了实例，按钮也出现在库面板中，如图所示。
 
按钮元件及实例
（7）窗口—库菜单打开库面板，按住鼠标从库面板中将该元件的实例拖放到工作区中。将数个实例按一定顺序排列，最后一一选中各个实例，在属性面板的“文本”框中更改各个实例的文字。还可以给导航栏加上一个背景或者是边框，如图所示。
（8）执行“文件/导出”命令，在出现如下图的对话框中，“文件类型”选择“Html和图像”保存，“切片”后的下拉列表选择“导出切片”，则按钮以切片的方式存储，还可以勾选“将图像放入子文件夹”，将导航条的切片均放置在一个子文件夹中，方便管理。设置完毕，点击“保存”按钮导出文件。
（9）Dreamweaver中插入导航条时执行“插入/图像对象/Fireworks HTML”命令，在出现的窗口中选择保存的Html文件插入网页中。
3、 步骤如下：
（1）使用工具箱中的切片工具(后面详细介绍)，为每一个导航按钮勾画一个矩形区域，我们这里为“学校简介”来制作一个弹出菜单。
（2）选中“学校简介”上的切片区域，选择“修改/弹出菜单/添加弹出菜单”。在打开的窗口中，选中“内容”选项，设定文本、链接和目标，并可以单击“缩进菜单”按钮，将该项指定为菜单项列表中恰好位于其上面的菜单项下的子菜单项，得到如下图：
（3）选择“外观”选项，对文本进行格式设置，对“滑过状态”和“释放状态”应用图形样式，并
选择垂直或水平方向，如图所示。
（4）选中“高级”选项，设置单元格大小、边距和间距，文字缩进，菜单消失延时，以及边框宽度、颜、阴影和高亮显示。
（5）选中“位置”选项，可以指定弹出菜单及其子菜单的位置。选择一个合适的位置值。单击“完成”后可以看到。
（6）按下F12可以在浏览器中预览网页的输出效果，如果满意可以将文件导出，选择“文件/导出”，选择“Html和图像”类型。
（7）Dreamweaver中插入下拉菜单时执行“插入/图像对象/Fireworks HTML”命令，在出现的窗口中选择保存的Html文件插入网页中。
提示：制作弹出菜单的源文件（PNG文件）也应该保存好，这样当你对制作的菜单的效果不满意的时，还可以打开原PNG文件进行修改。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。