网站Banner设计实例.pdf

《网站Banner设计实例.pdf》由会员上传分享，免费在线阅读，更多相关内容在工程资料-天天文库。

1、精品文档网站Banner设计实例一、网站Banner设计实例Banner也称为横幅广告，是互联网广告中最基本的广告形式。网站Banner可以位于网页顶部、中部或底部的任意一处。可以是GIF、JPG等格式的图像文件，同时还可使用Java等语言使其产生交互性，用Shockwave等插件工具增强表现力。二级页面Banner最终效果如图所示。二级页面Banner具体的操作步骤。（1）执行“文件”

2、“新建”命令，新建文档。（2）执行“视图”

3、“标尺”命令，显示出标尺，鼠标移动到标尺上，在图像的中间位置拖出标尺辅助线。（3

4、）工具箱中选择“钢笔工具”，在路径面板上新建“路径1”，绘制路径。（闭合路径）（4）新建“图层1”，设置前景色为#e4fd7e，在“路径1”上单击右键，在快捷菜单中选择“填充路径”，设置填充路径效果如图所示。1欢迎下载。精品文档（5）工具箱中选择“钢笔工具”，在路径面板上新建“路径2”，绘制路径。在图层面板上新建“图层2”，设置前景色为#f68e15，填充“路径2”。填充效果如图所示。（6）工具箱中选择“钢笔工具”，在路径面板上新建“路径3”，绘制路径。新建“图层3”，工具箱中选择“渐变工具”，编辑渐变色，选择

5、直线方式填充渐变色，方向从左到右，填充效果如图所示。2欢迎下载。精品文档（7）图层面板上新建“图层4”，工具箱中选择“椭圆形选框工具”，按【shift】键绘制正圆形选区，在选区中填充白色，调整图层4的不透明度。（8）同理绘制其它正圆形选区，填充白色并调整图层的不透明度，效果如图所示。（9）设置前景色为#90090f，工具箱中选择“文字工具”，输入文字。复制LOGO图标。（10）执行“文件”

6、“存储”命令，文件名：banner，扩展名：jpg，单击“保存”按钮。二、网页按钮和导航栏设计实例导航栏是组成网页的元素之

7、一，它的任务是帮助浏览者在网站上方便地查找信息。同时，合理的导航栏可以让浏览者清楚自己浏览的网页在网站中的位置。导航栏的样式多样，常见的是简单的文字、图片、按钮，还可以是下拉菜单导航。1.按钮设计按钮在网页中的应用较广泛，很多导航栏由按钮组成，先介绍一下常见的按钮设计方法。【案例】水晶按钮设计（1）执行“文件”

8、“新建”命令，新建文档。（图像大小200×50像素）（2）新建“图层1”，重命名为“按钮”。工具箱中选择“矩形工具”，选项卡栏选择“填充像素”，绘制矩形图像。（3）双击“按钮”图层，弹出“图层样式”对话

9、框选择“渐变叠加”选项，对该选项进行相应的设置，如图所示。3欢迎下载。精品文档（4）在对话框中的“样式”列表框中选择“内发光”选项，对该选项进行相应的设置，如图所示。5）在对话框中的“样式”列表框中选择“描边”选项，对该选项进行相应的设置，如图所示。4欢迎下载。精品文档（6）最终效果如图所示。三、导航栏设计网站中的导航栏在各个页面中的位置基本上是固定的。导航栏常见的位置一般有4种：在网页的左侧、右侧、顶部、底部。在同一页面上出现多种导航时就要合理地运用，协调一致。下图所示为本书网站首页导航栏，网站首页导航栏全部

10、是文字链接，只需在Dreamweaver制作网页时直接输入文字即可。如图所示为网站二级页面左侧导航栏。设计左侧导航栏的具体操作步骤如下。5欢迎下载。精品文档（1）执行“文件”

11、“新建”命令，新建文档。（图像大小160×60像素）（2）新建“图层1”，工具箱中选“单行选框工具”，创建单行选区。（3）设置前景色为#87c1ea，背景色为白色#ffffff，选择“渐变工具”，选择“前景色到背景色的渐变”，以直线方式从左到右填充渐变色。（4）工具箱中选择“矩形选框工具”，选项卡栏中样式：固定大小，宽度：160px，高度

12、：2px。在文档上创建矩形选区，如图所示。（5）执行“编辑”

13、“定义图案”命令，弹出“图案名称”对话框，单击按钮。（6）单击图层面板上的按钮，新建“图层2”。工具箱中选择“油漆桶工具”，填充该图案。（7）工具箱中选择“单列选框工具”，在文档的最右边创建单列选区，按【Alt+Delete】组合键填充前景色，如图所示。（8）执行“文件”

14、“存储”命令，文件名：beijing2，扩展名：gif，单击“保存”按钮。（9）新建“图层3”，工具箱中选择“圆角矩形工具”，选项卡栏选择“填充像素”，圆角半径：4px。（10）当

15、前层为“图层3”，执行“图层”

16、“图层样式”

17、“投影”命令，弹出“图层样式”对话框，在对话框中进行相应的设置，如图所示。6欢迎下载。精品文档11）在对话框中的样式的“样式”列表框中选择“斜面和浮雕”选项，在对话框中进行相应的设置，如图所示。（12）单击【确定】按钮，设置样式后的效果如图所示。（13）输入文字。并设计其它的按钮。（也可以只设计一个背景按钮，以后在Dreamweaver中作