网页三剑客---按钮与导航条的制作ppt课件 .ppt

网页美工设计商业典型案例 1 第2章按钮和导航条的设计与制作 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 首页文章参考论坛联系 listli float left 1 横向导航 实现 15 listlia 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 宋体 16 lista hover color 0000FF background color FF9933 17 DOMDOM入门DOM应用DOM与浏览器webui理论知识实战应用高级技巧CSScss入门css进阶css高级技巧XHTMLXHTML参考手册XHTML论坛 2 纵向导航 实现 注 对ID为list的DIV定义了宽度 以及让它的right bottom left3条边框产生灰色的1px宽度的线条 18 list width 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 listh1 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 listh2 font size 12px margin 0px padding 4px background color FFFF33 注 h1和h2元素在不加任何样式的情况下 都拥有自己的一套默认样式 采用大边距 大字体的形式这样不符合设计需要 因此在这里我们重新设计了marg