设计与布局之间思考-好资料免费分享.docVIP

矛盾出来了，像我们这些小作坊，基本都是设计布局一人搞定。甚至还有加后台程序的。假设设计的时候考虑布局了，我们都有这个能力进行调整。但像大公司，分工严格的情况下，如果设计师不懂css不会布局。或者理解有误，那么设计稿就会让布局人员耗费大量的时间和精力。因为浏览器太多！ 经常看到有网友抱怨设计师给的稿子无法还原。因为他们对浏览器和屏幕的理解不一样。也有的是因为效果太绚，颜色太多。更有甚者是使用flash制作嫌浪费，而html又鸡肋好吧，我们抛开这最后一种情况，只谈对屏幕和效果以及设计布局的理解。 先谈屏幕： 屏幕分辨率，还是以1024×768为主。而满屏的定义则无从谈起。为什么？请看一下原因： 你不能确定用户的ie装了几个插件！插件越多，浏览器显示高度越低！ 你不能确定用户的显示器是否设置正确（歪一边了，弧形的，截断的，缩小的放大的） 你不能确定用户显示器的分辨率是否为最佳分辨率。其典型在于某些宽屏或高屏显示器，有的是等比例缩小后留白。而更有甚者则是满屏拉伸。比例就不对了！ 要使得网页满屏。很多人说宽度1003，也有人说是1004。而我则不这样认为。 假设客户要求网页满屏。那么，你就要晓得用户的显示器尺寸的屏幕分辨率。如果客户对这玩意认知度很低。就不要轻易去改人家的分辨率。我1440×900的宽屏，我用1024×768的分辨率，我乐意！如果这客户要求一定要满屏，那么问题又出现了，如果交货的时候客户换了一台不同尺寸的显示器呢？分辨率变大了，你的网页窄了，分辨率小了，你的网页宽了！你咋办？ 其实满屏也分两种，我姑且命名一种为内容满屏，一种为视觉满屏！ 所谓内容满屏，就是指网站上的东西，左边界就在显示器左边界，右边界就是在显示器右边界。最佳的解决办法就是使用百分比。而百分比带来的负面效应： 浏览器bug 设计及制作难度增加 所谓视觉满屏，其实是一种取巧的做法。而这种方法。其实很简单，一个网站的头部，无非就是导航和banner，如果导航在最上边，那么，将导航的背景呈100%，导航居中。如果banner在最上边，那么注意处理图片两端，还是100%宽+背景！ OK，虽然内容宽度还有可能是1000、1003、甚至是900或更低，视觉上依然是百分百的宽度，只要避免最小宽度大于浏览器宽度、或客户的显示器分辨率宽度大于你的最小宽度。永远OK。 再谈布局和循环： 这里有篇文章/read.php/174.htm 其实呢，说网页制作，直角最简单，比如老印，他的东西全部是直角。用他的话说就是刀切一样！为嘛？简单方便速度快内容清晰！ 布局以按照设计稿为标准。或者说叫使用html还原设计稿，如果html截图能和设计稿重叠，再过了标准，我认为就是最高境界了！ 问题最大的，其实还是在设计和还原效果上！虽然可以使用css的负值、浮动、重叠等属性进行不规则布局，但问题依然存在，工作量和难度有可能依然会翻倍。还有，那可恶的N种浏览器！ 对于复杂的设计稿、复杂的效果、甚至是过分的设计，如何降低使用html还原设计稿的工作量及难度！ 如果你有权力微调设计稿，那么，你可以在“可忍受”范围内微调。这个范围，每个公司都不一样！ 如果你没有权力懂设计稿的任何东西，那么，请和设计师或主管沟通，请设计者进行微调。但你要把你的难点描述的清晰，让他们理解！ 没人同意改稿子，那么，恭喜你。加班吧！ 或者，你可以把那些细节工作扔给flash！ 问题集中体现在设计和效果上！ 先说设计： 网页设计，除了体现效果，还有很多不可缺少的东西。这里不谈纯粹用来欣赏的网站。毕竟大部分的站点需要被大量阅读的。 网页的栅格系统看这篇文章：/blog/2008/09/17/grid_systems/ 速度很重要，非常的重要！减少图片，使用背景图整合降低http连接次数。能使用文字尽量使用文字。所以嘛，还是得注意啊！ 背景图的小图循环和重复使用大的就不说了，弄几个弧度上去，几乎就要用大图片了，像奥运时候那么网站的大背景。小的背景图，小栏目的背景图，以及子页面的某个地方的背景图。咱尽量一致！小背景循环，效果图里的宽和高哪个小，尽量按哪个方向循环！目的就是保证速度！ 效果png，这个可以说是效果的典型了！无背景的透明属性。相信很多人都喜欢！但ie6却有缺陷，好了，看码头的：【IE6的疯狂之二】IE6中PNG Alpha透明(全集) 我在做设计的时候，一般的站点是不考虑布局的！但那些艺术气息特浓厚，效果忒多忒强烈的站，在吃自己的亏吃了两次之后，就开始主动考虑后期布局，尽量避免让布局难度加大！ 如果设计的时候，考虑到重复利用图片、背景等。会降低布局切片的很多工作。或者我可以说，页面重复利用率越高，就越快！主页虽然是主页，子页虽然更简单，但重复利用主页上已经下载了的东西，不更好么？我想说的是，要有全局的思