web标准页面设计

前言：
     对于网站当中页面的开发部分，我想大多数情况下我们还是要进行重复的工作，即对一个页面进行反复的修改，其中的原因有美工，有需求，还有编码的一些原因；但是不论是那方面的原因，我们还是希望作出的页面有很高的质量，即显示的效果很棒，搜索引擎能搜索很好的搜索到我们的页面，这样对于用户和公司都是非常好的。
正文：
框架的选择：
   如何避免大量重复的工作，不再为做了一遍又一遍的东西浪费时间和精力？Framework，框架。编程有编程的框架，网页设计也可以有网页设计的框架（例如yahoo的yui框架）。所以将常用的、通用的东西集合到框架里面去，将是种成熟的做法。我正在试着搭建一个符合web标准的网页设计用的框架，但是自己能力的确有限，加上后期项目时间太紧，所以这次项目中虽然开头设计了一部份，但是后来终究没有完成和使用。如果有高人有相同的想法，欢迎指教。如果对网页设计框架有兴趣，但是还不是很了解的朋友，推荐看一篇文章 《Frameworks for Designers》
样式表的使用：
 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和magin优缺点：
   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中会导致无法浮起，从而使布局混乱
开发工具的使用：
   共欲善其事，必先厉其器。页面搭建的工作量是很大的。所以为了提高工作效率，找一个适合自己的开发工具是很有必要的。
自从Macromedia被Adobe收购以后，我就不再使用Dreamweaver了。因为对web标准支持的不是特别好。我比较喜欢的web开发工具是editplus，配置好符合自己习惯的自动完成功能，作为轻量级的页面开发工具，开发效率还是很高的。重量级的开发工具，我比较喜欢Microsoft Office SharePoint Designer 2007。习惯editplus开发web的朋友可以很好的过渡过来，他的智能提示和可配置的自动完成功能可以很好的提高效率。再加上它有站点的概念，所以批量替换和修改比editplus要方便很多。
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”，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文件就一定会死机。他们上网好像用的从来都是光纤，不知道一个按钮图片就有50多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这样的工具进行控制。不要为了一次的方便而破坏版本的控制流程。如果要维护多处的时候，那么混乱的程度将是你不可想象的。