制作简单的一级导航菜单(网页特效)

《制作简单的一级导航菜单(网页特效)》由会员上传分享，免费在线阅读，更多相关内容在工程资料-天天文库。

1、讲授课题简单的一级导航菜单课型新授教案序号(1,2)教学目标知识与技能目标1、熟练掌握制作简单一级导航菜单的方法2、会通过鼠标事件实现菜单背景的切换过程与方法目标通过教师引导学生，学生自主学习，使学生会使用本课内容情感态度与价值观目标使学生体验使用本软件处理问题的便捷与好处，使学生能以积极态度学习本软件,激发学生的学习兴趣教学重点难点及解决办法教学重点制作简单一级导航菜单的方法教学难点如何添加鼠标事件解决办法极域或多媒体演示，上机练习教学手段运用极域或多媒体学法指导教师教法讲解、演示、引导学生学法发

2、现问题解决问题教师活动学生活动课题导入[课前五分钟]使用爱的鼓励使学生更加喜欢课前五分钟，并通过课前五分钟让学生明白一个道理或明白一些知识。[复习]一、页面布局在设计网页时，首先需要根据页面的内容进行网页布局。一般来说，网页布局可以采用两种方式。1、表格布局表格是网页设计中用得最多的元素之一，利用表格组织网页内容，可以设计出布局合理，结构协调、美观匀称的网页。在网页制作中表格主要有两个用途：（1）在页面上显示表格数据。可以在网页中直接显示表格数据，当遇到网页中有大量数据文字信息时，使用表格形式显示要

3、清晰得多。例如：成绩单、新闻列表、通讯录等。（2）使用表格布局。这是当前网页布局使用比较多的技术之一，通过设置表格的高度、宽度、比例等属性对页面元素进行控制，精确布局网页上的元素。1、CSS+DIV层布局CSS+DIV布局是利用CSS控制DIV标签的位置来实现的。CSS控制DIV搭建网页，可以生成简洁的网页源代码，提高页面的浏览速度，同时CSS也可以自如地控制网页外观，如边框、背景、链接等，利用这种布局方法不仅可以制作出精美的网页，也可以提供良好的用户浏览体验。二、JavaScript事件简单地理解

4、，事件就是某一个动作发生时产生的一种信号。在用户浏览页面时，随时都会引发不同类型的事件。例如：鼠标单击了页面上的按钮、在文本框中输入内容等。JavaScript是一种基于事件触发的脚本语言，因此在设计网页时，可以将事件与JavaScrip语言二者有机地结合起来，制作出生动美观的页面效果。JavaScrip中常用的几种鼠标事件如表1-1所示：事件说明OnMouseDown按下鼠标按键时激发的事件onMouseUp松开鼠标按键时激发的事件OnMouseMove鼠标指针在指定对象区域上移动时激发的事件On

5、MouseOut鼠标指针离开指定对象区域时激发的事件OnMouseOver鼠标指针移入指定对象时激发的事件OnClick使用鼠标在指定对象区域上单击时激发的事件一、相关的背景样式常见的背景属性如表1-2所示：名称说明Background-color设置背景颜色Background-image设置背景图像Background-repeat设置一个指定的图像如何被重复Background-position设置一个指定的图像的位置[课前引入]我们经常在浏览网页时会看到网页上端会出现菜单项，今天我们就一起来

6、学习一下如何制作简单的一级导航菜单。讲授过程[教师活动]1、演示案例——简单的一级导航菜单2、提问：大家观察到了上述那些特效？[学生活动]看到了上边的菜单和菜单背景可以动态改变[教师活动]案例中的特效分析1、菜单布局从演示我们可以看到，在简单的一级导航菜单中，每一个菜单都处于同一行之中。因此，可以直接通过表格布局的方式来实现。将每一个菜单视为一个单元格，这样可以很方便地控制菜单条的显示位置。2、动态改变菜单背景菜单背景一般都是通过页面的样式来控制的，借助鼠标事件改变菜单原来的显示样式，即可实现刚才演

7、示的效果。[学生活动]按照教师分析进行案例制作，上传作品，并让学生演示操作步骤：1、打开素材页面，并切换到代码视图使用DW打开“素材”页面，如图所示：1、使用表格布局制作菜单从演示过程中可以看到，在页面的菜单栏中设置了5个菜单项，对应到表格中就是需要有5个单元格来显示菜单选项。那么现在就需要将文字“在此处添加菜单”所在的单元格进行拆分。设置菜单选项单元格的具体步骤为：（1）使用鼠标选中文字所在的单元格，然后单击“属性”面板中“拆分单元格”按钮，如下图所示：在弹出的“拆分单元格”对话框中设置需要拆分的

8、行数和列数，本例中将单元格拆分成6列，如下图所示：单元格拆分完毕后，调整单元格的宽度，如下图所示（2）在前五个单元格中分别输入菜单选项的文字，使页面具有菜单的初步效果，如下图所示：（3）添加文字后，可以看出文字的显示效果不是很美观，因此需要对单元格的内容设置相关的显示样式。设置单元格样式，打开DW浮动面板——CSS——新建CSS规则，如下图所示：单击“确定”按钮，然后设置具体的单元格样式，如下图所示：本例中单元格样式设置如下：Td{Font-size:13px;Col