Fireworks_制作弹出菜单.pdfVIP

《商务网站制作与网页设计》课程实验报告 验名称 Fireworks 制作弹出菜单 指导老师 验日期 2009-12-25 验成绩 姓 名 学 号 专业年级 一、实验目的与要求： CSS 格式弹出菜单制作导出 ,有关弹出菜单的制作方法，不是我们本部 分的讲授重点，有关CSS 格式控制的地方，才是需要我们注意的。所以本小 节就通过一个简单的弹出菜单的制作讲解，使大家对于Fireworks 8 里面新增 的CSS 格式化菜单有一个初步的了解和印象，以更好的进一步的来使 它。 二、实验课时：1 课时 三、实验步骤： 1、打开Fireworks 8 ，新建一个文件，文件的大小可以根据菜单的大 小直接来设置。在编辑区绘制需要在页面上显示的菜单。 PDF 文件使 pdfFactory Pro 试用版本创建 2、使 工具箱的矩形热点”工具给菜单栏直接插入热区，不做转化为 按钮元件的操作了。 3、选中 新书推荐”栏所在热区，选择菜单修改|弹出菜单|添加弹出菜单” 命令。在 内容”设置对话框内，将弹出菜单内容的文本、链接及其目标等都设 定完毕，单击 继续”按钮，转到 外观”设置对话框。 4、在外观”设置对话框内，选择单元格格式为 HTML”，将字体、文本 大小、弹起状态、滑过状态的文本、单元格颜色都做一个设置。设置完毕，单 击 继续”按钮，切换到 高级”设置对话框。 PDF 文件使 pdfFactory Pro 试用版本创建 5、将单元格的相关属性进行一番设置，具体的内容设置此处就不详细 讲解了，大家可以参考Fireworks 先前版本的有关教程来对其作深入了解，掌 握。全部设置完毕后，单击 继续”按钮切换到位置”设置对话框。 6、菜单位置我们选择将菜单位置设置到切片的底部”这种格式，如果 对于Y 值不满意的话，此处可以调整，也可以通过后期进行调整，这就需要 到我们今天要着重介绍的CSS 格式菜单的知识了。设置完毕了，完成即可。 PDF 文件使 pdfFactory Pro 试用版本创建 7、参照上述方法，将其它菜单内容添加完毕。然后单击工具栏上的 导 出”按钮，将菜单文件导出html 格式文件。在随后弹出的导出”对话框中，单击 右侧的选项”按钮，探出HTML 设置对话框”，注意一定要选定对弹出菜单应 CSS、将CSS 写入外部文件”这两项前面的复选框，才可以感受到CSS 格 式化菜单的魅力所在 。 8、将菜单文件导出到你准备好的文件夹内，打开该文件夹，会发现里 面出现了一个CSS 层叠样式表文档，如下图所示。这就是我们需要重点介绍 的主角儿了。 PDF 文件使 pdfFactory Pro 试用版本创建 9、使 html 编辑器或者记事本 （使 记事本其实足够了，因为文件并 不复杂）打开这个CSS 文件。我们可以发现一些html 代码在里面，如果我们 对html 一窍不通也不要害怕，你可以凭借着刚才在Fireworks 里面设置菜单的 印象来寻找一些与弹出菜单的设置有关的内容，比如我们在节选的一段css 描 述里面可以发现对于菜单对象的一些描述第一个划红线的地方所指示的gener al apperance”也就是我们在菜单编辑器”中进行外观设置的那一些内容，仔细 看可以看到里面有font-family”，有关字体的设置；还