文档介绍：网站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)执行“文件”|“新建”命令,新建文档。(图像大小200×50像素)
(2)新建“图层1”,重命名为“按钮”。工具箱中选择“矩形工具”,选项卡栏选择“填充像素”,绘制矩形图像。
(3)双击“按钮”图层,弹出“图层样式”对话框选择“渐变叠加”选项,对该选项进行相应的设置,如图所示。
(4)在对话框中的“样式”列表框中选择“内发光”选项,对该选项进行相应的设置,如图所示。
5)在对话框中的“样式”列表框中选择“描边”选项,对该选项进行相应的设置,如图所示。
(6)最终效果如图所示。
三、导航栏设计
网站中的导航栏在各个页面中的位置基本上是固定的。导航栏常见的位置一般有4种:在网页的左侧、右侧、顶部、底部。在同一页面上出现多种导航时就要合理地运用,协调一致。 下图所示为本书网站首页导航栏,网站首页导航栏全部是文字链接,只需在Dreamweaver制作网页时直接输入文字即可。
如图所示为网站二级页面左侧导航栏。
设计左侧导航栏的具体操作步骤如下。
(1)执行“文件”| “新建”命令,新建文档。