时间:2019-08-09
编辑:网站制作公司
5499
0
网页设计中有很多布局。最常见的包括固定,液体和弹性布局。本文概述了用于描述Web设计中布局的术语的主要差异,以及每个特定设计何时需要特定布局。所以如果这个问题在过去让你感到困惑或沮丧,请继续阅读......重庆网页设计
在网页设计中,固定布局是指使用特定测量单位来定义网页宽度的布局 - 与所有其他因素无关,包括浏览器窗口尺寸和字体大小。换句话说,无论浏览器窗口的大小或写入页面的字体大小如何,网页/站点都将是相同的固定大小。
例如,网页/网站的主列可以固定为740像素。如果观众在最小化的浏览器窗口上访问该网页,则主列仍将是740像素宽,并且无论浏览器窗口变得多大或多小,这都不会改变。这意味着如果浏览器窗口小于页面的固定宽度,则查看者将无法一次看到页面上的所有内容。
因此,调用布局是因为页面固定在恒定的像素宽度。网页内的各种列通常使用选定的测量单位来定义,最常见的是像素。
相对布局是指使用某个相对测量单位定义网页宽度的布局。在这种情况下,页面中的内容将根据用户访问它的浏览器窗口的大小来调整大小。
对于相对布局,列宽被定义为填充浏览器窗口的某一部分,而不管查看页面的窗口的实际大小。如果查看者将网站扩展或收缩为更大或更小,则列将自动调整大小,使其相对于浏览器窗口大小的大小保持不变。
在特定限制内,您不必水平滚动以访问具有相对布局的所有内容。网页设计中的相对布局也称为“液体”或“流畅”布局,因为页面会拉伸或收缩自身以填充可用容器的整个空间 - 在本例中为浏览器窗口。相对布局也称为“弹性”或“弹性”布局。
那么,为什么给出这么多名字的相同布局呢?
简短的解释是,名称的出现是因为来自不同地点的不同网站管理员试图描述当时没有技术描述的现象。网页设计本身就比较新颖; 从20世纪90年代开始,因此每个遇到的现象都没有明确的词汇。因此,网站管理员只是给出了一个他们认为适合他们想要做的事情的名称。
相对布局中的元素以相对单位定义,例如百分比或“ems”。'em'指的是页面上字体的字体高度。它被视为相对测量,因为字体大小也具有不同的高度。百分比的工作方式与其他地方相同,即如果列设置为页面的60%,则占用可用空间的60%,例如浏览器窗口。
如上所述,在Dreamweaver初始部署期间使用术语的方式会给布局的理解带来一些混乱。Dreamweaver是一个WYSIWYG Web编辑器(所见即所得),它使网站管理员可以通过使用类似于操作的文字处理程序的可视界面来创建网站。
此Web编辑器还提供了一些可用于Web设计的空白模板。为了满足不同网站管理员的各种需求,它还包括处理固定和相对布局的模板。
在Dreamweaver中(仅限CS4之前和之后),布局被定义为“固定”,“弹性”,“液体”或“混合”。Dreamweaver中的固定布局使用像素作为度量单位进行定义。这与上面给出的定义相同。
Dreamweaver中的液体和弹性布局本质上是相对布局。也许Dreamweaver开发人员只是想让网站管理员可以自由地使用百分比或ems来定义页面宽度,用于流畅的布局。这里,弹性布局使用em作为度量单位,而液体布局使用'百分比'。
混合布局使用'percent'和'em'的组合来定义页面宽度。那么,您如何知道哪个度量单位应该用于哪个页面设计?
固定布局对于包含必须在页面上具有完美对齐的多个元素的设计非常有用。例如,您可能在一列中有一个图像需要与文本或另一列中的另一个图像完美对齐。固定布局提供了更大程度的控制,确保所有元素都以您在设计时的预期方式显示。
如果使用Dreamweaver CS3和CS4,则与弹性布局相同,并根据页面上使用的字体大小调整列的大小。现在,这仍然被认为是相对的,即使理论上设计师可以定义字体大小,从而有效地固定列宽。这是因为观看者可以取代您的浏览器上的设置。通常,这是由必须使用较大字体的人完成的,例如,如果他们的视力失败。
因此,如果用户指定较大的字体,这将使页面列更宽。反之亦然 - 较小的字体会缩小列宽。如果您只显示文本,弹性布局是理想的,因为当列根据字体的变化调整大小时,文本将出现在完全相同的位置。
但是,它的局限性在于用户可以指定比浏览器窗口宽度允许的更大的字体大小而无需滚动。这将自动创建一个令用户烦恼的水平滚动条。但是,通过适当的设计,您应该能够满足大多数用户的需求。
将页面宽度指定为百分比将其与查看器浏览器窗口的宽度相关联。如果您确保所有列的总宽度不超过100%,则大多数用户将永远不会遇到水平滚动条。然而,图像仍然存在挑战,因为它们具有以像素定义的固定宽度。在正常情况下,您可以创建一个不会为大多数用户显示水平滚动条的设计。
根据这些信息,您现在已足够武装,可根据您或您客户的网站的最终目标,在最佳布局选项上做出明智的选择。
重庆网页设计
3
s后返回登录3
s后返回登录