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

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