【IT168 管理技术】  来上海的第一个项目，无论是公司还是自己都有很多的不足。第一次做娱乐型门户网站，对Web标准的掌控能力的确是个很大的挑战。说实话，这一项目对于Web标准的使用，只能给自己打65分。分数之所以那么低，项目时间短是一个原因，美工的设计稿比较差是个原因，自己对大型娱乐型网站的网页框架设计不足也是个原因。正是因为分数低，所以项目总结就显的特别重要。不断地总结，不断地改进，不断地完善。很高兴，因为我依然走在“好好学习，天天向上”的路上…… 

    美工和策划都生活在乌托邦

    不要急着马上动手，美工提供的页面一定会隐藏着很多不合理的地方。把页面打印出来，根据以前的经验把这些不合理的地方找出并标记，和策划进行商讨并改进。不合理的地方可以通过以下方式查找——在每一处都问一下自己：这里的文字（图片、记录或信息块）如果很长怎么办？如果很短怎么办？如果没有怎么办？如果很多怎么办？如果很少怎么办？如果有权限怎么办？如果没有权限怎么办……尽可能多地考虑各种情况下的显示和展现方式。

    唯一不变的只有改变

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

    网页设计框架

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

    搭建健壮的页面

    因为美工和策划都生活在乌托邦，所以他们的设计很多都太理想，工工整整煞是好看。但是很多时候，数据并不都是那么工整和漂亮，所以页面的布局还需要通过css去强制限制，确保布局在异常状态下不会混乱。
    鉴于页面的重要性，而且这不是三言两语就可以说明白的，所以我还会为此单独成文，敬请关注。
   

    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选择器的名称即可。当然，id或者css的选择还需要大量的经验积累，项目做得多了就会逐步地改进。

    padding和margin到底用哪一个？

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

    min-height和height

    如果只需要兼容IE 6，那么完全不需要注意min-height样式，因为IE 6根本就不支持该样式。但是当页面需要照顾到IE 7和FireFox时，一定要注意min-height样式。因为很多在IE 6下设置“height=固定值”的样式，当容器被其中内容撑到大于该高度时，IE 7和FireFox不会自适应高度，从而导致布局混乱。要想在IE 6、IE 7和FireFox中都可以自适应高度，正确的做法是设置min-height和用csshack设置height。例如：
min-height:600px;
_height:600px;

    这样，在容器里的东西很少时，页面显示固定高度600px；当容器里的东西很多时，则会自适应的增长高度。对于height的设置一定要特别注意，如果是布局用的容器的height需要特别注意，否则在FireFox中会导致无法浮起，从而使布局混乱。

    找把顺手的斧头

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

    Flash是个婊子

    虽然很强悍，而且很流行，但是我对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的误解表示真心的抱歉——你不是个婊子，你是个处女！比银光（silverlight）还处！）

    排队，排队！

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

    What's your Name? "AD"?拉出去砍了！

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

    Short Live the "Button" Tag

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

    图片按钮！img or input?

    生活在童话里的美工将页面设计得花里胡哨，到处都是渐变和色彩绚丽的按钮，以至于我的电脑一打开他们发过来的psd文件就会死机。他们上网好像用的从来都是光纤，不知道一个按钮图片就有50K以上，需要下载很长时间。不过，没有办法，网页上从来都没有系统默认样式的按钮，从来都是图片按钮。问题是作为网页设计师，你需要决定将这些按钮图片用何种标签表现出来。网页标签的种类合适与否决定着程序员在后期开发中的工作效率，选择使用何种标签是要经过慎重考虑的。图片自然是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的注释后面应该是“*/”结尾。没错，我本来写的也是像“/*中文注释*/”这样的，但是Visual Studio 2005将中文变成了该死的乱码，还把后面注释用的“*”也变成了乱码。结果，有一天我发现，我大批的样式都失效了。

    版本控制失败

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