按钮与导航条的制作
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
7
2、横向导航
横向导航条是网页中最常用的导航方式，横向导航 符合人们通常的浏览习惯，同时也便于页面内容的 排版。其缺点在于如果使用不合理，可能会给人以 呆板，单调的感觉。
8
9
10
3、纵向导航
纵向导航条也是网页中比较常用的导航形式。纵向 导航条也较易于被浏览者接受，但其缺点在于使页 面内容的排版变得相对困难。
}
25
#list h2 { font-size: 12px; margin: 0px; padding: 4px; background-color: #FFFF33;
}
注：h1和h2元素在不加任何样式的情况下，都拥有自己的一套默认样式，采用大边距、大字体 的形式这样不符合设计需要。因此在这里我们重新设计了margin及font-size元素，以消除 默认效果使其符合我们的设计目标。
19
（1）横向导航(<div>+<ul>实现）
<div id="list"> <ul> <li><a href="">首页</a></li> <li><a href="#">文章</a></li> <li><a href="#">参考</a></li> <li><a href="#">论坛</a></li> <li><a href="mailto://yongmei2003@">联系</a></li> </ul> </div> #list li {
的使用。导航栏是浏览者浏览网页时有效的指向标 志
6
按钮与导航条是密不可分的，将按钮以一定的 形状排列组合到一起就形成了导航条。二要与网页中 其他元素协调统一。
导航栏可分为框架导航、文本导航和图片导航等， 根据导航栏放置的位置可分为横排导航栏和竖排导 航栏。
}
24
#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;
11
12
13
14
15
4、自由排版的导航条
自由排版的导航条一般会出现在信息量相对较少， 内容较为活泼的站点上。其优点在于新颖，灵活， 能引起浏览者的兴趣。但是如果使用不当，则会使 浏览者进行不要的思考，影响导航的效率。
16
导航栏的使用原则如下：
图片导航虽很美观，但占用的空间较大，会影响网 页打开的速度，不应多用。
注：对ID 为list的 DIV定义了宽度，以及让它的right、bottom、left3条边框产生灰色的1px宽度的线条
23
#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;
}
21
#list a:hover { color: #0000FF; background-color: #FF9933;
}
22
（2）纵向导航(<div>+<h1>+<h2> 实现） <div id="list">
<h1>DOM</h1> <h2>DOM入门</h2> <h2>DOM应用</h2> <h2>DOM与浏览器</h2> <h1>webui</h1> <h2>理论知识</h2> <h2>实战应用</h2> <h2>高级技巧</h2> <h1>CSS</h1> <h2>css入门</h2> <h2>css进阶</h2> <h2>css高级技巧</h2> <h1>XHTML</h1> <h2> XHTML参考手册</h2> <h2> XHTML论坛</h2> </div>
26
3、设计按钮时应尽量避免以下设计禁忌： 同一页面包含重复功能的按钮； 将复选框用作单选按钮； 单选按钮之间间隔太大； 取消按钮无法真正取消操作； 返回按钮不能达到预期的目的； 图片按钮对鼠标按下操作没有视觉变化。
27
4、常见按钮样式的制作
简洁按钮 迷你按钮 水晶按钮 塑料按钮 木纹按钮 金属按钮
一种是仅仅表示链接的按钮
2、按钮的表现形式 可以大致总结为两种：
系统标准按钮 使用图片自制的按钮
4
5
2.2 导航条
1、导航条概述
网页导航条是指居于重要位置，用来显示和链接站点 主要栏目的部分。网站的浏览者通过导航条了解站点 内容的分类，并使用导航条上的链接浏览站点的相关 信息。
导航条一般都处于页面最醒目的位置，以方便浏览者
float: left; }
20
#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: "宋体";
多排导航条应在导航栏目很多的情况下使用。 导航栏目超过6个可考虑分两排进行排列，如果栏
目过多可以多行排列。 对于内容丰富的网站，可以使用框架导航，以便浏
览者在任何页面都可快速切换到另一个栏目。 若利用JS、DHTML等动态隐藏层技术实现导航栏，
需注意浏览器是否支持。
17
5、导航条的制作方法
网页美工设计商业典型案例
主讲:麻永梅
第2章 按钮和导航条的设计与制作
本章目标
熟悉按钮的设计原则并掌握按钮的制作方法 掌握导航条的制作方法
3
2.1 按钮的设计原则
1、按钮概述 按钮是网页的导航元素，按钮分为两类。
一种是有提交功能的按钮－真正意义上的按钮 实现提交功能；标明当前操作的目的
I. 通过Fireworks、Photoshop制作，然后导入到 Dreamweaver中，添加链接
II. 通过Flash制作（组件） III. 通过Dreamweaver制作
➢ 直接输入 ➢ Flash文本 ➢ Flash按钮
IV. 通过Css+Div制作
18
IV、Css+Div制作导航条
横向导航(<div>+<ul>实现） 纵向导航（<div>+<h1>+<h2>实现）
28
本章总结
了解按钮在网站制作中的作用以及按钮的设计原则 掌握常用按钮的制作方法 掌握导航条的制作方法
29
2、横向导航
横向导航条是网页中最常用的导航方式，横向导航 符合人们通常的浏览习惯，同时也便于页面内容的 排版。其缺点在于如果使用不合理，可能会给人以 呆板，单调的感觉。
8
9
10
3、纵向导航
纵向导航条也是网页中比较常用的导航形式。纵向 导航条也较易于被浏览者接受，但其缺点在于使页 面内容的排版变得相对困难。
}
25
#list h2 { font-size: 12px; margin: 0px; padding: 4px; background-color: #FFFF33;
}
注：h1和h2元素在不加任何样式的情况下，都拥有自己的一套默认样式，采用大边距、大字体 的形式这样不符合设计需要。因此在这里我们重新设计了margin及font-size元素，以消除 默认效果使其符合我们的设计目标。
19
（1）横向导航(<div>+<ul>实现）
<div id="list"> <ul> <li><a href="">首页</a></li> <li><a href="#">文章</a></li> <li><a href="#">参考</a></li> <li><a href="#">论坛</a></li> <li><a href="mailto://yongmei2003@">联系</a></li> </ul> </div> #list li {
的使用。导航栏是浏览者浏览网页时有效的指向标 志
6
按钮与导航条是密不可分的，将按钮以一定的 形状排列组合到一起就形成了导航条。二要与网页中 其他元素协调统一。
导航栏可分为框架导航、文本导航和图片导航等， 根据导航栏放置的位置可分为横排导航栏和竖排导 航栏。
}
24
#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;
11
12
13
14
15
4、自由排版的导航条
自由排版的导航条一般会出现在信息量相对较少， 内容较为活泼的站点上。其优点在于新颖，灵活， 能引起浏览者的兴趣。但是如果使用不当，则会使 浏览者进行不要的思考，影响导航的效率。
16
导航栏的使用原则如下：
图片导航虽很美观，但占用的空间较大，会影响网 页打开的速度，不应多用。
注：对ID 为list的 DIV定义了宽度，以及让它的right、bottom、left3条边框产生灰色的1px宽度的线条
23
#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;
}
21
#list a:hover { color: #0000FF; background-color: #FF9933;
}
22
（2）纵向导航(<div>+<h1>+<h2> 实现） <div id="list">
<h1>DOM</h1> <h2>DOM入门</h2> <h2>DOM应用</h2> <h2>DOM与浏览器</h2> <h1>webui</h1> <h2>理论知识</h2> <h2>实战应用</h2> <h2>高级技巧</h2> <h1>CSS</h1> <h2>css入门</h2> <h2>css进阶</h2> <h2>css高级技巧</h2> <h1>XHTML</h1> <h2> XHTML参考手册</h2> <h2> XHTML论坛</h2> </div>
26
3、设计按钮时应尽量避免以下设计禁忌： 同一页面包含重复功能的按钮； 将复选框用作单选按钮； 单选按钮之间间隔太大； 取消按钮无法真正取消操作； 返回按钮不能达到预期的目的； 图片按钮对鼠标按下操作没有视觉变化。
27
4、常见按钮样式的制作
简洁按钮 迷你按钮 水晶按钮 塑料按钮 木纹按钮 金属按钮
一种是仅仅表示链接的按钮
2、按钮的表现形式 可以大致总结为两种：
系统标准按钮 使用图片自制的按钮
4
5
2.2 导航条
1、导航条概述
网页导航条是指居于重要位置，用来显示和链接站点 主要栏目的部分。网站的浏览者通过导航条了解站点 内容的分类，并使用导航条上的链接浏览站点的相关 信息。
导航条一般都处于页面最醒目的位置，以方便浏览者
float: left; }
20
#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: "宋体";
多排导航条应在导航栏目很多的情况下使用。 导航栏目超过6个可考虑分两排进行排列，如果栏
目过多可以多行排列。 对于内容丰富的网站，可以使用框架导航，以便浏
览者在任何页面都可快速切换到另一个栏目。 若利用JS、DHTML等动态隐藏层技术实现导航栏，
需注意浏览器是否支持。
17
5、导航条的制作方法
网页美工设计商业典型案例
主讲:麻永梅
第2章 按钮和导航条的设计与制作
本章目标
熟悉按钮的设计原则并掌握按钮的制作方法 掌握导航条的制作方法
3
2.1 按钮的设计原则
1、按钮概述 按钮是网页的导航元素，按钮分为两类。
一种是有提交功能的按钮－真正意义上的按钮 实现提交功能；标明当前操作的目的
I. 通过Fireworks、Photoshop制作，然后导入到 Dreamweaver中，添加链接
II. 通过Flash制作（组件） III. 通过Dreamweaver制作
➢ 直接输入 ➢ Flash文本 ➢ Flash按钮
IV. 通过Css+Div制作
18
IV、Css+Div制作导航条
横向导航(<div>+<ul>实现） 纵向导航（<div>+<h1>+<h2>实现）
28
本章总结
了解按钮在网站制作中的作用以及按钮的设计原则 掌握常用按钮的制作方法 掌握导航条的制作方法
29