解决方案：按钮与导航条的制作（PPT 精品）

网页美工设计商业典型实例 主讲:王智娟 按钮和导航条的设计与制作 教学目标 按钮的设计方法1、按钮概述 按钮是网站的导航元素，按钮分为两类。 一种是有提交功能的按钮－真正含义上的图标实现提交功能；标明当前操作的目的 一种是只是表示链接的按钮2、按钮的表现形式 可以大概总结为两种： 二、导航条1、导航条概述 网页导航条是指处于重要位置，用来显示跟链接站点 主要栏目的部分。网站的浏览者通过导航条了解站点 内容的分类，并使用导航条上的链接浏览站点的相关 信息。 导航条一般都进入页面更显眼的位置，以便于浏览者 的使用。导航栏是浏览者浏览网站时有效的指向标志 按钮与导航条是密不可分的，将按钮以一定的颜色排列组合到一起就产生了导航条。二者在 网页中的主要作用为链接相应目标文件，是网 页中必不可少的元素。他们的设计应与网页中 其他元素协调统一。 导航栏可分为框架导航、文本导航和截图导航等，根据导航栏放置的位置可分为横排导航栏和竖排导航栏。 横向导航条是网站中更常见的导航模式，横向导航符合他们往往的浏览习惯，同时也方便页面内容的排版。其特点 在于即使使用不合理，可能会给人以刻板，单调的觉得。 1011 3、纵向导航 纵向导航条也是网站中非常常见的导航方式。纵向导航条也较容易被浏览者接受，但其特点在于让页面内容的排版 变得相对困难。 12 13 14 15 16 4、自由排版的导航条 自由排版的导航条一般会出现在信息量相对较少，内容较为活泼的站点上。其特点在于简洁，灵活，能引起浏览者 的兴趣。但是即使使用不当，则会使浏览者进行不要的思 考，影响导航的效率。 17 导航栏的使用方法如下： 图片导航虽更简洁，但占用的空间较大，会妨碍网页开启的速度，不应多用。 导航栏目超过6个可考虑分两排进行排列，如果栏目过多可以多行排列。 对于内容丰富的网页，可以使用框架导航，以便浏览者在任何页面都能迅速切换至另一个栏目。 若运用JS、DHTML等动态隐藏层技术推动导航栏，需留意浏览器是否支持。 18 5、导航条的制作方式 通过Fireworks、Photoshop制作flash课件模板制作系列教程之按钮导航(上)flash课件模板制作系列教程之按钮导航(上)，然后导入至Dreamweaver中，添加链接 II. 通过Flash制作（组件） III. 通过Dreamweaver制作 Flash按钮IV. 通过Css+Div制作 19 三、Css+Div制作导航条 纵向导航（

++实现）20 #list li float:left; 21（1）横向导航(

+实现） #list li 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: "宋体"; 22#list a:hover color:#0000FF; background-color: #FF9933; 23

DOM DOM入门 DOM应用 DOM与浏览器 webui 理论常识 实战应用 高级方法 CSS css入门 css进阶 css高级技巧 XHTML XHTML参考手册 XHTML论坛

24 （2）纵向导航(

++实现） 注：对ID 为list的DIV定义了宽度，以及使它的right、bottom、left3条边框产生黑色的1px宽度的色块 #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; 25#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; 26#list h2 font-size:12px; margin: 0px; padding: 4px; background-color: #FFFF33; 27注：h1和h2元素在不加任何颜色的状况下，都拥有自己的一套默认颜色，采用大宽度、大字体 的方式那样不符合设计必须。因此在这里我们重新设计了margin及font-size元素，以防止 默认效果让其符合我们的设计目标。 3、设计按钮时要尽量减少以下设计禁忌： 图片按钮对键盘按下操作没有视觉差异。28 四、常见按钮颜色的制作 金属按钮29 本章总结 了解按钮在网站制作中的作用或者按钮的设计方法 掌握导航条的制作方式30