网站Banner设计实例

网站Banner设计实例

一、网站Banner设计实例

Banner也称为横幅广告，是互联网广告中最基本的广告形式。网站Banner可以位于网页顶部、中部或底部的任意一处。可以是GIF、JPG等格式的图像文件，同时还可使用Java等语言使其产生交互性，用Shockwave等插件工具增强表现力。

二级页面Banner最终效果如图所示。

二级页面Banner具体的操作步骤。

（1）执行“文件”| “新建”命令，新建文档。

（2）执行“视图”|“标尺”命令，显示出标尺，鼠标移动到标尺上，在图像的中间位置拖出标尺辅助线。

（3）工具箱中选择“钢笔工具”，在路径面板上新建“路径1”，绘制路径。（闭合路径）

（4）新建“图层1”，设置前景色为#e4fd7e，在“路径1”上单击右键，在快捷菜单中选择“填充路径”，设置填充路径效果如图所示。

（5）工具箱中选择“钢笔工具”，在路径面板上新建“路径2”，绘制路径。在图层面板上新建“图层2”，设置前景色为#f68e15，填充“路径2”。填充效果如图所示。

（6）工具箱中选择“钢笔工具”，在路径面板上新建“路径3”，绘制路径。新建“图层3”，工具箱中选择“渐变工具”，编辑渐变色，选择直线方式填充渐变色，方向从左到右，填充效果如图所示。

（7）图层面板上新建“图层4”，工具箱中选择“椭圆形选框工具”，按【shift】键绘制正圆形选区，在选区中填充白色，调整图层4的不透明度。

（8）同理绘制其它正圆形选区，填充白色并调整图层的不透明度，效果如图所示。

（9）设置前景色为#90090f，工具箱中选择“文字工具”，输入文字。复制LOGO图标。

（10）执行“文件”|“存储”命令，文件名：banner，扩展名：jpg，单击“保存”按钮。

二、网页按钮和导航栏设计实例

导航栏是组成网页的元素之一，它的任务是帮助浏览者在网站上方便地查找信息。同时，合理的导航栏可以让浏览者清楚自己浏览的网页在网站中的位置。导航栏的样式多样，常见的是简单的文字、图片、按钮，还可以是下拉菜单导航。

1.按钮设计

按钮在网页中的应用较广泛，很多导航栏由按钮组成，先介绍一下常见的按钮设计方法。

【案例】水晶按钮设计

（1）执行“文件”|“新建”命令，新建文档。（图像大小200×50像素）

（2）新建“图层1”，重命名为“按钮”。工具箱中选择“矩形工具”，选项卡栏选择“填充像素”，绘制矩形图像。

（3）双击“按钮”图层，弹出“图层样式”对话框选择“渐变叠加”选项，对该选项进行相应的设置，如图所示。

（4）在对话框中的“样式”列表框中选择“内发光”选项，对该选项进行相应的设置，如图所示。

5）在对话框中的“样式”列表框中选择“描边”选项，对该选项进行相应的设置，如图所示。

（6）最终效果如图所示。

三、导航栏设计

网站中的导航栏在各个页面中的位置基本上是固定的。导航栏常见的位置一般有4种：在网页的左侧、右侧、顶部、底部。在同一页面上出现多种导航时就要合理地运用，协调一致。

下图所示为本书网站首页导航栏，网站首页导航栏全部是文字链接，只需在Dreamweaver 制作网页时直接输入文字即可。

如图所示为网站二级页面左侧导航栏。

设计左侧导航栏的具体操作步骤如下。

（1）执行“文件”| “新建”命令，新建文档。（图像大小160×60像素）

（2）新建“图层1”，工具箱中选“单行选框工具”，创建单行选区。

（3）设置前景色为#87c1ea，背景色为白色#ffffff，选择“渐变工具”，选择“前景色到背景色的渐变”，以直线方式从左到右填充渐变色。

（4）工具箱中选择“矩形选框工具”，选项卡栏中样式：固定大小，宽度：160px，高度：2px。在文档上创建矩形选区，如图所示。

（5）执行“编辑”|“定义图案”命令，弹出“图案名称”对话框，单击按钮。

（6）单击图层面板上的按钮，新建“图层2”。工具箱中选择“油漆桶工具”，填充该图案。

（7）工具箱中选择“单列选框工具”，在文档的最右边创建单列选区，按【Alt+Delete】组合键填充前景色，如图所示。

（8）执行“文件”|“存储”命令，文件名：beijing2，扩展名：gif，单击“保存”按钮。

（9）新建“图层3”，工具箱中选择“圆角矩形工具”，选项卡栏选择“填充像素”，圆角半径：4px。

（10）当前层为“图层3”，执行“图层”|“图层样式”|“投影”命令，弹出“图层样式”对话框，在对话框中进行相应的设置，如图所示。

11）在对话框中的样式的“样式”列表框中选择“斜面和浮雕”选项，在对话框中进行相应的设置，如图所示。

（12）单击【确定】按钮，设置样式后的效果如图所示。

（13）输入文字。并设计其它的按钮。（也可以只设计一个背景按钮，以后在Dreamweaver 中作为背景，再输入文字。

（13）执行“文件”|“存储为”命令，文件名：beijing1，扩展名：gif，单击“保存”按钮。

四、二级页面特效文字效果如图所示。

设计步骤。

（1）执行“文件”| “新建”命令，新建文档。（图像大小550×50像素）

（2）执行“视图”|“标尺”命令，显示出标尺。

（3）设置前景色为#75abff,背景色为白色#ffffff，新建“图层1”，参考2.2.4节中导航栏背景设计，制作出如图所示图像。

（4）当前层为“图层1”，为“图层1”添加图层蒙板。

（5）工具箱中选择“圆角矩形工具”。

（6）设置前景色为白色#ffffff，在图层蒙板上绘制圆角矩形，如图所示。

（7）新建“图层2”，工具箱中选择“椭圆形选框工具”，按【Shift】键绘制正圆形选区，设置前景色为#75abff，按【Alt+Del】组合键填充到选区中。按【Ctrl+D】组合键取消选区。

（8）将“图层2”用鼠标拖至图层面板上的新建按钮上，得到“图层2副本”，将该图层的不透明度调到70%。

（9）同步骤（8），设置“图层2副本2”的图层不透明度为35%，效果如图所示。

（10）执行“文件”|“保存”命令，文件名：bankuai，格式：jpg，单击“保存”按钮。

（11）下面制作文字效果。执行“文件”| “新建”命令，新建文档。

（12）设置前景色为#da1982，工具箱中选择“文字工具”，输入文字，选项卡栏中选择变形文字，为文字添加变形效果，参数设置如图所示。