制作首页导航条

本例介绍运用PS简单制作漂亮的水晶玻璃效果的网站导航条，主要通过圆角矩形工具、图层样式的设置来完成最终效果，简单易学，适合新手朋友了解图层样式的运用~~

更多初学者实例教程：/article/special/200805/special_21.html

来看看效果图：

PS：教程中涉及的颜色可以根据自己喜欢来设定，改变下参数，会做出大家意想不到的效果哦，所以请练习的朋友灵活运用！

制作步骤：

1：新建一个700*300的文件

2：用圆角矩形工具画一个稍等小一点的形状

3：转换为选区

4：新建一层，填充为任意颜色

5：给新建的层添加图层样式，1---投影效果

6：继续增加图层样式，2--内阴影

7：3---外发光

8：4--内发光

9：5--斜面和浮雕

10：6--改变斜面和浮雕里面的等高线

11：7--光泽

12：最后一个图层样式8--颜色叠加

13：效果如图

下面我们来制作导航条上的小按钮

14：用圆角矩形工具画如图大小的路径并转换为选区

15：新建一层，填充为任意色，拷贝刚刚那个图层的图层样式，在新建的图层中粘贴图层样式

16：效果如图

17：同样的方法做出其它

18：同样的方法做出圆形的 19：加入文字

20：改变下文字层的不透明度，降低到50%

21：加上别的装饰，也改变下不透明度

22：在加上网站，得到最终效果

对本文感兴趣的朋友请到这里提交作业，老师会为作业点评、加分：/viewthread.php?tid=286966

1

浙 江 金 融 职 业 学 院

教 案 首 页

周次： 1 日期 ： 课时序： 5-6

课 题 项目1 实战建站 任务1 制作网站首页 3-1.网站首页导航栏制作

教学目的

要 求  能够对网站首页导航栏进行制作；

 能够用FIREFOX浏览器调试网站首页导航栏效果。

重 点 1、用DIV+CSS设计制作网站首页导航栏。

难 点 1、用DIV+CSS设计制作网站首页导航栏。

教学过程

设 计

及

时间分配 一、复习并引入新课（10´）

复习网站首页头部制作过程，展示已经做好的网站首页导航栏效果，引入本次课内容。

二、讲授新课（65´）

1、 在PHOTOSHOP中观察分析网站首页导航栏效果；

2、 在DREAMWEAVER中制作网站首页导航栏；

(1) 制作网站首页导航栏的主体、左右圆角、渐变底色等；

(2) 制作网站首页各项菜单及分隔条。

3、 保存全部并在FIREFOX中测试效果。

二、总结布置作业（5´）

在自己的电脑上制作网站首页导航栏

教学场所教学方法 专业机房；

讲授法、演示教学法 使 用

教 具 多媒体、电子教室、PC机

作 业 在自己的电脑上制作网站首页导航栏。

课 后 记

授课教师： 2

基 本 内 容

任务1 制作网站首页 3-1.网站首页导航栏制作

一、教学目标

终极目标：1.能够对网站首页导航栏进行制作；2.能够用FIREFOX浏览器调试网站首页导航栏效果。

促成教学目标：1.理解代码编写中注释和规范格式的重要性；2.掌握用DIV+CSS制作网页及调试网页的方法；3.了解用背景图片来实现圆角效果的方法。

二、工作任务

(一) 在PHOTOSHOP中观察分析网站首页导航栏效果

(二) 在DREAMWEAVER中制作网站首页导航栏

1. 制作网站首页导航栏的主体、左右圆角、渐变底色等；

04导航条设计（一）

导航条的制作并不是几款按钮的简单组合，他们需要与logo和背景元素结合起来。通过学习，能够掌握导航条的制作全过程以及各种处理的方法。

1、 制作底板

第一步：新建一个图像文件，宽度为780象素，高度为100像素

第二步：按快捷键Ctrl+A，将图像全部选中，在工具箱中设置前景色（如：R：54，G：62，B：89），按快捷键Alt+Delete，将前景色填充到背景中，Ctrl+D取消选择。

第三步：新增一个图层，重新命名为“导航底图”，选取渐变工具，在工具选项栏上单击“渐变色条”，打开渐变编辑器对话框

第四步：选择黑色和白色渐变，选中左侧的色标，设置一种颜色（R：114，G：128，B：164）

第五步：选中右侧的色标，设置颜色（R：72，G：85，B：117），单击确定按钮，完成设置。

第六步：用鼠标从图像的上端拖动到下端，对图层进行渐变填充

第七步：选取多边形套索工具，在图像上单击鼠标，创建出一个选区

第八步：按Delete键，删除选取中的图形，显示出背景色

第九步：按Ctrl+D，取消选择，双击“导航底图”图层，打开图层样式对话框，选择“斜面和浮雕”样式，在“高光模式”中设置一种颜色（R：255，G：253，B：221），设置好其他参数

第十步：选择“投影”样式，设置不透明度为39%，设置好其他参数，单击确定按钮，完成图层样式的添加。

第十一步：选取多边形套索工具，在图像的上端选取一个选区，按Delete键，删除选区中的图形

第十二步：执行“选择”—〉“修改”—〉“收缩”命令，打开“收缩选区”对话框，设置“收缩量”为1像素

第十三步：新增一个图层，设置前景色为白色，按Alt+Dlete，将选取填充为白色，按Ctrl+D取消选择

第十四步：双击新增图层的缩略图，打开“图层样式”对话框，选择“渐变叠加”选项，单击“渐变色条”，打开“渐变编辑器”对话框，选中左侧的色标，设置一种颜色（R：96，G：98，B：120），选中右侧的色标，设置一种颜色（R：120，G：120，B：138），单击确定按钮，完成样式的设计。

Dreamweaver创建导航条教程

创建导航条

如果不使用框架，可以在每个页面设置导航条，导航条设一组链接按钮，供浏览者选择使用。按钮有多种形式，下边介绍由鼠标经过图像变换按钮的组成的导航条制作：(导航条在页面顶部)

“鼠标经过图像”是当访问者用鼠标指针指向该图像时，该图像发生变化。

“鼠标经过图像”由两个图片组成：页面最初载入时显示的原始图像，访问者将鼠标指针移到原始图像上时显示另一幅图像。

提示：事先您要制作好按钮图像，确保每个按钮的图像都具有相同的宽度和高度(以像素为单位)。

请执行以下操作：

打开主页 (index.htm)

在“文档”窗口中，将插入点放置在要显示导航条的位置。一般在导航条上边要放置一个横幅图像(logo)，导航条就安排在logo下边的位置。

选择“插入”>“图像对象”>“导航条”。弹出对话框如下：

在“插入导航条”对话框中，单击顶部加号“+”按钮，按照上图所示①②③④⑤对应的文本框，填入相应的文件。即完成了一个按钮的`添加。

然后，单击页面顶部的加号“+”按钮，添加另一个按钮。重复以上步骤，直至您所需的按钮添加完毕。

勾选“预先载入图像”，在对话框底部的“插入”菜单中，选中“水平”。勾选“使用表格”。

单击“确定”关闭该对话框，成功创建了导航条。

保存页面。

按F12，预览一下你的导航条，如果满意了，可以将该页面多次“另存为”其它页面，分别指定不同的名称。比如：p1.htm、p2.htm.....等。保存多少次视您的按钮数量而定。然后，分别打开其它页面进行编辑。

【注】：鼠标指针经过按钮，图像变化，只能在浏览器中看到效果。

【Dreamweaver创建导航条实用教程】