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