网站Banner设计实例.docVIP

网站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