液体，有弹性的，相对的，流体的，灵活的和固

我的访问者之一最近问我，“液体”的布局，“弹性”布局和“固定”的布局之间有什么区别。他碰巧在使用网页编辑器，在模板列表中使用这些术语。本文试图解释这样的字眼，以及其他条款，如“相对”，“流动性”和“灵活”经常被用来处理网页设计的文章中之间的差异。

一个固定的布局是什么？
在网页设计中的固定布局是一种使用一种计量单位，不依赖于其他因素，如字体或在浏览器窗口的尺寸的大小，来确定一个网页的宽度。把它的另一种方式，该网站似乎无论多么大的浏览器窗口，或者是什么样的字体选择页面大小不变。

一个例子将有望使更清晰。以反馈表脚本演示网站看看。该网站的主要栏目有一个固定的布局，设置为730像素宽。尝试观看网站与您的Web浏览器最大化其最大尺寸。注意列仍然是只有730个像素宽，即使您的浏览器窗口现在远大于页面。现在，您的浏览器窗口缩小，所以它不再占据了整个屏幕。再次，观察该列保留其大小。如果你减少你的窗口下方具有一定规模的，你将不能够在该网页上看到的一切，但必须滚动才能看到右手边水平。

由于页的宽度是固定的，这样的布局被称为一个固定的布局。这样的页面的各个列的宽度往往像的像素，视情况而定，不改变使用的计量单位被指定。

相对的，液体，流体，灵活和弹性的布局是什么？
在网页设计中的相对布局是一个使用相对测量单位指定页面的宽度。的页面的内容，调整大小以适应的浏览器窗口中显示，或在页面上使用的字体的大小。

在任何网页上的，包括目前正在观察一个你看一看。右栏使用相对单位，应调整来填补你的浏览器窗口，无论多么大你把它。例如，如果您的浏览器窗口打开时的宽度为1024像素，右列应延伸到右手侧的窗口的权利。展开的浏览器窗口，所以它现在是1200像素宽，你会再次看到浏览器调整的主要内容，填补了额外的空间。在一定范围内，如果你减少你的窗口，内容也应该被缩小，这样你就没有水平滚动阅读文章。 （当然，如果你退缩超过一定限度时，窗口会变得太窄，无法正确显示的内容，一切都将走歪。）

这样的页面布局，拉伸或收缩，以填补的浏览器窗口中，根据其大小，被调用时，除其他外，“相对”的布局。这样的布局的其他名称包括“液体”或“流体”的布局，因为页面传播的填补一个浏览器窗口的宽度的方式的液体扩散填充它的容器的整个表面上，倒入时。它有时也被称为“灵活”的布局和一个“弹性”的布局。

为什么有这么多不同的条款，同样的事情吗？基本上，它是试图描述的情况，最初没有任何技术名称分配给它在世界各地的不同站长的结果。请记住，网页设计只在上世纪90年代开始，站长写关于它没有有自己的一套词汇依傍，所以每个人都只是杜撰的东西，企图来形容他们在做什么。谁知道，再过十年左右，事情可能安顿下来。或者，也许所有这些常用术语只会被接受是可以互换使用。

相对布局是通过使用相对单位，如EM或％（“％”）。的时间基本上是在网页所使用的字体的高度。它被认为是相对的，因为16点的字体有不同的高度，也就是说，一个12点的字体。 ％有正常的你是用来从数学意义。也就是说，如果页面的宽度被设置为80％，这意味着它可以具有的最大宽度的80％。它被视为相对以来的最大宽度取决于您的浏览器窗口有多大。

在Dreamweaver与混合液体与弹性
污浊的水有点（虽然不是全部）是Dreamweaver的早期版本中使用的术语。这是一个所见即所得的网页编辑器（你看到的就是你得到的），允许网站管理员创建网站使用一个可视化界面，工作起来有点像文字处理。 （见我的Dreamweaver教程，如果你想了解更多信息。）编辑器包括几张空白网页设计模板，网页设计师可以使用，如果他们的愿望。为了适应不同需求​​的站长们，他们包括固定的布局，以及相对布局的模板处理。

其布局“固定”，“液体”，“弹性”（Dreamweaver CS4中，早期只）和“混合”（Dreamweaver CS4中和更早版本）的编辑标签。

在Dreamweaver中使用“固定”的布局像素作为度量单位指定内容的宽度。因此，它具有“固定布局是什么？”在上一节中提到的相同的含义。

在Dreamweaver中的“弹性”和“液体”的布局实际上是相对的布局。 Dreamweaver中的开发商可能想给用户的自由选择“EM”和“％”为单位测量的流体布局。因此，他们决定打电话给相对布局，使用EM“弹性”布局，使用％的“液体”的布局和布局。

在Dreamweaver中使用的混合布局相结合的“EM”和“％”作为计量单位。

我知道，上面的解释提出了新的问题，你们中的大多数，像“使用'时间'和'％'的意义是什么？” “当我使用一个固定的布局，当我使用液体的布局吗？（等等）”。如果是这样，继续读下去。

当使用一个固定的布局与像素作为计量单位
您的网页上有许多项目需要彼此对齐，当你为你的网页，你会希望有一个固定的布局。例如，您可能有一个图片，在一列必须与另一张照片或一些词在另一个页面。使用一个固定的布局，给你一个更大的控制措施，确保在您的网页上的东西会出现在相同的位置，你设计的，因为你的页面宽度将不会改变，即使你的访问者调整他/她的浏览器窗口。

当作为一个计量单位（“弹性”在Dreamweaver中使用相对布局与EM）
当你创建了一个网页，使用EM指定一个列的宽度，或者是被称为“弹性”，在Dreamweaver CS4和CS3，列的大小取决于您的网页上使用的字体的大小。你们有些人可能会奇怪，在这一点上，“在什么意义上是这样的布局相对？不是我指定的字体，从而有效地创建一个固定宽度的页面吗？”

虽然这是事实，你可以指定你在你的网页使用的字体，请记住，用户可以（理论上）也覆盖在其浏览器中的字体选择。很少人会这么做，当然，但几个人往往是那些谁真正需要的，往往是因为他们的视力很差，他们需要更大的字体。与今天的非常小的笔记本电脑和上网本，它也有可能是某些人指定更大的字体，因为他们的显示器太小，供他们阅读的文本。

因此，如果用户选择较大的字体，您在您的网页上的列宽。如果他们选择较小的字体，列将萎缩。换句话说，页面宽度，在指定的时间，相对于字体的大小。

•可能使用EM你的相对布局的优势
如果列在您的网页包含只有文字，没有图片或其他元素，您的访问者指定一个较大的字体，页面，页面会出现完全放大，每一句都出现在你设计的精确的相对位置。也就是说，如果你有一句说：“这句话涵盖从左边距到右边的”当你设计占据了整个列宽，，它会CONTINE在用户的窗口调整大小占据了整个宽度。它不会有移动到下一行，或任何它的某些部分，因为被栓的宽度和所显示的文字的字体大小。

•使用EM你的相对布局（可能的缺点相比百分比）
根据许多EMS您指定的页面宽度和访问者的窗口是多么小，它可以为用户指定的字体如此之大，你的页面宽度大于他们的浏览器窗口。

请注意，这是不显着的缺点，因为它出现，即使它创建一个水平滚动条，用户讨厌。如果你设计好你的网页，而不是好高骛远在指定一个巨大的页面宽度，这种情况不会发生大多数游客的正常使用你的网站。 （不要担心少数人创造非常小的浏览器窗口大小：那些通常的电力用户将自动成为能够弄清楚的问题是什么，并知道如何调整窗口的大小更大的阅读你的内容。）

鉴于上述的缺点，我倾向于不使用“EM”为单位的测量我的网站列。 Dreamweaver中也删除了他们的“弹性布局”的较新版本的网页编辑器（虽然可能不是出于同样的原因）。

当使用相对布局与百分比（“％”）的单位（在Dreamweaver中的“液体”）
如果你指定你的页面宽度的百分比，其宽度与访问者的浏览器窗口的大小。

它的优点在于，如果你确保你的页面的总宽度加起来不到100％，大多数访问者将永远也看不到一个水平滚动页面上的（祸根众多用户）的事实。

请注意，我说，“多数”，而不是“所有”。这是因为，像所有的布局，这是完全有可能的访问者调整他/她这么小的浏览器窗口，浏览器显示滚动条。这是有图片（图片）的网页，在其中，这可能说明大多数网站尤其如此。图片有一个固定的宽度，以像素为单位指定的，从而在一个页面中占有一个固定的空间量。但是，它是可以为您设计你的网站，这样滚动条不显示，大部分游客使用（通常为1024像素及以上）下正常决议。 （最简单的方法是不要将如此广泛，它需要一个大窗口，它被完全显示的图像。）

当使用混合布局
混合布局基本布局结合使用不同的计量单位，指定在网站上的各列的宽度。

在Dreamweaver CS3和CS4使用的混合布局％的总宽度的页面边栏的宽度（导航栏）和EM。它的优点是确保您的网页适合在浏览器窗口的范围内，尽量避免水平滚动条，而在同一时间，确保您的导航菜单始终是足够宽，所有的字出现在放置的位置。它是一种尝试，以获得最佳的％和电磁相对布局和减少任一的缺点。

另一方面，thesitewizard.com的混合布局，在我写这篇文章的时候，使用一个固定的宽度，其左侧的列（即像素），而相对宽度（百分比）的权利。这是我试图确保左栏有足够的空间的话在我的导航菜单。 （它没有发生，我使用em左栏Dreamweaver中做的方式。总之，每个人都有自己的方式解决了同样的问题。）

虽然从理论上说，混合布局似乎优于其他的相对布局，在实践中，它具有对它们没有优势。是的，没有。让我们面对现实吧。为了在导航菜单栏的空间太小的话，浏览器窗口被调整到一个异常体积小。真正的用户不上网缩小到这样一个小尺寸的窗口。如果他们这么做，几乎每一个网站在互联网上无法使用。测试唯一的人谁这么荒谬的尺寸是业主自己的网站。此外，当窗口被缩成这么小尺寸的，甚至使用混合布局的网站，将会出现有歪斜元素。换句话说，在其他传统的相对布局的好处，这样的布局可能是零。 （我只是猜测，但是这可能是为什么最新版本的Dreamweaver不再提供一种混合模板的原因之一。）

选择哪一个
在本指南中，我的目标是提供足够的信息，你能够决定哪些要使用的布局为您的网站。如果您需要进一步仔细考虑，你可能想读我以前的讨论的主题之一，​​大固定与相对宽度的页面布局辩论（其中有一个重点略有不同）。

请注意，如果你是按照我的网页设计教程系列之一，无论是Dreamweaver CS5.5的教程或KompoZer帮助教程，你将默认创建一个网站，一个相对布局，效果很好，对于大多数网站。你并不局限于只使用该布局，当然。由于这些教程对于初学者来说，我必须从某处开始。如果我给这种详细解释这些教程“第1章，你的眼睛会呆滞，你已经放弃希望，不断创建一个网站。但是，如果你是一个Dreamweaver用户，你可以很容易地从液态布局切换到一个固定的布局（反之亦然），而无需重做所有网页。

顺便说一下，如果你正在读这篇文章的好奇心，并打算建立一个网站，但实际上并不具有一个，我建议你从这里去阅读如何启动/创建一个网站：初学者的AZ指南。

对于谁是绝对不能决定的人，让我说，在大多数情况下，它真的不会不管你选择哪一个。对于大多数人来说，无论是布局将做精。例如，的thesitewizard.com会出现完美的罚款，使用一个固定的布局，因为它相对布局。当你是一个初学者，每一个细小的决定似乎是一个主要的，因为你没有足够的经验或知识，区分它们。在这种情况下，我的建议是，如果你是系列教程（如我上面提到的那些），只需使用任何布局教程告诉你。您可以随时更改后，当你更有经验和自信。

高端网站建设