一个简单的导航菜单

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

[复习]一、页面布局在设计网页时，首先需要根据页面的内容进行网页布局。

一般来说，网页布局可以采用两种方式。

1、表格布局表格是网页设计中用得最多的元素之一，利用表格组织网页内容，可以设计出布局合理，结构协调、美观匀称的网页。

在网页制作中表格主要有两个用途：（1）在页面上显示表格数据。

可以在网页中直接显示表格数据，当遇到网页中有大量数据文字信息时，使用表格形式显示要清晰得多。

例如：成绩单、新闻列表、通讯录等。

（2）使用表格布局。

这是当前网页布局使用比较多的技术之一，通过设置表格的高度、宽度、比例等属性对页面元素进行控制，精确布局网页上的元素。

2、CSS+DIV层布局CSS+DIV布局是利用CSS控制DIV标签的位置来实现的。

CSS控制DIV搭建网页，可以生成简洁的网页源代码，提高页面的浏览速度，同时CSS也可以自如地控制网页外观，如边框、背景、链接等，利用这种布局方法不仅可以制作出精美的网页，也可以提供良好的用户浏览体验。

二、JavaScript事件简单地理解，事件就是某一个动作发生时产生的一种信号。

在用户浏览页面时，随时都会引发不同类型的事件。

例如：鼠标单击了页面上的按钮、在文本框中输入内容等。

1.在page_header.lbi对应的位置（你想显示导航的位置）插入(注意下面的"themes/模板名称/util.php"中的"模板名称"改成你模板文件夹的名称)<?phprequire_once("themes/模板名称/util.php");?><div class="header-menu"><p {if $navigator_list.config.index eq 1} class="cur" {/if}><a href="../index.php">{$lang.home}</a></p><ul><!-- {foreach name=nav_middle_listfrom=$navigator_list.middle item=nav} --><li onMouseOver="sw_nav(this,1);"onMouseOut="sw_nav(this,0);" {if $nav.active eq 1} class="curs"{/if}> <a href="{$nav.url}" {if $nav.opennew eq1}target="_blank" {/if}>{$}</a><?php$subcates =get_subcate_byurl($GLOBALS['smarty']->_var['nav']['url']);if($subcates!=false){if(count($subcates)>0){echo "<div class='sub_nav'>";if($subcates){foreach($subcates as $cate){echo "<ahref='".$cate['url']."' class='level_1'>".$cate['name']."</a>";}}echo "</div><iframe frameborder='0' scrolling='no' class='nomask'></iframe>";}}?></li><!-- {/foreach} --></ul><script type="text/javascript">//初始化主菜单function sw_nav(obj,tag){var subdivs = obj.getElementsByTagName("DIV"); var ifs = obj.getElementsByTagName("IFRAME");if(subdivs.length>0){if(tag==1){subdivs[0].style.display = "block";ifs[0].style.display = "block"; }else{subdivs[0].style.display = "none";ifs[0].style.display = "none"; }}}</script></div>2.在CSS文件中插入.header-menu p{ float:left;padding:1px 12px 1px 0;margin-top:-2px;}.header-menu ul li{float:left;padding:1px 12px 1px12px;margin-top:-2px;}.header-menu ul li a,.header-menu p a{color: #333;display:block;}.header-menu ul li a:hover,.header-menu p a:hover{color:#888;}.header-menu ul li.curs{background:#999;}.header-menu ul li.curs a{color:#fff;}.sub_nav{ background:#999;width:110px; position:absolute; z-index:5003; display:none;margin-left:-12px;}.nomask{ background:#fff; width:110px; height:50px; position:absolute;z-index:5002;display:none;margin-left:-12px;}.sub_nav a.level_1{ display:block;color:#fff;padding:6px 6px 6px13px;font:11px Tahoma,Verdana,PMingLiU,Arial;border-bottom:1px dotted #D1D1D1;*border-bottom:1px dotted#D1D1D1 !important;*border-bottom:1px solid #A8A8A8;}.sub_nava.level_1:hover{color:#fff;background:#55B46C;text-decoration:none;}OK,搞定效果(具体样式可根据自己的模板需求修改CSS部分)：。

PPT如何制作幻灯片的导航菜单幻灯片导航菜单是一种帮助听众在PPT演示过程中更好地进行导航的工具。

通过添加导航菜单，您可以使听众更容易地浏览和访问幻灯片中的各个部分。

本文将为您介绍几种制作幻灯片导航菜单的方法，让您的PPT演示更加专业和有序。

一、通过超链接添加导航菜单超链接是一种常见而有效的制作幻灯片导航菜单的方法。

您可以在每个幻灯片上设置超链接，以链接到其他相关幻灯片。

以下是具体步骤：1. 在PPT中选择要添加导航菜单的幻灯片。

2. 在选中的幻灯片上选择“插入”>“超链接”。

3. 在弹出的对话框中，选择“本文档”选项，并从下拉菜单中选择要链接的幻灯片。

4. 在“文本显示”框中输入您想要显示在导航菜单上的文本，比如“目录”、“章节1”等。

5. 点击“确定”完成导航菜单的添加。

通过超链接添加的导航菜单可以通过点击菜单上的文本实现快速跳转到相关幻灯片，使整个演示流程更加便捷和高效。

二、使用自定义按钮制作导航菜单除了超链接外，您还可以使用自定义按钮来制作幻灯片导航菜单。

自定义按钮可以更好地适应您的幻灯片设计风格，提升演示的专业性。

以下是具体步骤：1. 在PPT中选择要添加导航菜单的幻灯片。

2. 在“插入”选项卡中，选择“形状”并选择一个按钮形状。

3. 在选中的幻灯片上绘制一个自定义按钮形状。

4. 右键点击按钮，选择“超链接”。

5. 在弹出的对话框中，选择“本文档”选项，并从下拉菜单中选择要链接的幻灯片。

6. 点击“确定”完成导航按钮的添加。

通过使用自定义按钮制作的导航菜单可以为您的幻灯片增添独特的风格和视觉效果，提升演示的吸引力和专业性。

三、利用动画效果实现导航菜单另一种制作幻灯片导航菜单的方法是利用PPT的动画效果。

通过设置动画效果，您可以在特定时间点显示或隐藏导航菜单。

以下是具体步骤：1. 在PPT中选择要添加导航菜单的幻灯片。

2. 在选中的幻灯片上选择“插入”>“形状”并选择一个图形形状用作导航菜单按钮。

Wps中制作下拉式导航菜单的操作方法wps演示在工作使用过程中，一般都有好几张，甚至几十张，如果在任何一张幻灯片中想快速知道哪些内容在哪一页，且快速转到指定页，让你有一个明确的导航指示。

该怎样制作呢?今天，店铺就教大家在Wps中制作下拉式导航菜单的操作方法。

Wps中制作下拉式导航菜单的操作步骤如下：一、制作出导航栏目1、打开你的演示文档或新建一个演示文档，在主菜单栏中找到“插入”选项，在插入下拉菜单中找到“形状”。

2、打开“形状”控制面板，在流程图中选择圆角矩形(你也可以根据自己的喜好选择其他图形，一般常用的都是矩形或圆角矩形)。

然后在打开的或新建的演示文档中，你认为合适的地方画出一个形状，调整大小，双击打开“设置对象格式”控制面板。

3、在“设置对象格式”控制面板中，设置好你喜欢的填充色，透明度，线条色(一般情况下线条色选择无线条色，看起来更自然)，尺寸，位置等，设置好后，点击右下角的确定按钮。

4、选中刚才设置好的形状，然后在上面单击鼠标右键，选择“复制”，再单击鼠标右键，选择“粘贴”，连续粘贴直至粘贴数目，满足你需要设置导航的幻灯片的个数(幻灯片数目较少时，可以将每一页都设置导航，即粘贴数目等于你的幻灯片数目)5、粘贴完成后，将粘贴产生的新形状，依次拖动到原来形状的下方，适当调整距离和位置。

然后用鼠标框选住所有形状图形，接着在主菜单栏里找到“绘图工具”菜单。

6、在绘图工具下拉菜单中，找到“对齐”功能，点击并展开，在其下拉菜单中，选择“水平居中”，然后再次框选住所有形状，再在“对齐”里面选择“纵向分布”，操作完成后，所有的形状图形就排列很整齐了，距离也都一样了。

7、接下来，我们选中第一个形状图形，单击鼠标右键，选择“添加文字”，第一个图形上可编辑为导航栏，下面每一个图形你可以根据自己的需要，在上面编辑出你的内容，建议最好和你导航将要跳转的幻灯片是关联的，知道将要跳转到哪一张幻灯片，以免在导航时出错。

PPT中如何制作一个演示文稿的导航菜单在制作PPT演示文稿时，一个清晰易用的导航菜单是非常重要的。

它可以帮助观众快速导航到演示文稿的不同部分，提高整个演示的效果和观看体验。

下面将介绍如何在PPT中制作一个演示文稿的导航菜单，以便您能够轻松地创建一个专业而有吸引力的演示文稿。

一、选择适合的布局和样式在制作导航菜单之前，首先要考虑整个演示的布局和样式。

选择一个适合您主题和风格的布局模板，并确保其整体风格与演示文稿一致。

您可以通过在"PPT设计"下选择不同的主题来更换样式，或根据需要自定义设计。

二、准备导航页面在开始制作导航菜单之前，您需要为每个部分准备一个导航页面。

导航页面可以是一个单独的幻灯片，也可以是一个整页的图表。

每个导航页面都应包括一个简短的标题和一个可点击的按钮，用于导航到相关部分的具体页面。

三、创建按钮链接在每个导航页面上，您需要创建与其他页面的链接按钮。

幸运的是，PPT提供了一个简单的方法来创建按钮链接。

1. 选择一个按钮形状：在导航页面上插入一种形状，比如一个矩形或一个圆形，作为您的导航按钮。

调整按钮的大小和位置以适应页面布局。

2. 添加链接：选择您创建的按钮形状，然后在"PPT菜单"上选择"插入"-"超链接"。

在弹出的对话框中，选择“幻灯片”，然后选择要链接到的目标页面。

点击“确定”。

3. 样式美化：您可以对按钮进行自定义样式美化，例如改变按钮的颜色、字体、边框等，以使其在演示中更吸引人。

四、添加返回按钮为了让用户能够方便地返回到导航菜单，您可以在每个部分的具体页面上添加一个返回按钮。

1. 插入一个按钮形状：在每个具体页面上插入一个按钮形状，用作返回按钮。

2. 添加链接：选择返回按钮，然后在"PPT菜单"上选择"插入"-"超链接"。

在弹出的对话框中，选择“幻灯片”，然后选择导航菜单的页面。

如何使用PowerPoint制作幻灯片导航菜单在这篇文章中，我将分享如何使用PowerPoint制作幻灯片导航菜单。

幻灯片导航菜单是一种方便的方式，可以帮助你在演示时快速访问特定的幻灯片，提高整体展示的流畅性和效果。

下面是一些简单的步骤来创建幻灯片导航菜单。

第一步，打开PowerPoint并创建一个新的幻灯片。

选择一个适合的布局，例如标题和内容布局。

第二步，进入“视图”选项卡，然后选择“幻灯片母板”。

在幻灯片母板视图中，你可以添加和编辑幻灯片导航菜单。

第三步，选择一个合适的幻灯片布局来作为导航菜单。

你可以选择包含导航菜单中想要显示的文本和链接的布局。

第四步，添加导航菜单中的文本和链接。

你可以使用文本框工具添加菜单项的文本，并使用超链接功能将它们链接到相应的幻灯片。

确保文本和链接都清晰可读，并易于点击。

第五步，设计导航菜单的外观。

你可以使用字体、颜色和样式选项来自定义导航菜单的外观，使其与你的幻灯片主题保持一致。

第六步，测试导航菜单。

在演示模式下，确保导航菜单工作正常，能够正确跳转到相应的幻灯片。

除了以上的基本步骤，还有一些附加的技巧和注意事项，可以帮助你更好地使用PowerPoint制作幻灯片导航菜单。

首先，确保导航菜单的布局简洁明了，易于阅读和操作。

避免使用过多的文本和链接，以免给观众带来混淆和困惑。

其次，注意导航菜单的位置和大小。

将导航菜单放置在屏幕适当的位置，不要遮挡或分散注意力。

同时，调整导航菜单的大小，使其不显得过于突兀或过于拥挤。

另外，为导航菜单添加视觉效果和动画效果是一种提升演示效果的方式。

你可以尝试使用渐变填充、阴影效果或缩放动画等来增添一些视觉吸引力和动态性。

最后，务必在演示之前进行多次测试和修改。

确保导航菜单的链接正确无误，并且在演示时能够流畅地导航到各个幻灯片。

通过以上的步骤和技巧，你应该能够轻松地制作一个令人印象深刻的幻灯片导航菜单。

记住，导航菜单的目的是使你的演示更加流畅和易于导航，因此确保它的设计和功能都符合你的目标和观众的需求。

第一步：建‎立一个无序‎列表我们‎先建立一个‎无序列表，‎来建立菜单‎的结构。

代‎码是：‎<ul>‎<li><‎a hre‎f="1"‎>首页</‎a></l‎i><l‎i><a ‎h ref=‎"2">产‎品介绍</‎a></l‎i><l‎i><a ‎h ref=‎"3">服‎务介绍</‎a></l‎i><l‎i><a ‎h ref=‎"4">技‎术支持</‎a></l‎i><l‎i><a ‎h ref=‎"5">立‎刻购买</‎a></l‎i><l‎i><a ‎h ref=‎"6">联‎系我们</‎a></l‎i></‎u l>‎第二步：隐‎藏li的默‎认样式因‎为看起来不‎是很好看，‎菜单通常都‎不需要li‎默认的圆点‎，我们给U‎L定义一个‎样式来消除‎这些圆点。

‎当然，‎为了更好的‎控制整个菜‎单，我们把‎菜单放在一‎个div里‎。

页面代码‎变成：‎<div ‎c lass‎="tes‎t"> <‎u l><‎l i><a‎href‎="1">‎首页</a‎></li‎><li‎><a h‎r ef="‎2">产品‎介绍</a‎></li‎><li‎><a h‎r ef="‎3">服务‎介绍</a‎></li‎><li‎><a h‎r ef="‎4">技术‎支持</a‎></li‎><li‎><a h‎r ef="‎5">立刻‎购买</a‎></li‎><li‎><a h‎r ef="‎6">联系‎我们</a‎></li‎></u‎l> </‎d iv>‎CSS定‎义为：‎.test‎ul{l‎i st-s‎t yle:‎n one;‎}说明‎：“.te‎s t ul‎”表示我要‎定义的样式‎将作用在t‎e st的层‎里的ul标‎签上。