I12制作简单的一级导航菜单网页特效.docVIP

讲授 课题 简单的一级导航菜单 课 型 新授 教案 序号 (1,2) 教 学 目 标 知识与技能目 标 熟练掌握制作简单一级导航菜单的方法 会通过鼠标事件实现菜单背景的切换 过程与方法目 标 通过教师引导学生，学生自主学习，使学生会使用本课内容 情感态度与价值观目标 使学生体验使用本软件处理问题的便捷与好处，使学生能以积极态度学习本软件,激发学生的学习兴趣 教学 重点 难点 及解 决办 法 教学重点 制作简单一级导航菜单的方法 教学难点 如何添加鼠标事件 解决办法 极域或多媒体演示，上机练习 教学手段运用 极域或多媒体 学法指导 教师教法 讲解、演示、引导 学生学法 发现问题 解决问题 教 师 活 动 学生活动 课 题 导 入 [课前五分钟] 使用爱的鼓励使学生更加喜欢课前五分钟，并通过课前五分钟让学生明白一个道理或明白一些知识。 [复习] 页面布局 在设计网页时，首先需要根据页面的内容进行网页布局。一般来说，网页布局可以采用两种方式。 表格布局 表格是网页设计中用得最多的元素之一，利用表格组织网页内容，可以设计出布局合理，结构协调、美观匀称的网页。 在网页制作中表格主要有两个用途： 在页面上显示表格数据。可以在网页中直接显示表格数据，当遇到网页中有大量数据文字信息时，使用表格形式显示要清晰得多。例如：成绩单、新闻列表、通讯录等。 使用表格布局。这是当前网页布局使用比较多的技术之一，通过设置表格的高度、宽度、比例等属性对页面元素进行控制，精确布局网页上的元素。 CSS+DIV层布局 CSS+DIV布局是利用CSS控制DIV标签的位置来实现的。CSS控制DIV搭建网页，可以生成简洁的网页源代码，提高页面的浏览速度，同时CSS也可以自如地控制网页外观，如边框、背景、链接等，利用这种布局方法不仅可以制作出精美的网页，也可以提供良好的用户浏览体验。 JavaScript事件 简单地理解，事件就是某一个动作发生时产生的一种信号。在用户浏览页面时，随时都会引发不同类型的事件。例如：鼠标单击了页面上的按钮、在文本框中输入内容等。 JavaScript是一种基于事件触发的脚本语言，因此在设计网页时，可以将事件与JavaScrip语言二者有机地结合起来，制作出生动美观的页面效果。 JavaScrip中常用的几种鼠标事件如表1-1所示： 事 件 说 明 OnMouseDown 按下鼠标按键时激发的事件 onMouseUp 松开鼠标按键时激发的事件 OnMouseMove 鼠标指针在指定对象区域上移动时激发的事件 OnMouseOut 鼠标指针离开指定对象区域时激发的事件 OnMouseOver 鼠标指针移入指定对象时激发的事件 OnClick 使用鼠标在指定对象区域上单击时激发的事件 相关的背景样式 常见的背景属性如表1-2所示： 名称 说明 Background-color 设置背景颜色 Background-image 设置背景图像 Background-repeat 设置一个指定的图像如何被重复 Background-position 设置一个指定的图像的位置 [课前引入] 我们经常在浏览网页时会看到网页上端会出现菜单项，今天我们就一起来学习一下如何制作简单的一级导航菜单。 讲 授 过 程 [教师活动] 演示案例——简单的一级导航菜单 2、提问：大家观察到了上述那些特效？ [学生活动] 看到了上边的菜单和菜单背景可以动态改变 [教师活动] 案例中的特效分析 菜单布局 从演示我们可以看到，在简单的一级导航菜单中，每一个菜单都处于同一行之中。因此，可以直接通过表格布局的方式来实现。将每一个菜单视为一个单元格，这样可以很方便地控制菜单条的显示位置。 动态改变菜单背景 菜单背景一般都是通过页面的样式来控制的，借助鼠标事件改变菜单原来的显示样式，即可实现刚才演示的效果。 [学生活动] 按照教师分析进行案例制作，上传作品，并让学生演示操作步骤： 打开素材页面，并切换到代码视图 使用DW打开“素材”页面，如图所示： 使用表格布局制作菜单 从演示过程中可以看到，在页面的菜单栏中设置了5个菜单项，对应到表格中就是需要有5个单元格来显示菜单选项。那么现在就需要将文字“在此处添加菜单”所在的单元格进行拆分。 设置菜单选项单元格的具体步骤为： 使用鼠标选中文字所在的单元格，然后单击“属性”面板中“拆分单元格”按钮，如下图所示： 在弹出的“拆分单元格”对话框中设置需要拆分的行数和列数，本例中将单元格拆分成6列，如下图所示： 单元格拆分完毕后，调整单元格的宽度，如下图所示 在前五个单元格中分别输入菜单选项的文字，使页面具有菜单