代码运行效果图
到底如何去培养自己去编写精练的、有语义的、结构非常清晰的html代码呢。在下一节中我们来讨论如何将一个美工画出来的效果图拆分成结构层、表现层以及行为层，以及如何正确处理三者之间的关系。 三、理解表现与内容相脱离 表现与内容相脱离，这应该算是我们b标准所提倡的核心了。按w3c提出的标准，将网页划分成了三大块，即结构层、表现层、行为层。下边我们还是以上一节中的效果图为例，来了解这三块内容。您可以在新窗口中打开 这个页面。 Html代码：从页面代码的角度上看，我们应该说只能看到这些东西：就是一个标题，以及一个详细列表。所以说在脑海中初步形成的代码应该是： <h4>标题</h4> <ul> <li>列表项</li> <li>列表项</li> <li>列表项</li> <li>列表项</li> ... <li>列表项</li> </ul> CSS代码：就是大家看到的视觉效果。通过更换css文件，我们可以在不修练html代码的基础上任意变换这个页面的视觉效果。所有的效果应该是与html内容本身没有关系的。因为视觉效果仅仅是为了让页面更漂亮、更容易让用户去接受。 Javascript:细心的朋友会发现，标题栏左侧有一个小三角形。通过点击这个图标，我们可以完成一个收缩功能，这就是行为，也是与页面内容无关的东西。 三种角色负责三个不同的分工，尽量不要去相互影响。 一个网页，应该以它的主体内容为根本，所以笔者主张。先编写html代码，在编写html代码时，我们尽量不去考虑为了迎合它的表现形式，这样才能写出结构化、语义化的页面代码。当然，在CSS实现以及行为脚本时，我们也允许最小程度的去修改现有的html代码，毕竟还有很多客观因素在制约着。但这绝不意味着像某些网站，纯粹为了通过w3c验证、为了实现某些不合理的效果图去写出类似于N个div嵌套、满页都是div的现象。时下所流行的一种叫法 “div+css”让很多初学者对我们b标准产生了严重的误解，认为就是用div去代替以前的table，会产生“满页尽是div”的错误结论。 这种表现与内容相脱离的设计思想，对于页面制作人员而言,也同时提出了 更高的要求： 抛弃"所见即所得"的网页编辑软件，改用手写。亲身去感受每一个html标签的真实意义。你会发现除了table标签，原来还有那么多有用而根本没有胜过的标签。 以前只用DW、FP等软件拉出无数个表格然后填充些东西进去就能保存为网页的时代过去了，你要懂每一个html标签它应该布置在网页的什么位置。 页面html代码不负责页面的效果，它只是告诉浏览器笔者这个页面的结构和内容，所以刚开始时，你会觉得符合标准的页面做出来都比较难看，那是因为你还没有学会CSS，就算学会了，你还没有经过多次的这种html代码与css代码分开编写的实践。 要尽量让页面上的每一个标签都有它的实际意义。不要让html代码为css而活着。 四、重新认识javascript Javascript是什么？二年前，笔者说它是一个小丑，因为那时候在很多网页制作人员的眼中，它就约等于特效，比如跑马灯效果、弹出窗口、网页关闭时弹出一个欢迎再来等等，还有专门的网站来收集javascript的特效，并将其归类为窗口特效、文字特效、图片特效等。这足以说明几年前 javascript在网页制作领域所处于的小丑地位了。 但现在，如果你还说javascript是小丑，笔者会反对你。自从AJAX应用的兴起、我们b标准的提倡，可以说javascript和asp、asp.net、jsp等后台开发语言一样，处于不可轻视的地位。这就是“网页前台开发”。 网页，笔者认为大致可分为二类：一类为呈现内容型的，如一般的内容页面。另一类就是注重应用型的，如以Gmail为首的。当然，一般的网页都是二者都有的，只是孰轻孰重罢了。在注重用户体验、交互的今天，网页前台脚本开发担任了非常重要的角色。 网页制作行业的分工与合作模式现在还处于摸索阶段，所以说，对于行为层代码的编写工作到底属于网页制作人员还是属于开发人员的。笔者觉得应该看各个开发团队的具体情况而定。不管怎么样，作为页面制作人员笔者觉得还是应该对Javascript以及DOM有所了解的。 五、页面制作人员应该了解的知识 如果说美工只负责出效果图，程序员只负责数据处理的话。那么网页制作人员需要负责的东西无疑是最多的。 XHTML（这是最根本的，也是最重要的。） CSS（不学会这个，你根本没有办法去实现美工所画出来的效果图。） Javascript（虽然说要注重结构、表现、行为的脱离，但很多时候我们也需要如何用javascript和css配合作战。） Dom（文档对象模型，配合javascript使用。）以下内容为个人体会，最重要的是上边四点 SEO（搜索引擎优化，虽然现在有专门的做SEO的公司，但不是每个网站都会去请那些人来做这种事情的，如果你会了你就会知道其实很多优化是页面代码上的优化。） 网站的可用性（比如在NoScript环境下的正常显示等。） 网站的易用性（美工画出来的图是没有行为的，而用户是可以在网页上做事的，所以如何让页面的易用性，这是你应该考虑的，除非你们还有专门的UE人员。） 了解后台程序开发（对后台开发的了解有利于和开发人员进行沟通，不然会很麻烦。） 笔者所使用的工具软件列表 Editplus：用来编写html代码和javascript代码。 TopStyle：用来编写css代码。 FrontPage ：虽然说大家都说DW比这个要好，但笔者是一直用着它的，现在基本手写了，但偶尔会用用。有感情了。 Firefox ：浏览器，强大的插件功能吸引了笔者。 Opera：浏览器，多装几个，看一下你的作品在多种浏览器中是不是一样。 VS.net：项目大多是用vs.net做的，但笔者不建议你去用2003做前台页面，2005会稍好一点。 笔者推荐的资源列表 网站： http://www.w3.org http://www.blueidea.com http://www.w3cn.org http://www.csszengarden.com/ http://yuntian.cnblogs.com/ http://sheneyan.com/ http://andy.andymao.com/ http://www.forest53.com/ 教程： 样式表中文手册 -苏昱 样式表滤镜中文手册 -苏昱 文档对象模型中文手册 -苏昱 在30天内打造更具亲和力的网站 网站重构 《CSS网站布局实录》 javascript宝典（第四版）