网页三剑客---按钮与导航条的制作PPT优秀课件

1、1 2 3 n熟悉按钮的设计原则并掌握按钮的制作方法熟悉按钮的设计原则并掌握按钮的制作方法 n掌握导航条的制作方法掌握导航条的制作方法 本章目标本章目标 4 任务一、任务一、 按钮的设计原则按钮的设计原则 1 1、按钮概述、按钮概述 按钮是网页的导航元素，按钮分为两类。按钮是网页的导航元素，按钮分为两类。 o一种是有提交功能的按钮真正意义上的按钮一种是有提交功能的按钮真正意义上的按钮 实现提交功能；标明当前操作的目的实现提交功能；标明当前操作的目的 o一种是一种是仅仅表示链接的按钮仅仅表示链接的按钮 2、按钮的表现形式、按钮的表现形式 可以大致总结为两种：可以大致总结为两种： o系统标准按钮系

2、统标准按钮 o使用图片自制的按钮使用图片自制的按钮 5 3、设计按钮时应尽量避免以下设计禁忌、设计按钮时应尽量避免以下设计禁忌： n同一页面包含重复功能的按钮；同一页面包含重复功能的按钮； n将复选框用作单选按钮；将复选框用作单选按钮； n单选按钮之间间隔太大；单选按钮之间间隔太大； n取消按钮无法真正取消操作；取消按钮无法真正取消操作； n返回按钮不能达到预期的目的；返回按钮不能达到预期的目的； n图片按钮对鼠标按下操作没有视觉变化。图片按钮对鼠标按下操作没有视觉变化。 6 简洁按钮简洁按钮 迷你按钮迷你按钮 水晶按钮水晶按钮 塑料按钮塑料按钮 木纹按钮木纹按钮 金属按钮金属按钮 4 4、常

3、见按钮样式的制作、常见按钮样式的制作 7 8 任务二、任务二、 导航条的制作导航条的制作 1、导航条概述、导航条概述 按钮与导航条是密不可分的，将按钮以一定按钮与导航条是密不可分的，将按钮以一定 的形状排列组合到一起就形成了导航条。二的形状排列组合到一起就形成了导航条。二 者在网页中的主要作用为链接相应目标文件，者在网页中的主要作用为链接相应目标文件， 是网页中必不可少的元素。他们的设计要与是网页中必不可少的元素。他们的设计要与 网页中其他元素协调统一。网页中其他元素协调统一。 9 10 11 12 2 2、导航条的制作方法、导航条的制作方法 n通过通过Fireworks、Photoshop制

4、作，然后导入制作，然后导入 到到Dreamweaver中，添加链接中，添加链接 n通过通过Flash制作（组件）制作（组件） n通过通过Dreamweaver制作制作 直接输入直接输入 Flash文本文本 Flash按钮按钮 n通过通过Css+Div制作制作 13 IVIV、Css+DivCss+Div制作导航条制作导航条 n横向导航横向导航(+实现）实现） n纵向导航（纵向导航（+实现）实现） 14 首页首页 文章文章 参考参考 论坛论坛 联系联系 #list li float: left; （1 1）横向导航）横向导航(+(+实现）实现） 15 #list li a color: #FF0

5、000; text-decoration: none; background-color: #CCFF99; text-align: center; display: block; /*设置或检索对象是否及如何显示设置或检索对象是否及如何显示,为对象之后添加新行为对象之后添加新行 */ height: 22px; width: 97px; margin-left: 2px; 检索或设置对象四边的外补丁检索或设置对象四边的外补丁 padding-top: 4px;检索或设置对象四边的内补丁检索或设置对象四边的内补丁 font-family: 宋体宋体; 16 #list a:hover colo

6、r: #0000FF; background-color: #FF9933; 17 DOM DOM入门入门 DOM应用应用 DOM与浏览器与浏览器 webui 理论知识理论知识 实战应用实战应用 高级技巧高级技巧 CSS css入门入门 css进阶进阶 css高级技巧高级技巧 XHTML XHTML参考手册参考手册 XHTML论坛论坛 （2 2）纵向导航）纵向导航(+(+实现）实现） 注：对注：对ID ID 为为listlist的的 DIVDIV定义了宽度，以及让它的定义了宽度，以及让它的rightright、bottombottom、left3left3条边框产生灰色的条边框产生灰色的1px

7、1px宽度的线条宽度的线条 18 #list width: 100px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-right-style: solid; 实线边框实线边框 /double border-bottom-style: solid; border-left-style: solid; border-right-color: #FF0000; border-bottom-color: #FF0000; border-left-color: #FF0000; 19

8、#list h1 font-size: 12px; font-weight: bold; background-color: #99FF33; margin: 0px; padding: 4px; border-top-width: 1px; border-top-style: solid; border-top-color: #FF0000; 20 #list h2 font-size: 12px; margin: 0px; padding: 4px; background-color: #FFFF33; 注：注：h1h1和和h2h2元素在不加任何样式的情况下，都拥有自己的一套默认样式，采用元素在不加任何样式的情况下，都拥有自己的一套默认样式，采用 大边距、大字体的形式这样不符合设计需要。因此在这里我们重新设计了大边距、大字体的形式这样不符合设计需要。因此在这里我们重新设计了 marginmargin及及font-sizefont-size元素，以消除默认效果使其符合我们的设计目标。元素，以消除默认效果使其符合我们的设计目标。 21 n了解按钮在网站制作中的作用以及按钮的设计了解按钮在网站制作中的作用以及按钮的设计 原则原则 n掌握常用按钮的制作方法掌握常用按钮的制作方法 n掌握导航条的制作方法掌握导航条的制作方法 本章总结本章总结 个人观点供参考，欢迎讨论