Dreamweaver网页设计任务5-2.ppt

1、DreamweaverDreamweaver网页设计项目教程网页设计项目教程机械工业出版社机械工业出版社任务五 制作下拉菜单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”中插入列

2、表，并为每个列表项设置链接，对应的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）、（2）步骤的操作，添加鼠标移上“onmouseover”显示DIV“a-mcmw”，鼠标移开“onmou

4、seout”隐藏DIV“a-mcmw”的行为。3.设置DIV“a-mcmw”的显示初始状态。在预览网页的时候可以看到，下拉菜单的初始状态时显示的，我们应该更改它的初始状态为隐藏。选中DIV“a-mcmw”，在下方的属性栏中设置其可见性属性为“hidden”。任务实施2 制作下拉菜单任务评价关于这个任务的评价可以从以下几个方面考虑：1.制作的速度，在熟练的情况下，制作一个菜单的时间应控制在30分钟以内。2.要求不要生成多余的代码。触类旁通 弹出广告也是应用比较多的行为功能。弹出广告可以在第一时间吸引浏览者的眼球，常用在“在线咨询”、“最新活动”等宣传中。弹出广告事件一般加载到网页的标签中，当网页载入，即打开弹出窗口。以首页为例，制作的方法是：1.打开index.html首页，在状态栏选中“body”标签2.按住“shift+F4”打开行为“面板”“添加行为”“打开浏览器窗口”，设置参数如图所示。Thank you!谢谢观赏