下面是我为大家带来的一份关于网站布局攻略的详细解析：
-
页面框架
网站的页面框架是构建一个完整页面的基础结构。通常，它由以下几个部分组成：Head、Main以及Foot。在有些情况下，为了满足布局的需求，我们还在Head下方增加了用于页面功能导航的Men。
-
布局原则
对于WEB应用来说，页面布局是与web应用的功 能区域相对应的，并且我们需要遵守一定的规则来切分页面中各个部分之间的比例。
在设计页面布局时，首先需要考虑用户在浏览web页面时视觉流向上的要求。根据视觉流向，用户首先看到的是页面“Head”部分的左面，通常是WEB应用的Logo；接着是用于页面导航的“Men”；然后是处于页面左侧的“sidebar”，通常这里也是用来进行页面功能导航的，与“Men”的功能相呼应；接下来是位于页面中心位置的内容部分；最后用户的视线会落在WEB页面的底部。
-
页面分割
以以上图示的布局方式为例，按照通常web页面设计时所遵循的方法，并结合黄金分割比例的方法：首先，将页面按照1:8的方式进行分割，在高度方向上，对上部1/3的区域按照黄金分割的方法分出head和men的区域；在宽度方向上，对中部左边1/2的区域按照黄金分割的方法分出sidebar的区域，剩下的空间留给content区域；在高度方向上，对下部1/3区域按照黄金分割的方法分出foot的区域。
-
页面结构
在页面布局中，不同区域的定义方式是不同的。对于各个功 能区域的切分是按照“像素”和“比例”的方式进行的，以1920*1080的分辨率作为基准。其中：Head区域，宽度是按照比例设置的，高度采用所占的固定像素值来确定的，一般占100px；如果有Men区，则调整为80px；Men区域与Head的配置要求是一样的；Sidebar区域，宽度是结合与Content之间的黄金切分比例，一般占180px；高度是按照比例设置；Content区域，高度和宽度方向布局都是按照比例设置；Foot区域，宽度按照1%设置，高度采用所占的固定像素值来确定的，一般占100px。
-
页面展现
对于页面布局来说，除了上述要求外，还需要考虑以下要求：能自适应19201080、1280720两种分辨率；界面层次不超过三层；默认窗口设置下，不应出现水平、垂直滚动条；当界面内容超出显示区域时，以浮动层的形式显示；对于用户的感官而言，屏幕对角线相交的位置是用户直视的地方，而页面正上方四分之一处为易吸引用户注意力的位置，所以在放置页面时要利用这两个位置。父页面或主页面的中心位置应该设计在对角线焦点附近；子页面的位置应该靠近主窗体的左上角或正中。
-
界面
界面应大小合适，感觉协调舒适，能在有效的范围内吸引用户的注意力。建议和要求：长宽接近黄金比例，切忌长宽比例失调、或宽度超过长度；布局要合理，不宜过于密集，也不能过于空旷，合理的利用空间；同一页面上的按钮大小应该一致，不同页面的按钮大小尽量相近，按钮上忌用太长的名称；避免空旷的界面上放置很大的按钮。
-
字体设置
页面字体属性的设置在相应的CSS中进行定义，页面文字编码要求是UTF-8。在规定字体属性时，需要设置：中文采用“宋体”，英文采用“Arial”或“Verdana”，CSS文件中的font-family里面必须保证有“宋体”。对于页面属性中字体大小的设置，需要根据内容的不同级别来设置。
这就是今天我们要分享的关于网站布局攻略的全部内容，希望对大家有所帮助。