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

1、网页美工设计商业典型案例,第2章按钮和导航条的设计与制作,3,熟悉按钮的设计原则并掌握按钮的制作方法 掌握导航条的制作方法,本章目标,4,任务一、 按钮的设计原则,1、按钮概述 按钮是网页的导航元素，按钮分为两类。 一种是有提交功能的按钮真正意义上的按钮 实现提交功能；标明当前操作的目的 一种是仅仅表示链接的按钮 2、按钮的表现形式 可以大致总结为两种： 系统标准按钮 使用图片自制的按钮,5,3、设计按钮时应尽量避免以下设计禁忌： 同一页面包含重复功能的按钮； 将复选框用作单选按钮； 单选按钮之间间隔太大； 取消按钮无法真正取消操作； 返回按钮不能达到预期的目的； 图片按钮对鼠标按下操作没有视

2、觉变化,6,简洁按钮,迷你按钮,水晶按钮,塑料按钮,木纹按钮,金属按钮,4、常见按钮样式的制作,7,8,任务二、 导航条的制作,1、导航条概述 按钮与导航条是密不可分的，将按钮以一定的形状排列组合到一起就形成了导航条。二者在网页中的主要作用为链接相应目标文件，是网页中必不可少的元素。他们的设计要与网页中其他元素协调统一,9,10,11,12,2、导航条的制作方法,通过Fireworks、Photoshop制作，然后导入到Dreamweaver中，添加链接 通过Flash制作（组件） 通过Dreamweaver制作 直接输入 Flash文本 Flash按钮 通过Css+Div制作,13,IV、C

3、ss+Div制作导航条,横向导航(+实现） 纵向导航（+实现,14,首页 文章 参考 论坛 联系 #list li float: left;,1）横向导航(+实现,15,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: 4

4、px;检索或设置对象四边的内补丁 font-family: 宋体;,16,list a:hover color: #0000FF; background-color: #FF9933;,17,DOM DOM入门 DOM应用 DOM与浏览器 webui 理论知识 实战应用 高级技巧 CSS css入门 css进阶 css高级技巧 XHTML XHTML参考手册 XHTML论坛,2）纵向导航(+实现,注：对ID 为list的 DIV定义了宽度，以及让它的right、bottom、left3条边框产生灰色的1px宽度的线条,18,list width: 100px; border-right-wid

5、th: 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,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;,注：h1和h2元素在不加任何样式的情况下，都拥有自己的一套默认样式，采用大边距、大字体的形式这样不符合设计需要。因此在这里我们重新设计