网页设计中布局的定义以及何时使用它们

网页设计中布局的定义以及何时使用它们

在网页设计中有相当多的布局。最常见的有固定布局、流动布局和弹性布局。本文概述了用于描述的术语的主要区别网页设计中的布局,以及当每个特定的设计都需要特定的布局时。所以,如果这个问题在过去让你感到困惑或沮丧,请继续读下去……

网页设计中的布局

固定布局

在web设计中,固定布局是指使用特定的度量单位来定义web页面宽度——独立于所有其他因素,包括浏览器窗口大小和字体大小。换句话说,无论浏览器窗口的大小或页面的字体大小如何,网页/站点的大小都是相同的。

固定布局

例如,网页/网站的主栏可以固定在740像素。如果一个浏览者通过一个最小化的浏览器窗口访问该网页,那么主列仍然是740像素宽,并且无论浏览器窗口大小都不会改变。这意味着,如果浏览器窗口小于页面的固定宽度,则查看器将无法一次查看页面上的所有内容。

因此,之所以这样称呼布局,是因为页面的像素宽度是固定的。网页内的各种列通常是用选定的测量单位来定义的,最常见的是像素。

相对布局

相对布局是指使用某种相对度量单位来定义网页宽度的布局。在这种情况下,页面中的内容将根据用户访问它的浏览器窗口的大小调整大小。

相对布局

在相对布局中,列宽被定义为填充浏览器窗口的特定部分,而不考虑所查看页面的窗口的实际大小。如果查看器将网站扩展或收缩为更大或更小,这些列将自动调整大小,使它们的大小(相对于浏览器窗口的大小)保持不变。

在特定的限制下,您不必水平滚动来访问所有内容的相对布局。相对布局在网页设计中也被称为“液体”“液体”布局,因为页面本身会拉伸或收缩,以填充可用容器的整个空间——在本例中是浏览器窗口。相对布局也称为“弹性”“灵活”布局。

那么,为什么同一个布局有这么多名字呢?

简短的解释是,这些名字的出现是因为来自不同地方的不同网站管理员试图描述一种当时没有技术描述的现象。网页设计本身相对较新;从20世纪90年代开始,对于遇到的每一种现象都没有固定的词汇。因此,网站管理员只是给一个名字,他们认为适合他们试图做什么。

相对布局中的元素以相对单位定义,如百分比或“ems”。“em”指的是页面上字体的字体高度。这是一个相对的度量,因为字体大小也有不同的高度。百分比的工作方式与其他地方相同,例如,如果一个列被设置为页面的60%,它将占据60%的可用空间,例如浏览器窗口。

Dreamweaver:液体,弹性和混合

Dreamweaver

在Dreamweaver最初推出时术语的使用方式可能会给上面所解释的布局的理解带来一些混乱。Dreamweaver是一种所见即所得的网络编辑器,它使网站管理员能够使用类似于文字处理程序的视觉界面来创建网站。

这个web编辑器还提供了一些可用于web设计的空白模板。为了满足不同网站管理员的各种需求,它还包括处理固定布局和相对布局的模板。

在Dreamweaver中(之前只包括CS4),布局被定义为“固定的”、“有弹性的”、“流动的”或“混合的”。在Dreamweaver中,固定的布局是使用像素作为度量单位来定义的。这和上面给出的定义是一样的。

在Dreamweaver中,流动布局和弹性布局本质上是相对布局。也许,Dreamweaver开发人员只是想让网站管理员能够自由地使用百分比或ems来定义他们的页面宽度,用于流畅的布局。在这里,弹性布局使用em作为测量单位,而液体布局使用“百分比”。

混合布局利用' percent '和' em '的组合来定义页面宽度。那么,您如何知道应该为哪个页面设计使用哪个度量单位呢?

何时使用固定布局

固定布局是有用的设计,包括多个元素,必须有完美的对齐页面。例如,一个列中的图像可能需要与文本完全对齐,另一个列中的图像可能需要与文本完全对齐。固定布局提供了更大的控制措施,确保所有的元素将显示在正确的方式,你打算在设计点。

当使用Em的相对布局时应该使用

这与使用Dreamweaver CS3和CS4的弹性布局是一样的,它根据页面上使用的字体大小来调整列的大小。现在,这仍然被认为是相对的,即使理论上设计者可以定义字体大小,从而有效地固定列宽。这是因为查看器可以取代您在其浏览器上的设置。通常,这是由那些必须使用较大字体的人完成的,例如,如果他们的视力正在下降。

因此,如果用户指定更大的字体,这将使页面列更宽。反之亦然——较小的字体会缩小列宽。如果只显示文本,则弹性布局是理想的,因为当根据字体的变化调整列的大小时,文本将显示在完全相同的位置。

但是,它的局限性在于,用户可以指定比浏览器窗口宽度所允许的更大的字体大小,而不需要滚动屏幕。这将自动创建一个水平滚动条,这是恼人的用户。但是,通过适当的设计,您应该能够满足大多数用户的需求。

当使用相对布局时,应使用百分比

将页面宽度指定为百分比将其与查看器的浏览器窗口的宽度联系起来。只要确保所有列的总宽度不超过100%,大多数用户就不会遇到水平滚动条。然而,图像仍然是一个挑战,因为它们有固定的宽度,以像素定义。您可以创建一个在正常情况下不会为大多数用户显示水平滚动条的设计。

结论

有了这些信息,您现在就可以根据您或您的客户的网站的最终目标,对最佳布局做出明智的选择。

2020-03-25 17:33
相关热门