网站制作中的灵活布局详解

我们可以根据网页布局的宽度设置将其分为3种类型：固定宽度、可变（或不固定）宽度和弹性宽度。还可以通过混合不同的度量单位将这些布局合并为混合布局，设计的每一个分栏都可以使用不同的单位。这4种布局类型中的任何一种都可以使用任意数量的分栏或者美化主题，布局类型直接地决定了浏览设备如何在用户面前展现布局的宽度。

固定宽度布局(fixed-widthlayout)是以前最常见和最常采用的设计，固定宽度设计的整体布局宽度以像素为单位来设置，具体值由设计者决定。通常，设计者基于最常见的屏幕分辨率(例如，800×600和1024×768)来选择宽度。

固定宽度设计是固定不变的，它们的尺寸不会随着用户的设置而变化。这样一来，即便是存在不同的用户设置，你也可以创建一个包含丰富图像的网页，并且能让它看上去紧凑一致。如果你对站点的目标用户进行了调查，那么你就能设计出符合大多数用户浏览器窗口的布局，并且可以确保将文本行之间的宽度设置为一个便于阅读的理想值。

1．并非所有人都使用16像素的文本

如果你知道所处理文本的大小，那么你可以选择一个固定的宽度来优化每行的字符数或者行长以提高易读性。印刷设计师们一直都在做这一工作：RobertBringhurst的名作《印刷样式元素(TheElementsofTypographicStyle)推荐的行长为45至75个字符。这是基于数年对印刷文本易读性的调查研究所得出的结论。根据对屏幕显示文本易读性的最新调查研究表明，75到100个字符之内，行长越长，阅读速度越快（尽管很多受测试用户表示他们更喜欢短一些的文本）。

2．屏幕分辨率并不等同于浏览器窗口大小

固定宽度布局的大问题在于，它们本质上取决于你估计何种宽度会最适合大多数用户。即便是你的网页统计软件可以告知每个用户屏幕分辨率——即便是你正在制作一个内联网并且确定只会使用单一的分辨率——屏幕的分辨率也并非总是能够与浏览器窗口相匹配。有一些人不会使用大化的浏览器窗口进行浏览（不能否认，这是很少的一部分人，但是随着显示器和分辨率大小的增加，这类人的数量也在增加）。另外，还有一些人会使用占用了可用宽度数百像素的浏览器工具条。固定宽度设计带来的后果往往是，相对于浏览者的窗口而言，某些浏览者看到的设计不是过宽（迫使他们不停地拖动水平滚动条）就是过窄（使得布局的一侧或者两侧留下大量空白）。根据我对用户所做的测试，很多人几乎都对浏览器中“被浪费的空间”或者费劲地拖动水平滚动条表示苦恼不堪！

不过，在网络中，我们无法知道用户的文本大小，浏览器默认值为16像素，绝大多数用户会对其文本使用该默认值。然而，有些用户还是会更改该默认值，或者将用户样式表设置成格式文本以便更易阅读。甚至，如果文本的某一页读起来很费劲（即便是像素可调的文本，InternetExplorer6以及更早版本的浏览器中的文本除外），那些对该文本使用默认值的用户也会增加每页文本的大小。因此，如果你为16像素大小的文本进行行长优化，你或许是在为绝大多数访问者进行易读性优化工作，但并不是为所有的访问者。不要误解我的意思；为绝大多数人设计是一件好事。只是不要错误地认为“绝大多数”等同于“所有“。

另一个问题是，这些对行长的研究并未考虑到会促使特定群体更倾向于更短或是更长行长的各种不利条件。尽管我认同设计师的工作多半是围绕用户需求并以最有利于用户的方式而展开（因为用户自己并不知道什么是最好的），但是有时候还是需要让用户自己而不是我们，去更好地了解什么才能好地满足他们的需求。至少，我们可以根据自己认为的能够帮助绝大多数用户的考虑来优化设计，不过要告知用户为了更好地满足其需求而需适应我们的设计的可能性一——这是印刷以及更为固定的媒介无法获得的一大优势。

分享文章：网站制作中的灵活布局详解
网址分享：https://www.cdcxhl.com/news12/82112.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有网站制作等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联