2.5 页面分割方向的布局方式
在合理设计网页布局时，首先需要根据页面中的所有内容、页面的分割方向和布局方式将网页的基本格式确定下来，再在其基础上进行设计或者制作。根据页面的分割方向，可以将页面的布局方式分为纵向分割、横向分割和纵向与横向复合型3种。
2.5.1 纵向分割
在页面中采用纵向分割布局方式时，最常见的是将导航和菜单设置在页面的左侧位置，将正文内容和一些公告信息设置在页面的右侧位置，并在两侧的边缘区域留一些空白，如图2-76所示。
图2-76 纵向分割的网页布局（1）
左侧网站通过纵向分割布局方式将页面中的不同内容区域分割为两部分，使页面中的功能与内容区域的划分非常清晰，并且网页中的文字和图片比较统一，使整个页面看起来具有很好的连贯性。
右侧网站也使用了纵向分割布局方式，以创新的方式将整个页面分割为两部分，使浏览者在浏览该部分时抱着好奇的心态，吸引浏览者的注意。在页面中还为各纵向分割部分添加了交互效果，从而使网页具有个性十足的风格。
纵向分割的布局方式主要应用在信息量大、类别多的网页中，其主要优势在于，即使浏览器窗口的大小发生变化，也只会影响右侧部分的内容，左侧的菜单和导航不会发生任何变化，用户使用起来十分方便，因此大部分用户非常喜欢这种网页布局方式，如图2-77所示。
图2-77 纵向分割的网页布局（2）
2.5.2 横向分割
在页面中采用横向分割布局方式时，将菜单和导航设置在页面上方，将主体内容设置在页面下方的情况比较多。这种分割方式适用于结构简单，但从视觉角度上对图片要求很高的网页，如图2-78所示。
图2-78 横向分割的网页布局（1）
该网页采用了横向分割的布局方式，上半部分采用了满屏的背景色块，并叠加不规则的图像和色块来突出表现页面的主体内容，页面的下半部分则使用了浅灰色的背景来展示网页版底信息。
网页布局采用不同颜色和形状的色块来划分网页区域。
根据不同网站注重的内容不同，选择横向分割布局方式还是纵向分割布局方式也有一定的考究。如果注重网页中的导航或者菜单，则选择纵向分割布局方式较为合适；如果注重网页的设计感，由于采用横向分割布局方式的页面视觉效果非常好，因此应选择该种布局方式，如图2-79所示。
图2-79 横向分割的网页布局（2）
提示
根据网站的类型和页面中内容多少的不同，选择适当的网页布局方式可以给用户带来与众不同的视觉感受。实际上，大部分网站都采用了纵向分割与横向分割相结合的布局方式，但是，主要的分割方式还是偏向于纵向分割和横向分割中的一种。
实战练习03——布局家居网站
视频：配套资源包\视频\第2章\2-5-2.mp4 源文件：配套资源包\源文件\第2章\2-5-2.psd
1. 案例分析
本案例对一款家居网站进行基础布局，并根据现有条件，制作出网页的背景。网页的背景效果如图2-80所示。完整的网页线框图如图2-81所示。
图2-80 网页的背景效果
网页的背景图是由多张素材图像拼合而成的，所以非常贴近网页的主题。网页中参考线的作用是大致框定网页的布局，之后还需要添加参考线。需要注意的是，这些参考线应根据网页的内容元素来添加。
图2-81 完整的网页线框图
从上图中可以看出，网页内容被横向分割为两大部分，由此可判断此网页采用的是横向分割的布局方式。
2. 制作步骤
01 打开Photoshop CC，单击“新建”按钮，在弹出的“新建文档”对话框中设置如图2-82所示的网页尺寸。设置完成后，单击“创建”按钮，在工作界面中添加参考线，如图2-83所示。
图2-82 网页尺寸
图2-83 添加参考线
02 连续打开素材图像25201.png～25204.png，并将素材图像25201.png和25202.png拖入设计文档中，如图2-84所示。继续将素材图像25203.png拖入设计文档中，并将图层的“混合模式”修改为“柔光”，将图层的不透明度设置为“70%”，如图2-85所示。
图2-84 添加素材图像
图2-85 设置图层参数
提示
图2-84中的网页背景，是由4张素材图像拼合而成的，并且存储格式为透底的PNG格式。这4张素材图像包含山水图和家居图两种类型，拼合过程使用了裁切、模糊和擦除等操作。因为拼合过程过于烦琐且对网页的布局设计没有任何影响，所以不再为读者详细讲解。
03 图层的样式设置完成后，网页的图像效果如图2-86所示。将素材图像25204.png拖入设计文档中，设置图层的不透明度为“45%”，如图2-87所示。
图2-86 网页的图像效果（1）
图2-87 设置图层的不透明度
04 图层的样式设置完成后，网页的图像效果如图2-88所示。新建图层并设置前景色为白色，使用“画笔工具”在页面的右下角涂抹出柔边缘的效果（见图2-89），并设置图层的“混合模式”为“线性减淡（添加）”，不透明度为“90%”。
图2-88 网页的图像效果（2）
图2-89 涂抹画布
05 创建一个黑色的矩形，设置“路径操作”为“减去顶层形状”，继续创建一个黑色的椭圆形，如图2-90所示。在“属性”面板中，设置羽化值为“163.0像素”，如图2-91所示。
图2-90 创建形状
图2-91 设置羽化值
06 设置形状图层的不透明度为“45%”，“图层”面板的参数如图2-92所示。设置完成后，网页的图像效果如图2-93所示。
图2-92 “图层”面板的参数
图2-93 网页的图像效果（3）
07 打开“图层”面板，选中除“背景”图层外的所有图层，将其编组并重命名为“背景”，如图2-94所示。按照上述方法完成参考线的添加，为接下来的网页设计做准备。完整的网页效果如图2-95所示。
图2-94 编组图层并重命名
图2-95 完整的网页效果
2.5.3 纵向与横向复合型
在采用纵向与横向复合型布局方式的网页中，一般情况下，大部分网页都是以纵向分割方式为基础，然后在此基础上添加横向分割方式的，如图2-96所示。
图2-96 纵向与横向复合型的网页布局（1）
在采用纵向与横向复合型布局方式的网页中，一般将网页的导航等元素放置在页面上方，版权声明等信息放置在页面下方，子菜单放置在页面左侧，主体内容放置在页面右侧，如图2-97所示。
图2-97 纵向与横向复合型的网页布局（2）
提示
纵向分割和横向分割的布局方式非常适用于页面信息较少的网页，但有些信息量较多的网页也会使用这两种布局方式。纵向与横向复合型的布局方式则适用于页面信息量较多的网页，其可以有效地分布、排列页面中的内容。
2.5.4 运用固定区域的设计
在网页中，运用固定区域的设计是指在页面某个特定大小的区域内展现所有的内容，从而让浏览者一眼便可以看出该网页的布局结构和主体内容，如图2-98所示。
图2-98 固定区域的网页布局
该网页将页面整体设计为嵌套版式，使其表现形式独特。其页面内容也被固定分配在白色矩形区域中，形成了固定区域的网页布局。
事实上很难定义运用固定区域的设计到底属于网页布局结构中的哪种类型。在网页中，运用固定区域的设计最突出的特点就是能够将浏览者的视线集中到该区域中，然后向浏览者展示网站的所有相关信息，从而有效地传达信息。
提示
运用固定区域的设计也有不足的方面。由于固定区域的尺寸和页面都非常明确，因此当浏览者的屏幕分辨率足够大时，页面有可能会出现大量的空余空间，采用固定区域布局的页面有时会给浏览者带来孤立无援的感觉。