本文目录一览：
- 1、网页布局结构有哪些
- 2、如何设计有效的网页布局?麻烦告诉我
- 3、常见的网站版面布局:T结构布局,口型布局,对称对比布局,POP布局,国型...
- 4、网页版面布局设计的原则是什么?
- 5、总结网站设计的几种版面布局形式
网页布局结构有哪些
网页布局有以下几种常见结构： “同”字型结构布局 所谓同字型就够就是指页面顶部为“网站标志+广告条+主菜单”或主菜单，下方左侧为二级栏目条，右侧为链接栏目条，屏幕中间显示具体内容的布局。
第二，拐角型网页布局：这个与国字型布局非常相似，不过在形势上存在一定察觉，应用起来效果也比较好。第三，标题正文型网页布局：这是在北京网站开发中最为简便的布局类型之一。此外，网站制作公司还常常用到包括“T”结构、“三”型以及对称对比型等。
左右框架型布局结构是一些大型论坛和企业经常使用的一种布局结构。其布局结构主要分为左右两侧的页面。左侧一般主要为导航栏链接，右侧则放置网站的主要内容 .【5】上下框架型 上下框架型布局与前面的左右框架型布局类似。其区别仅在于是一种上下分为两页的框架。
网页布局有以下几种常见结构：“同”字型结构布局 所谓同字型就够就是指页面顶部为“网站标志+广告条+主菜单”或主菜单，下方左侧为二级栏目条，右侧为链接栏目条，屏幕中间显示具体内容的布局。
传统的网页结构及布局方法如下：网页结构 页头（Header）：作用：页头是网页的顶部区域，通常包含网站的标志（Logo）、登录条（Loginbar）、页面横幅广告（Banner）以及菜单栏（Nav，即Navigation Bar）等内容。
传统的网页结构及布局方法如下：网页结构 传统的经典网页从上而下可以分为三个部分：页头（header）：页头是网页的顶部区域，通常包含标志logo、登陆条loginbar、页面横幅广告banner、菜单栏nav（navigation bar）等内容。这些元素共同构成了网页的头部导航和品牌形象展示区。
如何设计有效的网页布局?麻烦告诉我
页面定宽：自适应可以根据浏览器显示情况自动调整页面宽度，但是因为用户水平方向的聚焦范围有限，所以当页面过宽时，用户的浏览和操作成本会增加；而当页面过窄时（如用户同时开启两个浏览器对比查看商品搜索结果），自适应则会导致布局变形和内容错乱。给页面规定宽度可以避免这些问题。
也就是说大布局上要尽量避免平分的局面。小布局 也可以说是细节上的布局。我们可以把网页看成是由很多个小块组合而成的。通常要注意的就是标题与内容的关系以及这些块放置的位置。比如最核心的内容不要放在最顶、最后、或是最中间。
另外，站长一定要注意：页面设计风格的统面包屑导航的使用、主导航系统当前所在分类的高亮都有助于用户判断自己现在在哪里（具体可查看马海祥博客《如何在网站策划中做好导航设计》的相关介绍）。
系统提供的首页模版源码有两种，一种是完全用网页HTML源代码设置整个版面（包括背景、字体、布局等等），而另一种是将版面设置用CSS代码写成后“套”入网页HTML源代码中。前者便于修改，而后者则弄起来比较麻烦（得下载CSS源代码后上传到空间然后再插入网页HTML源代码中链接）。
规划网站 一个网站设计得成功与否，很大程度上决定于设计者的规划水平，规划网站就像设计师设计大楼一样，图纸设计好了，才能建成一座漂亮的楼房。
常见的网站版面布局:T结构布局,口型布局,对称对比布局,POP布局,国型...
上左右，左下，右下 口型布局 上下。左，右，中。对称对比布局 左右或者上下 POP布局 中 国型布局 上左右 左右中 标题正文型布局 上，下 变化布局 上框架，左框架，下框架 （1）“T”结构布局形式。
三型布局。这种布局多用于国外站点，国内用的不多。特点是页面上横向两条色块，将页面整体分割为四部分，色块中大多放广告条。对称对比布局，采取左右或者上下对称的布局，一半深色，一半浅色，一般用于设计型站点。优点是视觉冲击力强，缺点是将两部分有机的结合比较困难。POP布局。
常见的网页布局形式：T字型、口型、三字型、对称对比布局、pop布局，三字型网页多见于政府网站。“三”型布局具有简洁明快的艺术效果，适合于艺术类、收藏类、展示类网站。
网页版面布局设计的原则是什么?
1、直观性 所谓直观，指的是在打开的瞬间，用户能够明白这些内容和画面想要传达什么信息。需要让版式舒朗而明确，脉络清晰，用户一望而知之。易读性 文字的可读性要足够强，这不仅与文字的形体有关系，而且和大小、字间距、行间距都密切相关。图文结合 美观性 在确保了设计的直观性和易读性之后，就需要解决美观的问题了。
2、网页布局应该遵循一个原则，即“先上后下，先左后右”原则。由于搜索引擎在执行搜索的时候，其搜索的顺序跟我们浏览页面的顺序是一样的，即前面说的原则。遵循这个原则有助于搜索引擎蜘蛛抓取页面快速收录。由于搜索引擎爬虫程序是直接识别页面代码来得到信息的。
3、页面设计通常以一张精美的海报画面为布局的主体。常见的网页布局结构FLASH布局——FLASH布局是指网页页面以一个或多个Flash作为页面主体的学习前端第一步：划分网页结构，网页的结构的划分应该遵循哪些原则，如何去划分网页的结构呢？ 对于一个前端初学者，第一步就是要学会如何划分一个网页的结构。
4、具有清晰的视觉层次。布局应当让页面各元素之间的关系和重要性一目了然。你可以通过适当使用下列属性来实现视觉层次： 焦点：指用户首先关注的区域。形式上被赋予焦点属性的UI元素一定要表达重要的内容。视觉流：指用户关注区域的顺序。可以根据任务逻辑和用户的浏览习惯来设计恰当的视觉流。
总结网站设计的几种版面布局形式
口型布局。就是页面一般上下各有一个广告条，左面是主菜单，右面放友情连接等，中间是主要内容。这种布局的优点是充分利用版面，信息量大。缺点是页面拥挤，不够灵活。也有将四边空出，只用中间的窗口型设计，例如网易壁纸站。三型布局。这种布局多用于国外站点，国内用的不多。
对称型 对称型版式给人以稳定、庄重的感觉。对称可以分为绝对对称和相对对称，通常banner设计中采用相对对称以避免过于严谨。左右对称是常见的对称形式。 三角形 三角形是稳定的形态，特别是正三角形（金字塔形），而圆形和倒三角形则给人以动感和不稳定感。
版式设计可通过层次分明、均衡协调、和谐统一三类形式语言优化整体布局，具体如下：层次分明体现生动性与整体性：层次分明的版面能展现生动性和整体性。版面由众多元素和文字内容组合而成，通过一根“思路”将单个元素串联成整体，同时表现出节奏感，把握好版式的整齐有序，避免杂乱无章。
在网页设计中，常见的三种布局方法分别是T型布局、口型布局以及POP布局。T型布局以其独特的结构而闻名，该布局的上部通常为横条，包括网站标志和广告，而页面的下半部分则被分为两部分，左侧是主菜单，右侧则展示主要内容，这样的设计很容易让人联想到英文字母“T”，因此得名T型布局。
“国”字型布局通常上下各有一个广告条或者其他栏目条，左面是主菜单，右面放友情链接或者其他栏目等，中间是主要内容。这种布局的优点是充分利用版面，信息量大。缺点是页面显得比较拥挤和局促，不够灵活。
标签： 网页布局及版面设计
