青岛网站建设
Hi,are you ready?

准备好开始了吗?
那就与我们取得联系吧

有一个品牌项目想和我们谈谈吗?您可以填写右边的表格,让我们了解您的项目需求,这是一个良好的开始,我们将会尽快与你取得联系。当然也欢迎您给我们写信或是打电话,让我们听到你的声音!

填写您的项目信息

青岛设计公司

青岛网站设计布局

2016.11.05

       在现代网站设计中,网站布局设计工作需要耐心、细致以及扎实的CSS 知识。网站设计元素决定了整体网站设计的视觉流向和层次结构,同时页面布局构建了整个网站的骨架,为页面中的元素提供了呼吸和生存的空间结构。但是设计网站布局确实非常复杂耗时,青岛网站设计师的耐心在面对各种浏览器之间的不兼容以及多种风格和样式之间的利弊权衡过程中一点点被侵蚀。


       好消息:已经有一些实用的指导可以帮助我们有效、可控地完成页面布局。这几天的文章青岛最好的网站公司-圭谷设计将会介绍多种类型的布局,并且分别介绍它们的优点和缺点,以及在何种情况下使用最好。同时,为了从总体上更好地理解CSS 布局,我们还会涉及一些主要技术和相关话题。探寻建立一个完美、普适布局的过程最后都归结为对现存的各种方法的比较,这个过程还会极大地受到网站设计师的技能,以及在像素级、自适应、灵活性布局间选择的影响。基本上,网站设计师有4 种可选择的布局类型:固定宽度布局、自适应布局、弹性布局和混合布局。这些布局的名字暗示了它们是否能够根据用户浏览器的尺寸调查自身的尺寸。


固定宽度布局

       固定宽度的布局,就像它的名字一样,这是一种以像素为单位,宽度固定的静态布局。这类布局的外层宽度都是固定的,内部使用了百分比或者固定的宽度。网站设计师对内容区域周围的设计元素就有了更大的控制力,并且能够更精确地设计内容和导航的宽度。设计师根据自己的经验和探索,可以对页面中的字体、图片和平衡关系做更精确的规划。固定宽度的网站设计可以确保所有青岛网站设计制作中的平衡关系能够始终如一,不管用户使用什么样的浏览器,这种平衡永远不会被打破。
       固定宽度布局正是由于其简洁、直观、易于实现和定制的特性,成为了一种非常流行的选择。使用固定宽度布局,我们可以确保在不同分辨率下设计效果保持一致。我们不用去猜测用户使用什么客户端,测试也变得简单,从而总体上缩短了开发时间。特别是固定宽度布局使用绝对的像素值,这比相对单位的百分比或者em(基于字体大小)更能让网站设计师感到舒服和直观。严格按照像素来定位内容区域也许就是固定宽度布局最为显著的特点。

       固定宽度布局所用的宽度往往由显示器的平均分辨率决定。当下,大多数用户都已经拥有了1024×768 或更高分辨率的显示器,所以大多数设计师选择了使用960 或者1050 像素(px)作为固定宽度布局的宽度。这个宽度可以避免水平滚动条的出现,并且为多数浏览器中都会出现的20 像素的垂直滚动条留下了充足的空间。但是,对于低分辨率的屏幕,我们需要多加注意,如果固定宽度布局的宽度过宽,则会出现水平的滚动条。

       固定宽度布局的一个优势在网站设计要素易于定位,结果容易预测。确定了布局的宽度,定位元素就不会很复杂。另外,即使一个网站设计师考虑兼容最小的800×600 像素分辨率显示器,在高分辨率的情况下,内容区域仍会清晰可辨。那些从平面设计领域转行到基于网站的设计领域的网站设计师趋向于选择固定宽度布局,因为他们热衷于精确的控制,毕竟在传统的印刷设计中普遍采用绝对定位的方式。

       固定宽度布局的缺点是没有充分利用用户显示器的全部显示区域。当然,屏幕的分辨率不一定会和浏览器的分辨率相同,因为很多“宽屏”不会最大化浏览器窗口[注释]。但是,如果用户有一个很大的宽屏显示器(例如,分辨率1900×1200 像素,浏览器分辨率1500 像素),屏幕中很大一部分没有被使用的假设就比较合理了。例如,浏览一个750 像素宽的固定布局,空白区域的水平宽度会和布局一样宽。

       因此,固定宽度布局产生了过度的空白,扰乱了黄金比例、三分构图、总体平衡或者其他的网站设计原则。那些顺畅的纹理、图案和连续的图片也需要适应高分辨率的情况。最后,强烈推荐使用一个居中的DIV 来维护固定宽度设计中的平衡感。

       那么,如何确定什么尺寸是最合适的呢?许多用户有了很大的宽屏显示器,但是更多的人还在使用普通尺寸的显示器,还有一些仍在使用低分辨率显示器。不管是哪种情况,多数用户都会将窗口调整到他们喜欢的尺寸,而不是使用最大化、标准的或者和屏幕分辨率成比例的窗口大小。

       在实践中,为青岛网站建设固定宽度布局找一个最佳的平衡点通常需要对网站的用户资料进行深入的研究。通常的做法是评定访问者的浏览偏好,然后相应地调整网站设计。最常用的方法是分析网站的统计数据,找到使用最多的分辨率,并分析有多少用户使用较低的分辨率。根据通常的经验,可以将宽度设置在800~1000 像素之间。作为专业人士,我们必须为用户而不是我们自己创建合适的布局,即使我们的设计在高分辨率的宽屏笔记本上看起来很糟糕。为了固定宽度,在 #container 层上设置width(宽度)属性,同时为左右两栏设置固定宽度。为了让头部和底部与容器等宽,设置宽度为100%(尽管在大多数的时候这个属性是不必要的,但这是一个很好的习惯,可以确保这两个区域确实与容器等宽)。另外,你还需要在其他类型的浏览器上进行测试,确保布局能够在不同的浏览器上正常显示。

       对于固定宽度布局,人们普遍认为,从长远看来,其代码维护困难。如果网站设计中使用了固定尺寸的字体(尽管IE6 的用户完全不能改变文字的尺寸),有一天客户要求加大某些特定的网站设计元素的尺寸(例如文本),重新计算并修改文本的尺寸将会成为一场“噩梦”。一个比较好的方法应当是使用元素之间的比例关系来决定网站设计的尺寸(例如使用相对值),这就是接下来圭谷设计的新闻中要介绍的灵活布局(自适应网站布局和弹性网站布局)。


Are you interested in ?

对圭谷感兴趣吗?

有关我们服务的更多信息,请联系

朱总13805329405 / 18661461613(同微信号)

与我们 合作

与圭谷设计合作,您将会得到更成熟全面的网站建设服务。我们以客户至上,同时也相互挑战,力求呈现较好的网站建设成果。

网站建设热线:

138 0532 9405

fixed top

TOP

QQ客服

免费电话

暂不需要
立即在线咨询