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