Dreamweaver网页设计项目教程 王雪松 项目一 任务5-2新.pptVIP

Dreamweaver网页设计项目教程 机械工业出版社 任务五 制作下拉菜单1（建议2学时） 01 任务实施 02 任务评价 03 触类旁通 任务实施——2 制作下拉菜单 1. 制作下拉菜单。 （1）设置DIV“nav”的定位方式为相对定位。在layout.css样式表中找到对DIV“nav”的设置，对其CSS样式进行更改。 生成的CSS代码如下 （2）制作下拉菜单框架。在DIV“nav”结束标签之前插入DIV，对应的ID名称为“a-mcmw”，用来制作下拉菜单的框架 任务实施——2 制作下拉菜单 任务实施——2 制作下拉菜单 （3）制作下拉菜单的内容。在DIV“a-mcmw”中插入ul列表，并为每个列表项设置链接，对应的HTML代码如下： 任务实施——2 制作下拉菜单 设置该ul列表的CSS样式 任务实施——2 制作下拉菜单 4. 为下拉菜单添加行为。 （1）选中“美厨美味”链接，按住键盘上的“Shift+F4”，打开行为面板选择“添加行为”“显示-隐藏元素”， 任务实施——2 制作下拉菜单 回到行为面板后，行为面板中出现了刚才设定的“显示-隐藏元素”，对其进行设置 任务实施——2 制作下拉菜单 （2）选中“美厨美味”链接，按住键盘上的“Shift+F4”，打开行为面板选择“添加行为”“显示-隐藏元素”。 任务实施——2 制作下拉菜单 回到行为面板后，行为面板中出现了刚才设定的“显示-隐藏元素”，对其进行设置，参数如图所示。 （3）选择下拉菜单中的“公司简介”链接，按照第（1）、（2）步骤的操作，添加鼠标移上“onmouseover”显示DIV“a-mcmw”， 鼠标移开“onmouseout”隐藏DIV“a-mcmw”的行为。 任务实施——2 制作下拉菜单 （4）选择下拉菜单中的“企业文化”链接，按照第（1）、（2）步骤的操作，添加鼠标移上“onmouseover”显示DIV“a-mcmw”， 鼠标移开“onmouseout”隐藏DIV“a-mcmw”的行为。 （5）选择下拉菜单中的“所获奖项”链接，按照第（1）、（2）步骤的操作，添加鼠标移上“onmouseover”显示DIV“a-mcmw”， 鼠标移开“onmouseout”隐藏DIV“a-mcmw”的行为。 3. 设置DIV“a-mcmw”的显示初始状态。在预览网页的时候可以看到，下拉菜单的初始状态时显示的，我们应该更改它的初始状态为隐藏。选中DIV“a-mcmw”，在下方的属性栏中设置其可见性属性为“hidden”。 任务实施——2 制作下拉菜单 任务评价 关于这个任务的评价可以从以下几个方面考虑： 1. 制作的速度，在熟练的情况下，制作一个菜单的时间应控制在30分钟以内。 2. 要求不要生成多余的代码。 触类旁通 弹出广告也是应用比较多的行为功能。弹出广告可以在第一时间吸引浏览者的眼球，常用在“在线咨询”、“最新活动”等宣传中。弹出广告事件一般加载到网页的body标签中，当网页载入，即打开弹出窗口。以首页为例，制作的方法是： 打开index.html首页，在状态栏选中“body”标签 按住“shift+F4”打开行为“面板”“添加行为”“打开浏览器窗口”，设置参数如图所示。