按钮和导航条的制作.pptVIP

网页美工设计商业典型案例;按钮和导航条的设计与制作;教学目标;主要内容;一、 按钮的设计原则;*;二、 导航条;按钮与导航条是密不可分的，将按钮以一定的形状排列组合到一起就形成了导航条。二者在网页中的主要作用为链接相应目标文件，是网页中必不可少的元素。他们的设计要与网页中其他元素协调统一。 导航栏可分为框架导航、文本导航和图片导航等，根据导航栏放置的位置可分为横排导航栏和竖排导航栏。 ;2、横向导航;*;*;3、纵向导航;*;*;*;*;4、自由排版的导航条;导航栏的使用原则如下：;5、导航条的制作方法;三、Css+Div制作导航条;div id=list ul lia href=首页/a/li lia href=#文章/a/li lia href=#参考/a/li lia href=#论坛/a/li lia href=mailto://yongmei2003@126.com联系/a/li /ul /div #list li { float: left; };#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: 宋体; };#list a:hover { color: #0000FF; background-color: #FF9933; };div id=list h1DOM/h1 h2DOM入门/h2 h2DOM应用/h2 h2DOM与浏览器/h2 h1webui/h1 h2理论知识/h2 h2实战应用/h2 h2高级技巧/h2 h1CSS/h1 h2css入门/h2 h2css进阶/h2 h2css高级技巧/h2 h1XHTML/h1 h2 XHTML参考手册/h2 h2 XHTML论坛/h2 /div;#list { width: 100px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-right-color: #FF0000; border-bottom-color: #FF0000; border-left-color: #FF0000; };#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; };#list h2 { font-size: 12px; margin: 0px; padding: 4px; background-color: #FFFF33; };3、设计按钮时应尽量避免以下设计禁忌： 同一页面包含重复功能的按钮； 将复选框用作单选按钮； 单选按钮之间间隔太大； 取消按钮无法真正取消操作； 返回按钮不能达到预期的目的； 图片按钮对鼠标按下操作没有视觉变化。;四、常见按钮样式的制作;本章总结