网页设计CSS布局方式比对网页设计论文.docVIP

网页设计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%。与此同时，我们了解到五大知名网站，网页设计时考虑用户的默认分辨率从800×600的主流设计三年内完全转化为1024×768。由此可知，现在主流用户的屏幕分辨率应该是1024×768或者更高。因此960像素成为了网页设计的最佳宽度。它能够非常好地展现网页的内容。960的网格系统已经成为了固定宽度布局的行业标准了。固定宽度布局的优点非常明显，由于整个布局和布局中的每块都有预设的宽度。设计人员能够根据窗口的宽度和屏幕状况，进行一些精确度量的内部元素的设计。如标语、图像、以及精确定位的文本等，这种方法非常的适用，而且容易使用。在设计方面方便定制。但是它相对于使用高分辨率的用户来说，固定宽度布局会留下很大的空白。而屏幕分辨率过小时则会出现默认的滚动条。 2.2流式布局 流式布局(FluidLayout)，使用百分比来设置各个部分的具体宽度，以用来适应不同的分辨率。流式布局的意思是从左到右从上到下来进行自适应。当一行不能容纳下内容时则会自动换行。正如它的名字一样，这种布局具有弹性，可以自动填充需要填充的部分。流布式局页面相对于用户来说更为友好，因为它能够自适应用户的设置。在视觉上也能更加美观。合适的技巧会使页面在大屏幕、小屏幕、PDA小屏幕上都能有良好的呈现效果。所以有人说，这种布局可以让人随心所欲的控制自己的网站。当然这种布局也是存在缺点的。如果在特别大的分辨率下，内容会被拉成长长的一行，而当浏览器窗口特别小的时候，行又会变得非常狭窄，逐行阅读变得十分困难。还有就是图像设计同标语元素设计上也会出现问题。因为在流布局中，图片需要随着它包含的元素一起伸缩以适应整体布局的扩大。 2.3弹性布局 我们了解了在流式布局下，如果用户浏览器窗口变宽，网页内容会变得很难阅读。如果我们想要能够随着网页元素大小的变化而变化的页面布局。如字体变小，栏长度及页面宽度都会相应减少，反之亦然。弹性布局，就能够实现。弹性布局如果用固定宽度布局转换也非常简单，只需要对度量单位进行修改即可。弹性布局（ElasticLayout），指网页宽度不固定，当你改变字体的大小，其他元素也会随之发生变化。我们的布局以字体的大小来进行参照变化的。那么这时我们就用em（字体高）而不是用像素值或百分比来定义宽度。em直接表现了字体的大小，因此如果用em表示一个包含框的宽度，当你增加字体大小时，包含框的宽度也会随之增加。这对于视力弱或有认知障碍的人尤其有用。弹性布局的效果是明显的，也受到广大设计师的欢迎。但它也是有局限性的。如果不对这种布局设置一个最小宽度，当用户缩小窗口到足够小时，会对布局产生的影响是致命的，造成布局严重错位。当然图片的随比例