第2章 Photoshop网页版面制作
教学目标
1. 掌握使用photoshop制作网页中图形元素的技巧 2. 掌握使用photoshop进行整体版面的制作 3. 掌握photoshop切片工具的使用方法 4. 掌握photoshop与dreamweaver结合的方法
教学要求
知识要点 Photoshop画线 Photoshop图案填充 Photoshop按钮的制作 Photoshop Logo标志的制作 Photoshop 图像的合成 Photoshop网页版面制作 Photoshop 切片与输出 画笔的设置 自定义图案的能力 路径与形状图层的绘制；图层样式的用法 文字图层的用法；图层的用法 图层蒙版及图层混和模式的用法 色彩、文字、版面的设计 切片的用法；输出导入Dreamweaver的方法 能力要求 关联知识
2.1 网页图形元素的制作
2.1.1 各式线条的绘制
在网页中常使用线来分隔版面，或分隔导航条，是最常用的图形元素。在photoshp中画线是使用画笔或铅笔工具来实现的。
1． 画线
选择photoshop工具箱中的画笔工具，并设置画笔的半径为1个像素，设置画笔硬度为0%，按住shift键拖动鼠标可绘制一条直线。如要连续绘制多条直线，一定要在绘制后一直线前先选择其它工具，然后再选择画笔工具继续绘制，否则连续绘制会出现连笔现象如图2-1所示。
连笔
图2-1 连笔现象
2． 画虚线
画虚线和画直线一样也是使用画笔工具，不过要对画笔间距进行设置。按下快捷键F5弹出画笔设置面板，对画笔的直径、硬度和间距进行设置，如图2-2所示，
图2-2 绘制虚线的画笔设置
3． 画凹凸线
凹凸线在网页版面中最常见，对网页有着非常重要的点缀作用，如图2-3所示。绘制的方法如下：首先绘制一条比背景色暗的直线，然后再绘制一条比背景色亮的直线，线条色彩可选用与背景色同一色系的颜色，然后两直线并列排，这样凹凸效果就出来了。
图2-3 凹凸线
2.1.2 图案填充
在网页的背景和Banner中经常会见到填充的各式图案，如点、方格子，横线、斜线、交叉线等等。网页填充的背景图案往往要先自定义图案，然后再进行填充。
1． 方格子的图案填充，如下图2-4所示。
图2-4 格子图案填充
方法如下：
(1) 新建一40*40px大小，背景是透明的文件。
(2) 使用单行与单列选框工具绘制两条线，如下图2-5所示。
图2-5 定制的图案
(3) 全选上图，选择菜单“编辑—定义图案”，图案定义好了。
(4) 选择要填充图案的区域，选择菜单“编辑—填充”，并找到刚才定义的图案，如下图
2-6所示。
图2-6 填充面板
(5) 设置方格子的图层透明度，效果如图2-7所示。
图2-7 表格填充效果
2． 横线图案
要填充横线图案，填充方法一样，只是定义图案的方法为：新建1×6像素的文件，填充最上面像素，如下图2-8所示，这时填充的横线为1像素高，线和线之间的距离为5px。
图2-8 横线自定义图案和填充效果
3． 斜线图案
同样定义斜线的图案，新建文件5×5像素大小，填充斜对角5个像素如下图2-9所示。
图2-9 斜线自定义图案和填充效果
4． 浮点图案
同样定义浮点的图案，新建文件7×7像素大小，填充最中间一个像素，如下图2-10所示。还有其它一些图案的定义如图2-11所示，大家可以自己试试定义和填充，看看效果如何。
图2-10 浮点自定义图案和填充效果
图2-11 其它自定义图案
2.1.3 按钮制作
网页中按钮各式各样，往往按钮的形状和样式是网页的重要内容。下面讲解了几款常用的按钮。
1． 透明圆形按钮 效果如下图2-12所示：
图2-12 透明圆形按钮
制作步骤：
（1） 建立新文件，80x80像素大小，RGB模式，透明前景，图层1填充为白色，新建
图层2，建立50x50像素的圆形，放在页面正中心，前景设为#99CCFF，背景设为#006699，从圆形左上角到右下角，作圆形辐射渐变效果，如图2-13所示。
图2-13渐变效果
（2） 再新建图3，建立44×44像素大的圆形，放置于正中心，从此圆形的右下角到左上角作圆形辐射渐变效果，即如图2-14效果。
图2-14 图层3效果
（3）再新建图层4，建立42×42像素大的圆形，放置于正中心，这时设前景色为#99CCFF，背景色为#003366，从此圆形的右下角到左上角作圆形辐射渐变效果，即如图2-15效果。
图2-15 效果图
（4）再新建图层5，建立10×6像素大的椭圆选区，并进行羽化，然后填充前景色，即如图2-16效果。
图2-16 效果图
（5）输入文字，字号不要太大，文字去掉抗锯齿，并加上投影样式，最后效果如图2-17所示。
图2-17 效果图
2．塑料按钮（一） 效果如下图2-18所示：
2-18 效果图
制作步骤：
（1）选择圆角矩形工具，并选择形状图层绘图方式，点击工具栏上的下拉三角，打开
几何选项，在圆角矩形选项中设置矩形为固定大小，98×28像素，然后将圆角半径设为3像素，选择消除锯齿，如图2-19所示。
图2-19圆角矩形
（2）双击图层，进入图层样式，为了使按纽清晰的显示出来，首先选择描边样式，设置描边大小为1像素，位置在内部，混合模式为正常，不透明度为62％，描边颜色为RGB（58，58，58）。用渐变叠加样式为按纽添加基本的渐变黑色到白色，选择反向，将黑色色标的位置从0％移动到40％处，样式为线性，选择与图层对齐，角度为90度，缩放为60％，效果如图2-20所示。
图2-20 填充渐变色
（3）为按纽添加立体感，选择斜面和浮雕，样式选择内斜面，方法为平滑，深度为1000％，方向为上，大小为2像素，软化为3像素，阴影角度为-84度，取消全局光，高度为34度，保持高光和暗调的数值不变，仅将暗调的不透明度降低为16％，效果如图2-21所示。
图2-21添加立体感
（4）为按纽添加光泽效果，选择内阴影，将混合模式设为正常，颜色为白色，不透明度为65％，取消全局光后将角度设为-90度，距离为13像素，阻塞和大小均为0，然后，修改等高线，点击默认的等高线，拖动映射曲线两端的端点，将它们自上而下改变位置，效果如图2-22所示。
图2-22 添加光泽效果
（5）选择投影给按纽添加一点阴影效果：将投影的不透明度设为14％，取消全局光，将角度设为-134度，距离和大小为1像素，扩展为0％。最后添加文字，文字为无抗齿锯状，效果如图2-23所示。
2-23 效果图
3．塑料按纽（二）
另外一种形式的塑料按纽，相对于前面所介绍类型来说，下面将要介绍的这种按钮显得更活泼，更适合用于轻松的网站。这种方法适合制作各种不规则的按纽。
制作步骤：
（1）和前面的方法一样，首先选择圆角矩形工具，并选择形状图层绘图方式，绘制一绿色圆角矩形，生然后按下Ctrl+T的同时再按住Ctrl键进行透视，效果如下图2-24所示。
图2-24 透视后的圆角矩形
（2）制作按纽的高光部分。新建图层2，并选择套索工具随意的勾选按钮的上部分，如下图2-25所示。
图2-25 选区
（3）按下Shift+Alt+Ctrl并点击上一图层得到两选区的相交区域，对得到的相交区域进行羽化，填充由白色到透明的渐变色，并调整图层的透明度，效果如2-26所示。
图2-26 高光区域
（4）使用同样的方法得到右下角选区部分，并填充黑色到透明的渐变色，如下图2-27所示，
图2-27 暗调区
（5）最后再加上相关的文字，如下图2-28所示。
图2-28 效果图
4．简单的MAC按钮
这款按纽的知名度很高，制作方法也有很多种，这里用了一种较为简单的，但效果同样好，效果如下图2-29：
图2-29 MAC按钮
制作步骤：
（1）选择圆角矩形工具，并选择形状图层绘图方式，绘制一白色圆角矩形，效果如图2-30所示。
图2-30 圆角矩形
（2）与上一例一样，选择图层样式的描边和渐变叠加，如下图2-31所示。
图2-31 渐变色填充
（3）新建图层，并选择上一图层区域，向上移动选区如下图2-32所示，按下
Shift+Alt+Ctrl并点击上一图层得到两选区的相交区域。
图2-32 得到高光区域选区
（4）对相交区域进行羽化，并填充白色，得到下图2-33所示。
图2-33 效果图
大家可以试试下列按钮的制作，效果如图2-34所示。
图2-34 效果图
5．内嵌按钮的制作
很多时候，按纽会搭配具有个性化的面板。这种组合会使你的网页看起来更精致。下面就来介绍一种小巧的内嵌式按纽，这种按钮不但可以用于网页，对于别的图像，如手机上的按键，播放器上的按纽，也是非常合适的。内嵌按钮的效果图可参考如下图2-35所示：
图2-35 内嵌按钮效果图
制作步骤：
（1） 绘制背景。选择选区工具中的矩形区域，使用渐变填充工具填充灰到深灰的渐
变，效果如图2-36所示。
图2-36 渐变矩形
（2） 选择形状绘图工具椭圆，并设置绘图方式为创建形状图层，按住Shift键，在图
中绘制一个小圆形并使用图层样式给小圆从上至下填充深灰到浅灰的渐变色，如下图2-37所示。
图2-37 渐变的圆
（3） 复制上一步小圆图层，并把复制出来的图层缩小，并对缩小的小小圆填充径向
的深灰到浅灰的渐变，并描上深灰色1个像素的边，如下图2-38所示。
图2-38 效果图
6．玻璃按钮的制作 效果图如下2-39所示：
图2-39 效果图
制作步骤：
（1） 选择圆角矩形工具，并选择形状图层绘图方式，圆角半径为30px，绘制一蓝色圆
角矩形，如下图2-40所示。
图2-40 圆角矩形
（2） 双击形状图层，进入图层样式设置，给图层加上投影，设置距离为5，大小也为5。 （3） 给图层加上斜面与浮雕效果，参数设置如图2-41，样式设置为“枕状浮雕”，深
度设为“300%”，光泽等高线设为“Ring”，高光模式设置为“100%”，阴影模式设置为“45%”，效果如下图2-42所示。
图2-41 斜面与浮雕参数设置
图2-42 玻璃按钮
（4） 现在要把制作好的按钮图像的一边切掉。选择矩形绘图工具，并选取相减的路径
运算工具如下图，减去按钮的右边部分，效果如下图2-43所示。
图2-43 路径运算
（5）按住Shift+Alt键向右方拖动，将复制出当前图层，然后镜像复制出来的图层，得到两个方向相反的按钮。同样使用圆角距形，并使用路径相交运算，得到中间的按钮部分，效果如图2-44所示。
图2-44 效果图
7．按钮
参照效果图如下：
图2-45 效果图
制作步骤如下：
（1） 选择圆角矩形工具，并选择形状图层绘图方式，圆角半径为10px，绘制一黄色圆
角矩形。选取矩形绘图工具，并选择“相减”路径运算，如下图2-46所示。
图2-46 路径运算
（2） 双击形状图层进入图层样式，给按钮加上渐变叠加，参数设置如图2-47，效果如
图2-48所示。
图2-47 渐变叠加
图2-48 渐变效果图
（3）选取按钮的上部分，并羽化，填充黄色到白色的渐变色，效果如下图2-49所示。
图2-49 效果图
2.1.4倒影和投影
倒影在网页中经常使用，有些是对文字，有些是对图片。倒影会使画片产生空间和立体感。如图2-50所示。
图2-50 倒影效果
1．文字倒影
效果如下图2-51所示：
图2-51 文字倒影
制作步骤：
（1） 输入绿色的FireFox文字，复制一文字图层，对此文字图层按下“Ctrl+T”，然后
右击文字图层并选择垂直翻转，如下图2-52所示。
图2-52 复制文字图层
（2）给翻转过来的图层文字添加图层蒙版，在蒙版上填充黑白渐变色，最后调整图层透明度。效果如下图2-53所示。
图2-53 效果图
2． 投影
给标志加上投影和阴影，效果图.2-54：
图2-54 投影效果图
(1) 首先浅灰色到深灰色的渐变背景在背景图层，标志在另一图层。新建一图层，按住CTRL键点击标志图层，得到标志图层的选区，然后选择菜单“选区――变换选区”工具对该选区进行透视变换，得到阴影区域。
(2) 对阴影区域填充黑色，并使用滤镜中的高斯模糊，如下图2-55所示。设置阴影图
层的透明度为40%。如图2-55所示。
图2-55 阴影制作过程
2.1.5 Logo标志
很多Logo标志都是文字变形而来的，下面是两种常用的文字标志制作方法。 1． XP文字标志
图2-56 XP文字标志
制作步骤：
（1） 输入文字“XP”，并选择字体“BankGothic Md BT”，字号选择大一些的，
效果如图2-57所示。
图2-58 XP文字效果
（2）选择菜单中的“图层—文字—文字转换为形状”，把文字图层转换为形状图层。
图2-59 XP形状图层
（3）选择白色箭头工具拖动“X”上下两个节点移动他们的位置，效果如下图2-60所示。
图2-60 变形的XP
（4）给变形的XP加上图层样式，这里选用photoshop自带的图层样式，追加“web翻转样式”中的“蓝色回环按钮”得到图，其它图也是选用不同样式的结果。
图2-61 样式面板
图2-62 选择各样式的效果图
2．文字标志
此Logo标志是由文字图层样式和倒影制作出来的，效果如下图2-63：
图2-63 效果图
制作步骤
（1） 首先建立文字（SWATCH这几个字的字体是专门找的）。
图2-64 文字图层
（2） 给文字图层加上渐变叠加、斜面与浮雕、投影的图层样式，效果如图2-65、图2-66
和图2-67所示。
图2-65 渐变叠加的渐变色
图2-66 斜面与浮雕设置
图2-67 效果图
（3）新建一图层，并制作选区如下图2-68所示。
图2-68 选区制作
（4）设置前景色背景色如图，并施加渐变，如下图2-69。
图2-69 渐变
（5）对渐变图层设置图层混合模式为柔光，这样弧型的颜色分界就出来了，效果如图
2-70所示。
图2-70 图层混和效果
（6）制作文字图层的倒影，效果如图2-71所示。
图2-71 倒影
2.1.6 网页图像合成与修饰
为了更好的表达网站的主题，网页设计者会使用多幅与主题相关的图像进行合成，得到合成结果与背景和主题连成一体，使画面更加和谐，内容更加丰富。在photoshop中图像合成常用图层蒙版、图层混和模式和色彩调整命令来处理。
1．制作网页Banner，效果如下图2-72所示。
图2-72 效果图
（1） 新建一文件，大小为770×200像素，并填充渐变色RGB（121,190,233）到
RGB（189,214,234），效果如图2-73。
图2-73 渐变色
（2） 打开素材文件adjust01.jpg和adjust02.jpg两文件如图2-74所示，把这两幅图
片拖入到新建文件中去，adjust02.jpg图片在上面。分别按下“Ctrl+T”把两
幅素材文件缩小以适应文件的高度，效果图如2-75所示。
图2-74素材图
图2-75 放置图片
（3）把图层7的图层混各模式选择为“变亮”如下图2-76所示，效果如图2-77所示。
图2-76 图层面板
图2-77 效果图
（4）选择调整图层按钮，选择“色阶”和“色彩平衡”面板，进行相应的设置，如下图2-78和图2-79所示，效果如下图2-80。
图2-78 色彩平衡面板
图2-79 调整图层
图2-80 效果图
（5）除背景层外，把其它所有图层进行合并得到色彩平衡1图层，如下图2-81。
图2-81 合并图层
（6）给该图层加上图层蒙版，并在图层蒙版上填充从左至右的黑到白的渐变色，效果如下图2-82和图2-83所示。
图2-82 图层蒙版
图2-83 效果图
（7）输入文字“Design”，设置字体和字号。再拖入素材图像adjust2.jpg在文字图层之上，按下“Ctrl+G”或选择菜单“图层－与前一图层编组”，图像被放置到文字中，文字被填充了，效果如下图2-84所示。
图2-84 效果图
2.2 网页版面的制作
网页界面的设计一般有：色彩、文字、图案及版面布局。下面从这几个方面介绍它们各自的一些设计基本规律及原理。 2.2.1 网页色彩
1．色彩的含义
色彩本身是无任何含义的，有的只是人赋予它的。但色彩确实可以在不知不觉间影响人的心理，左右人的情绪，所以就有人给各种色彩都加上特定的含义。
红色：热情、奔放、喜悦、庄严 黄色：高贵、富有、灿烂、活泼 黑色：严肃、夜晚、沉着 白色：纯洁、简单、洁净 蓝色：天空、清爽、科技 绿色：植物、生命、生机 灰色：庄重、沉稳 紫色：浪漫、富贵 棕色：大地、厚朴 2．网页的色彩的对比
不同色彩之间的对比会有不同的效果。当两种颜色同时在一起时，这两种颜色各自走向自己的极端。例如：红色与绿色对比，红的更红，绿的更绿；黑色与白色对比，黑的更黑，白的更白。由于人的视觉不同，对比的效果通常也会有不同。当大家长时间看一种纯色，例如红色，然后再看看周围的人，大家会发现周围的人脸色会成绿色，正是因为红色与周围颜色的对比，形成了对我们视觉的刺激。色彩的对比会受很多因素影响，例如色彩的面积、时间、亮度等等。
色彩的对比有很多方面，色相的对比就是其中的一种。当大家用湖蓝与深蓝对比时，就会发觉深蓝带点紫味，而湖蓝则有点绿味。各种纯色的对比会产生鲜明的色彩效果，很容易给人带来视觉与心理的满足。
红色与黄色对比：红色会使人想起玫瑰的味道，而黄色则会使人想起柠檬的味道。 绿色与紫色对比：很有鲜明特色,令人感觉到活泼，自然。
而红、黄、蓝三种颜色是最极端的色彩，它们之间对比,哪一种颜色也无法影响对方。 色彩间的对比也有纯度对比，举个例子，黄色是夺目的色，但是加入灰色会失去其夺目的光彩，通常可以用混入黑、白、灰色来对比纯色，这样可以减低其纯度。纯度的对比会使色彩的效果更明确肯定。
3．色彩的大小和形状
有很多因素可以影响色彩的对比效果，色彩的大小就是其中最重要的一项，如果两种色彩同样大小，那么这两种颜色之间的对比十分强烈，但是当其中的一种大小变得不一样时，小的一种色就会成为大的色的补充。色彩的大小会令色彩的对比有一种生动效果，尝试在一大片绿色中加入一小点红色，大家会注意到红色在绿色的衬托底下很抢眼，这就是色彩的大小对对比效果的影响，在大面积的色彩陪衬下，小面积的纯色会突出特别的效果，但是如果用较淡的色彩，则会让大家感觉不到这种色彩的存在。譬如在黄色中加入淡灰色，大家根本就不会注意到淡灰色。
不知大家是否留意到，在不同的形状上面，同一种色彩也会有不同的效果，试试在一个正方形和一条线上用红色，你会发现，正方形更能表现红色稳重、喜庆的感觉。不同的形状会使同一种色彩产生不同的效果，个人认为，圆形最好用蓝色，这样给人辽阔博大的感觉。三角形用黄色，三角形的尖锐感与黄色的刺目感配合起来。梭形建议用鲜蓝色，平行四边形用绿色„„，大家可以自己选用，这里只是写出不同的形状上面即使用同种色也会有不同的效果。
4．色彩的位置
色彩所处的位置不同也会造成色彩对比的不同。试把两个同样大小的色彩放在不同的位置，譬如前后，则会觉得后面的颜色要比前面的颜色暗些。正是由于所处的位置的不同，导致眼睛的视觉的不同。大家尝试在画图中使用渐层工具，则会觉得多种色彩在一起会有一种不同的效果，有如音乐中的1、2、3、4、5、6、7变化，同样的色相但纯度不同的色彩组合
在一起会有令人吃惊的效果，不要以为渐变层很简单，它内含着色彩运用的一项重要的作用。色彩的渐层变化里也有一种调子，如同歌曲里的谱一样，暗色中含高亮度的对比，会给人清晰、激烈的感觉。很强烈的刺激如深黄到鲜黄色，暗色中间含高亮度的对比，会给人沉着、稳重深沉的感觉。如深红中间是鲜红。中性色与低高度的对比，给人模糊、朦胧、深奥的感觉，如草绿中间是浅灰。纯色与高亮度的对比，给人跳跃舞动的感觉，如黄色与白色的对比。纯色与低亮度的对比，给人轻柔、欢快的感觉，如浅蓝色与白色。纯色与暗色的对比，给人强硬、不可改变的感觉。
5．网页配色的常用规律
（1）中性色黑色、白色、灰色进行搭配。
（2）中性色和任何一种颜色搭配。填充颜色的部分较大时，最好使用黑色、白色、灰色等。
（3）用一种色彩。这里是指先选定一种色彩，然后调整透明度或者饱和度，(说得通俗些就是将色彩变淡或则加深)，产生新的色彩，用于网页。这样的页面看起来色彩统一，有层次感。
（4）用对比色彩。先选定一种色彩，然后选择它的对比色(在photoshop里按ctrl+shift+I)。如蓝色和黄色就是对比色，这样整个页面色彩丰富但不花稍。
（5）不要将所有颜色都用到，尽量控制在三种色彩以内。
（6）背景和前文的对比尽量要大，(绝对不要用花纹繁复的图案作背景)，以便突出主要文字内容。
（7）最好不要使用大面积的高饱和度的纯色，如果必须使用时，该色占用的幅面最好较小。
（8）背景与文字内容的亮度（0-255）差最好在102以上。 （9）当网站面对的用户超出本国范围时，最好使用完全色。
6．网站使用颜色大概分为几种类型：
(1) 公司色：现在企业中，公司的CI形象显得尤其重要，每一个公司的CI设计必然要有标准的颜色。比如新浪网的主色调是一种介于浅黄和深黄之间的颜色，同时形象宣传、海报、广告使用的颜色都和网站的颜色一致。再比如国富投资公司的主色调是C：100%，M：60%，Y：0%，K：0%。这样的颜色使用到网站上显得色调自然、底蕴深厚。
(2) 风格色：许多网站使用颜色秉承的是公司的风格。比如海尔使用的颜色是一种中性的绿色，即充满朝气有不失自己的创新精神。女性网站使用粉红色的较多，大公司使用蓝色的较多……，这些都是在突出自己的风格。
(3) 习惯色：这些网站的颜色使用很大一部分是凭自己的个人爱好，个人网站较多使用，比如自己喜欢红色、紫色、黑色等，在做网站的时候就倾向于这种颜色。每一个人都有自己喜欢的颜色，因此这种类型称为习惯色。 2.2.2 网页文字
继配色方案之后，能够完美并适当表达你的思想的就是文字。文字在网页占据着重要的地位，文字的设计将直接影响到网页的美观。
1．文字的设计原则
（1）文字的可读性：设计中的文字应避免繁杂零乱，使人易认，易懂，切忌为了设计而设计，忘记了文字设计的根本目的。
（2）赋予文字个性：文字的设计要服从于作品的风格特征。文字的设计不能和整个作品的风格特征相脱离，更不能相冲突
（3）在视觉上应给人以美感；字型设计良好，组合巧妙的文字能使人感到愉快，留下美好的印象，从而获得良好的心理反应。
（4）在设计上要富于创造性：根据作品主题的要求，突出文字设计的个性色彩，创造与众不同的独具特色的字体。设计时，应从字的形态特征与组合上进行探求，不断修改，反复琢磨，这样才能创造出富有个性的文字。
2．网页字体设计
字体被分为两类：Serif字体和Sans-Serif字体。Serif字体由Times New Roman, Caslon, Caxton, Souvenir等字体组成。Sans-Serif字体由Helvetica, Zurich, Verdana, Arial等组成。Serif字体通常被用作标题和头条，Sans-Serif字体通常被用作正文或重复性信息。
在一个规划中使用过多的字体会看起来混乱并使人迷惑。大家在一套结构中只应最多出现3种字体。一种用作标题，一种用作按钮和小标，另外一种用作正文。
字体可以传达很多信息，如果想表达“重量级冠军”就使用Futura Black或Compacta字体，因为这些字体本身看起来就很“重”。另一种情况，如果想表达“羽毛的摩擦”，那么就使用很轻的Caxton Italic字体来表达羽毛的效果。 2.2.3 网页版面布局
设计网页的第一步就是设计网页版面的布局。布局，就是以最适合浏览的方式将图片和文字排放在页面的不同位置。
就象传统的报刊杂志编辑一样，我们将网页看作一张报纸，一本杂志来进行排版布局。虽然动态网页技术的发展使得我们开始趋向于学习场景编剧，但是固定的网页版面设计基础依然是必须学习和掌握的。它们的基本原理是共通的，大家可以领会要点，举一反三。
网页布局首先要考虑的是网页版面大小。其实，网页版面大小并没有固定的长宽尺寸限定，但由于目前一般大众所使用的显示器的解析度，多数设定为长宽为800x600 像素，或者1024x768 像素，因此网页设计者在安排网页版型时，也大多针对这两种解析度来设计，一般宽度设为778像素或1000像素左右。
那么在网页布局的过程中，大家可以遵循以下原则：
1．正常平衡：也叫“匀称”。多指左右、上下对照形式，主要强调秩序，能达到安定诚实、信赖的效果。
2．异常平衡：即非对照形式，但也要平衡和韵律，当然都是不均整的，此种布局能达到强调性、不安性、高注目性的效果。
3．对比：所谓对比，不仅利用色彩、色调等技巧来作表现，在内容上也可涉及古与今、新与旧、贫与富等对比。
4．凝视：所谓凝视是利用页面中人物视线，使浏览者仿照跟随的心理，以达到注视页面的效果，一般多用明星凝视状。
5．空白：空白有两种作用，一方面对其他网站表示突出卓越，另一方面也表示网页品位的优越感，这种表现方法对体现网页的格调十分有效。
6．尽量用图片解说：此法对不能用语言说服、或用语言无法表达的情感，特别有效。 以上的设计原则，虽然枯燥，但是我们如果能领会并活用到页面布局里，效果就大不一样了。比如：
（1）网页的白色背景太虚，则可以加些色快； （2）版面零散，可以用线条和符号串联；
（3）左面文字过多，右面则可以插一张图片保持平衡； （4）表格太规矩，可以改用导角试试。
下面是大家经常用到的版面布局形式：
1．“T”结构布局。所谓“T”结构。就是指页面顶部为横条网站标志再加广告条，下方左边为主菜单，右边显示内容的布局。由于菜单条背景较深，整体效果类似英文字母“T”，所以我们称之为“T”形布局。这是网页设计中用的最广泛的一种布局方式。这种布局的优点是页面结构清晰，主次分明，是初学者最容易上手的布局方法，缺点是规矩呆板，如果细节色彩上不注意，很容易让人泛味。
2．“口”型布局。这是一种象形的说法，就是页面一般上下各有一个广告条，左边是主菜单，右边放置友情链接等，中间是主要内容。这种布局的优点是充分利用版面，信息量大，缺点是页面拥挤，不够灵活。当然也有将四边空出，只用中间的窗口型设计，如网易壁纸站。
3．“三”型布局。这种布局多用于国外站点，国内用的不多。特点是页面上横向两条色块，将页面整体分割为多个部分，而后在色块中放置广告条。
4．对称对比布局。顾名思义，采取左右或者上下对称的布局，一半深色，一半浅色，一般用于设计型站点。优点是视觉冲击力强，缺点是将两部分有机的结合比较困难。 5．POP布局。POP引自广告术语，就是指页面布局象一张宣传海报，以一张精美图片作为页面的设计中心。常用在时尚类站点，比如ELLE.com。优点显而易见，漂亮吸引人。缺点就是速度慢，作为版面布局还是值得借鉴的。
以上总结了目前网络上常见的网页布局，其实还有许许多多别具一格的布局，关键在于创意和设计了。对于版面布局的技巧，这里提供四个建议，大家可以自己推敲：
（1） 加强视觉效果。
（2） 加强文案的可视度和可读性。 （3） 统一感的视觉。
（4） 新鲜和个性是布局的最高境界。 2.2.4 版面设计实例
制作如下网页版面效果，如图2-85所示。
图2-85 网页版面
制作步骤：
1．新建文件778×500像素。
2．输入文字“Bient Ciemnu”，分别着上不同的蓝色。双击文字图层添加投影和描边图层样式，投影的不透明度为44%，描边颜色为白色，大小为2像素，参数设置如图2-86和图2-87所示，效果图如2-88所示。
图2-86 投影设置
图2-87 描边设置
图2-89 文字效果图
3．制作标志文字之下的透明几何形状。选择钢笔工具，并选择路径绘图方式绘制如下图2-90所示的几何形状。
图2-90 路径绘制
4．选择路径面板中的“将路径作为选区载入”按钮，如图2-91把路径转为选区。
图2-91将路径作为选区载入
5．在文字图层之上新建一图层，选择画笔工具，画笔的直径为170像素，硬度为0%，前景色为蓝色。使用设置好的画笔边缘在选区上单击，便可得到如下效果图2-92。
图2-92 几何形状
6．导航条的制作。选择矩形工具，选上形状图层绘图方式，绘制一长条矩形。双击该形状图层，添加渐变叠加图层样式，颜色为一系列深浅相差不大的蓝色进行渐变，如下图2-93所示。然后再添加深蓝色的描边，描边大小为1像素。效果如下图2-94所示。
图2-93 渐变条
图2-94 效果图
7．绘制导航条的分隔线。新建图层，用1像素的画笔工具选用比导航条颜色稍深的直线，再新图层，再用1像素画笔选用比导航条颜色稍浅的直线。然后将两直线偏移1像素并排放置，如图2-94所示。合并这两条直线的图层为一个层，复制若干层，生成若干条分隔直线，效果如图2-95所示。
图2-94 分隔线
图2-95 导航条的若干条分隔线
8．导航条文字。输入黑色文字“网站首页”、“公司简介”、“产品展示”、“服务项目”、“联系我们”，并设置字体为“宋体”，字号为12点，抗据齿为无，属性栏如图2-96所示。
图2-96 文字属性栏
9．双击文字图层，设置导航文字描边图层样式，参数设置如下图2-97所示。
图2-97 描边参数设置
图2-98 文字效果
10．绘制左右两个版块。选择圆角矩形，绘图方式为形状图层方式，半径为8像素，如下图2-99所示，分别绘制这两块版块，并用渐变叠加图层样式，给它们添加渐变色，如图2-100所示，然后再加上描边图层样式，如图2-101。
图2-99 形状绘制属性栏
图2-100 渐变叠加
图2-101 描边
图2-102 效果图
11．右边版块的格子填充。首先自定义图案，新建一文件30×30像素，用白色1像素大小的线条填充最上面和最左边部分，如图2-103所示。
图2-103 图案定义
12．按住Ctrl键同时单击右边版块的图层，得到此版块的选区，新建一图层，选择菜单“编辑－填充”，选择自己定义的图案进行填充，并降低此图层的透明度。效果如下图2-104所示。
13．格子上的图案，方法与第3、4、5步一样，用钢笔工具绘制几何形状，并把路径转为选区，再用硬度为0%的画笔进行喷绘。
图2-104 格子图案填充
14．最后用前面的方法，把其它形状绘制完。
2.3 切片与输出
Photoshop具有强大的图像处理与绘制功能，主要用于创建静态图像，同时具有简单的图像切片、优化切片与将图像保存为web页的功能。
2.3.1 Photoshop切片
在photoshop中通过切片操作，可以在图像保存为网页时，将每一个切片作为一个独立的文件进行存储。当保存的网页格式在Dreamweaver中打开时，Photoshop中生成的图像切片就变成Dreamweaver中表格中的各个单元格。
在Photoshop中可以采用多种方法对图像进行切片，包括使用切片工具创建切片、基于参考线创建切片和基于图层创建切片等等。下图2-105就是切片工具和切片选择工具。
图2-105 切片和切片选择工具
图2-106 切片属性栏
切片的形状都是矩形的，只要动手一切就有主切片和辅助切片的生成，切片生成后可以使用切片选择工具进行选择，并设置切片属性，如名称、URL、大小等，也可移动切片的位置和重新定义切片。切片选择工具和切片选项面板如下图2-107和图2-108所示。
图2-107 切片选择工具属性栏
图2-108 切片选项面板
2.3.2 Photoshop切片与Dreamweaver的结合
这里我们把2.2.4节中的版面设计实例进行切片操作，然后导入到Dreamweaver中进行相关的操作制作一静态网页。
制作步骤：
1．将页面中涉及到要链接的文字、标题和要插入flash及其它部分进行切割。选择切片工具，按各个区域进行裁切，效果如图2-109所示。
图2-109切片结果
2．选择菜单“文件－存储为web所用格式”命令，弹出的对话框如图2-110所示。在默认情况下，所有切片生成的文件都是Gif格式，但是如果某个切片中的图像是照片或要求
颜色数量非常高的时候，可在对话框中使用切片选择工具，选择这个切片，并设置此切片的格式为JPG或PNG。设置完成后，单击“存储”按钮，将网页存储在自己所需要的地方即可。
图2-110 存储设置对话框
3．输出来之后，生成了Image文件夹及一个html格式网页文件。如下图2-111所示。其中Image文件夹中都是生成的一个个的切片文件。
图2-111 切片输出
4．将导出的html格式文件导入到Dreamweaver中进行设置。选择其中的导航标题，然后选择链接即可。如下图2-112所示，
图2-112 导航标题链接
5．如要在中间的右边版块上插入Flash，而且原来的图像不能去掉，方法是将图像设置为背景图片：先将原切片图像的大小记住，并删除它，然后选择此单元格，按照刚才记住的原切片图像的大小设置此单元格的大小，然后选择属性栏中的设置背景图片，把刚刚删除的图像重新设置为背景图片，如下图2-113所示。
图2-113 背景图片制作
3． 选中此单元格，选择菜单中的“插入－媒体－Flash”，如图2-114所示。即可插入Flash
在此背景图片上。
图2-114 插入Flash菜单
6．设置Flash的背景透明。选中插入的Flash，并选择属性中的参数面板，设置参数如下图2-115所示。
图2-115 透明Flash设置
7．最后的结果如图2-116所示。
图2-116 效果图
2.4 本 章 小 结
本章主要通过讲解如何使用Photoshop工具制作网页上的线、图案、按钮、Logo标志、合成图像及整个网页版面。也对网页版面的色彩、文字及版面设计进行了简单的描述。最后通过一个简单的例子把网页版面制作、版面切片及版面输出到Dreamweaver中插入Flash和文字链接进行了全面的讲解。
2.5 习 题
1．操作题。
(1) 下图2-117中有16个图案，请自定义下列图案，并进行填充，看看填充的效果如何。
图2-117 自定义图案
(3) 利用前面所学习的知识，制作下面两个按钮如图2-118和图2-119所示。
图2-118 按钮一
图2-119 按钮二
(4) 制作下列倒影效果，如图2-120所示。
图2-120 倒影效果
(5) 利用Photoshop，设计一个人主页。
因篇幅问题不能全部显示，请点此查看更多更全内容