网页设计中布局方式之比较
前端网页布局有几种方式
前端网页布局有几种方式常用的前端网页布局方式有四种，分别为静态布局;流式布局;自适应布局;响应式布局。
其中静态布局为传统的一种布局方式，网页上的所有元素都是用px为单位进行设定的。
1、静态布局最为传统的一种布局方式，网页上的所有元素都是用px为单位进行设定的。
布局特点：不管屏幕的大小，页面宽高始终不变，始终维持最初〔制定〕时的样式大小来显示。
常规的PC端网页都是用的静态布局，也就是设置了min-width，当小于这个宽度的时候出现滚动条，当大于的时候让内容居中，外加背景。
2、流式布局布局特点：当屏幕分辨率大小发生变化时，页面里的元素大小会变化但布局不会发生变化。
制定方法：使用%百分比来定义宽度，高度大都是用px来固定，可以依据可视区域(viewpoint)和父元素的实时尺寸进行调整，尽可能的去适应各种分辨率。
往往配合max-width/min-width等属性控制尺寸流动范围以免过大或者过小影响阅读。
这种布局在web前端开发的早期，用来应对不同尺寸的PC屏幕，在当今的移动端开发也是常用的布局方式。
3、自适应布局自适应布局就是为不同的屏幕定义不同的布局，就是创建多个静态布局，每个静态布局对应一个屏幕分辨率范围。
改变不同的屏幕分辨率可以切换不同的静态布局(页面元素位置发生改变)，但在每个静态布局中，页面元素不随窗口大小的调整发生变化。
可以把自适应布局看作是静态布局的一个系列。
布局特点：当屏幕的大小发生变化时，页面里面的元素的位置会变化而大小不会变化。
制定方法：使用@media媒体查询给不同的尺寸和介质的设备切换不同样式。
在优秀的响应范围制定下可以给适配范围内的设备比较好的体验，在同一个设备下实际上还是固定的布局。
4、响应式布局响应式制定的目标是保证一个页面在所有终端上(各种尺寸的PC、手机、平板、智能手表的Web浏览器等等)都能显示出令人满意的效果，对CSS编写者来说，有多种手法可以去实现，但通常是糅合了流式布局+弹性布局，再搭配媒体查询技术使用。
几种常见的网页布局形式
几种常见的网页布局形式网页常见的布局结构有“国”字形布局、“匡”字形布局、“三”字形布局、“川”字形布局、封面型布局、Flash布局、标题文本型布局、框架型布局和变化型布局等。
1.“国”字形布局也可以称为“同”字型，是一些大型网站所喜欢的类型，即最上面是网站的标题以及横幅广告条，接下来就是网站的主要内容，左右分列两小条内容，中间是主要部分，与左右一起罗列到底，最下面是网站的一些基本信息、联系方式、版权声明等。
这种结构是我们在网上见到的差不多最多的一种结构类型。
2.“匡”字形布局这种结构与上一种其实只是形式上的区别，它去掉了“国”字形布局的最右边的部分，给主内容区释放了更多空间。
这种布局上面是标题及广告横幅，接下来的左侧是一窄列链接等，右列是很宽的正文，下面也是一些网站的辅助信息。
3.“三”字形布局这是一种简洁明快的网页布局，在国外用的比较多，国内比较少见。
这种布局的特点是在页面上由横向两条色块将网页整体分割为3部分，色块中大多放置广告条与更新和版权提示。
如图所示即是一种三字形布局的网页。
4.“川”字形布局整个页面在垂直方向分为三列，网站的内容按栏目分布在这三列中，最大限度地突出主页的索引功能。
如图1-19所示的“Beijing 2008”网站就是一种川字形的布局。
5.海报型布局这种类型基本上是出现在一些网站的首页，大部分为一些精美的平面设计结合一些小的动画，放上几个简单的链接或者仅是一个“进入”的链接甚至直接在首页的图片上做链接而没有任何提示。
这种类型大部分出现在企业网站和个人主页，如果说处理的好，会给人带来赏心悦目的感觉。
6.Flash布局这种布局是指整个网页就是一个Flash动画，它本身就是动态的，画面一般比较绚丽、有趣，是一种比较新潮的布局方式。
其实这种布局与封面型结构是类似的，不同的是由于Flash强大的功能，页面所表达的信息更丰富。
其视觉效果及听觉效果如果处理得当，会是一种非常有魅力的布局。
三种网页布局的相关分析
三种网页布局的相关分析现如今，人们的生活越来越离不开互联网，生活中的各种问题都会在各种网站中进行搜索和浏览。
基于互联网的各种信息的发布也越来的受到人们的关注。
人们进行相应的统计，发现对于搜索引擎的使用超过百分之七十。
那么各个网站如何进行相应的网页布局才能够好的提升网页的浏览量和点击率，这对于网页的运营和宣传有很大的影响，也是我们需要深入的了解和研究。
下图是一些常用的网页布局实例：目前常用的网页布局方式主要为表格布局、框架布局以及、DIV+CSS 布局三种。
利用表格布局的网页布局更加的便于用户的使用和体验，给用户的视觉感会更好，不需要相关专业的基础就可以很好的进行相应的自己所需的操作。
再该网页上进行相应的搜索会有快速的反应和应答。
这些都和表格布局的优势分不开，表格布局在设计上就一直秉承操作简单、反应速度快并且对于浏览器的兼容性非常的好，但是为了实现这样的体验效果，后台技术的设计就会变得比较复杂和冗余，比如对于多层表格嵌套的过度依赖和频繁使用，这就对代码的设计提出更高的要求，在保证网页美观的前提下，严重影响了搜索引擎的收录。
表格布局的设计对于网页的浏览速度非常的不利，尤其是保持网页完整性和美观度。
在进行框架布局的网页体验时，用户会发现可以进行多页面的操作和浏览，整个网页的布局非常的有条理性和逻辑性，虽然搜索相关的信息时并不是那么的流畅但是网页的整体效果还是会很好的呈现给用户。
但是因为多网页的设计，就容易忽略其他的网页，在进行网页设计时代码的编写和完成就会带来很大的挑战。
还有另一个网页的设计布局就是采用DIV+CSS布局，在进行用户体验时，就可以发现网页布局非常的清晰和完整，浏览的相关信息的内容和整个网页的样式的设计并不是紧密的联系在一起，这样的设计对于代码的要求相对来说就会较低，设计代码的结构也会更加的清晰，更容易理解和进行相应的代码的修改，对于网页的搜索引擎的文件的收录来说也是非常的方便和快速。
通过以上的分析可以很好地对现在网页的布局进行相应的分类和总结，在进行网页设计是根据不同的功能进行网页的各种优化采用不同的网页布局来实现。
网页设计CSS布局方式比对
网页设计CSS布局方式比对1CSS布局技术概述CSS（CascadingStyleSheet）中文译为层叠样式表。
它是一门经过标准化的WEB标准。
最早是在1996年由W3C组织审核通过并推荐使用。
针对于网页设计越来越趋向整体结构化，web标准也将网页拆分成了三个相对独立的部分：结构层（structure）,表现层（presentation）及行为层（behavior）。
在基于标准的WEB开发中，CSS的作用就是负责控制网页的表现层。
如果我们把HTML比做是人的身体的话，CSS代码我们就可以看成是穿在人身上的衣服。
我们说什么是最完美的页面布局方式？这是一个已经困扰了设计者很多年的问题。
CSS的主要功能被很多人误以为就是那些特殊效果的实现。
实际上，它的真正核心应该在于强大的页面布局能力，而并不是实现整个网站排版的一致性或细节上。
也只有当网页布局和网页内容完美接合时，才能带给用户最好的体验。
2基于CSS布局的几种方式盒模型、流动、浮动、定位这四个概念，是最基础也是最重要的。
各种布局技巧的应用都来源于此。
选择怎样的布局方式主要取决于站点自身的类型和发展。
在做决定之前权衡好它们的两面性，找出适合站点的方案。
下面，我们就现今网页设计过程中较常用到的几种网页布局模式做个比较。
2.1固定宽度布局固定布局(FixedLayout)，指最外面的包裹层(Wrapper)使用固定宽度，其内部的各个部分均使用百分比或者是固定的宽度来表示。
其关键是，外面的包裹层(或称为容器)的宽度是固定不变的，所以不论访问者的浏览器是怎样的分辨率，他们所看到的网页效果都是完全相同的。
固定宽度布局是层叠样式表中最早应用的布局效果之一。
有一个必须要解决的问题是所设计的页面宽度到底为多少才合适？这涉及到关于现今用户使用浏览器的分辨率大小的问题，据权威组织统计，使用640×480像素的用户占3%，使用800×600像素的用户占4%，使用1024×768像素的用户占36%，而更高像素的用户占到57%。
优秀网页布局对比(1)
它能够供让浏览者更好地掌控内容。
它能够让读者以一种可以期待的方式，从头向下阅读。
然而多给予消费者优惠是一个十分友善的举动。
然而深入来看，优惠也是一种有效的基于互惠心理的说服随着项目进度的推移，设计师很容易就无意中创建了很多实际上表示相同功能的分类与元素。
这符合基本熵的原理，时间越长事物越混乱。
注意不要用不同的方式标记同一种功能，这样会给你的访问者压力。
你的UI越破碎，用户的学习成本就越高。
时不时合并相似的功能，并且重构你的界面，是相当有帮助的。
4.寻求实际证据，而不是沉迷自己的观点使用实际证据是另外一种提高转化率的强大依据。
看到别人支持你和谈论你的产品，消费者会更有动力点击参与行动按钮。
显示推荐和数据，这证明了他人对你的支持与认可。
5.重复显示操作按钮，而不是只显示一次重复显示操作按钮是一种更适用于较长的页面,或重复的多个页面的策略。
你肯定不希望你的请求在一个页面上出现了无数次以至于让人们感到厌烦，但是，随着长页面成为主流，在顶部和底部分别设置一个激励行动的按钮没有什么影响。
当人们到达页面底部，他们停下来并思考接下来做什么……这时出现的一个操作按钮相当有用。
6.可点击与已选中按钮采用不同样式，避免混淆他们像颜色、深度和对比这些视觉样式，是一种让人们理解你的界面导航语言的可靠途径，让用户知道，我在哪里，我可以去哪里。
为了和你的界面使用者更好地交流，你的可点击行为按钮的样式（链接，按钮），已经点选的元素（已选按钮），以及基本文本应该和别的区别开。
这些元素应该在整个界面中持续应用。
在一个视觉方案中，我选择某个蓝色去表示任何可以点击的元素，黑色作为任何已经被选中或者展示当前焦点。
只有恰当且持续使用时，人们会更加容易地了解和使用你的界面。
如果混淆这三种视觉样式，则会使界面难以使用。
7.进行推荐而非提供两个选择当顾客面对多个选择，一个重点产品推荐是非常重要的，因为有些人需要一点动力。
有很多心理研究表明：提供的选择越多，进行选择的几率越小。
不同板式的设计方法对比
不同板式的设计方法对比在网站设计中，选择不同的板式是一项关键的决策。
不同的板式能够为网站带来不同的外观和体验。
以下是几种常见的板式设计方法，它们的优点和缺点将在下面进一步讨论。
一、固定宽度布局固定宽度布局是最传统和最简单的设计方法之一。
在这种设计中，网站的宽度是固定的，不会随着浏览器窗口大小的变化而变化。
这种布局更适用于内容不太多的网站，因为它会使网站看起来比较紧凑。
优点：在各种浏览器、不同的分辨率和不同的设备上显示效果相对稳定。
可以有效地控制网站的排版形式。
缺点：如果网站内容过多，则可能导致水平滚动条出现。
对于宽屏幕的用户来说，可能会有一部分空白区域，导致页面看起来比较空洞。
二、流式布局流式布局是另一种常见的设计方法。
在这种设计中，网站的宽度是相对的，可以根据浏览器窗口大小而变换。
这样的设计可以使网站看起来更为宽敞，适合内容比较多的网站。
优点：可以有效利用浏览器窗口大小，使得网站在不同大小的设备上都有良好的可用性。
可以在网站增加新内容时，仍保持较好的布局形式。
缺点：因为网站宽度是相对的，所以可以在不同的设备上出现不同的布局形式。
同时，在低分辨率设备上，可能会出现排版、字体过小等问题。
三、响应式布局响应式布局是一种更先进和更适合当前互联网环境的设计方法。
响应式布局会根据用户的设备以及浏览器窗口的大小而自动进行调整，以适应不同的屏幕大小。
优点：可以提供流畅的用户体验，无论使用的是何种设备。
设计更具有可扩展性和可靠性，适应不断变化的设备和屏幕。
网站的内容以优美的方式显示在任何屏幕上，可以自动调整大小和排版。
缺点：响应式布局通常会存在一些性能问题，例如加载时间较长，需要优化才能减小影响。
总结不同的板式设计对网站的外观和体验都有影响，选择合适的布局能够为网站带来更好的用户体验。
固定布局适合内容相对较少的网站，流式布局适合内容较多的网站，而响应式布局则适合不同屏幕和设备上的网站。
在选择不同的板式布局时，网站设计经验和实践知识同样重要。
CSS布局的几种常见方式
CSS布局的几种常见方式CSS布局是网页设计中至关重要的一部分，它决定了网页元素的排列和摆放方式。
在Web开发中，有多种常见的CSS布局方式，每种方式都有其独特的应用场景和优缺点。
本文将介绍并比较几种常见的CSS布局方式。
一、流动布局（Flow Layout）流动布局也被称为正常布局或默认布局，它是浏览器最基本的布局方式。
在流动布局中，元素按照其文档中出现的顺序依次排列，并在到达容器边界时自动换行。
流动布局的优点是简单易用，适用于大多数情况。
然而，流动布局也存在一些限制，当屏幕尺寸变化或元素内容过长时，可能会导致元素堆叠或错位的问题。
二、浮动布局（Float Layout）浮动布局是一种常见的CSS布局方式，通过设置元素的浮动属性（float）来实现。
在浮动布局中，元素会根据其浮动方向脱离正常的文档流，并尽可能地靠近容器的边缘。
浮动布局的优点是可以实现多列布局和响应式设计，适用于创建复杂的页面结构。
然而，浮动布局也存在一些问题，如清除浮动、高度塌陷等，需要额外的CSS代码来解决。
三、弹性盒子布局（Flexbox Layout）弹性盒子布局是CSS3中引入的新特性，它提供了一种灵活的布局方式。
通过设置容器的display属性为flex，可以实现元素的弹性伸缩和对齐方式的控制。
弹性盒子布局的优点是可以实现简单和复杂的布局需求，如居中对齐、等分和自适应等。
它还允许元素的顺序和可见性进行调整，适用于构建响应式和动态性的布局。
然而，弹性盒子布局在一些老版本的浏览器上兼容性较差。
四、网格布局（Grid Layout）网格布局也是CSS3中引入的新特性，它提供了一种二维布局方式。
通过设置容器的display属性为grid，可以用网格来布局页面中的元素。
网格布局的优点是可以实现复杂的网格结构，如等高布局、多列布局和定位等。
它具有强大的对齐和布局控制能力，适用于构建复杂和多样化的网页布局。
然而，网格布局在一些老版本的浏览器上兼容性较差。
网页设计基础：理解网页布局的五种方式
网页设计基础：理解网页布局的五种方式介绍在现代互联网时代，网页设计成为了一门非常重要的技能。
而网页布局则是网页设计中的一个关键方面。
不同的网页布局方式可以影响用户对网页信息的感知和使用体验。
本文将介绍五种常见的网页布局方式，帮助读者理解并掌握这些不同的布局方式。
一、流式布局（Fluid Layout）流式布局也被称为自适应布局，其主要特点是网页容器会根据设备屏幕宽度或浏览器窗口大小进行相应调整。
这意味着无论用户在大屏幕电脑、平板还是手机上访问，页面都能自动适应屏幕尺寸而不至于出现滚动条。
流式布局最常用于响应式设计，通过CSS媒体查询和百分比单位来实现页面元素的相对定位和缩放。
二、定宽布局（Fixed Layout）定宽布局是指将页面内容固定在一个特定宽度上而不会随设备或窗口大小变化而改变。
这种方式通常利用像素（px）作为单位来设置元素尺寸。
优势在于保持设计的稳定性和一致性，但会在不同设备上导致页面出现滚动条或被裁剪。
三、响应式布局（Responsive Layout）响应式布局是一种综合了流式布局和定宽布局的方式。
通过使用CSS媒体查询和断点设置，在不同的屏幕尺寸下重新排列和调整页面元素，以适应各种设备。
这样可以提供更好的用户体验，同时减少开发者需要为不同设备制作独立网站的工作量。
响应式布局根据屏幕宽度或浏览器窗口大小自适应调整页面布局，使得用户能够在不同设备上获得最佳呈现效果。
四、分栏布局（Grid Layout）分栏布局是指将网页内容划分为多个平行区域，并利用CSS网格系统将页面元素放置到相应的栏中。
通过使用指定的列数和行数，可以实现复杂而灵活的网格结构。
分栏布局常见于报纸、杂志等需要多个板块并存的场景。
分栏布局可以提供良好的信息组织和视觉效果，但需要使用特定的CSS框架或自定义代码来实现。
五、居中布局（Centered Layout）居中布局是将网页内容放置在页面的中间，使其居中显示。
这种布局方式适用于简单、集中展示的页面结构，如单个产品介绍、相册或简报。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
网页设计中布局方式之比较
摘要：在网页设计中，网页布局的效果直接影响到网页设计的质量，本文分析说明了目前常用的三种布局方式：表格方式、框架方式和div+css方式，并对三种方式进行了详细的比较。
关键词：表格 div+css 布局
1 概述
在网页设计过程中，色彩的搭配、文字的变化、图片的处理等，这些都是不可忽略的因素，但除此之外，还有一个非常重要的因素——网页的布局。
不同类型的网站采用不同的布局，不但能使网站结构合理化，也可以使访问者一看就明白：这个网站是做什么的。
目前网页常见的布局结构类型主要有“国”字形布局、“匡”字形布局、“三”字形布局、“川”字形布局、标题文本型布局、框架型布局和变化型布局等。
无论是哪一种布局结构，我们在布局时都应遵循以下三个基本原则：①主题鲜明：视觉设计表达的是一定的意图和要求，这就要求视觉设计不但要单纯、简练、清晰和精确，还要注意通过独特的风格和强烈的视觉冲击力，来鲜明地突出设计主题。
②形式与内容统一：内容决定形式，形式反作用于内容，一个优秀的设计必定是形式对内容的完美表现。
③强调整体性：注意单个页面形式与内容统一的同时，更不能忽视同一主题下多个分页面组成的整体网页形式与整体内容的统一。
2 常见布局方式
在网页设计中，常见的布局方式一般有三种，第一种是使用表格
（table），第二种是使用框架，另一种是使用div+css。
下面我们将具体的对这三种布局方式进行说明与分析。
2.1 表格布局方式
表格是一种简明扼要而内容丰富的组织和显示信息的方式，在文档处理中占有十分重要的位置。
使用表格既可以在页面上显示表格式数据，也可以进行文本和图形的布局。
由于表格使用简单而且灵活，是最早也是使用最广泛的网页布局技术。
通过使用相关的一系列表格标签，如table、th、tr、td、caption、thread、tfoot、tbody、col等，并对表格单元格进行合并或拆分以及在表格中嵌套表格等操作，从而得到需要的布局。
表格布局的优势在于它能对不同对象加以处理，而又不用担心不同对象之间的影响，而且在定位图片和文本时非常方便。
但当使用过多表格时，页面下载速度将会受到影响。
并且灵活性较差，不易修改和扩展。
2.2 框架布局方式
框架也是网页设计中对页面布局控制的一种重要手段。
使用框架可以将一个浏览器窗口划分为多个区域，每个区域可以分别显示不同的网页。
访问者浏览站点时，可以使某个区域的内容永远不更改，但可通过导航条的链接更改主要框架的内容。
框架结构常被用在具有多个分类导航或多项复杂功能的网页上。
框架结构的实现主要是利用标签。
框架布局能有效地实现页面导航，方便用户浏览网页，并在框架
窗口中支持滚动条，从而能显示更多内容。
由于框架集中相同的内容只用下载一次，所以能减少页面下载时间。
但兼容性略差。
2.3 div+css布局方式
div+css是网站标准（或称“web标准”）中常用术语之一，在xhtml 网站设计标准中，不再使用表格定位技术，而是采用div+css的方式实现各种定位。
div是指html标记集中的标记，可以理解为层的概念。
主要用来为html文档内大块的内容提供布局结构和背景；css（cascading style sheets）可译作“层叠样式表”，是一种格式化网页的标准方式，在网页中使用css技术，不光可以控制大多数传统的文本格式，还可以有效地对页面的布局、颜色、背景和其他效果实现更加精确的控制。
只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者不同页面的网页的外观和格式。
所以，利用div+css方式来进行网页布局，其实就是用div盒模型结构把各部分内容划分到不同的区块，然后用css来定义盒模型的位置、大小、边框、内外边距、排列方式等。
简单地说，div用来搭建网站结构（框架），css用于创建网站表现（样式/美化）。
其优势在于如下几个方面：
①表现和内容相分离
将涉及部分剥离出来放在一个独立样式文件中，html文件只存放文本信息，符合w3c标准。
②提高搜索引擎对网页的索引效率
用只包含结构化内容的html代替嵌套的标签，搜索引擎将更有效地搜索到你的网页内容。
③代码简洁，提高页面浏览速度
对于同一个页面视觉效果，采用div+css重构的页面容量要比table编码的页面文件容量小得多，代码更加简洁，前者一般只有后者的1/2大小。
对于一个大型网站来说，可以节省大量带宽。
④易于维护和改版
由于内容和样式的分离，使页面和样式的调整变得更加方便。
只需简单的修改几个css文件就可以重新设计整个网站的页面。
3 三种方式比较
3.1 应用的灵活性
表格方式是最常用的网页布局技术，它使用简单而且灵活，通过表格的嵌套，可以进行比较复杂的网页布局；框架方式由于其提供了固定的布局样式，所以适合布局一些特殊格式的网页，例如论坛的布局常使用这一方式。
而div+css方式使用也比较简单，可以进行复杂的布局。
3.2 布局的重构性
无论是表格还是框架，最终生成的网页布局文件是布局格式控制和网页内容混在一起，这样对网页布局进行较大改动甚至重新布局时，就会显得非常困难和麻烦，有可能需要重新制作页面。
而
div+css方式布局和内容表现是一个分离体，使用属性就可以轻松改变布局结构和风格。
3.3 网页浏览
利用表格布局的网页在下载的时候必须等整个表格内容都下载
完毕之后才会一次性显示出来，而利用div块的css布局的页面就科学得多，各个子块可以分别下载显示，从而提高了页面下载速度，搜索引擎的排名也会因此而提高。
但从兼容性的角度来说，框架方式和div+css方式都表现差强人意，有待进一步提高。
参考文献：
[1]梁斌，柯华坤.《网页布局技术比较与应用优化》，中国教育技术装备，2009，11.
[2]马东.《网页与网站设计》，东方出版社，2008年.
[3]王俭敏.《css+div网页样式与布局》，电子工业出版社，2008.
[4]郑宁宁.《浅析div+css网页设计技术》，山东省农业管理干部学院学报，2008.
[5]扬森香，聂志勇.《网页设计与制作案例教程》，北京大学出版社，2009.
[6]严加琼.《浅析网页设计中的网页布局》，电脑学习，2010，1.。