2.4 根据内容位置决定网页布局方式
在合理地布局网页时，根据网页中内容元素的排列方式不同，每个位置内的元素的重要程度也不同，所以在布局网页时首先考虑的应是网页中内容的排列顺序。
如果采用横排排列方式，则将网页的标志放置在网页左侧的上方；如果采用水平居中的排列方式，则将网页的标志放置在网页中间的上方。
2.4.1 满屏式网页布局
网页布局如果采用满屏式的布局方式，则页面结构相对简单、视觉流程相对清晰，便于浏览者快速定位，但同时因为页面空间的限制，这种布局方式只适用于信息量少、目标比较集中或者商品相对独立的网页。图2-17所示为满屏式的网页展示；图2-18所示为满屏式网页的线框图。
图2-17 满屏式的网页展示
该网页的布局结构独特，以产品大图作为整个网页的背景。
产品大图运用满屏式布局和交互动画的方式展示给浏览者，并且根据网页下方的排列方式进行替换。
图2-18 满屏式网页的线框图
满屏式网页布局使得网页产品表现突出，并且能够带给浏览者较好的交互体验。
提示
满屏式的布局方式常常用于小型网站、活动网页、主推商品页面和注册页面等场景中。
采用满屏式布局方式的网页，其信息展示集中，重点突出，通常会通过大幅精美的图片或者交互式的动画效果来实现强烈的视觉效果，从而给浏览者留下深刻的印象，提升品牌形象，吸引浏览者进一步浏览，如图2-19所示。
图2-19 满屏式网页布局（1）
该宣传网页采用了满屏式布局方式，使用了宏伟大气的图片，白色半透明的导航，使得网页看起来更加美观，使浏览者有身临其境的感受。
但是，采用满屏式布局方式的网页的信息展示量相对有限，因此需要在网页中添加导航或者重要的入口链接等元素，起到导引和信息分流的作用，如图2-20所示。
图2-20 满屏式网页布局（2）
该网页采用了满屏式布局方式，使用视频填满网页，当浏览者单击“播放”按钮时，页面实现交互效果。这样的布局设计使得页面干净、大气。
2.4.2 一栏式网页布局
通常，一栏式布局方式使用目的性单一，使用较多的是搜索引擎网页，或者较为独立的二级页面及更深层次的页面，如用户登录和注册页面，如图2-21所示[1]。
图2-21 网站注册页面
这是电商网站的注册页面，采用了一栏式布局方式。在用户登录或注册页面中，由于用户的目光只聚焦在表单的填写上，因此除表单外，只需提供返回首页及少数重要入口即可，不需要添加过多不必要的信息和功能，否则会引起用户的不适。
实战练习01——设计并制作白酒网页
视频：配套资源包\视频\第2章\2-4-1.mp4 源文件：配套资源包\源文件\第2章\2-4-1.psd
1. 案例分析
本案例来设计并制作一个白酒网页，在设计网页的过程中，设计师首先需要定义网页的基本布局，即使用参考线确定页面的留白和基础的版式；其次要确定网页的布局方式，本例采用满屏式网页布局；接着要确定网页的配色方案；最后需要填充网页信息。网页的具体效果如图2-22所示，网页的线框图如图2-23所示。
图2-22 网页的具体效果
从上图中可以看出，网页布局采用的是满屏式，而排版有疏有密，这是因为设计师合理地利用了网页布局的原则，让浏览者有一种层次分明的感觉，节省了浏览者的阅读时间。
图2-23 网页的线框图
对于上侧的线框图，很多初学者可能会认为这是一款采用了两栏式布局的网页，其实不然，这是一款非典型的满屏式网页。它的特点在于商品图和网页文本之间有一种递进感，使得用户在浏览网页时减少了分割的感觉。
2. 制作步骤
01 打开Photoshop CC后，分别打开素材图像23601.jpg和23602.jpg，素材图像23601.jpg的展示效果如图2-24所示。将素材图像23602.jpg拖曳到素材图像23601.jpg的设计文档中，效果如图2-25所示。
图2-24 素材图像23601.jpg的展示效果
图2-25 添加素材图像后的效果
提示
将打开的素材图像23601.jpg设为设计文档，再将素材图像23602.jpg拖曳到素材图像23601.jpg的设计文档中。
02 使用“移动工具”为页面添加留白的参考线，如图2-26所示。新建图层，使用“油漆桶工具”为图层填充黑色的前景色，再为图层添加蒙版，并使用“画笔工具”在画布上进行涂抹，如图2-27所示。
图2-26 添加参考线
图2-27 添加蒙版并进行涂抹
提示
为图层添加的是图层蒙版，在使用“画笔工具”涂抹蒙版的时候，需要设置画笔的不透明度为20%，笔触大小为1100px，前景色为黑色。
03 创建一个细长的白色矩形，为形状图层添加“渐变叠加”的图层样式，如图2-28所示。复制刚刚创建的形状图层，修改复制图层的图层样式并移动图层，如图2-29所示。
图2-28 创建形状并添加图层样式
图2-29复制并移动形状图层
提示
将复制得到的图层向下移动后，修改其图层样式，将“渐变叠加”图层样式中的角度修改为180°。
04 打开素材图像23603.png并将其拖曳到设计文档中，如图2-30所示。使用相同的方法完成素材图像23604.png的添加操作，如图2-31所示。
图2-30 添加素材图像23603.png
图2-31 添加素材图像23604.png
05 复制素材图像23604.png，并为图层添加“颜色叠加”的图层样式，图层样式的具体参数如图2-32所示。设置完成后，网页的白色标志如图2-33所示。
图2-32 图层样式参数
图2-33 网页的白色标志
06 打开素材图像23605.png并将其拖曳到设计文档中，如图2-34所示。使用“横排文字工具”在画布中添加文本，如图2-35所示。
图2-34 添加素材图像23605.png
图2-35 添加文本（1）
07 设置文本的参数，如图2-36所示。使用相同的方法完成其余导航文本和背景的制作，并将各个导航图层编组为“导航”，如图2-37所示。
图2-36 字符参数（1）
图2-37 导航图层组
提示
本案例中的网页布局虽然采用的是满屏式，但不同于之前讲解的典型网页，它的网页主体不是满屏的大图，而是由网站的主推商品图片和商品简介组成，再加上简单的网页标志和网页导航，构成了网页的全部内容元素。
08 打开“字符”面板，设置为如图2-38所示的字符参数，然后使用“直排文字工具”添加如图2-39所示的文本。
图2-38 字符参数（2）
图2-39添加文本（2）
09 打开“字符”面板，设置为如图2-40所示的字符参数，然后使用“直排文字工具”添加文本，具体的内容如图2-41所示。
图2-40 字符参数（3）
图2-41 添加文本（3）
10 使用“矩形工具”在画布中连续绘制宽度为2px的形状，如图2-42所示。将连续绘制的矩形编组，重命名为“竖排”，如图2-43所示。
图2-42 绘制矩形
图2-43 将连续绘制的矩形编组并重命名
提示
绘制的矩形大小为2px×468px，如果设计师想要各个形状的大小相同，可以使用Ctrl+C和Ctrl+V快捷键连续复制形状。
11 打开“字符”面板，设置为如图2-44所示的参数，然后使用“直排文字工具”添加文本，具体的内容如图2-45所示。
图2-44 字符参数（4）
图2-45 添加文本（4）
12 使用“椭圆工具”在画布中连续创建形状，使用相同的方法完成素材图像的创建操作，如图2-46所示。打开“图层”面板，为图层编组，如图2-47所示。
图2-46 创建形状
图2-47 为图层编组
提示
这一步首先需要创建一个正圆形，然后设置形状的填充颜色值为无，描边颜色值为RGB（216，3，20），接着继续创建其余形状。
2.4.3 两栏式网页布局
两栏式网页布局是常见的布局方式之一，这种布局方式兼具满屏式和后面要讲解的三栏式布局的特点。
相比满屏式布局，两栏式布局可以容纳更多的内容，而相比三栏式布局，两栏式布局的页面信息不至于过度拥挤和凌乱，但是两栏式布局不具备满屏式布局带来的视觉冲击力和三栏式布局所展现的超大信息量的优点。
两栏式布局根据页面内容占比的不同，可以细分为左宽右窄、左窄右宽和左右均分3种类型。虽然从表面上看只是比例和位置不同，但实际上它影响的是用户浏览的视线流以及页面的重点。
1. 左宽右窄
左宽右窄的网页布局通常是内容在左，导航在右。这种结构明显突出了内容的主导位置，引导浏览者将视觉焦点放在网页的内容上。图2-48所示为左宽右窄的网页展示；图2-49所示为左宽右窄网页的线框图。
图2-48 左宽右窄的网页展示
该网页采用了左宽右窄的布局方式，突出显示当前最新发表的内容，网页左侧以精美大图和简短文字介绍为主，右侧以小型图片作为网页的导航。网页的视觉流程非常清晰、合理。
图2-49 左宽右窄网页的线框图
上侧以大面积的精美图片和文字介绍为主来吸引浏览者的目光，并且图片多、文字少，可以减轻浏览者的阅读负担。右侧以小型的图片来突出导航，方便浏览者继续浏览网站中其他栏目的内容。
两栏式网页布局会引导浏览者阅读内容的同时关注更多的相关内容，如图2-50所示。
图2-50 两栏式网页布局
上侧的网页同样采用了左宽右窄的布局方式，左侧的大图可以重点突出商品，右侧的文字介绍是网页的次要内容。
2. 左窄右宽
左窄右宽的布局通常在左侧设置导航，导航以树状或者一系列文字链接的形式展示给浏览者，右侧则用于展示网页的具体内容。此时左侧不宜放置次要内容或者广告图片，否则会过度干扰浏览者浏览主要内容。图2-51所示为左窄右宽的网页展示；图2-52所示为左窄右宽型网页的线框图。
图2-51 左窄右宽的网页展示
这是一个信息展示网页，左窄右宽的布局方式在图示列表页面中非常常见，左侧放置相关的图片导航，右侧展示相应的大图，并且根据图片的大小来区分左右区域。
图2-52 左窄右宽网页的线框图
左窄右宽的网页布局将网页分成大小不等的两部分，由于网页左右两侧的面积不同，所以需要以图片的大小或者背景色的深浅来平衡视觉。
用户的浏览习惯通常是从左到右、从上到下的，因此采用左窄右宽布局方式的页面更符合理性的操作流程，能够引导用户通过导航查找内容，使用户的操作更加具有可控性。内容丰富和导航清晰的网页非常适合使用此种布局方式，如图2-53所示。
图2-53 内容丰富和导航清晰的网页
通过垂直贯穿页面的黑色矩形和大幅图片，将该网页分为左窄右宽的两部分，左侧的网页导航背景颜色较深，右侧的图片相对来说颜色较浅，但其面积比导航大得多，这样网页左右两部分可以很好地在视觉上达到平衡。
3. 左右均分
左右均分是指将网页左右两侧均分为两栏，左右两侧的比例相差较少，甚至完全一致。运用这种布局方式的网页较少，此布局方式适用于两边信息的重要程度相对均等的网页，不能体现出内容的主次。图2-54所示为左右均分的网页展示；图2-55所示为左右均分网页的线框图。
图2-54 左右均分的网页展示
该宣传网站采用了左右均分的布局方式，这种布局方式将会给浏览者带来强烈的对称感和对比感，能够有效地吸引浏览者的目光。
图2-55 左右均分网页的线框图
这种布局方式只适用于内容信息量比较少的网页，同时这种布局方式可以带给浏览者强烈的视觉冲击。
对比上述3种布局方式，可以看到每种布局方式的侧重点和视线流的方向都是不同的，如图2-56所示。
图2-56 3种布局方式的对比
提示
左窄右宽型网页的导航位置是相对突出的，这样的网页可以引导浏览者从左到右浏览网站，即从导航位置寻找信息内容。
左宽右窄型网页的左侧一般会放置正文内容，让浏览者的视线聚焦在当前位置上，浏览完当前的内容后，再通过导航引导浏览者查阅更多的网页内容。
对于左右均分型的网页，如果网页两侧均放置内容，那么浏览者的视线将会按照从上到下的习惯来阅读网页，这样网页两侧将会存在一定的交叉性，如果左侧或者右侧放置了导航，那么左右侧会出现许多的交叉，从一定程度上增加了浏览者的视觉负担。
实战练习02——布局啤酒网站
视频：配套资源包\视频\第2章\2-4-2.mp4 源文件：配套资源包\源文件\第2章\2-4-2.psd
1. 案例分析
本案例对一款啤酒网站进行前期的基础布局并添加网页背景。网页的具体效果如图2-57所示，完整网页的线框图如图2-58所示。
图2-57 网页的具体效果
上图中的网页背景是利用素材图像和图层的混合模式组合而成的。页面中的参考线，是根据网页的内容元素而添加的，它们的作用是框定一些重要的元素，使其在固定位置上发挥最佳的图像效果。
图2-58 完整网页的线框图
上图是完整网页的线框图，从图中可以看出网页被左侧的导航和右侧的大图分为了两部分，所以该网页采用了两栏式网页布局方式。
2. 制作步骤
01 打开Photoshop CC，单击“新建”按钮，在弹出的“新建文档”对话框中设置如图2-59所示的网页尺寸。设置完成后，单击“创建”按钮，可以在软件的工作界面中看到如图2-60所示的画布。
图2-59 网页尺寸
图2-60 画布
02 在工作界面中按Ctrl+R快捷键调出标尺，如图2-61所示。选择“移动工具”，将鼠标指针放在标尺处，单击并向右拖曳到如图2-62所示的位置。
图2-61 调出标尺
图2-62 添加参考线
03 将鼠标拖曳到合适的地方并释放后，网页的基础布局已完成。网页的基础布局效果如图2-63所示。
04 执行“文件→打开”命令，在弹出的对话框中选中素材图像24201.jpg，并将其拖入设计文档中，如图2-64所示。
图2-63 网页的基础布局效果
图2-64 添加素材图像
提示
此时添加的4条参考线不仅是为网页的留白做准备，也框定了网页内容信息的设计范围。
05 打开“图层”面板，单击面板下方的“创建新的填充或调整图层”按钮，在弹出的下拉列表中选择“曲线”选项，在弹出的“属性”面板中设置为如图2-65所示的参数。
06 再次单击“创建新的填充或调整图层”按钮，在弹出的下拉列表中选择“亮度/对比度”选项，在弹出的“属性”面板中设置为如图2-66所示的参数。
图2-65 曲线参数
图2-66 亮度/对比度参数
提示
在“属性”面板中设置曲线参数时，需要单击网格中的点来确定输入（所选点的当前强度）和输出（所选点的新强度）的强度。
07 创建一个与画布大小相同的矩形，设置填充颜色值为RGB（51，103，152），并设置形状的“混合模式”为“正片叠底”，网页背景效果如图2-67所示。打开“图层”面板，选中除“背景”图层外的所有图层，将其编组并重命名为“背景”，如图2-68所示。
图2-67 网页背景效果
图2-68 编组图层并重命名
08 按照上述方法完成参考线的添加，为接下来的网页设计做准备。完整的网页效果如图2-69所示。
图2-69 完整的网页效果
提示
设计师此时为网页添加的参考线，一般都是根据网页线框图确定的，因为此时的线框图已经基本确定了网页的内容布局和信息排版，添加这些参考线后，设计师在制作网页时会节省一些时间和精力。
2.4.4 三栏式网页布局
三栏式网页布局在页面排版和内容展示上更加紧凑。其可以更加充分地运用网页的空间，从而尽可能多地为浏览者展示网页的内容，同时强化了内容的紧密性。它常用于信息量比较丰富的网页。三栏式网页布局如图2-70所示，三栏式网页的线框图如图2-71所示。
图2-70 三栏式网页布局（1）
这是某网站的首屏设计，采用中间宽、两侧窄的方式，在中间放置网页的主体内容，主体内容大致为网页信息分类，而左右两侧放置的是网页的次要内容。
图2-71 三栏式网页的线框图
相对来说，一些新闻门户网站为了满足不同类型人群的需求，会采用三栏式网页布局方式。通常这类网站都是将页面划分为两侧窄、中间宽的样式。其中较宽的中间部分用来放置最新的新闻信息，两侧用来放置各种图片或文字链接。
一个网页的空间是有限的，如果显示过多的信息，会造成网页中信息的拥挤和混乱，浏览者将会很难找到所需要的信息。这无疑增加了浏览者使用该网页的难度，降低了浏览者对网页信息的可控性，如图2-72所示。
图2-72 网页布局空间
由于屏幕的限制，三栏式网页布局都比较相似，主要表现在比例上的差异，常见的有中间宽、两侧窄和两栏宽、一栏窄两种方式。第一种方式将主要内容放置在中间，左右两侧放置导航链接或者次要内容；第二种方式在两栏放置重要内容，在另一栏放置次要内容。三栏式网页布局如图2-73所示。
图2-73 三栏式网页布局（2）
这是某游戏网站的页面，采用了三栏均分的布局方式，每栏由上半部分的图片和下半部分的文字、按钮组成。这种布局方式不仅可以展现非常多的页面信息，而且网页布局非常合理。
许多门户网站和电商网站都喜欢采用三栏式网页布局中的中间宽、两侧窄的方式来布局网页，常见的比例为1∶2∶1。因为中间栏在视觉比例上相对惹眼，所以设计师们默认将网页的主体内容放置于网页的中间栏，而两侧的栏目则用于放置次要内容和广告图片等。
使用这类布局方式的网页，往往可以将浏览者的视线集中在网页的中间部分，小部分的视线则流向两侧，这样做的目的是突出网页的重点，但同时容易降低网页的整体利用率，如图2-74所示。
图2-74 中间宽、两侧窄的布局方式
提示
两栏宽、一栏窄的布局方式也比较常见，最常见的比例为2∶2∶1。布局中较宽的两栏常用来展现重点内容，而较窄的一栏则用来展现辅助内容。因此相对于中间宽、两侧窄的布局方式，它能够展现更多的重点内容，提高了页面的利用率，但是相对而言，重点内容的展示效果不如中间宽、两侧窄的布局方式好。
2.4.5 水平和垂直居中的网页布局
水平和垂直居中的网页布局是指将页面的横向和纵向设计成100%的布局框架，使页面中的内容在任何大小的屏幕分辨率下都在浏览器的正中间显示，如图2-75所示。
图2-75 水平和垂直居中的网页展示
该网页采用了水平和垂直居中的网页布局方式，是常见的网页布局方式。这样无论浏览者的屏幕分辨率为多少，内容都将显示在页面的中间位置，使内容保持了页面的统一性。
因为计算机屏幕的分辨率不同，所以设计师在设计时一般以1920px×1080px分辨率为标准。设计师在设计时如果想要使页面最大化，并且不会出现滚动条，则横向需设置在1200px之内，但这不是固定的，根据页面的使用空间，也可以适当地使用其他数值。