对于Web前端初学者或者经验不够丰富的人来说，出现页面排版布局混乱的情况并不罕见，有时候明明前面部分的网页都很整齐美观，可是在接下来的部分中经常会出现网页布局混乱，比如content无法调整到开发者需要的位置，或者出现页面重叠的现象。以下内容是我个人在网页制作过程中关于网页排版混乱及其解决办法的一些经验总结，不足之处，希望大家互相补充学习。
）DIV+CSS网页错位的原因与解决方法
常常我们会遇到我们要设置在一行显示的布局，却因为种种原因造成了错位，看到结果是在一行的最后一个盒子布局错位掉下去了（如下图）。
造成DIV CSS网页布局错位的原因大概有两种情况，一种是宽度计算错误，一种是IE BUG造成，特别是IE6和IE7。接下来我们挨着为大家介绍错位与解决错位方法。
一、宽度计算错误解决方法 &&
宽度计算错误，假如总宽度为500px，有3个盒子，分别CSS宽度为200px、200px、100px，这个没问题会在一排显示不会错位，但如果加入了CSS边框、padding、margin属性时，别忘记这几个属性所占的宽度。特别是padding与边框border占用宽度空间不要忽略了。如果有一个盒子加入左右边框，这个时候有一个盒子中刚合适的宽度条件下减少2px边框占用宽度，否则即会总3个盒子合计宽度大于了总宽度，造成错位。
宽度问题造成CSS布局错位小结：内盒子宽度之和大于了外宽度造成错位，检查时候我们一定计算设置宽度、边框、paddind、margin之和。
二、IE BUG特别是IE6和IE7造成错位
这个问题是最常见的问题，我们检查完第一点宽度问题，而宽度没问题，这个时候在IE6、IE7中错位，在IE8及其它浏览器没有错位问题，这个时候我们就要考虑到你是否使用了margin属性，通常我们使用了CSS浮动（CSS float）情况下使用margin（margin-right、margin-left这里特别是这个属性）此属性会产生双倍数值，这个时候我们需要使用解决此问题。让IE6或IE7单独识别特指定margin样式。
如：1、IE6单独识别（margin-left对于只有IE6错位情况下）{margin-left:5_margin-left:2px}这个时候除IE6外其它浏览器设别margin-left:5px，IE6单独识别_margin-left:2px
2、IE7与IE6都识别（margin-left对于ie6和ie7识别其它版本和品牌浏览器不设别）{margin-left:5*margin-left:2}这个时候除IE6和IE7外，其它浏览器设别margin-left:5px，IE6和IE7识别*margin-left:2px
更多CSS HACK知识大家可进入CSS HACK栏目了解更多相关知识。
以为为大家总结了常见网页错位原因，大家从这以上两方面入手检查css布局网页错位原因。
-----------------------------------------以上内容部分参考文献网址
浮动会造成页面布局的重叠混乱，这在网页制作中是非常常见的，我们可以利用以下几种方法清楚浮动所带来的影响；
1、出现float影响的根本原因是：父标签没有高度，导致光标上移动。如果给父标签设置固定的高度。可以解决浮动带来的问题
2、给被受浮动影响的标签设置clear both来清除浮动所带来的影响
3、overflow：hidden；设置内容超出部分
除了以上宽度计算错误和浮动带来的影响导致页面布局混乱，以下几种情况也会导致页面布局的混乱
1，margin垂直方向塌陷现象
标签之间的margin:
垂直方向塌陷现象-----以大的为主
水平方向没有塌陷现象
2、如果字标签用margin来描述和父标签的位置关系，可能出现margin外露，
给父标签增加overflow：hidden；可以解决
可以用padding来替代margin描述与父标签的位置关系，margin部分用padding代替，然后减少父标签相应的高度。
阅读(...) 评论()35个css布局的非常漂亮的网页设计 - 苏打苏塔设计量贩铺 – sudasuta.com – 每日分享创意灵感！
在这一篇文章中，我们收集了35个css（ ）布局的非常漂亮的网站。记得两三年前，大家还是用table来写页面，也不过一两年的时间，大部分网站都开始用css+div技术来重构页面，从中规中矩的清爽干净的风格，到繁复的华丽的风格，css技术都可以实现。
1. Magnifico
2. BRILLIANCY
3. eCoverSuiteElite
4. Hey Indy
5. MetaLab
6. Fluid Theme
7. Tea Round App
8. Stick It USB
9. Douglas Menezes
10. We Love Icons
11. Duirwaigh Studios
12. siete de febrero
13. Morphix
14. Humza Ijaz
15. Trent Cruising
16. Pacifica
17. Dishizzle
18. Paul Carbo
19. Beerenberg Farm
20. Honblue Inc.
21. iDesign iPhone
22. AdWorks
23. Pixelcraft
25. Point Zero
26. Simple Art
27. Add Noise
28. Midtone Design
29. Transmissions
31. Jumpstart
32. Cellar
33. Zaum & Brown
34. World of Merix Studio
非特殊说明，本文版权归原作者所有，转载请注明出处 本文链接：订阅本站：转载请注明来源：<a rel="bookmark" title="35个css布局的非常漂亮的网页设计"
上一篇下一篇
点赞最多的文章
<span class="post-like-counter 8
<span class="post-like-counter 3
<span class="post-like-counter 9
<span class="post-like-counter 6
<span class="post-like-counter 3
<span class="post-like-counter 9
<span class="post-like-counter
<span class="post-like-counter
<span class="post-like-counter
<span class="post-like-counter
<span class="post-like-counter
<span class="post-like-counter
<span class="post-like-counter
<span class="post-like-counter
<span class="post-like-counter
<span class="post-like-counter
<span class="post-like-counter
<span class="post-like-counter
<span class="post-like-counter
<span class="post-like-counter
独立设计师作品
苏打苏塔是一个关于创意设计，设计，插画，艺术摄影，lomo，素材，教程，web，灵感来源，平面设计欣赏的综合性网站。站点每日更新原创文章，为设计师提供优美高品质图片。 by 苏打苏塔 设计量贩铺 | 版权保留.
| 京公网安备03号CSS在网站建设中的不同布局模式
一、CSS布局技术概述
CSS中文译为层叠样式表。它是一门经过标准化的WEB标准。针对于越来越趋向整体结构化，web标准也将网页拆分成了三个相对独立的部分：结构层，表现层及行为层。在基于标准的WEB开发中，CSS的作用就是负责控制网页的表现层。
CSS的主要功能被很多人误以为就是那些特殊效果的实现。实际上，它的真正核心应该在于强大的页面布局能力，而并不是实现整个网站排版的一致性或细节上。也只有当网页布局和网页内容完美接合时，才能带给用户最好的体验。
二、基于CSS布局的几种方式
盒模型、流动、浮动、定位这四个概念，是最基础也是最重要的。各种布局技巧的应用都来源于此。选择怎样的布局方式主要取决于站点自身的类型和发展。在做决定之前权衡好它们的两面性，找出适合站点的方案。下面，我们就现今网页设计过程中较常用到的几种网页布局模式做个比较。
1、流式布局
流式布局使用百分比来设置各个部分的具体宽度．以用来适应不同的分辨率。流式布局的意思是从左到右从上到下来进行自适应。当一行不能容纳下内容时则会自动换行。正如它的名字一样，这种布局具有弹性，可以自动填充需要填充的部分。
流布式局页面相对于用户来说更为友好，因为它能够自适应用户的设置在视觉上也能更加美观。合适的技巧会使页面在大屏幕、小屏幕、PDA小屏幕上都能有良好的呈现效果。所以有人说，这种布局可以让人随心所欲的控制自己的网站。当然这种布局也是存在缺点的。如果在特别大的分辨率下，内容会被拉成长长的一行，而当浏览器窗口特别小的时候，行又会变得非常狭窄，逐行阅读变得十分困难。还有就是图像设计同标语元素设计上也会出现问题。因为在流布局中，图片需要随着它包含的元素一起伸缩以适应整体布局的扩大。
2、固定宽度布局
固定布局指最外面的包裹层使用固定宽度，其内部的各个部分均使用百分比或者是固定的宽度来表示。其关键是，外面的包裹层的宽度是固定不变的，所以不论访问者的浏览器是怎样的分辨率。他们所看到的网页效果都是完全相同的。
固定宽度布局是层叠样式表中最早应用的布局效果之一。有一个必须要解决的问题是所设计的页面宽度到底为多少才合适?这涉及到关于现今用户使用浏览器的分辨率大小的问题，据权威组织统计，使用640x480像素的用户占3％，使用800x600像素的用户占4％．使用像素的用户占36％，而更高像素的用户占到57％。与此同时，我们了解到五大知名网站，网页设计时考虑用户的默认分辨率从800x600的主流设计三年内完全转化为。由此可知，现在主流用户的屏幕分辨率应该是或者更高。因此960像素成为了网页设计的最佳宽度。它能够非常好地展现网页的内容。960的网格系统已经成为了固定宽度布局的行业标准了。
固定宽度布局的优点非常明显，由于整个布局和布局中的每块都有预设的宽度。设计人员能够根据窗口的宽度和屏幕状况，进行一些精确度量的内部元素的设计。如标语、图像、以及精确定位的文本等，这种方法非常的适用，而且容易使用。在设计方面方便定制。但是它相对于使用高分辨率的用户来说，固定宽度布局会留下很大的空白。而屏幕分辨率过小时则会出现默认的滚动条。
3、可变固定宽度布局
可变固定宽度布局指在CSS代码中设计好关于各种浏览器类型所需要的不同尺寸．实现根据浏览器类型自动调用不同的CSS布局。这种布局方法的思想是布局能够自动变化以提供最适合用户窗口大小的布局效果。运用该布局最可靠的方法就是通过用javascript来自动评估窗口宽度。从而改变网页上所运用的CSS规则。这里指的宽度，是你正在浏览的窗口的宽度。使用这种技术，你可以将页面的某一个视图，作为默认页面，但是对于正在用大窗口访问你的站点的用户来说，你的页面会相应的放大至整个窗口。
这种布局与流动式布局不同。流动式布局是当你移动浏览器时，它的尺寸在不断的重新设置，而这种布局一旦达到了一个&触发&点，布局才会改变并进而影响到内容。缺点是可能会导致一些跨的问题出现。
4、弹性布局
在流式布局下，如果用户浏览器窗口变宽，网页内容会变得很难阅读。如果我们想要能够随着网页元素大小的变化而变化的页面布局。如字体变小，栏长度及页面宽度都会相应减少，反之亦然。弹性布局，就能够实现。弹性布局如果用固定宽度布局转换也非常简单．只需要对度量单位进行修改即可。
弹性布局指网页宽度不固定，当你改变字体的大小，其他元素也会随之发生变化。我们的布局以字体的大小来进行参照变化的。那么这时我们就用em(字体高)而不是用像素值或百分比来定义宽度。em直接表现了字体的大小，因此如果用em表示一个包含框的宽度，当你增加字体大小时，包含框的宽度也会随之增加。这对于视力弱或有认知障碍的人尤其有用。弹性布局的效果是明显的，也受到广大设计师的欢迎。但它也是有局限性的。如果不对这种布局设置一个最小宽度，当用户缩小窗口到足够小时，会对布局产生的影响是致命的，造成布局严重错位。当然图片的随比例缩放问题，也是一个有待解决的问题。
5、混合布局
顾名思义就是集中各种布局方法组合起来使用，取各自之所长。可以想象，各种布局都有它的优缺点。可以用em定义文本的尺寸、包含框、导航区和内容块的宽度。但是却为max&width属性设置一个百分比，限制它变得过大，而造成的布局混乱。组合流式布局与弹性布局，以em设置宽度，以百分比设置最大宽度。这就是一种典型的混合式布局。这样的布局方式在极端情况下都能有较好的整体效果。所以，我们说混合布局是结合各个布局的优缺点及布局人员的需要而组合使用的一种良好的布局方式。
综上所述．层叠样式表运用在网页()布局上的方式多种多样，而我们评价哪种布局方式好的最终目标不是针对它的各种优缺点，而是从三个相关方面来进行探讨：可读性、适应性及未来的可维护性。对于网页设计人员来说，选择布局方式同时来源于你网站客户端的需求。只有充分考虑协调好以上各方面，才能实现网站价值的最大化，并且提高网站的竞争力。
文章来自：
相关文章：
已投稿到：
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。最新公告：目前，本站已经取得了出版物经营许可证 、音像制品许可证，协助杂志社进行初步审稿、征稿工作。咨询:400-888-7501
您现在的位置：&&>>&&>>&&>>&正文
网页设计中DIV+CSS布局技术的应用
定制原创材料,由写作老师24小时内创作完成,仅供客户你一人参考学习,无后顾之忧。发表论文
根据客户的需要,将论文发表在指定类别的期刊,只收50%定金,确定发表通过后再付余款。加入会员
申请成为本站会员,可以享受经理回访等更17项优惠服务,更可以固定你喜欢的写作老师。
随着我国经济的不断发展，我国的IT行业得到了有效的发展。网页设计是IT行业领域中发展中重要的组成部分，其中DIV+CSS布局技术是网页设计和开发过程中重要的技术组成部分。文章对网页设计中DIV+CSS布局技术的应用和实践进行了分析和阐述，并且对DIV+CSS布局技术的表现、内容、代码、搜索等形式进行了一定程度的研究，以此促进IT行业领域中网页设计、开发的长远发展。
网页设计；DIV+CSS布局技术；应用
在进入21世纪以后，我国逐渐向信息化发展，人们的日常生活水平也得到了有效的提高，互联网也成为人们在日常生活、工作中必不可少的工具，成为人们在交流、信息查找的重要途径之一。在互联网的发展过程中，网页设计、开发是人们使用互联网工作和生活的重要工具，其中DIV+CSS的布局技术在网页设计和开发的过程中占有重要的地位。但是在传统的网页布局技术运用的过程中，出现了很多隐藏的弊端，并在发展的过程中逐渐显现出来。同时，在这样的情况下，IT行业在网页设计、开发过程中，对DIV+CSS布局技术给予了高度的重视，并且也得到IT行业的广泛应用。DIV+CSS布局技术也是网页设计、开发过程中一种较为流行的技术和术语，开发人员通过利用DIV+CSS布局技术对网页设计过程中的对象进行准确的定位，从而增加了网页在使用过程中的效果和传输、下载速度，也在最大程度上方便了开发人员对网页维护和更新的操作流程。
1网页设计中DIV+CSS布局技术的含义
在网页开发的过程中，DIV+CSS技术布局占有重要的地位。其实DIV+CSS技术也可以分开来说，DIV，CSS在网页布局的过程中，所代表的含义和意义也是不一样的，下面对DIV+CSS布局技术的含义进行了分析：第一，DIV是DIV+CSS布局技术中的重要组成部分，也是网页设计和开发过程中重要的应用语言和标记元素，为网页设计、开发过程中的文档，提供了网页中的布局结构和网页的背景，在网页设计、开发的过程中也可以将DIV称为定位技术。DIV在起始和结束的过程中都进行了一定标记，并且都是网页设计、开发过程中的文档构成服务的，DIV对网页设计和开发过程中的一些元素进行了有效的控制。第二，CSS的全称是CascadingStyleSheet，按照中文翻译为层叠样式表，是在网页设计、开发过程中，网页形式和网页信息之间的一种标记语言。在网页设计的过程中，DIV+CSS布局技术中的CSS技术可以准确控制网页中的页面的颜色、布局、背景等，网页中的页面效果更加的丰富，并且开发人员在进行网页设计的过程中，操作流程也相对简单，也使网页中的语言更加简洁化。第三，DIV+CSS布局技术在某种程度上将也是XHTML+CSS技术。人们在使用网页文档的过程中，对网页中的结构也在进行了一定程度上的规范。DIV+CSS布局技术将网页设计中的结构进行了一定的规范化，将页面中元素进行了一定的规整，使页面中的样式和内容分离，成为一个单独的个体。并且在将2种技术合为1种技术的过程中，可以使网页在操作的过程中，更加灵活、方便。
2DIV+CSS布局技术在网页设计中的作用
2.1和搜索引擎可以相互融合搜索引擎在网页设计的过程中起到了重要的作用，是根据Spider程序查找互联网中的内容。Spider程序一般是由少到多地进行网页内容的查找，等到将所有的内容查找扫描后，引入到其他网页中，然后访问网页页面，重复扫描、更新，直到内容出现为止。在使用传统的数据代码的过程中，在内容浏览和操作时不仅复杂，多余的代码也较多，但是在DIV+CSS布局技术中，可以将浏览和操作的流程相对地简单化，并且在搜索内容的过程中，时间也相对较短，其执行的效率也相应提高。另外，在DIV+CSS布局技术的应用过程中，将代码也进行了一定程度的简化，和搜索引擎配合良好。这样，不仅提高了网页设计中的执行的效率，也有效提高了网页设计、开发过程中的质量。
2.2简化了网页维护、更新等操作流程设计人员在对网页进行设计、开发的过程中，利用Table对网页进行版本的更新设计时，需要对网页中所有的代码进行一定程度上的整合，这样造成网页维护和更新的工作效率在一定程度上的降低。但是，随着时代的不断发展，我国IT行业将DIV+CSS布局技术有效地应用到网页设计。更新、维护的过程中，在一定程度上降低了网页中的内容，并利用DIV+CSS布局技术进行一定程度上的控制。当设计人员对网页中的某一个部分进行一定程度上的更新时，可以有效地提出这部分内容和代码，设计该区域代码，设计人员利用DIV+CSS布局技术对网页进行设计、维护、更新，对其他部位也不会造成任何的损伤。
2.3加强了传输的效率在传统的网页设计的过程中，往往只注重网页页面的效果和带给人们的视觉冲击，在这种情况下，设计人员在网页中的传输效率较慢，也给网页使用带来一定程度上的影响。但是设计人员在使用DIV+CSS布局技术进行网页设计、开发的过程中，可以对网页中的代码、文字、图片进行灵活的设计，设计人员利用网页中的过滤软件，取代了图片带给网页的视觉冲击。同时，DIV+CSS布局技术也将网页中的中体布局分为不同的层次，在网页开始使用的过程中，无需将网页的内容储存到一个较大的表格中，这样在一定程度上加快了网页的传输效率，在人们的日常生活、工作使用的过程中最大程度地提高了便利性。
2.4有效地提高了网页设计中的视觉效果软件设计人员在进行网页设计、开发的过程中，利用传统的Table对代码进行整合，在网页的页面中，图片、文字等效果的分辨率并不高，页面的效果并不是很好，同时在设计的过程中，需要大量的设计人员。不同的设计人员所设计的网页形式也是不同的，这样对人们使用的网页造成了一定程度上的影响。但是，在DIV+CSS布局技术对网页设计、开发的背景下，DIV+CSS布局技术能够有效地统一设计人员的设计理念、风格、特点等，并且DIV+CSS布局技术可以有效控制网页中的结构，提高了页面中图片、文字的分辨率，也给人们在使用网页的过程中带来一定程度上的视觉冲击。
3DIV+CSS布局技术在网页设计、开发中的应用
在网页设计、开发的过程中，设计人员要想有效地利用DIV+CSS布局技术对网页中的结构进行一定程度上的规划，就要对网页中的语言代码的结构进行一定程度的分析。网页中的语言代码其实就是网页结构中的构成元素，网页结构其实就是网页设计、开发过程中的构架。换句话说，就是在网页设计的过程中，对网页中的内容进行有效的规划。下面就对DIV+CSS布局技术在网页设计中的应用进行简单的分析。
3.1DIV+CSS布局技术在网页中内容规划的应用设计人员在网页设计、开发的过程中，应当对网页中的内容的几个基本组成要素进行具体的分析。网页内容中的几个基本的要素一般情况下可以分为：网页的头部、网页的主体、网页的页脚和网页中的版权区域。另外，DIV+CSS布局技术在网页设计的过程中，可以使网页形成基本的框架。并且在具体的编写的过程中，DIV+CSS布局技术可以有效整合网页中的代码，最大程度地简化操作流程，为设计人员提供了方便，提高了设计人员的工作效率，同时也使人们在使用网页的过程中可以一目了然。
3.2DIV+CSS布局技术在网页设计中信息的应用设计人员在利用DIV+CSS布局技术进行网页设计、开发的过程中，可以灵活地将网页中的信息进行一定程度上的整合，并有效地展现出来，给人们视觉的冲击。在网页设计的过程中，要对网页中的信息元素进行定义，合理安排网页页面中的信息，这样不仅简化了设计、开发的流程，也有效地减少了设计人工作人员的工作负担，从而提高了工作人员的工作效率。同时，也使网页中的形式更加丰富，例如：新闻、通知、公告、天气等信息形式，也有效地节省了网页中的空间，给人们使用网页提供了最大程度的方便，也给人们带来了视觉上的冲击。
3.3DIV+CSS布局技术在网页设计中的链接的应用设计人员在网页设计、开发的过程中，DIV+CSS布局技术具有重要的作用，同时，网页动态链接是DIV+CSS布局技术中应用的重要的环节。a：link，a：visited，a：hover，a；active是网页动态链接过程中重要的组成部分。在网页设计、开发的过程中，要想将DIV+CSS布局技术应用在网页动态链接中，就要对a：link，a：visited，a：hover，a；active等一一定位，这样可以在最大程度上提高设计人员的工作效率，也给人们在日常生活、工作中使用网页提供了最大程度的方便，同时也有效地促进了我国IT行业的发展。
综上所述，DIV+CSS布局技术在网页设计、开发的过程中起到了重要的作用。文章中对DIV+CSS布局技术在网页设计、开发过程中的应用进行了简单的介绍，随着我国经济的不断发展，DIV+CSS布局技术成为一种较为流行的网页设计、开发技术，简化了操作流程，使设计人员的工作效率得到有效的提高，也给人们在日常生活、工作中使用网页提供了最大程度的方便，同时也有效促进了我国IT行业的发展，为我国的经济建设作出了自己的一份努力。
[参考文献]
[1]车元媛.基于DIV+CSS的网页布局技术应用[J].电脑知识与技术，2011（9）:，2023.
[2]赵清华，林学华.基于DIV+CSS的网页布局技术应用研究[J].现代计算机：专业版，2010（5）:140-142.
[3]温盛萍.DIV+CSS布局技术在网页设计中的应用[J].信息化建设，2015（10）:75.
[4]杨米娜.DIV+CSS技术在网页布局中的应用研究[J].电脑开发与应用，2012（4）:64-66，69.
作者：刘小艮 单位：广东岭南职业技术学院网页设计中DIV+CSS布局技术的应用责任编辑：杨雪&&&&阅读：人次
上一篇论文： 下一篇论文：
按栏目筛选
网页设计论文热门范文
[<font color="#FF]
[<font color="#FF]
[<font color="#FF]
[<font color="#FF]
[<font color="#FF]
[<font color="#FF]
[<font color="#FF]
[<font color="#FF]
[<font color="#FF]
[<font color="#FF]
[<font color="#FF]
[<font color="#FF]
[<font color="#FF]
[<font color="#FF]
[<font color="#FF]
[<font color="#FF]
[<font color="#FF]
[<font color="#FF]
[<font color="#FF]
[<font color="#FF]
网页设计论文相关文章您当前位置： >>
>> 浏览设计教程
Web页面布局是对页面的整体规划，即把页面划分成不同的区域，用于放置不同的页面内容。对于整个网站，每个页面的布局应该相对保持协调一致，不应该有大的跳跃感。大部分网页页面布局的内容是摘要信息列表：关键词、信息短语、信息缩写或信息前几行内容，当客户对某些摘要或提示信息感兴趣时，就会点击超链接得到其详细内容。
页面布局通常被比做一个翻转的金字塔，如图所示。
页面布局格式
网站页面布局根据导航元素放置的方式来分类。主要根据网站内容、风格和总量来选择布局类型。例如，通常导航元素被放置在左边和上边空白处。导航元素的背景通常和剩余页面的颜色或者外观不同，企业的徽标、网站名称一般放置在页面的左上角。网站版权信息、联系信息通常放在网页的最下面。对于页面设计，采用通用的布局格式使页面更具有可读性和直观性。
下面是几种常见的布局类型。
下面两个图片是传统左边空白布局的例子，导航元素在左边空白处。
左边空白布局格式
左边空白布局格式
上边空白布局格式
上左边空白布局格式
右边空白布局格式
上下空白布局格式
分布式布局格式
艺术风格布局格式
页面布局元素
网站开发人员在正式设计时，首要考虑网站的整体外观和页面结构，从视觉和技术的角度理解组成整个页面的元素以及它们之间的相互关系，页面布局应该具有逻辑性和易于理解性，帮助分类、简化和阐明信息。一旦确定了页面布局元素，应该在整个网站上贯彻所选择的元素。
网页布局元素包括页面规划布局、边界、字体、颜色、图像以及表格等。
框架：规划页面布局，允许同时显示多个页面。
表格：规划页面布局，在单元格中可以放置各种网页元素，容易排版。
导航：引导用户在网站内的移动。
段落：在页面上分组文本字符。
图像：提供视觉吸引、信息和导航。
列表：组织并强调某些信息条目。
颜色：提供网站整体色彩感觉，增加可读性，易于分类。
边距：控制显示内容距浏览器窗口边界的距离。
边界：为HTML表和框架提供可见的边界。
空白：分开页面上的元素。
当浏览一个没有空白的页面时，用户会感到页面很拥挤，而造成心理的紧张，对阅读这样的页面有一种厌烦的抵触感觉。初学网页设计的人往往会忽视&空白&元素，&空白&元素实际上与其他页面布局元素有紧密关联，甚至是其他元素的一部分，如行间距等。空白在网页设计中非常重要，它能够使网页看起来简洁、明快，阅读舒畅，是网页设计中必不可缺少的元素。
值得注意的是，用户不欣赏在网页上堆积无用的内容。用户快速扫描页面时，扫描的内容越多，错过的信息就越多。这并不是说不能给用户提供大量信息，只是不要在一个页面上提供所有的信息。比如一些网站的主页提供特大量的信息，反而会使大部分用户忽视大部分内容，因此每一个网页应该包括大约比同样印刷版本少50%的信息。
切记不要试图将尽可能多的信息放在一个网页中，应该有合理的、简明的分类，不要强迫客户从一堆信息中艰难地挑出所需要的信息，要让客户自己选择是否进入更深的链接获得信息。也不要只为了让页面变短而分割页面，除非是在逻辑断点处。每一个页面都应该是独立、完整的。只有照顾了整个页面空间的分配，空白才能表现出一定的活力，利用空白可以使页面布局生动活泼、松紧有度，使客户浏览时有舒适、轻松和简洁之感。
开发设计人员可以使用表和透明GIF图像来给页面添加空白。可以使用无边界HTML表定位内容，提供无内容的区域来布局页面。
页面布局方法
页面布局方法主要有两种：纸面布局法和软件布局法。
1）纸面布局法
在设计页面布局时，设计人员需要在纸面上画出页面布局的草图，将设想落实到纸&&&&&&& 面上，查看设计效果。人们经常会瞬间产生一个好的灵感和想法，但很快又会在头脑中消失，因此当有了好的灵感和想法时应该立即用纸面记录下来，以备以后容纳到页面设计当中去。
不要直接在网页设计工具中边设计网页边修改页面布局，想到哪里，设计到哪里，这样会浪费很多时间和精力。在开始制作网页前，应该首先在纸上画出页面布局草图，一旦确定就不要轻易修改，在页面设计中要自始至终贯彻确定好的页面布局。
2）软件布局法
另外一种页面布局方法是使用图形软件工具设计页面布局草图，可以使用比较熟悉的图形软件如Photoshop、Fireworks等。使用这些图形工具可以方便地设计页面布局和颜色，比纸面布局法更能查看页面布局的整体效果和真实效果，使用图形工具和层更容易修改和查看各种无法用纸张实现的效果。
页面布局技术
常用的页面布局方法有：层叠样式表页面布局、表格页面布局、框架页面布局、透明GIF页面布局和Flash页面布局。
1）层叠样式表页面布局
在HTML 4.0标准中，层叠样式表（CSS）新技术能完全精确地定位文本和图片，现在CSS是一个比较流行的页面布局方法，可以实现过去无法实现的想法。现在越来越多的浏览器开始支持CSS技术，但不同的浏览器使用方法可能略有不同，用户使用时应该注意。
2）表格页面布局
表格布局现在几乎已成为一个页面布局的标准，它的优势在于它能对不同对象加以处理，而又不用担心不同对象之间的影响。表格的每一个单元格可以放置不同文本和图片，而且非常易于内容对齐。表格边界设置为0，客户就看不到表格边框，只看到表格单元格放置的内容。表格布局在定位图片和文本上比起用CSS更加方便。表格布局唯一的缺点是，当用了过多表格时，页面下载速度会受到影响。在以后的章节中将详细讲述表格页面布局方法。
3）框架页面布局
框架可以用于页面布局，虽然它们在导航中也扮演重要角色。
现在使用框架技术进行页面设计的网站越来越少，框架页面以左上角对齐，每一个框架部分都可以独立控制，表格单元格就不可以单独控制。从布局上考虑，框架结构不失为一个好的布局方法。框架技术也可以设置边框为0，浏览客户也看不到框架边框。
在以后的章节中将详细讲述框架页面设计技术。
4）透明GIF页面布局
透明GIF图像可以作为空白区域的占位符插入到网页中，它们是背景透明、尺寸可变的图像，因此，透过图像可以看到页面的背景，浏览客户是看不到透明GIF图片的。可以在&IMG&标记中指定高、宽属性来创建需要的空白的尺寸。例如使段落从左面缩进20个像素，则在段落的第一个字符前插入下面的标记：
&img src=&transparent.gif& height=&2&P width=&20&P&
也可以在表格的单元格中放置透明GIF图像用于控制行或者列的尺寸。
5）Flash页面布局
这种页面布局采用了现在非常流行的Flash动画用于规划页面的布局，Flash有强大的功能，使页面所表达的信息更丰富，其视觉效果及听觉效果要比其他页面布局更加具有冲击力，是当今最流行的一种技术，但是显示文字信息内容比较少，另外还需要更快的机器性能和更高的网络带宽。例如disney网站http://www.disney.com就是Flash页面布局的&&&& 代表。
由于页面尺寸和显示器大小及分辨率有关系，因此网页不能超越显示器的范围，而且因为浏览器也将占去不少空间，所以留给页面尺寸的空间就会变得越来越小。一般分辨率在800*600（推荐）的情况下，页面的显示尺寸为：780*428像素；分辨率在640*480的情况下，页面的显示尺寸为：620*311像素；分辨率在的情况下，页面的显示尺寸为：像素。从以上数据可以看出，分辨率越高，页面尺寸越大。
浏览器的工具栏也是影响页面尺寸的主要原因。一般浏览器的工具栏都可以取消或者增加，因而造成页面的尺寸也是不一样的。
在网页设计过程中，向下拖动页面是唯一给网页增加更多内容（尺寸）的方法。除非需要，否则不要让访问者拖动很长的页面。
切记在网页设计过程中，一定不要左右拖动页面，只能上下拖动页面，而且也不能拖动过长，客户往往会忽视页面下面的内容。
[教程作者：佚名]
免责声明：本站文章系图趣网整理发布，如需转载，请注明出处，素材资料仅供个人学习与参考，请勿用于商业用途！
本文地址：
您可能还喜欢
网页教程分类
这些是最新的
最热门的教程