网页布局类型
网页布局类型及布局技术的分析
网页布局类型及布局技术的分析摘要随着计算机网络的发展，网页作为传播信息的载体，其布局直接影响着网页整体视觉效果和信息的有效传达。
因此网页的布局设计也日益被网站建设者所注重，只有根据网站的内容、使用者、理念等合理的进行页面布局，才能达到理想的效果。
关键词网页布局；表格；框架；div+css中图分类号TP393 文献标识码 A 文章编号1673-9671-(2012)051-0178-02网页是网站构成的基本要素，而网页元素在网页中的组合决定了整个网站的最终效果，因此选择合适的网页布局类型及技术是关键。
本文围绕网页布局的类型及布局技术进行了分析，并结合《三农服务网》实例进行了简单的说明。
1 网页布局类型分析1.1 网页布局的类型大致分为标题正文型、T字型、国字型、框架型、封面型、Flash型6大类。
1.2 布局类型的分析1）标题正文型：页面分为上下结构，上面部分是标题、广告、导航等，下面部分是正文。
优点：结构清晰、简单，一目了然。
缺点：页面显得比较单调、枯燥。
2）T字型：页面顶部为网站标志、广告，下面部分的左列为主菜单，右列为主要内容。
优点：结构清晰，主次分明，容易上手。
缺点：页面显得呆板，变化较少，在页面停留时间久会感觉看之无味。
3）国字型：也可以称为“口”、“回”或“同”字型，页面分为上中下三部分，顶部是标题、广告，底部是网站的链接区、联系方式、版权声明等，中间部分分为左中右三列，左右分别列出一些小条，中间部分是主要内容。
优点：充分利用页面空间、增大信息量。
缺点：内容过多，显得页面拥挤。
4）框架型：一般分为左右框架型、上下框架型、综合框架型。
左右框架型是一种左右分为两页的框架结构，一般左面是导航链接，右面是正文。
上下框架型：与左右框架类似，区别仅仅在于它是把页面分为上下两页的框架。
综合框架型：上面两种结构的组合，相对复杂的一种框架结构。
框架型适合于聊天室、论坛、软件下载等网站的版面布局，优点：框架型页面分割合理、布局结构清晰。
网页布局的三种方式-标准流、浮动和定位
⽹页布局的三种⽅式-标准流、浮动和定位⽹页布局的三种⽅式⽹页布局的本质——⽤CSS 来摆放盒⼦。
把盒⼦摆放到相应位置CSS 提供了三种传统布局⽅式(简单说,就是盒⼦如何进⾏排列顺序)：普通流（标准流）浮动定位标准流标准流定义所谓的标准流:，就是标签按照规定好默认⽅式排列1. 块级元素会独占⼀⾏，从上向下顺序排列。
常⽤元素：div、hr、p、h1~h6、ul、ol、dl、form、table2. ⾏内元素会按照顺序，从左到右顺序排列，碰到⽗元素边缘则⾃动换⾏常⽤元素：span、a、i、em 等以上都是标准流布局，标准流是最基本的布局⽅式。
浮动浮动定义浮动最典型的应⽤：可以让多个块级元素⼀⾏内排列显⽰。
⽹页布局第⼀准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。
float 属性⽤于创建浮动框，将其移动到⼀边，直到左边缘或右边缘触及包含块或另⼀个浮动框的边缘。
语法：选择器{ float: 属性值; }属性值：值描述left元素向左浮动。
right元素向右浮动。
none默认值。
元素不浮动，并会显⽰在其在⽂本中出现的位置。
inherit规定应该从⽗元素继承 float 属性的值。
浮动特性⼀、脱离标准普通流的控制（浮）移动到指定位置（动）, （俗称脱标），且浮动的盒⼦不再保留原先的位置如同其名字的意义⼀样，浮动，即浮动到元素上⽅，可以这样来理解：标准流在最底层，浮动的元素在标准流的上⽅，即脱离了标准流的控制。
同时它位于标准流的上层，所以标准流⾥不会再存在它的位置。
但也会有特殊的情况，即⽂字和浮动元素位于同⼀个⽗元素⾥时，浮动元素不会盖住⽂字，⽽是环绕⽂字，这是因为浮动设计的初衷就是类似word图⽚和⽂字的浮动效果，所以不会出现浮动元素盖住⽂字的情况出现。
⼆、如果多个盒⼦都设置了浮动，则它们会按照属性值⼀⾏内显⽰并且顶端对齐排列例如三个在同⼀个⽗盒⼦下的⼦盒⼦，都设置左浮动例如在同⼀个⽗盒⼦下的两个⼦盒⼦分别设置左浮动和右浮动注意：浮动的元素是互相贴靠在⼀起的（不会有缝隙），如果⽗级宽度装不下这些浮动的盒⼦，多出的盒⼦会另起⼀⾏对齐三、浮动元素会具有⾏内块元素特性任何元素都可以浮动。
如何分析网页的布局
如何分析网页的布局当我们在浏览一个网页时，我们会发现网页的组成元素Logo,导航条，列表等内容的位置会随着网页主题分类置于网页的不同位置。
那么，怎样分析一个网页的布局成了制作一个网页首要任务，对于电子商务网站，个人主页。
我们要学会分析，这样，制作出来的网页就会给人们一目了然判断出是什么一个什么主题的网站。
下面，我就和大家认识分享下主要网页界面的布局分类。
（1）“国”字形结构。
“国”字形结构是一些大型网站所喜欢的类型。
页面最上面是网站的标题和横幅广告条，接下来就是网站的主要内容，左右两小条分列一些内容，中间是主要部分，和右边一起排列到底，最下面就是网站的一些基本信息。
“国”字形结构多用于教育网站和娱乐网站较多。
（2）拐角型结构拐角型结构与“国”字形结构。
只是形式上的区别。
页面顶部是标题及广告横幅，接下来的左侧是一列链接，右边是很宽的正文，下面也是一些网站的辅助信息。
拐角型结构常见的类型是最上面是标题及广告，左侧是导航链接。
拐角型结多用于商务网站。
（3）正文标题型结构正文标题型结构的页面布局是：最上面为标题或类是标题的一些内容，下面是正文。
正文标题型结构多用于文章页面和注册页面。
（4）左右框架型结构左右框架型结构是一种分为左右页面的框架结构，一般左面是导航链接，有时最上面会有一个小的标题或标志，右面是正文。
大部分的大型论坛就是采用了这种结构。
企业网站也喜欢采用这种布局。
这种类型的结构非常清晰，一目了然。
以上就是目前一些网站常采用的网页布局结构，如果大家有什么不明白的地方或更好的建议请及时联系我。
作者：刘伟源。
第6章 Div+CSS布局网页
6.2 使用Div+CSS布局网页
（21）设置分类项定位的Overflow值为hidden。 （22）连续单击“确定”按钮，完成Div区域的插入，最终结果如图6-19所示。
图6-19 完成Div区域的插入
6.2 使用Div+CSS布局网页
（23）单击插入面板的“插入Div标签”按钮，打开“插入Div标签”对话框。 （24）如图6-20所示，设置插入栏为“在标签之后”。
6.2 使用Div+CSS布局网页
（10）如图6-11所示，单击分类栏中的方框，然后设置Width为720像素， Height为120像素。
图6-11 设置宽度和高度
6.2 使用Div+CSS布局网页
（11）如图6-12所示，取消“margin”中对“全部相同”复选框的勾选， 然后分别设置Right和Left均为auto。这样设置可以保证Div区域在网页中居中显 示。
（30）设置分类项定位的Overflow为hidden。 （31）连续单击“确定”按钮，完成新的Div区域添加。最终结果如图6-24所示。
图6-24 完成新的Div区域添加
6.2 使用Div+CSS布局网页
（32）单击插入面板的“插入Div标签”按钮，打开“插入Div标签”对话框。 （33）按图6-25所示设置，然后单击“新建CSS规则”按钮，打开“新建CSS规则” 对话框。
图6-3 切换到布局选项卡
6.2 使用Div+CSS布局网页
（3）执行“修改/页面属性”命令，打开图6-4所示的“页面属性”对话框。
图6-4 “页面属性”对话框
6.2 使用D0像素，单击“确定”按钮。 （5）如图6-5所示，单击“插入Div标签”按钮，打开“插入Div标签”对话框。
《网页设计》课件——11-CSS浮动布局
PART ONE
重难点分析
重点：
1、浮动布局 2、消除浮动影响
难点：
1、浮动布局 2、消除浮动影响
B
PART TWO
课程讲解
常见网页布局
这是常见的1-2-1 布局。 上部：导航部分； 中部：主体部分； 下部：版权部分；
每一块都是一个div
常见网页布局
这是常见的1-3-1 布局。 上部：导航部分； 中部：主体部分； 下部：版权部分；
4. 多个块一起浮动，如果外层块缩小，使得同行浮动块空间不足时，浮动块会依 次向下一行移动。
5. 行内元素浮动后会强制转换成块级元素。此时要注意，一些内联属性将失效 （比如：vertical-align）.
浮动规则-1
1、浮动的块可以向左或向右移动，直到它 的外边缘碰到包含它区块的边框、或另 一个浮动框的边框、或一个标准流块的 下一行。
文档流布局方式
块级元素独占 一行，所以文档 流布局只能依次 顺序向下排列， 不能进行复杂布 局。
在实际应用中， 都采用浮动布局 或定位布局
网页元素的三种位置方式
• 普通流
• 浮动
• 定位
相对定位 绝对定位 固定定位
浮动——float属性
• 浮动的方式 取值 float : left float : right float : none
ShenYang ChinaSoft International 沈阳中软国际
浮动规则-3-1
3、如果多个块一起浮动，那么它们按照HTML代码顺序从前向后依 次跟随。 靠近页面边缘的一端是前，远离页面边缘的一端是后。
A、B块都向左浮动： A块向左浮动，B块依次跟随向左浮动。
浮动规则-3-2
网页布局的几种方式
⽹页布局的⼏种⽅式固定布局 为⽹页设置⼀个固定的宽度，通常以px做为长度单位，常见于PC端⽹页。
这种布局具有很强的稳定性与可控性，也没有兼容性问题，但不能根据⽤户的屏幕尺⼨做出不同的表现。
即如果⽤户的屏幕分辨率⼩于这个宽度就会出现滚动条，如果⼤于这个宽度则会留下空⽩。
流式布局（Liquid Layout） 为⽹页设置⼀个相对的宽度，页⾯元素的⼤⼩按照屏幕分辨率进⾏适配调整，但整体布局不变，通常以百分⽐做为长度单位（通常搭配min-*、max-* 属性控制尺⼨流动范围以免过⼤或者过⼩导致元素⽆法正常显⽰），⾼度⼤都是⽤px来固定住。
流式布局的代表作栅格系统（⽹格系统）。
例如设置⽹页主体的宽度为80%，min-width为960px。
图⽚也作类似处理（width:100%, max-width⼀般设定为图⽚本⾝的尺⼨，防⽌被拉伸⽽失真）。
缺点：因为宽度使⽤%百分⽐定义，但是⾼度和⽂字⼤⼩等⼤都是⽤px来固定，所以在⼤屏幕下显⽰效果会变成有些页⾯元素宽度被拉的很长，但是⾼度、⽂字⼤⼩还是和原来⼀样，显⽰⾮常不协调栅格化布局 将⽹页宽度⼈为的划分成均等的长度，然后排版布局时则以这些均等的长度做为度量单位，通常利⽤百分⽐做为长度单位来划分成均等的长度。
⽐如像 bootstrap，foundation 这些框架采⽤的就是栅格系统，只要给页⾯元素添加其栅格系统指定的类名，就能达到想要的响应式布局效果。
bootstrap 的栅格系统是通过⼀系列的⾏和列的组合来创建页⾯布局，它的栅格系统最⼤分为12份:不过版本bootstrap3 与 bootstrap4 实现栅格系统⽅式不⼀样, bootstrap3 为了兼容 IE，采⽤的是浮动⽅式来实现栅格系统：即每⼀个栅格都是⽤左浮动和百分⽐来进⾏排版，当窗⼝宽度改变，对应改变 container 容器的宽度，对应栅格宽度⾃然也跟着改变：bootstrap4 放弃了对IE的⽀持，采⽤的是最新的伸缩布局⽅式：⾃适应布局（Adaptive Layout） ⾃适应布局的特点是分别为不同的屏幕分辨率定义布局，即为不同类别的设备创建不同的静态布局，每个静态布局对应⼀个屏幕分辨率范围。
网页布局结构与色彩搭配解析
二、色彩搭配的基本原理和常见搭配方式
3、对比度：对比度是衡量两种颜色在视觉上的差异程度。高对比度的颜色搭 配可以增强网页的视觉效果，但过多使用可能会使网页显得过于刺眼。
三、不同应用场景和需求下的色 彩搭配分析
三、不同应用场景和需求下的色彩搭配分析
1、新闻类网站：新闻类网站以传递信息为主要目的，要求色彩搭配简洁明了。 使用对比度较高的色彩搭配可以突出标题和重点段落，提高阅读体验。例如，黑 色和白色的对比搭配可以很好地突面内容。
四、总结
四、总结
网页布局结构与色彩搭配是网页设计的重要组成部分，对于提高用户体验和 提升网站质量具有关键作用。通过选择合适的布局结构和色彩搭配，能够使用户 更加愉悦地使用网站，同时也能更好地传递网站的信息和价值。
四、总结
希望本次演示的解析能对相关从业人员有所帮助，在未来的工作中注重布局 结构和色彩搭配的运用，为打造更加优秀、实用的网页提供支持。
四、实际操作案例
1、确定主题：该电商网站主要销售环保产品，主题为“绿色生活”。 2、确定色彩搭配方案：以绿色为主色调，搭配灰色和白色。绿色代表环保， 灰色和白色则可以营造出简洁、干净的视觉效果。
四、实际操作案例
3、应用色彩搭配方案：首页的背景色为淡绿色，产品图片使用深绿色，与背 景形成对比度，突出产品。标题文字使用白色，与背景色形成强烈对比，引导用 户视线。副标题和正文使用灰色，保持视觉上的平衡。
3、品牌官网：品牌官网是展示品牌形象的重要平台，色彩搭配要与品牌形象 保持一致。例如，对于科技品牌，通常使用蓝色、灰色等冷色调来营造一种专业、 可靠的形象；而对于儿童品牌，则可以使用较为鲜艳的色彩来传达一种活泼、有 趣的氛围。
四、实际操作案例
四、实际操作案例
网页设计基础：理解网页布局的五种方式
网页设计基础：理解网页布局的五种方式介绍在现代互联网时代，网页设计成为了一门非常重要的技能。
而网页布局则是网页设计中的一个关键方面。
不同的网页布局方式可以影响用户对网页信息的感知和使用体验。
本文将介绍五种常见的网页布局方式，帮助读者理解并掌握这些不同的布局方式。
一、流式布局（Fluid Layout）流式布局也被称为自适应布局，其主要特点是网页容器会根据设备屏幕宽度或浏览器窗口大小进行相应调整。
这意味着无论用户在大屏幕电脑、平板还是手机上访问，页面都能自动适应屏幕尺寸而不至于出现滚动条。
流式布局最常用于响应式设计，通过CSS媒体查询和百分比单位来实现页面元素的相对定位和缩放。
二、定宽布局（Fixed Layout）定宽布局是指将页面内容固定在一个特定宽度上而不会随设备或窗口大小变化而改变。
这种方式通常利用像素（px）作为单位来设置元素尺寸。
优势在于保持设计的稳定性和一致性，但会在不同设备上导致页面出现滚动条或被裁剪。
三、响应式布局（Responsive Layout）响应式布局是一种综合了流式布局和定宽布局的方式。
通过使用CSS媒体查询和断点设置，在不同的屏幕尺寸下重新排列和调整页面元素，以适应各种设备。
这样可以提供更好的用户体验，同时减少开发者需要为不同设备制作独立网站的工作量。
响应式布局根据屏幕宽度或浏览器窗口大小自适应调整页面布局，使得用户能够在不同设备上获得最佳呈现效果。
四、分栏布局（Grid Layout）分栏布局是指将网页内容划分为多个平行区域，并利用CSS网格系统将页面元素放置到相应的栏中。
通过使用指定的列数和行数，可以实现复杂而灵活的网格结构。
分栏布局常见于报纸、杂志等需要多个板块并存的场景。
分栏布局可以提供良好的信息组织和视觉效果，但需要使用特定的CSS框架或自定义代码来实现。
五、居中布局（Centered Layout）居中布局是将网页内容放置在页面的中间，使其居中显示。
这种布局方式适用于简单、集中展示的页面结构，如单个产品介绍、相册或简报。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
网页常见布局
网页布局大致可分为“国”字型、拐角型、标题正文型、左右框架型、上下框架型、综合框架型、封面型、Flash型、变化型，下面分别论述。
1、“国”字型：
也可以称为“同”字型，是一些大型网站所喜欢的类型，即最上面是网站的标题以及横幅广告条，接下来就是网站的主要内容，左右分列一些两小条内容，中间是主要部分，与左右一起罗列到底，最下面是网站的一些基本信息、联系方式、版权声明等。
这种结构是我们在网上见到最多的一种结构类型。
2、拐角型：
这种结构与上一种其实只是形式上的区别，其实是很相近的，上面是标题及广告横幅，接下来的左侧是一窄列链接等，右列是很宽的正文，下
面也是一些网站的辅助信息。
在这种类型中，一种很常见的类型是最上面是标题及广告，左侧是导航链接。
3、标题正文型：
这种类型即最上面是标题或类似的一些东西，下面是正文，比如一些文章页面或注册页面等就是这种类。
4、左右框架型：
这是一种左右为分别两页的框架结构，一般左面是导航链接，有时最上面会有一个小的标题或标致，右面是正文。
我们见到的大部分的大型论坛都是这种结构的，有一些企业网站也喜欢采用。
这种类型结构非常清晰，一目了然。
5、上下框架型：
与上面类似，区别仅仅在于是一种上下分为两页的框架。
6、综合框架型：
上页两种结构的结合，相对复杂的一种框架结构，较为常见的是类似于“拐角型”结构的，只是采用了框架结构。
7、封面型：
这种类型基本上是出现在一些网站的首页，大部分为一些精美的平面设计结合一些小的动画，放上几个简单的链接或者仅是一个“进入”的链接甚至直接在首页的图片上做链接而没有任何提示。
这种类型大部分出现在企业网站和个人主页，如果说处理的好，会给人带来赏心悦目的感觉。
8、Flash型：
其实这与封面型结构是类似的，只是这种类型采用了目前非常游戏行的Flash，与封面型不同的是，由于Flash强大的功能，页面所表达的信息更丰富，其视觉效果及听觉效果如果处理得当，绝不差于传统的多媒体。
9、变化型：
即上面几种类型的结合与变化，比如本站在视觉上是很接近拐角型的，但所实现的功能的实质是那种上、左、右结构的综合框架型。
什么样的布局是最好的
这是初学者可能会问的问题。
其实这要具体情况具体分析的：
内容非常多，就要考虑用“国字型”或拐角型；
内容不算太多而一些说明性的东西比较多，则可以考虑标题正文型；框架结构的一个共同特点就是浏览方便，速度快，但结构变化不灵活；而如果是一个企业网站想展示一下企业形象或个人主页想展示个人风采，封面性是首选；Flash型更灵活一些，好的Flash大大丰富了网页，但是它不能表达过多的文字信息。