现在，越来越多的人想要建立自己的网站，通过自助建站系统就可以自己进行网页制作了。这无疑是一件好事，但是，很多设计师，尤其是新手设计师或者压根儿就不是设计师的小白，都在网页设计上走过不少弯路。网页制作最重要的就是网页布局，先布局，后细节，只有在选择了合适的网站布局以后，才可以顺利的进行接下来的工作。你要问网站布局有哪些？今天，深圳网站建设就为你介绍下下面几个常见的网页布局类型。
一、固定布局
固定网页布局（见图1)是指网站内容被一个固定宽度的容器包裹，容器内的区块以像素作为页面的基本单位，只需设计一套尺寸，也只展现一种布局。固定网页布局不管用户使用的是PC端还是移动端，也不管屏幕分辨率如何变化，大家看到的都是固定宽度的内容。
图1 固定网页布局
不足：不能根据用户的屏幕尺寸做出不同的表现，大屏幕上会出现大量空白，而小屏幕上可能会出现水平滚动条影响用户体验。
如某某的官网采用了该布局方式，其二级页面固定宽度布局为1093像素，无论用哪种设备浏览该网站，其布局都不变，可是用手机查看时网站时界面却未能全部显示完整。
二、流动布局
流动网页布局（见图2)是将大多数组件（包括主容器）都以百分比的形式作为页面的基本单位，根据用户的屏幕分辨率自适应，完美地利用有效空间展现最佳效果。使用这种布局方式，无论终端分辨率尺寸如何变化，网页都能自适应宽度。不过，单纯地使用流动布局的页面比较少见，它可以搭配固定布局的局部功能使用，还可以为响应式布局提供局部版式的自适应。
图5.7 流动网页布局
不足：宽度使用百分比定义，而高度和文字大小等大都是用px来固定，在较大分辨率下的显示效果会变成有些页面元素宽度被拉得很长，但是高度、文字大小还是和原来一样（即这些东西无法变得“流式”），显得非常不协调。
如国外某后台管理界面（见图3）布局上就结合了固定布局与流动布局两种方式：其左侧全局导航固定宽度为235像素；右侧内容区域则运用了百分比的形式来控制各元件的宽度，最终保证了不同分辨率设备上视觉空间的均衡布局。
图3 国外某后台管理界面
三、响应式布局
响应式网页布局（见图4）是分别为不同的屏幕分辨率终端所定义的布局。其布局原理是网页根据屏幕或浏览器的宽度选择最合适的那套进行布局，同时在每个布局中应用流式布局的理念，让页面元素宽度随着窗口调整而自动适配。
图4 响应式网页布局
不足：一是由于代码素材多，导致加载速度慢；二是响应式布局适用的网站类型有限。由于它的特点是适应不同终端、不同尺寸屏幕分辨率上的信息版式布局。由于图片、文字信息的栅格响应比较容易，因此响应式布局比较适用于内容较少、结构简单的公司活动宣传网站，而不适用于内容、功能复杂的电子商务类网站等。
如星巴克官网（见图5)就使用了响应式网页布局，即便是使用不同的终端、改变浏览器的宽度，其页面版式也会通过字段自动换行，图片自适大小变化而呈现出与设备宽度匹配的最佳状态。这种因宽度判断的不同界面布局自适应地改变的节点被叫作断点。目前大多网站选择响应式断点的设计模式，主要有基于设备和内容优先两种。
图5 星巴克官网
第一种基于设备的模式是通过主流设备的类型及尺寸来确定布局断点（见图6），从而设计多套样式，再分别投射到响应的设备。如你的页面主要兼容的设备为手机、平板、桌面电脑3种，那么就需要根据主流手机分辨率尺寸设置两个断点。下图中设置的断点是720像素与990像素，即若你的屏幕宽度小于720像素的将会出现A的版式，而当宽度大于等于720像素且小于990像素的将会出现B的版式，大于990像素则会显示C的版式。
图6 基于设备确定断点
图7 基于内容确定断点
第二种基于内容优先的模式是根据内容的可读性、易读性作为确定断点的标准（见图7），从小到大共设计了A、B、C、D4种版式，在对内容进行布局设计的时候，我们首先是基于内容来决定何时需要采用不同的呈现方式，再参考设备的物理尺寸，最终确定断点数值分别为360像素、720像素、1080像素。
今天的网页设计分享就到这了，如果您喜欢这篇文章，您可以分享给你的朋友！深圳网站建设-博纳网络编辑整理。
