网页三剑客-按钮与导航条的制作.ppt

网页美工设计商业典型案例网页美工设计商业典型案例12n熟悉按钮的设计原则并掌握按钮的制作方法熟悉按钮的设计原则并掌握按钮的制作方法n掌握导航条的制作方法掌握导航条的制作方法本章目标本章目标3任务一、任务一、按钮的设计原则按钮的设计原则1 1、按钮概述、按钮概述 按钮是网页的导航元素，按钮分为两类。按钮是网页的导航元素，按钮分为两类。o一种是有提交功能的按钮真正意义上的按钮一种是有提交功能的按钮真正意义上的按钮 实现提交功能；标明当前操作的目的实现提交功能；标明当前操作的目的 o一种是一种是仅仅表示链接的按钮仅仅表示链接的按钮2、按钮的表现形式、按钮的表现形式 可以大致总结为两种：可以大致总结为两种：o系统标准按钮系统标准按钮o使用图片自制的按钮使用图片自制的按钮 43、设计按钮时应尽量避免以下设计禁忌、设计按钮时应尽量避免以下设计禁忌：n同一页面包含重复功能的按钮；同一页面包含重复功能的按钮；n将复选框用作单选按钮；将复选框用作单选按钮；n单选按钮之间间隔太大；单选按钮之间间隔太大；n取消按钮无法真正取消操作；取消按钮无法真正取消操作；n返回按钮不能达到预期的目的；返回按钮不能达到预期的目的；n图片按钮对鼠标按下操作没有视觉变化。图片按钮对鼠标按下操作没有视觉变化。5简洁按钮简洁按钮迷你按钮迷你按钮水晶按钮水晶按钮塑料按钮塑料按钮木纹按钮木纹按钮金属按钮金属按钮4 4、常见按钮样式的制作、常见按钮样式的制作67任务二、任务二、导航条的制作导航条的制作1、导航条概述、导航条概述 按按钮钮与与导导航航条条是是密密不不可可分分的的，将将按按钮钮以以一一定定的的形形状状排排列列组组合合到到一一起起就就形形成成了了导导航航条条。二二者者在在网网页页中中的的主主要要作作用用为为链链接接相相应应目目标标文文件件，是是网网页页中中必必不不可可少少的的元元素素。他他们们的的设设计计要要与与网页中其他元素协调统一。网页中其他元素协调统一。8910112 2、导航条的制作方法、导航条的制作方法I.通通过过Fireworks、Photoshop制制作作，然然后后导导入入到到Dreamweaver中，添加链接中，添加链接II.通过通过Flash制作（组件）制作（组件）III.通过通过Dreamweaver制作制作直接输入直接输入Flash文本文本Flash按钮按钮IV.通过通过Css+Div制作制作12IVIV、Css+DivCss+Div制作导航条制作导航条n横向导航横向导航(+实现）实现）n纵向导航（纵向导航（+实现）实现）13 首页首页 文章文章 参考参考 论坛论坛 联系联系#list li float:left;（1 1）横向导航）横向导航(+(+实现）实现）14#list li a color:#FF0000;text-decoration:none;background-color:#CCFF99;text-align:center;display:block;/*设置或检索对象是否及如何显示设置或检索对象是否及如何显示,为对象之后添加新行为对象之后添加新行*/height:22px;width:97px;margin-left:2px;检索或设置对象四边的外补丁检索或设置对象四边的外补丁 padding-top:4px;检索或设置对象四边的内补丁检索或设置对象四边的内补丁 font-family:宋体宋体;15#list a:hover color:#0000FF;background-color:#FF9933;16 DOM DOM入门入门 DOM应用应用 DOM与浏览器与浏览器 webui 理论知识理论知识 实战应用实战应用 高级技巧高级技巧 CSS css入门入门 css进阶进阶 css高级技巧高级技巧 XHTML XHTML参考手册参考手册 XHTML论坛论坛（2 2）纵向导航）纵向导航(+(+实现）实现）注：对注：对ID ID 为为listlist的的 DIV DIV定义了宽度，以及让它的定义了宽度，以及让它的rightright、bottombottom、left3left3条边框产生灰色的条边框产生灰色的1px1px宽度的线条宽度的线条17#list width:100px;border-right-width:1px;border-bottom-width:1px;border-left-width:1px;border-right-style:solid;实线边框实线边框/doubleborder-bottom-style:solid;border-left-style:solid;border-right-color:#FF0000;border-bottom-color:#FF0000;border-left-color:#FF0000;18#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;19#list h2 font-size:12px;margin:0px;padding:4px;background-color:#FFFF33;注：注：h1h1和和h2h2元素在不加任何样式的情况下，都拥有自己的一套默认样式，采用大元素在不加任何样式的情况下，都拥有自己的一套默认样式，采用大边距、大字体的形式这样不符合设计需要。因此在这里我们重新设计了边距、大字体的形式这样不符合设计需要。因此在这里我们重新设计了marginmargin及及font-sizefont-size元素，以消除默认效果使其符合我们的设计目标。元素，以消除默认效果使其符合我们的设计目标。20n了了解解按按钮钮在在网网站站制制作作中中的的作作用用以以及及按按钮钮的的设设计计原则原则n掌握常用按钮的制作方法掌握常用按钮的制作方法n掌握导航条的制作方法掌握导航条的制作方法本章总结本章总结21