当前位置: 首页 > 图文教程 > 网页制作 > 心得技巧 > 关于网页设计布局的理解

心得技巧
IE8 Beta 1两个地方需要大家注意
提高网站性能中内容有关的10条原则
网页设计者应该从三个方面优化网页
Web 设计 实现干净代码的12条定律[图文]
网页设计必备工具 firefox Web Developer插件 CSS工具组教程
UCenter Home 站点添加统计代码
9款很棒的网页绘制图表JavaScript框架脚本
提高网站可用性的10个小技巧
网站维护页面的列表制作技巧
B2C 网站用户体验细节设计参考
收集12个实用的网页在线工具
设计参考 漂亮和原创的博客设计
收集25个知名网站标志中使用的字体
极尽简约的网站设计实例
个性化创意鲜明的网站设计实例(30个)
水平滚动的网站设计 小结
更受欢迎 更具创造性的深底色网页设计实例
有创意的关于我们网页页面设计
整洁漂亮的网页设计的4项原则
设计参考 WordPress建站成功案例

心得技巧 中的 关于网页设计布局的理解


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-09-11   浏览: 111 ::
收藏到网摘: n/a


矛盾出来了,像我们这些小作坊,基本都是设计布局一人搞定。甚至还有加后台程序的。假设设计的时候考虑布局了,我们都有这个能力进行调整。但像大公司,分工严格的情况下,如果设计师不懂css不会布局。或者理解有误,那么设计稿就会让布局人员耗费大量的时间和精力。因为浏览器太多!
经常看到有网友抱怨设计师给的稿子无法还原。因为他们对浏览器和屏幕的理解不一样。也有的是因为效果太绚,颜色太多。更有甚者是使用flash制作嫌浪费,而html又鸡肋.....好吧,我们抛开这最后一种情况,只谈对屏幕和效果以及设计布局的理解。
先谈屏幕
屏幕分辨率,还是以1024×768为主。而满屏的定义则无从谈起。为什么?请看一下原因:
        你不能确定用户的ie装了几个插件!插件越多,浏览器显示高度越低!     你不能确定用户的显示器是否设置正确(歪一边了,弧形的,截断的,缩小的放大的)     你不能确定用户显示器的分辨率是否为最佳分辨率。其典型在于某些宽屏或高屏显示器,有的是等比例缩小后留白。而更有甚者则是满屏拉伸。比例就不对了!

要使得网页满屏。很多人说宽度1003,也有人说是1004。而我则不这样认为。
假设客户要求网页满屏。那么,你就要晓得用户的显示器尺寸的屏幕分辨率。如果客户对这玩意认知度很低。就不要轻易去改人家的分辨率。我1440×900的宽屏,我用1024×768的分辨率,我乐意!如果这客户要求一定要满屏,那么问题又出现了,如果交货的时候客户换了一台不同尺寸的显示器呢?分辨率变大了,你的网页窄了,分辨率小了,你的网页宽了!你咋办?
其实满屏也分两种,我姑且命名一种为内容满屏,一种为视觉满屏!
所谓内容满屏,就是指网站上的东西,左边界就在显示器左边界,右边界就是在显示器右边界。最佳的解决办法就是使用百分比。而百分比带来的负面效应:
        浏览器bug     设计及制作难度增加

所谓视觉满屏,其实是一种取巧的做法。而这种方法。其实很简单,一个网站的头部,无非就是导航和banner,如果导航在最上边,那么,将导航的背景呈100%,导航居中。如果banner在最上边,那么注意处理图片两端,还是100%宽 背景!
OK,虽然内容宽度还有可能是1000、1003、甚至是900或更低,视觉上依然是百分百的宽度,只要避免最小宽度大于浏览器宽度、或客户的显示器分辨率宽度大于你的最小宽度。永远OK。
                                                   

谈布局和循环
这里有篇文章http://weilaixu.cn/read.php/174.htm
其实呢,说网页制作,直角最简单,比如老印,他的东西全部是直角。用他的话说就是刀切一样!为嘛?简单方便速度快内容清晰!
布局以按照设计稿为标准。或者说叫使用html还原设计稿,如果html截图能和设计稿重叠,再过了标准,我认为就是最高境界了!
问题最大的,其实还是在设计和还原效果上!虽然可以使用css的负值、浮动、重叠等属性进行不规则布局,但问题依然存在,工作量和难度有可能依然会翻倍。还有,那可恶的N种浏览器!
对于复杂的设计稿、复杂的效果、甚至是过分的设计,如何降低使用html还原设计稿的工作量及难度!
        如果你有权力微调设计稿,那么,你可以在“可忍受”范围内微调。这个范围,每个公司都不一样!     如果你没有权力懂设计稿的任何东西,那么,请和设计师或主管沟通,请设计者进行微调。但你要把你的难点描述的清晰,让他们理解!     没人同意改稿子,那么,恭喜你。加班吧!     或者,你可以把那些细节工作扔给flash!

问题集中体现在设计和效果上!
先说设计
网页设计,除了体现效果,还有很多不可缺少的东西。这里不谈纯粹用来欣赏的网站。毕竟大部分的站点需要被大量阅读的。
        网页的栅格系统
    看这篇文章:http://ued.taobao.com/blog/2008/09/17/grid_systems/     速度
    很重要,非常的重要!减少图片,使用背景图整合降低http连接次数。能使用文字尽量使用文字。所以嘛,还是得注意啊!     背景图的小图循环和重复使用
    大的就不说了,弄几个弧度上去,几乎就要用大图片了,像奥运时候那么网站的大背景。
    小的背景图,小栏目的背景图,以及子页面的某个地方的背景图。咱尽量一致!小背景循环,效果图里的宽和高哪个小,尽量按哪个方向循环!目的就是保证速度!     效果
    png,这个可以说是效果的典型了!无背景的透明属性。相信很多人都喜欢!但ie6却有缺陷,好了,看码头的:【IE6的疯狂之二】IE6中PNG Alpha透明(全集)

我在做设计的时候,一般的站点是不考虑布局的!但那些艺术气息特浓厚,效果忒多忒强烈的站,在吃自己的亏吃了两次之后,就开始主动考虑后期布局,尽量避免让布局难度加大!
如果设计的时候,考虑到重复利用图片、背景等。会降低布局切片的很多工作。或者我可以说,页面重复利用率越高,就越快!主页虽然是主页,子页虽然更简单,但重复利用主页上已经下载了的东西,不更好么?我想说的是,要有全局的思维!
当然了,你肯定也想到了flash的应用。但flash貌似也有浏览器兼容问题!
如果设计和布局中间有某个问题被耽搁或某一方不退让,那么程序、交互就要延后,上线日期也要推迟。
如果制作方擅自行动修改而设计方死活有意见......
唉,问题可大可小!做个网页也不容易啊!