《播客》项目总结——web标准页面设计方面(转)

摘自：http://www.cnblogs.com/JustinYoung/archive/2007/09/17/895334.html
前言：
来上海激动的第一个项目，无论是公司还是自己都有很多的不足。第一次做娱乐型的门户网站，对web标准的掌控能力的确是个很大的挑战。说实话，这一个项目对于web标准的使用自己只能给自己打65分，分数之所以那么低，项目时间短是一个原因，美工的设计稿比较差是个原因，自己对大型娱乐型的网站的网页框架的设计不足也是个原因。正是因为分数这么低，所以项目的总结就显的特别重要。不断的总结，不断的改进，不断的完善。我很高兴，因为我依然走在“好好学习，天天向上”的路上……

正文：
美工和策划都生活在乌托邦
不要急着马上动手，美工给过来的页面一定会隐藏着很多不合理的地方。把页面打印出来，看！根据以前的经验把这些不合理的地方找出来，标记出来，和策划进行商讨和改进。不合理的地方可以通过一下方式查找出来——对一个地方问一下：这地方的文字（或者图片、记录、信息块）如果很长怎么办？如果很短怎么办？如果没有怎么办？如果很多怎么办？如果很少怎么办？如果有权限怎么办？如果么样权限怎么办？……多考虑一些情况下的显示和展现方式。

唯一不变的只有改变
即使经过策划重新改进和商讨的版本也一定会隐藏很多的不合理的地方，所以动手开始页面设计之前，一定要注意为即将使用的框架预留可能更改的可能。页面设计和是软件开发的一部份，自然会遵循软件开发的一句神语——唯一不变的只有改变！

网页设计框架
如何避免大量重复的工作，不再为做了一遍又一遍的东西浪费时间和精力？FrameWork，框架。编程，有编程的框架，网页设计也可以有网页设计的框架（例如yahoo的yui框架）。所以将常用的、通用的东西集合到框架里面去，将是种成熟的做法。我正在试着搭建一个符合web标准的网页设计用的框架，但是自己能力的确有限，加上后期项目时间太紧，所以这次项目中虽然开头设计了一部份，但是后来终究没有完成和使用。如果有高人有相同的想法，欢迎指教。如果对网页设计框架有兴趣，但是还不是很了解的朋友，推荐看一篇文章 《Frameworks for Designers》

建设健壮的页面
因为美工和策划都生活在乌托邦，所以他们的设计很多都太理想了，所以很多的时候，需要通过css去强制限制。确保布局在异常状态下不会混乱。
鉴于这个比较重要而且不是一句话两句话就可以很明了的说明的，所以我决定以后单独为此写一篇文章，敬请关注我的博客(YES!B/S!)

id和class到底要用哪一个？
首先要明白id和class的各自的优缺点。这样才能根据他们的各自的特点进行使用。
id的优点（class的缺点）：id写在css用用"#"选择器，class写在css中用"."选择器。"#"选择器的优先级高于"."选择器大约10倍，所以对于当你需要提升优先级的时候，id标签，或者id容器内的标签将是否容易和有效。而class标签，或者class容器内的标签将可能导致优先级的提升失败。
id的缺点（class的优点）：id应该是唯一的，所以它的可复用性是很差的，而class是可以复用的。所以如果一块东西是多个页面，甚至一个页面都会使用多次的，那么一定要使用class来作为样式选择器。id是唯一的，当一个控件的id的产生是不可控的，那么这个id选择器将失去意义，但是任何一个控件及时是动态产生的，他的cssClass仍然是可定制的，所以当你的这个标签，用服务器端控件替代的时候，而服务器端控件的id是不确定的，那么请使用class选择器，这样只要将服务器端控件的cssClass设为你class选择器的名称即可。（当然，这个还需要大量的经验的积累，项目做的多了就会逐步的改进）

padding和margin到底要用哪一个？
padding和margin可以让一块区域的外观显示完全一样。所以可能让很多人认为padding和margin是可以互换的。其实它们的差别很大，而且选择哪个需要认真的考虑。对容器使用padding还是对容器内的标签使用margin的原则：当隐藏这个容器或者容器内的标签时（现实项目中其实经常需要将某个部件隐藏显示），对整体布局影响最小为益。
对于padding再说一句：ie6，ie7（FF）对带有padding样式的标签的宽度的解析是不一样的。ie6的标签宽度不包含padding-left和padding-right的值，而ie7和ff则是包含的。例如一个div的width设置100px，padding设为10px，而在ie6中它要占据的宽度是120px（包含10个padding-left和10个padding-right），而在ie7和ff中则占据100px的宽度。因为ie7和ff会认为100已经包含了20px的padding。

min-height和height
如果你只需要兼容IE6那么你完全不需要注意min-height这个样式，因为ie6根本就不支持这个样式。但是当你的页面需要照顾到ie7和ff的时候，这个样式一定要注意。因为很多在ie6下设置了height=固定值的样式，当容器被里面的东西撑的大于这个高度的时候，ie7和ff是不会自适应高度的。从而导致布局的混乱。要想在ie6，ie7和ff中都可以自适应高度，正确的做法是设置min-height和用cssHack设置height。例如：
min-height:600px;
_height:600px;
这样，在容器里面的东西很少的时候，它现实固定高度600px，但当里面的东西很多的时候，它也会自适应的增长高度。
对于height的设置一定要特别注意，如果是布局用的容器的height则需要特别的注意，否则在ff中会导致无法浮起，从而使布局混乱。

找把顺手的斧头
共欲善其事，必先厉其器。页面搭建的工作量是很大的。所以为了提高工作效率，找一个适合自己的开发工具是很有必要的。
自从MM被Adobe收购以后，我就不再使用DreamWeaver了。因为对web标准支持的不是特别好。我比较喜欢的web开发工具是editplus，配置好符合自己习惯的自动完成功能，作为轻量级的页面开发工具，开发效率还是很高的。重量级的开发工具，我比较喜欢Microsoft Office SharePoint Designer 2007。习惯editplus开发web的朋友可以很好的过渡过来，他的智能提示和可配置的自动完成功能可以很好的提高效率。再加上它有站点的概念，所以批量替换和修改比editplus要方便很多。一些editplus和Microsoft Office SharePoint Designer 2007的使用心得和技巧我也会在以后的日子里陆续的汇总，请你订阅我的播客，以便尽快得知。谢谢。

flash是个婊子
虽然很强悍，而且很流行，但是我对它一直没有好感（因为我不会 ^-^）。网上问的最多的就是如何让含有flash的网页通过w3c的xhtml验证。其实很简单就是使用object标签。但是如果你的页面需要在Microsoft Visual Studio 2005打开再次进行工作，那么请不要让页面包含flash的object标签。因为他会让你的Microsoft Visual Studio 2005虚脱。出现非常令人费解的问题——没有办法打开设计模式，back和del键不能使用，只能打字，不能删除。反正flash就想个婊子，让你的Microsoft Visual Studio 2005堕落。（在我们开发团队多台电脑出现此问题。但是依然不能排除是我们的Microsoft Visual Studio 2005或者电脑环境的问题。如果是我们的问题，我对flash的误解表示真心的抱歉——“你不是个婊子，你是个处女！比银光还处！”）

排队，排队！
多列布局的网页十分多见，别的不说，就是现在我使用的博客园的这个风格就是个两列的布局。左面的side，右面的是main。依照大家的阅读习惯，html里面当然应该先写左面的side，然后再写右面的main。其实，这样做是不合理的。因为浏览器的解析是从上到下的。先解析出来的先显示，后解析出来的后现实。而左面的导航栏并不是用户急于想看到的，用户急于想看到的是main里面的文章的内容。所以正确的写法是侧边栏写在下面，网页主题写在上面，然后利用float样式，让它们出现在左边或者右边。

What's your Name? "AD"?拉出去砍了！
如果你的这块区域要现实广告，所以你就把这个div命名为“divAD”，ok，没有问题，命名很准确，而且采用了驼峰式。但是为什么很多浏览器下看不到你的广告？很简单，因为他们被屏蔽了。被谁？浏览器、杀毒软件、甚至防火墙。很多东西都很乐意强奸这些广告。把你的东西命名为“AD”或者“banner”就如果在脸上写上“我是免费（女支）女”一样。绝对有很多东西乐意搞你。“牡丹”、“芙蓉”、“秦操（《大内密探零零发》）”，随便选，反正还是换个名字吧。

Short Live the "Button" Tag
当初我刚发现button标签的时候高兴了一阵，这个标签好呀！里面可以包含很多其他的标签来构成不同的按钮样式(例如按钮图片可以这样写(<button><img src="a.gif" alt="图片说明" /></button>)，而且，点击的时候还有“偏移量”这样华丽的动态。所以，我在这次项目中使用了。但是后来发现，当需要把这些华丽的图片按钮button替换成服务器端控件时，问题出来了。因为vs2005中没有什么控件打到前台是button标签。“imageButton”?不是，他打到前台不是button，而且，他也不是你想想中的是img，他打到前台是type为image的input。这点让程序员们很无措。所以，我决定以后不再采用button标签。“Butoon”标签，再我这里真是个短命的种。


图片按钮！img or input?
美工真的是生活在童话里，它们将页面设计的花里胡哨，到处都是渐变和色彩绚丽的按钮，以至于，我的电脑一打开他们发过来的psd文件就一定会死机。他们上网好像用的从来都是光纤，不知道一个按钮图片就有30多k，需要下载多长时间。不过，也没有办法呀。中国的美工也是靠花哨吃饭的。所以网页上从来都没有系统样式的按钮，从来都是图片按钮。问题是作为网页设计师，你需要决定将这些按钮图片用何种标签表现出来。图片嘛，自然是img拉。但是网页标签的种类合适与否决定着程序员在后期开发中工作效率。如果，这个图片按钮需要处理一些服务器端代码，那么img将是不合适的。因为图片按钮，如果用服务器端控件的话，一定是imageButton。而imageButton打到前台解析出来是type为image的input。所以，如果进行服务器端处理的图片按钮还是用type为image的input吧。这样程序员就知道直接拉imageButton了。

“a君请过来!” A君：“谁是a君？”
css是大小写敏感的，所以 #divTest 不会为一个id为divtest的div渲染效果。“为什么没有效果呀！”，找啊找，找啊找，“妈的！原来你是小写的！”顺便说一个我在此次项目中犯的一个很小但是后果很严重的错误。因为大意，我开始将video（视频）写成了“vedio”。而且很多的样式都含有video或者Video单词。后来发现这个问题，就用批量替换将vedio替换成video。而且是不care大小写的那种批量替换。后果可想而知呀～～、

这是什么？——  /*缁旀牕鎮滈幒鎺戝灙閻ㄥ嫯顫嬫０鎴濆灙鐞?/ 
这是什么？如果我告诉你这是注释你相信吗？不对吧，css的注释后面应该是"*/"结尾吧。是呀，我本来写的也是像“/*中文注释*/”这样的，但是vs2005将我的中文变成了该死的乱码，而且还把后面的那个注释用的“*”也变成了乱码！结果，有一天，我发现，我大批的样式都失效了。图是“乱马”表示“乱码”。

版本控制失败！轻则令人抓狂！重则吐血身亡！
当项目很小的时候，版本控制不那么重要，但是当项目越大的时候，版本控制就极为重要了。如果版本控制失败！轻则令人抓狂！重则吐血身亡！
所以一开始不要怕麻烦，还有尽量使用vss或者smc这样的工具进行控制。不要为了一次的方便而破坏版本的控制流程。如果要维护多处的时候，那么混乱的程度将是你不可想象的。