银海软件设计出品
扫描关注网站建设微信公众账号

扫一扫微信二维码

网页的全屏与相对宽度布局讨论

银海软件2016-02-18公司新闻

访问任何网页设计的新闻组或阅读任何网页制作指南在网络上,你可能会遇到一些人宣称的罪恶都有固定宽度的页面布局,建议您使用相对宽度,或液体或弹性布局,而不是。另一方面,如果你查看​​HTML源文件,您访问的网站,你会发现,他们的大量使用固定宽度的页面布局。你应该使用哪一个?正如我们将在这篇文章中,找出问题的关键不是简单的支持者相对宽度使。

对于外行,一个固定的宽度是不改变宽度的网页访问者的显示器或大或小的是无论怎样。这方面的例子可以看出,在反馈表向导演示站点。该网页的主要内容部分具有一个固定的宽度,而在大的显示器中,此部分将出现在未使用的空间所包围的屏幕的中间。在小显示器上,或者,如果你低于800像素宽调整您的浏览器,你将有向左和向右滚动,以查看所有内容。

另一方面,网站布局,使用相对宽度将扩大和收缩,以适应您的浏览器窗口的大小。这样的一个例子是本身thesitewizard.com。请注意这篇文章如何填满整个浏览器窗口的宽度,即使您最大限度地提高您的浏览器窗口。

相对宽度的情况或弹性/液体/流体布局
通常围绕论点赞成给你的布局相对宽度的布局或液体的事实,这样的布局会产生网页访问者的屏幕分辨率,无论工作。

例如,宽度为“100%”,因此总是跨越在浏览器窗口的整个宽度上的顾客是否具有640x468的显示或1024×768的显示(等)。为了读取你的网页,访问者永远需要水平滚动,被大多数人看作是很烦人的东西。

相对宽度,你不用担心是否为限制性800x600显示的代码,或1680x1050的显示。

对于固定宽度的案例
正如上面所提到的,在写这篇文章时,页面上thesitewizard.com构建了相对宽度。他们可能看起来很好,如果你使用的是1024X768或1200X800显示。但是,如果你有一个很宽的显示器,尝试查看您的浏览器窗口扩大到其最大宽度。

请注意,现在一些段落占据一个体面的几行显示为单行?文章现在看起来像一个年轻的孩子的作文 - 单成荫的空间之间的段落和意见。每次你读取一行,你的眼睛有巨大的显示器两端之间的长途旅行。

从本质上讲,当您使用液态布局,你必须控制你的页面的外观。它会出现宽或窄访问者的浏览器。其结果是,当浏览器窗口变得太宽,一切都会显得捉襟见肘。当浏览器窗口变得太窄,文字和图形在不同列中会突然可怕的错位。

如果你要创建一个固定的布局,页面中的元素会保留他们的比例,无论访问者的屏幕分辨率。当然,如果低于您所指定的固定宽度的分辨率,游客将有水平滚动条。但至少你的页面​​仍然显示,按照你的计划。

岩石和硬的地方
随着上述所有条件,你应该使用哪一个?只要屏幕分辨率仍然是多样的,因为它是现在,没有一个单一的解决方案去满足大家。

一般来说,如果你想在您的网页的外观更严格的控制,固定宽度可能是你必须采取的路线。谁的人有他们的网页上的图形元素,绝对配合其他图形或文字可能会需要使用一个固定的布局,或者您的影像可能不会出现在哪里,他们都应该当你的访问者使用的显示器不同的分辨率比你。

在这种情况下,请确保您在一个合理的宽度设置固定的大小,使人们使用1024×768分辨率,如(仍在了很多计算机用户在使用的时候,我写这篇文章),仍然可以查看你的页面,而不有水平滚动条。需要注意的是你没有得到1024x768的显示器,根据该决议只是为了测试。如果你有一个更广泛的显示器,你可以随时调整您的浏览器。做到这一点的方法之一是如何在不同的屏幕分辨率,在Windows下的简易方法测试您的网站在文章中提到的。

如果你不需要这样的严格控制,您可以自由使用相对宽度为您的网站,虽然你可能仍然要测试你的页面在1024x768的分辨率下,以较低的分辨率下,如果你的布局和走线变歪。

顺便说一句,使用固定宽度并不意味着你的页面将在更高的分辨率下看起来很好。如果你的页面有一个固定的宽度为800像素,和访客使用1900x1200的分辨率的系统视图页说,他会看到一个不失真复制你的网页在海上的白色空间。就像我说的,这些解决方案都不是完美的。我们不是在谈论印刷媒体,其纸张大小是固定的,你选择它的那一刻。网页有一个非常大的可能的条件下工作。

实用指南
那些想知道如何在您的网站上实施固定或相对宽度可能要来看看下面的教程为出发点。

1。适用于Dreamweaver的用户
如果您使用的是Dreamweaver网页编辑器,如何使用固定或相对宽度为您的网站可以找到一些实用信息,在本教程中如何使您的网站,以填补整个浏览器窗口,用Dreamweaver。

2。对于KompoZer帮助或Nvu的用户
KompoZer帮助或Nvu的那些可能感兴趣的文章如何防止你的图像或文字对齐走出去,当你的访客NVU的/ KompoZer帮助调整他们的网络浏览器。

3那些手工编码的HTML和CSS
我怀疑任何读者手直接在HTML和CSS编码他们的网站已经知道如何实现这里提到的东西。然而,对于那些新来这个,看如何设计一个两列的布局,为您的网站使用CSS。如果你正在做一个固定宽度的网站,你可能会也希望中心列。在这种情况下,你可能有兴趣在学习如何使用CSS以及中心的div块。

结论
设计不同的分辨率有时候就像你站在之间的岩石和硬的地方。不相信的人说,谁在使用的方法之一,将解决你所有的问题。你仍然有相当高的分辨率,看看它是如何出现的低分辨率下测试你的页面。在大多数情况下,你将不得不忍受一些不完善的地方,当你的网站被视为极端的设置下。

高端网站建设

文章关键词
网站建设