认识网页作品欣赏 第三章 网页设计课后实训网页的设计与制作过程随着时代的进步、信息技术的发展和普及，人们的生活与网络越来越密不可分。人们
可以通过浏览各种网页来获取资讯、游戏娱乐、购买商品。对于企业来说，网页更是开展电子商务和信息平台的必须手段，企业的网址也成为企业无
形资产的组成部分，是在网络上宣传和反映企业形象及文化的重要窗口。网页设计是一个广义的术语，很多人以为网页设计就是指客户端（即用户）
能够看到的界面，实际上网页设计既包括网页上的图形设计、界面设计，也包括后台的代码和专有软件。一般在设计制作网站时，会是团队协作的方
式，每人或每组有不同的分工，在统一的设计理念和规范指导下，共同完成整个网页的开发。第一章 网页设计认识网页3.1 网页设计的特点
及要求在进行网页设计时，必须要明确建立网站的目标和用户需求。一般企业类的网页设计主要用来展现企业形象、介绍产品和服务、体现企业发展
战略等，例如淘宝网等商务网站。个人类的网页设计主要用来展现个人的特点、观念、感悟等私人的内容，例如QQ空间等网站。我们一定要明确设
计网页的目的和用户需求，才能做出切实可行的设计计划，必须以“用户为中心”，而不是以“美术为中心”进行设计。3.1.1网页设计的特点
1．交互性与持续性交互性就是网页和浏览者之间的息传递的双向性。网站不是一个“被动”的媒体。和电视，电台等媒体不一样的是，网页是需要
我们用鼠标去点击的。浏览者点击连接，网页显示出需要的内容然后在传递给浏览者。这就是网页的交互性。在网络环境下，人们不再是一个传统媒
体方式的被动接受者，而是以一个主动参与者的身份加入到信息的加工处理和发布之中。这种持续的交互，使网页艺术设计不像印刷品设计那样，发
表之后就意味着设计的结束。网页设计人员必须根据网站各个阶段的经营目标，配合网站不同时期的经营策略，以及用户的反馈信息，经常地对网页
进行调整和修改。例如，为了保持浏览者对网站的新鲜感，很多大型网站总是定期或不定期的进行改版，这就需要设计者在保持网站视觉形象一贯性
的基础上，不断创作出新的网页设计作品。 3.1 网页设计的特点及要求3.1.1网页设计的特点2．多维性网页的多维性就是指用户可以
在网页的各种主题之间自由跳转，而不是像电视、电台等媒体一样线性的接收方式。网页的多维性主要体现在网页的超级链接上，也就是在网页中提
供为浏览者考虑得很周到的导航设计，提供了足够的、不同角度的链接，帮助读者在网页的各个部分之间跳转，并告知浏览者现在所在的位置、当前
页面和其他页面之间的关系等。而且，每页都有一个返回主页的按钮或链接，如果页面是按层次结构组织的，通常还有一个返回上级页面的链接。3
.1 网页设计的特点及要求3.1.1网页设计的特点3．媒体的综合性目前网页中使用的多媒体视听元素主要有文字、图像、声音、视频等，
随着网络带宽的增加、芯片处理速度的提高以及跨平台的多媒体文件格式的推广，必将促使设计者综合运用多种媒体元素来设计网页，以满足和丰富
浏览者对网络信息传输质量提出的更高要求。目前国内网页已经出现了模拟三维的操作界面，在数据压缩技术的改进和流媒体技术的推动下，网络上
出现实时的音频和视频服务，典型的有在线音乐、在线广播、网上电影、网上直播等。因此，多种媒体的综合运用是网页艺术设计的特点之一，是未
来的发展方向。3.1 网页设计的特点及要求3.1.1网页设计的特点4．版式的灵活性网络应用很难在各个方面都制订出统一的标准，这必
然导致网页版式设计的不可控制性。其具体表现为： (1) 网页页面会根据当前浏览器窗口大小自动格式化输出； (2) 网页的浏览者可以
控制网页页面在浏览器中的显示方式； (3) 不同种类、版本的浏览器观察同一个网页页面，效果会有所不同； (4) 用户的浏览器工作环
境不同，显示效果也会有所不同。 把所有这些问题归结为一点，即网页设计者无法控制页面在用户端的最终显示效果，但这也正是网页设计的吸引
人之处。 3.1 网页设计的特点及要求3.1.2 网页设计的要求1．确定网站的整体风格网页设计的好坏，取决于网页的总体风格、色彩
搭配、版式设计、用户体验等多方面，在进行网页设计时要将这些因素充分考虑，以求达到最优效果。3.1 网页设计的特点及要求网页是一个
结构复杂的整体，会由若干页面组成，每个页面根据功能的不同，内容会有所不同。但是做为一个整体的构成部分，必须有统一的规范和标准来满足
网页的整体形象给用户的综合感受。包括网页设计要有统一的标志、色彩、字体、标语，有相同的版面布局、浏览方式、交互性、语气、文字、内容
价值等。图1-3 绘制光线造型3.1.2 网页设计的要求2．网页色彩的搭配3.1 网页设计的特点及要求在网页配色中，一定要切记
避免一些误区，比如说不要将所有颜色都用到，尽量控制在三至五种色彩以内。同时背景和前文的对比尽量要大（不要用花纹繁复的图案作背景），
以便突出主要文字内容。一般在色彩搭配中，常用的有以下几种配色方式：（1）用一种色彩。这里是指先选定一种色彩，然后调整透明度或者饱和
度，这样的页面看起来色彩统一，有层次感。（2）用两种色彩。先选定一种色彩，然后选择它的对比色。（3）用一个色系。简单的说就是用一个
感觉的色彩，例如淡蓝，淡黄，淡绿；或者土黄，土灰，土蓝。3.1.2 网页设计的要求2．网页色彩的搭配3.1 网页设计的特点及要求
图3-3 色彩搭配3.1.2 网页设计的要求3.网页内容要易读3.1 网页设计的特点及要求网站设计最重要的诀窍，恐怕就是你的网页
要易读 。这就意味着,你必须花点心思来规划文字与背景颜色的搭配方案。 注意不要使背景的颜色冲淡了文字的视觉效果，别用花里胡哨的色彩
组合，让人看起来你的网页来很费劲。一般来说，浅色背景下的深色文字为佳 。这个要点要求你最好别把文字的规格设得太小、也不能太大。文字
太小，人家读起来难受；文字太大，或者文字视觉效果变化频繁，像是冲着人大喊大叫，看起来不舒服。另外，最好让文本左对齐，而不是居中。按
当代中文的阅读习惯，文本大都居左的。当然，标题一般应该居中，因为这符合读者的阅读习惯。图1-3 绘制光线造型1．顶部水平栏导航3
.2 导航栏的设计制作顶部水平栏导航是最早的，也是最流行的网站导航菜单设计模式之一。它最常用于网站的主导航菜单，且最通常地放在网站
所有页面的网站头的直接上方或直接下方。这种设计模式对于只需要在主要导航中显示5-12个导航项的网站来说是非常好的，但是对于有非常复
杂的信息结构且有很多模块组成的网站来说，如果没有子导航的话，这并不是一个完美的主导航菜单选择。导航栏在网页中起着链接各个页面的作用
。网站使用导航栏是为了让访问者更清晰明朗的找到所需要的资源区域，寻找资源。导航栏有很多种常用的设计模式，我们会根据网页的设计目的不
同，选择相应的设计模式。下面，我们介绍几种常用的导航栏设计模式：1．顶部水平栏导航3.2 导航栏的设计制作图3-3 色彩搭配2．
竖直/侧边栏导航3.2 导航栏的设计制作图3-6 竖直/侧边栏导航侧边栏导航设计模式随处可见，几乎存在于各类网站上。侧边栏导航的导
航项被排列在一个单列，一项在一项的上面。它经常在左侧面或左上角，在主内容区之前。这是因为有一份针对从左到右习惯读者的导航模式的可用
性研究发现，左边的竖直导航栏比右边的竖直导航表现要好。3．选项卡导航3.2 导航栏的设计制作图3-7 选项卡导航选项卡导航可以随意
设计成任何你想要的样式，从逼真的、有手感的标签到圆滑的标签等。它存在于各种各样的网站里，并且可以纳入任何视觉效果。选项卡比起其它类
别的导航有一个明显的优势：它们对用户有积极的心理效应。人们通常把导航与选项卡关联在一起，因为他们曾经在笔记本或资料夹里看见选项卡，
并且把它们与切换到一个新的章节联系在一起。这个真实世界的暗喻使得选项卡导航非常直观。4．面包屑导航3.2 导航栏案例图3-8 面包
屑导航面包屑对于多级别具有层次结构的网站特别有用。它们可以帮助访客了解到当前自己在整站中所处的位置。如果访客希望返回到某一级，它们
只需要点击相应的面包屑导航项。面包屑不适于浅导航网站。当网站没有清晰的层次和分类的时候，使用它也可能产生混乱。面包屑导航最适用于具
有清晰章节和多层次分类内容的网站。网页的设计与制作过程导航栏的设计制作广告页面案例广告栏的设计制作制作后的最终效果3.2.1 导航
栏的设计制作图3-9 网站导航3.2.1 导航栏的设计制作【步骤1 】打开素材文件“网站背景.jpg”，新建“课程简介”圆层组。在
该组中新建图层，选择圆角矩形工具，圆角半径为10像素，绘制如图3-10所示的圆角矩形，转换成选区后填充从（R：1，G：59，B：1
32）至（R：45，G：142，B：251）的线性渐变。图3-10 绘制圆角矩形3.2.1 导航栏的设计制作【步骤2 】将该圆角矩
形按到如图3-11所示的大小缩小，填充为浅灰色（R：219，G：219，B：219），并添加“内阴影”图层样式，具体参数如图3-1
2所示。图3-11 缩小圆角矩形图3-12 内阴影参数3.2.1 导航栏的设计制作【步骤3 】选择椭圆选框工具，绘制如图3-13所
示大小的椭圆，填充为纯白色。再将该图层复制一层，填充为248度灰色（即RGB都为248），缩小后添加“描边”图层样式，描边颜色为2
37度灰色。图3-13 绘制椭圆3.2.1 导航栏的设计制作【步骤4 】调入素材文件“课程简介.png”，为图层添加“颜色叠加”图
层模式，具体参数和效果如图3-14所示。图3-14 调入文件添加颜色叠加3.2.1 导航栏的设计制作【步骤5 】在下方添加文字“课
程简介”，建议使用字体为“汉仪广真”，效果如图3-15所示。图3-15 添加文字3.2.1 导航栏的设计制作【步骤6 】依此方法，
分别调入素材文件“教学视频.png”、“自学项目.png”、“在线测试.png”、“辅导答疑.png”，分别进行复制并添加文字，效
果如图3-16所示。图3-16 复制图形效果3.2.1 导航栏的设计制作【步骤7 】 新建图层，选择形状工具，选中如图3-17所
示的形状，绘制后填充为深蓝色，并添加“进入网站”文字。图3-17 绘制形状并添加文字3.2.1 导航栏的设计制作【步骤8】 在制
作网页时，当鼠标划过这些按钮和图标时，会用颜色变化或动画来表现。所以，每个可以有响应的按扭和图标都会设计两种形式。这里，我们做一种
最简单的效果表现。我们将上面做过的按钮图标的颜色，通过调整“色相/饱和度”命令调整为浅绿色，也就是说，当鼠标划过按钮时，图标的颜色
由深蓝色改为浅绿色。绿色效果如图3-18所示。图3-18 变换颜色3.2.1 导航栏的设计制作【步骤9 】 在制作网页时，每个按
钮和图标都要在点击后打开相应的页面，所以不光要作响应，还要作链接。我们会在这个PSD文件的基础上，将该图进行切图，存为相应的图片后
再作后期的操作处理了。我们这里只介绍到设计制作PSD文件这一部分。1．横幅广告(也称为旗帜广告、通栏广告或Banner)这是最常见
的网络广告形式。以GIF、JPG等格式建立图像文件，放置在网页中。它们大多放在网页的最上面或是最下面。根据统计结果，这是互联网上最
流行的广告方式，约占所有互联网广告的60%。3.3 广告页面案例广告页面是指在网页中放置的各种形式的连接广告，其主要目的是在网页
中显示广告主的名称、品牌和产品等信息，还可以依靠点击实现交互，或者促成进一步的信息传递。常见的广告页面类型有以下以种：图3-19
横幅广告2．按钮广告(也称为豆腐块广告或Button)它一般表现为图标。通常是广告主用来宣传其商标或品牌等特定标志的。常用的按钮式
广告尺寸有四种：125125(方形按钮)、12090、12060、8831像素，尺寸偏小，表现手法较简单，容量不超过8K。
这类按钮和横幅广告相比所占的面积较小。图3-20 按钮广告3.3 广告页面案例3．对联广告在页面两侧的空白位置呈现对联形式广告，
区隔广告版位，广告页面得以充分伸展，同时不干涉使用者浏览，提高网友吸引点阅，并有效传播广告相关讯息。图3-21 对联广告3.3
广告页面案例4．弹出窗口广告在访问网页时，主动弹出的窗口。这些窗口一般会提供关闭选项，可以由浏览者决定是否关闭该广告窗口。图3-2
2 弹出窗口广告3.3 广告页面案例5．页面悬浮广告在网页页面上悬浮或移动的广告，形式可以为Gif或Flash等格式。图3-23
页面悬浮广告3.3 广告页面案例6．翻卷广告投放位置固定为频道首页的右上角，不随屏滚动，翻卷角上有明确的“关闭”字样，可以让用户
点击后将广告卷回;或者翻卷后自动播放8秒后卷回。该类广告能够迅速迅速吸引浏览者的目光，能让浏览者留下深刻影响。图3-24 翻卷广告
3.3 广告页面案例制作后的最终效果3.3 1 广告栏的设计制作3.3 1 广告栏的设计制作【步骤1 】点击Ctrl+N新建文件
，851毫米×257毫米，分辨率为72像素/英寸，RGB模式。参数如图3-25所示。图3-25 新建文件3.3 1 广告栏的设计制
作【步骤2 】调入素材文件“草地.jpg”文件，调整位置。如图3-26所示。图3-26 调入素材3.3 1 广告栏的设计制作【步骤
3】导入素材“楼房.jpg”文件，放置到如图3-27所示的位置。图3-27 调入素材3.3 1 广告栏的设计制作【步骤4 】使用魔
棒工具，选择楼房天空部分，为该图层添加图层蒙版。在图层蒙版中会将选区部分自动填充为白色，选区之外区域自动填充为黑色。需要进行Ctr
l+I反相，将黑白色区域交换，效果如图3-28所示。图3-28 添加蒙版3.3 1 广告栏的设计制作【步骤5】我们要制作楼房掩在树
木后面的效果。所以将草地所在图层复制一层，放到草地图层上方。使用魔棒工具，选中天空和白云部分，为该图层添加图层蒙版，图层面板状态如
图3-29所示。效果如图3-30所示。图3-30 添加蒙版效果图3-29 图层面板3.3 1 广告栏的设计制作【步骤6 】现在看来
，右侧的楼房效果不是很好，所以考虑将其隐藏。选择楼房图层的图层蒙版，使用黑色带有羽化值的画笔，在不需要的楼房处涂抹，将其隐藏。效果
如图3-31所示。图3-31 画笔涂抹3.3 1 广告栏的设计制作【步骤7】使用钢笔工具、转换点工具绘制如图3-32所示的路径形状
，新建图层，填充为白色。图3-31 画笔涂抹3.3 1 广告栏的设计制作【步骤8】使用类似的方法，绘制如图3-33所示的路径，新建
图层，填充为白色。图3-33 绘制路径3.3 1 广告栏的设计制作【步骤9】绘制如图3-34所示的路径形状，新建图层，填充浅灰色R
GB（218，218，218），效果如图3-34所示。图3-34 绘制路径3.3 1 广告栏的设计制作【步骤1 0】为该图层添加图
层蒙版，使用黑色带有羽化值的画笔进行涂抹，效果如图3-35所示。图3-35 添加图层蒙版3.3 1 广告栏的设计制作【步骤1 1】
将图层复制到右侧，放大，并使用画笔修改图层蒙版，调整显示和隐藏区域。并将两个图层的不透明度进行调整，效果参看图3-36所示。图3-
36 复制并调整不透明度3.3 1 广告栏的设计制作【步骤11 】接下来绘制公司的LOGO，依照图3-37至图3-41，使用钢笔工
具等绘制LOGO中的图形。图3-37 绘制椭圆 图3-38 调整曲线图3-39 填充颜色 图3-40 绘制椭圆图3-41 输入文
字3.3 1 广告栏的设计制作【步骤1 2】输入文字“平安药业集团”，黑体，加粗。如图3-42所示。图3-42 输入文字3.3 1
广告栏的设计制作【步骤13 】使用画笔工具，绘制如图3-43的直线，作为中文和英文区域的分界线。图3-43 绘制线条3.3 1 广告栏的设计制作【步骤14 】输入英文字体，适当调整字体的间距和大小，如图3-44所示。图3-44 输入英文字体3.3 1 广告栏的设计制作【步骤1 5】将上面所制作的LOGO相关图层全部选中，链接。调整大小和位置，效果如图3-45所示。图3-45 放置LOGO3.3 1 广告栏的设计制作【步骤1 6】输入其它文字，并使用画笔工具绘制圆点效果，如图3-46所示。图3-46 输入文字3.3 1 广告栏的设计制作【步骤17 】输入广告性文字，如图3-47所示。一般做网页的横幅广告时，这部分文字会做成动画效果，可以使用Flash软件完成文字的切换、缩放、淡入淡出等特殊动画效果，有兴趣的读者可以自行处理，这里不再辍述。图3-47 横幅广告作 品 欣 赏课后实训为某公司网站设计一至两则横幅广告。要求：1．尺寸：851毫米×400毫米；2．能够展现公司品牌形象；3．图形、文字、色彩等视觉符号的形式能传达出设计者的思想，强调设计意识，风格要新颖。 |
|
