1.a

链接标记，这个常用得不行，地球人都知道。这里要说的是href属性。说到href，地球人都笑了，a里面几乎都有href属性不是?这里要说的是一个特殊的属性值，href=”mailto:fangyuqiang@gmail.com”，比较了解html又笑了，这个就是可以打开电脑上默认的邮件发送工具给fangyuqiang@gmail.com发送邮件，老式的网站很经常出现在联系我们的那个按钮上面的嘛。实际，更深一层的，href属性里面甚至是可以指定要发送的邮件的标题跟正文内容，甚至抄送的人都可以指定，这个知道的人就不多了吧？

具体的使用方法：
可以使用形如”mailto: ddsd@gmail.com?cc=test@test.com&bcc=test1@test1.com&subject=一些冷门但是关键时刻很有用的html标签与属性&body=这篇文章可以看看哦“这样的语句，在这个语句中第一个功能以”?”开头，后面的每一个功能以”&”开头。当用鼠标单击这个邮件地址时，在随后打开的邮件编辑窗口中，我们将看到在收件人地址栏中自动填写上了ddsd@gmail.com，在抄送地址栏中自动填上了test@test.com，在暗送地址栏中自动填写上了test1@test1.com，在主题栏中自动填写上了”‘一些冷门但是关键时刻很有用的html标签与属性”，在信件的正文部分将自动出现”这篇文章可以看看哦”这样的文字。注意，多个邮件地址可以用分号;隔开，这样就可以同时发送给多个地址。

这个有啥用呢？在有些情况下，假设你做了一个按钮，希望用户点击按钮后会给你发送邮件提建议，你就可以这么做，把标题内容体都先写好，这样用户体验会好得多。

http://www.w3school.com.cn/tiy/t.asp?f=html_mailto2

另外，mailto这样的地址也是可以出现在form的action里面的。也许更方便：

http://www.w3school.com.cn/tiy/t.asp?f=html_form_mail

此外，<a>的rel跟rev属性，虽然现在没有浏览器支持，我觉得也是值得注意的。尤其是rel，为啥呢？虽然浏览器不支持，但是SEO却有用到。有多个主流搜索引擎可以识别这个属性。目前可以用rel=”canonical”来表明内容相同的网页，可以避免被搜索引擎认为是重复内容而导致被屏蔽或者删除索引。

2.abbr与acronym

这2个标记都少用，简单的说，都是定义与显示缩写的。abbr标签貌似IE6不支持。使用这2个标签主要是为了语义化与SEO。哦，对了，还可以炫耀你懂的标签比较多，比如说我的博客最下面的valid XHTML，鼠标移动上去就会显示完整含义。

http://www.w3school.com.cn/tiy/t.asp?f=html_abbracronym

3.area

这是几年前很流行的技术，图像热点链接，点击图像上面不同的部分进入不同的链接，现在使用得比较少了，也没什么人关注了。这里重提下，是因为现在这个标签在webgame的地图上被大量运用，如果你对webgame有兴趣，或许你应该对这个标签的有深入的调研与了解。推荐使用Dreamweaver来学习使用这个标记。

http://www.w3school.com.cn/tiy/t.asp?f=html_areamap

4.base

使用myeclipse的童鞋对这个标签应该比较熟悉，因为myeclipse自动生成的html代码会带有这个标签。它可以为页面上的所有链接规定默认地址或默认目标。指定base元素后，页面会根据使用指定的基本 URL 来解析所有的相对 URL。这其中包括 <a>、<img>、<link>、<form> 标签中的 URL。有时候你需要书写大量的完整的url地址的页面上，并且这些url都是来自同一基准地址的话，就可以应用base标签来指定，后面的url就可以放心的全部采用简单的相对地址。

http://www.w3school.com.cn/tiy/t.asp?f=html_base_test

5.button

有些人搞不清楚button跟input type=“button”，input type=“submit”的区别，对于各自的使用场景不了解。此外，由于不同的场景下不同浏览器对于button的处理也有差异，这个标签看起来简单，却也容易搞糊涂。

<button> 控件 与 <input type=”button”> 相比，提供了更为强大的功能和更丰富的内容，可控制性比较强。但是特别要注意的是：使用button最好指定type属性，因为IE 的默认类型是 “button”，而其他浏览器中（包括 W3C 规范）的默认值是 “submit”，也就是说，IE下默认的button行为类似input type=”button”，而其他浏览器例如firefox，行为类似input type=”submit”。如果你在表单内部放了一个button标签，只是为了点击调用一个Javascript函数，IE下可能如你所愿，但是firefox下可能把你的表单都提交走了。此外，还有一点，提交表单的时候，IE 将提交 <button> 与 <button/> 之间的文本，而其他浏览器将提交 value 属性的内容。

http://www.w3school.com.cn/tiy/t.asp?f=html_button_test

6.caption

定义表格的标题，比较少用，只是为了语义化，以及可用性（针对屏幕阅读器）。

7.col与colgroup

这2个属性其实本来应该是经常写table的人的福音一样的标签的。它可以为表格中一个或多个列定义属性值。比如说你表格中所有列都是左对齐，其中一列右对齐，不使用这个标签的话，那你就需要所有的td加上一个css的类来达到这个效果。但是用这个标签，只要一句<col align=”center”>就可以解决了。既然这么好，那为啥还说，本来应该是福音呢？悲剧的地方在于，这2个w3c标准标签与属性却只有IE能完整支持，firefox等目前都做不到（可以通过一些繁琐的高级的css来hack实现）。如果你的项目不考虑浏览器兼容，那你可以爽爽的用，或者针对firefox之类的浏览器写一个js脚本判断col，根据col动态添加对应的类到td上。

http://www.w3school.com.cn/tiy/t.asp?f=html_col_test

http://www.w3school.com.cn/tiy/t.asp?f=html_colgroup_test

8.dd,dl,dt

定义列表的3个标签。这3个标签应该说不属于冷门标签的范畴，但是本来使用范围也不广的才对。不过据说百度搜索非常偏爱这个标签，所以国内很多做SEO都大量用这个标签来做，看看dedecms的主题，几乎完全用这3个标签写的html。被滥用了。

9.del与ins

这2个标记用来显示被删除的文本以及插入的文本，一般浏览器会显示成删除线与下划线。一些blogger在更新博文的时候会经常使用这2个标记，符合语义化与SEO。如果不用这2个标记，使用css的text-decoration也能达到同样的效果。

http://www.w3school.com.cn/tiy/t.asp?f=html_delins

10.input

input标签常见得不行，但是input的属性也非常多，有几个稍微特别的属性可以介绍下。

accept属性，类型为file的文件上传框，可以指定accept，然后通过Javascript之类的，在客户端做一下判断上传的类型是否符合格式。注意，就算你在input上面指定了accept，浏览器也不会去保证上传上去的格式是符合要求的，同样还需要在服务端做判断。

disabled跟readonly属性，2个使用上区别不大。disabled范围更广一些，它可以禁止下拉框。在一些需要禁用文本框的时候，看情况选择使用这2个属性，readonly不能修改值，但是可以选中复制，可能更加友好。

size属性，相信吃过这个苦头的人也有不少吧。相同的size，在IE下，text跟password类型的input显示的宽度是不一样的，而其他浏览器却会显示一样的宽度。所以还是用css来定义input的宽度吧。

maxlength属性，这个是很好用的属性。这个限制长度的属性是基于浏览器原生的实现，不需要再用Javascript去控制避免用户输入过长的数据,这可是标准属性。

http://www.w3school.com.cn/tags/tag_input.asp

11.link的media属性

这个就是很常见的引入css的标记（虽然它本意不仅仅是用来引入css的，但是目前浏览器只支持引入css）。这里要提的是media属性。media指定了当前的css针对的设备，如果识别到对应的设备来访问，就调用对应的css link。最常用的其实就2种，一种，就是不写，默认是screen，计算机屏幕。一种就是print，打印用。经常可以在网页上面看到一个打印的链接，可以直接把网页打印出来。最早时候我在新浪看到它的打印的实现，是专门设计一个页面，点击打印就进到一个打印专用的页面，然后用浏览器的打印。其实完全不需要，只要在所需要提供打印的页面，加入一个专门的media=“print”的css link，为打印的界面设计专门设计一套css，不需要再去打开新页面。

通常建议使用link而不是@import来引入css。根据yahoo提出的前端性能优化法则，css应该放在顶部，尽快被浏览器加载。但是因为IE6在处理采用@import的css的时候，会当成外部引用而放到最后去加载，对前端性能有所影响。

http://www.w3school.com.cn/tiy/t.asp?f=html_link

12.noframes与noscript

2个为了可用性实现的标记。在不支持框架与Javascript显示特别的文字。如果框架或者Javascript对于你的应用至关重要，那么你应该使用这样的标记来做一个警告提示，提示用户开启脚本。

http://www.w3school.com.cn/tiy/t.asp?f=html_noframes

http://www.w3school.com.cn/tiy/t.asp?f=html_noscript

13.object

object定义一个嵌入的对象，可以使用此元素向 XHTML 页面添加多媒体。关于object标签的具体使用我也没有具体了解过。常常只在一些提供给外部调用的时候用到，常见的地方在视频网站提供给你的插入页码的代码。IE6下是使用embed来实现插入多媒体的，但是embed是非标准属性。呃。。很早之前，为了能完美通过html validate，狠折腾了一番embed跟object共存的方法。

14.ol的type属性

通常页面上使用ul比ol要多，用过ol的大概印象就是知道列表不是小圆点，而会显示数字顺序。但是用type属性，可以指定ol数字顺序的形式，例如罗马数字I,II，或者是字母顺序A，B，C，或者是小写字母。不过type属性是非标准属性。

http://www.w3school.com.cn/tiy/t.asp?f=html_lists_ordered

15.optgroup

我觉得这个标签是挺好用的一个标记，但是注意到的不多。optgroup用于组合选项。使用一个长的选项列表时，对相关的选项进行组合。例如出现一个人员的下拉列表的时候，人员按部门用optgroup分组，看起来分割得很清楚。此外，还可以用Javascript来做增强显示。比如你用js写一个弹出层，点击的时候解析select标签，列出所有部门跟人员分组供选择。如果客户禁用js，那么可以平稳退化成一个分组下拉菜单。

http://www.w3school.com.cn/tiy/t.asp?f=html_optgroup

16.script的defer属性

defer 属性规定是否对脚本执行进行延迟，直到页面加载为止。如果脚本不会改变文档的内容的话，设置这个属性可以加快文档处理速度。因为它会到文档完全显示完再解析Javascript。目前只有IE支持这个属性。不过，通常最慢的不就是IE吗。。

17.select的multiple与size

这2个属性其实是常用属性。只是顺便提一下。这2个属性结合使用可以控制下拉多选菜单。设置了multiple属性之后，可以用ctrl来复选多个选项。size用来控制同时显示的菜单项的个数。

18.sub与sup

这2个标签可以用来显示上下标，通常用在一些计算公式上面。不过还可以经常在页面上显示一些标注标记，比如说加一个[1]表示注解1这样的。此外，经常logo附近带有alpha,beta之类的版本号，可以用上标来实现，简单，粗暴。

http://www.w3school.com.cn/tiy/t.asp?f=html_sup

19.table的cellspacing属性

table标签上经常可以看到cellspacing属性与cellpadding属性，还有border。虽然这些是控制外观的属性，但是它们是名正言顺的标准属性，可以放心用。一般都建议采用css来控制表格样式。但是有个特殊的地方，cellspacing属性是无法通过css来控制的。所以cellspacing只能在table里直接指定。

http://www.w3school.com.cn/tiy/t.asp?f=html_table_cellspacing

20.tbody

熟悉html的都知道table里面可以指定thead，tfoot，tbody。这里注意的是，thead跟tfoot只能出现一次，但是tbody是可以多次出现的。也就是说你可以采用tbody来对表格的数据进行分组显示，不同的tbody分组，采用不同的css类，来显示不同的外观。

21.textarea的wrap属性

很奇怪的是，w3上面的属性列表里面没有提到这个wrap，但是却在注释里面详细的讲解了wrap属性。在有些我们需要控制输入的换行符号的场合，wrap就能帮上你的忙了，省去手动替换换行符号的痛苦。

wrap=”virtual” 将实现文本区内的自动换行，以改善对用户的显示，但在传输给服务器时，文本只在用户按下 Enter 键的地方进行换行，其他地方没有换行的效果。

wrap=”physical” 将实现文本区内的自动换行，并以这种形式传送给服务器，就像用户真的那样键入的。因为文本要以用户在文本区内看到的效果传输给服务器，因为使用自动换行是非常有用的方法。

http://www.w3school.com.cn/tags/tag_textarea_prop_wrap.asp

此文请同步参考w3school的手册：HTML 4.01 / XHTML 1.0 参考手册

后记：这里列举的很多东西，使用的不多，但是还是有不小的价值的，一直以来我自己也是一知半解。也希望借此机会好好研究一番。花了2天时间整理了这篇文章，自己也是受益良多，希望对各位也有帮助。转载请参看我博客的版权声明，谢谢。

我也是个追求技术的人，也经常陷入这种圈套，写html绝对要求XHTML 1.0 Strict。所有非标准属性，不用。想尽办法解决。例如链接的打开新窗口 target，_blank，新窗口中打开，很常用的属性。不过不好意思，非标准属性。之前为了这问题，就折腾了下rel+Javascript的方法解决了。

另外一个是html里面的&符号，在XHTML 中，这类符号要求使用实体引用。&要改成&amp;，相信这个&大家都知道，很常见，用来分割url上面的参数。之前为了不让我的html validate插件显示红叉，我写的每个html页面，上面的每一个&都会替换成&amp;。

现在经历过这么多项目了，回头想想，有时也会自己暗笑下，有时候这样的坚持是不是显得有点小孩子气呢？

其实我想，什么地方该用什么东西，什么东西最合适，就是好的。拘泥于标准，作茧自缚，这就不太好了。标准的主要意义并不在你坚持的这些小小细节上面。或许你现在因为标准不用的东西，哪天就成了标准。

我现在做一些网站项目，会直接使用marquee来显示滚动的文字，很多人就说啦，marquee是早期IE私有的方法！不标准！浏览器不兼容！

嗯，是这样没错，marquee在safari下面确实不行，但是现在marquee在IE跟firefox，opera，chrome下运行都很良好。选择找个代码改改，或者直接造个轮子？嗯，满意了，这是完全标准的实现。但是无论时间效率还是成本，都远没有直接使用marquee好。它是浏览器原生的实现，不需要你再引入什么框架或者代码，无论性能还是易用性或者是外观表现，都会比自己写一个好。不标准？呵呵。

有些地方我会选择用表格来做布局。

精通div+css的人，往往对于任何用表格来布局的东西嗤之以鼻，坚持只在显示表格型数据的时候才用table，仿佛用了table就会被人瞧不起，是对自己的侮辱。哦，你精通div+css，怎么用表格来做布局？

这个问题其实挺早之前在我也在一些论坛或者群上跟一些人讨论过，我觉得，布局时候div+css，table兼用才是个最好的方式。

历史原因，早期的网页都是用table来布局的，所以，所有的浏览器对table的兼容性都做得非常好，可以说table做出来的界面的多浏览器兼容性最好。完美的前端开发，往往为了兼容多个浏览器投入了大量的时间，IE678,ff23，opera910还有safari，现在还有chrome。很多小地方的布局，用div+css往往需要大量的float跟clean，以及更多的宽度高度对齐的细节要处理，而且越小的地方，往往越容易出一些兼容性的问题。仔细思考一下，这些地方，你的html跟css，真的有比table有更好的维护性吗？

总结一下，所谓的技术与标准，都是为现实需求服务的，只要能实现需求，综合考虑时间效率与成本,都是可以拿来用的。就像伟大的邓小平理论说的，一些可以为社会主义发展做贡献的，都可以搞。

所谓无图无真相，首先先看一下我们的目标，如图：

这是一个最常见的布局了。左右2分栏。可以适用很多情况。由于截图效果有点失真，可能这边的圆角边框看起来比较奇怪，但是不要受此影响。。.现实效果不会变成这样。

本人不是美工，所以或许有些图片让你觉得很眼熟，嗯。。是的，实在不好意思，里面几个图片是我从别的网站上偷来的。这里仅以此来作为技术实现探讨。

OK,LET’S GO！

一个页面的开发步骤其实说起来很简单，框架，内容，修饰，动态效果。

框架

整个页面是一个2分栏的效果，我们项目中引用了yui grid，所以这个页面布局，我们只要1分钟就能做好。

到http://developer.yahoo.com/yui/grids/builder/
中，生成一个页面布局，我们选用的是950的宽度，然后添加2行，第一行是用来放导航的，第二行是来放主要内容的，然后对第二行split content选择2列75/25布局，点一下show code，就可以看到生成的html代码：

Header



	


	

	



Footer

这样我们的布局代码就完成了，将这个代码拷贝到你的项目中的模板文件夹里。

这个界面的具体样式，可以自己的yui 的build里面体验，只要1分钟。

这里有几个问题是要注意的，

第一：它生成的html代码dtd是html 4.01的，而我们要把它改成xhtml Strick 1.0的。（不仅是为了web标准，也是体现一个设计师的追求。。一个设计师的准则。。）

第二：将link的css地址改成引入自己的css，呃。。这个要记得。。

第三：在页面底部将我们所需要的js引入。

做完这之后，我们的框架就算完成了。

这边已经做好了归类，头部放在hd，内容主题放在bd里，而底部放在ft里。当然我们也看到了采用这样grid框架的不足，就是需要一些无意义的标签，还有一些让人很难理解的class类名，对于那些习惯了wrap，content，navigation的人来说，比较难以接受。但是这是为了布局必须的，只能做这样的牺牲了。

内容

设计阶段，我们随便填充一点内容，以便于我们进行修饰。注意，在这个阶段，我们只关心包含了什么内容，而不关心这个内容它是怎么布局的，修饰，是接下来才做的事情。

内容需要根据我们的目标图来做。首先是hd头部部分。头部的内容包括左边一个图标，右边一个导航。这样，我们写出如下的代码：

 logo

首页
业务介绍
庆典策划
婚礼策划
案例展示
婚庆知识
人才招聘
在线留言

这是头部。
接下来是中间一层的面包屑导航条，以及右侧的搜索框，这一栏要放在头部或者是放在内容部分其实做法看个人习惯。同样的，你只需要写html代码就可以了。具体的代码不再赘述。这一段代码放在第一个的yui-g的div里面。
主题正文部分比较庞大，左侧，也就是在yui-ge 的yui-g first这个div里面，是2个大的内容框，其实2个内部都是div ul li的结构。只是一个是横的，一个是竖的。
填完了基本的结构，我们就有了一个长得有点丑陋的界面：

然后，就是我们的重头戏，怎么把这样的一个如此简陋的页面，变成如开头所示的界面。

修饰

在介绍css修饰的开始之前，我先介绍下我使用的几个最常用的也是必须的css定义，也是我的lib.css里的内容。

.c:after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
}
.c {
    zoom: 1;
}
.r {
    float: right;
}
.l {
    float: left;
}

c即清除浮动，l跟r，即左右浮动。关于c的用法，是现在很流行的一个清除浮动的方法，它可以在不添加额外标记的情况下清除浮动。第一个c:after是针对ff等标准浏览器，而第二个c zoom :1是针对IE。
一切从头开始。我们从头部。头部的基本样式，左右分开，列表横向排列。如果你构造了你的lib.css的话，你可以这样做：

 logo

首页
业务介绍
庆典策划
婚礼策划
案例展示
婚庆知识
人才招聘
在线留言

效果如下：

这是由于ul列还带有margin，导致宽度不够，挤到下面来了。接下来我们将ul列表变成横的，并且应用上样式：

#main_nav {
	margin: 20px 0 0 0;
	background: #FF3399;
	padding-left:10px;
}
#main_nav li {
	font: 120% 幼圆;
	list-style: none;
	float:left;
}
#main_nav li a {
	padding:10px;
	color: #FFFFFF;
	text-decoration: none;
	display:block;
}

这个css样式做了什么？基本上可以看得出来吧。
头部菜单先到这里。接下来往下，是面包屑导航。将搜索框靠右边。这个easy，只要在搜索框所在的div加一个tr的类，即lib.css里面的text-align:right，即可。
现在整站效果：

看起来有点小模样了。
呃。。由于发文大小有限制，所以其余每个部分要分开发。。请继续关注下一部分内容。。

本文主要介绍主题开发的原则与技巧。不同的cms主题的开发方式不同，但是本质却不会有太大的区别。举一反三，希望我自己总结的经验会对你的开发有帮助。

开始一个模板开发

上一篇的最后，我们做的是：

现在我们真正的开始开工干活。

dedecms的主题是基于模板标记的。它自己带了一套dede的标记，如果你使用过velocity或者freemaker之类的工具,相信你对模板标记的使用不会陌生。基于模板的系统的开发应该说还是比较方便的，毕竟模板是通用的，对于一个普通的网站来说，你可能只需要写10个左右的页面设计就足够整个网站的应用了。

用Dreamweaver CS4新建一个站点，将www目录下整个dedecms导入。用dw来管理站点。dw内置了很多工具，对开发界面有极大的帮助。

第一：代码格式化功能。

写多了html代码，会逐渐有点混乱，这是很正常的。用dw的格式化工具可以解决这个问题。目前也支持CSS代码的格式化。

第二：代码兼容性检查。

dw也内置了多个浏览器的代码兼容性检测工具，可以在代码开发过程中随时检查。

第三：dw提供的各种功能，都不错。自带的范例是新手入门的极佳材料，包含了超级详细的注释，新手一定要看看。

导入整个站点后，在dede的templets，模板存放目录下面，新建一个文件夹如wedding，作为我们自己开发的主题的文件夹。dede的模板组织方式我不是很认可，如图所示：

default下面是dede的 默认主题，在default文件夹下面存放了主题的模板。images存放了系统的所有图片，style下面是主题的css文件，而系统的js则又在这里之外，给人的感觉比较凌乱。

而我习惯的做法是将一个主题说需要的文件都包含在一个文件夹下面，这样这个主题可以轻易的移动，删除。而不是到处找文件删改。将整个主题都放在一个目录下，也是很多主流的cms主题的做法。

这里我们建立了一个wedding的文件夹，作为主题的目录。在wedding下面，我建立了3个文件夹，css，js，images，而模板文件直接放在wedding目录下。其实更好的做法应该是再建立一个templet的文件夹，存放所有的模板，不过由于dede自身的一些设置，直接放在wedding下面会比较方便。

推荐的主题目录结构：

theme

theme/css

theme/js

theme/images

theme/templet

CSS开发

上次已经提到了，项目将采用yui css库。yui的css目前是比较完备的，包括base，reset，font，grids。这几个css都会用到，我的做法是将这4个文件合并成一个yui.css来引入。可以减少几个连接数嘛。

关于grids.css的使用，可能对很多人还是个陌生的概念，就是所谓的网格系统。可以自己google一下CSS 网格可以搜索到相关的一些介绍。用上grids.css最大的好处就是，你会发现你开发一个布局的速度真的太快了，改一下class的类名，整个布局都会马上变掉。加上yui css提供了grids的生成器，可以成倍的提供你的工作效率。

有了这样的一个css库，基本上它已经帮你解决了很多部分的浏览器兼容性问题。

在css开发过程中，有很多东西都是通用的，或者很常用的，对于这样的css，我的做法是放在一个lib.css的文件里。这也相当于一个库，但是这个库是给自己用的。而且，做得多了，自己做过的很多网站都会用到，所以渐渐的，这个lib.css自己也可以拿来到处复用了

。至于这个库，要怎么写，怎么整理，我建议你参照开心网的css的写法。例如：

可能有些人会疑问，这样就一个属性，干嘛用啊？为什么不写在另外的css，写一条属性干嘛？事实是这样的：

在一个站点的开发过程中，你经常会发现，有一个东西，它长得很像，但是有时候它是放在左边，有时候又是放在右边。为此，你可能要为1个长得几乎一样的东西，复制一份几乎差不多的css代码。而这样的lib它就可以起到这样的一个类似patch的作用，例如：

div class=”title” ，默认左对齐，但是现在你想在某个页面让这个title是右对齐的，你就可以在用div class=”title tr”通过这样的组合，实现这样的效果。

这是lib.css的整理。

剩下的其他的css做法就比较多。对于简单的，可以直接一个pages.css，把剩下的所有需要的css都写在这个里面。对于大一点的项目，还可以分的更细。比如：form.css,application.css,ui.css这些是专门为表单，为独立应用，为实现js特效的ui专门独立的css文件。具体的做法看个人习惯。

对于css，还要注意的一点是，就算用了css库，你也无法保证写出来的代码所有的浏览器都兼容。所以你有必要掌握一些基本的hack，比如!important,IE6跟IE7的*还有_。基于标准的开发，更要保证对于主流的浏览器都兼容。就算IE它不是标准的。

关于css的hack写法，还有我个人认为更好的解决方案，将会在接下来的JS开发篇章中介绍。

关于div+css与表格布局的争议，我认为由于几十年的积淀，所有浏览器都对表格有着最佳的支持。所以其实表格布局比div+css兼容性更好。对于一些大型的，复杂的站点的构建，使用div css，合理的搭配一些表格布局，不仅可以提高开发速度，也可以得到更好的兼容性。而不必为太复杂的界面跟css搞得焦头烂额。

所以，不必学了divcss就对表格弃之不顾了。

关于开发工具，dw的css还提供可视化的选择，css入门的可以用可视化的这种方式来做css代码。如果对css非常熟练的人，推荐用top style，个人觉得ts的代码提示比dw的更便捷，书写更快。

推荐的一个css的目录结构：

css/core.css (本文用yui，所以是yui.css)

css/lib.css (自己常用的自己组织的通用类)

css/pages.css(或者更详细的划分)

Javascript开发

对于一个成熟的cms来说，其实js的开发量很少。这里更多的是介绍一些相关的技巧。

首先是上文提到的，CSS的hack更好的方案。就是采用jquery的插件，jqbrowser2，使用它是不需要写任何js代码的，因为它是用来写css代码用的。只要引入就可以了。它的作用，就是分析浏览器提供的所有信息，然后将这样的信息反应在html的类名上面，使用了一个这样的插件后，你的html标签会变成这样：

html

class

=”gecko firefox3 win js

”

这个class反应出来的信息是gecko引擎，ff版本3，window操作系统，支持js。这样的信息能提供什么帮助呢？没错，这就是来编写hack的利器。我们不在需要记住那些复杂的hack，我如果要某个属性只对firefox支持，我只要在css里面写

.firefox3 .ffonly{}；

.ie .ie_styel{};

仅此而已。依据这个，包括不同操作系统的样式都可以区分的。

对于js，相信yahoo的14条军规很多人都看过了。没错，将js都放在页面下方，这会提高页面的显示速度。很多人习惯js在头部，所有的js代码写在头部，其实放在底部对js的执行不会有影响，只是习惯问题，你需要改过这个习惯。习惯的将所有js都放在底部。

并且，采用经过压缩的js，体积减小很明显。尤其是js库跟js的插件。工具，yui的压缩工具目前是主流。

另外一个问题是，既然是基于标准化，尽量使用更好的js写法。减少页面上onclick的使用，而是尽量都在js里面指定这个句柄。这个问题，所有的js库都有很好解决方案。

html开发

貌似最简单的东西，其实要想做好也有难度。

首先，基于web标准开发，你需要坚持所有的html页面都采用XHTML strict的标准。

对于开发过程，建议你保持html的正确性。你可以在ff上面安装html validater插件，这个插件可以检查html文档是否符合标准。

保持html的正确性，不仅仅是基于标准的一个要求，其实更主要的是帮助你保持页面的正确显示。可以很大程度的避免你出现标签写错，遗漏了某个标签之类的而导致界面出现奇怪现象的问题

。

经常写html代码的或许会碰到这个问题，我想保持这个正确性会对你很有帮助的。右下角的检测图标总是绿色的，心情都比较舒服。

关于html的工具，dw本身是个不错的选择。不过熟悉html的，或者说想要熟悉的html手写代码的，我更推荐用intype，号称要成为windows的textmate，不过现在版本还比较低，但是已经非常好用了。

更多的做法，比如语义化，微格式，这些靠自己多加研究。

总结

基于web标准开发不是为了标准而标准，它确实能够让我们的开发更加的规范，开发出来的产品更加的良好。关键在于养成一个习惯，坚持基于标准的做法

，丢弃那些过时的做法。

由于行文较为潦草，很多地方或许胡乱带过，不清楚的地方欢迎提问。

此系列文章将会全程纪录开发过程，内容涉及cms，php，JavaScript，css，还有web标准，此外还包括网站开发部署过程中，SEO，站点统计管理等。

让我们进入正题，首先是需求：

朋友的公司刚起步，没什么需求，就是照着别人的网站的内容做，主题礼仪庆典。因为是给朋友做的，报价很低，>_<

今天的文章内容主要介绍网站开发前的一些必要工作，相信不少人对于做开发很熟悉，但是对于如何建设一个站点，却有点模糊，这里就介绍一下网站需要的一些基本事项工作。

流程：

申请域名

选购空间

网站备案

技术选型

开发环境部署配置

申请域名

域名服务商很多，一搜索域名眼花缭乱，我个人使用的是迈腾（NO AD，请自己搜索。。），cn域名很便宜，现在1块钱一个，不过要注意的是，cn域名1块钱是指第一年注册的时候，第二年的时候费用跟com域名基本是一样的。在迈腾买域名第一年是20，一些大的网站，像万网，新网之类的，很多都是卖100的，不过人家毕竟是大服务商，买贵点心里比较踏实。选定域名后汇款提交订单。迈腾因为以前自己其他网站也用过他的域名，没出过问题，就继续在这边买了。

选购空间

空间的服务商更多，看起来更花更缭乱，而且枪文软文满天飞，要真正找到好的空间，最好还是有非软文的评测。国内的php主机出名的有几个：梦游，盘古，捌号。价格上差不多，500M的空间，大概都在300，400。这几个口碑也都还不错，可以随便挑。我选了捌号的主机，因为今年貌似便宜了不少，500M只要300。几乎所有的空间网上都会有负面评论，这是正常的，国内的主机也不可能说绝对的稳定，总会有比如说：政策啊，换线啊，检查啊之类的要求，难免要被x的。

注意，空间选购只是现在看看，还不着急马上买下来，因为程序都还没做呢，程序做1个月再部署上去，这1个月就亏了。

网站备案

现在所有的网站都要求备案，一般你购买空间或者域名的网站都会提供备案的服务，只要填写一些信息，交给空间或者域名服务商就可以了。

技术选型与开发环境

相信这是做技术的最关心的事情了。

CMS：dedecms 之所以选国内的cms，主要是对于这样的项目来说，国内的cms可以省下很大的开发量，基本上只要做一个主题的开发就可以了。

js库：jquery，相信没什么异议吧。

css库：yui css。对于css库的使用其实看个人喜好，但是一个成熟的css框架可以帮你节省很多时间，尤其在处理多浏览器兼容的情况下。基于web标准的开发，也要做到兼容各种主流的浏览器。yui css有grid css,font,base,reset。将几个css文件合并成一个yui.css，引入进来。yui的grid css是一个非常无敌的grid系统，非常看好。它有提供一个builder，

http://developer.yahoo.com/yui/grids/builder/

虽然它不能提供一些更灵活的布局，但是其思想与设计，却令人惊叹。用grid来布局，你会发现将会节省你大量的时间。

开发工具：

Dreamweaver CS4（当然是。。绿色版），以前习惯用intype手写代码，但是试用了CS4后，彻底被折服了，这功能确实强大多了，而且整站管理很强大，界面很帅。现在喜欢用intype+dw写代码。

top style：css编写

apatana：试用版本。。写js很强大。。

firefox+firebug等，IE，opera。其中firefox+firebug是必须的，用过的都说好。

部署环境：

wamp，集成的php环境，简单好用，我喜欢。

subversion，svn的使用看个人喜好，一个人做的项目，svn不是必须的，毕竟也不是大项目。

安装好这些工具，下载dedecms最新版本，建立一个svn版本库，导入到svn中。然后到wamp的www目录下建立一个项目文件夹，然后svn checkout。然后启动wamp，安装一下dedecms，ok，可以开工干活了。