|
从三年前开始接触网页到现在，我亲身经历了国内大多数网站的web标准重构。自己在不断的学习过程中总结出了一点符合web标准的网页的一般特征，分享一下。 随着网络的发展，前几年还只是国外网站以及国内少数个人网站才会去实施的web标准，现在已经大行其道。上至门户网站，下至大学生们的个人网站。到处都是它的踪影。网站建设的分工也从原来的一人承包，从效果设计到页面制作直到程序代码的设计模式也逐步转变成： Web Designer + Page Builder + Programer 的项目组合作开发模式。 正是由于web标准的兴起，“页面工程师”这个称谓也慢慢走上了舞台并担任起了相当重要的角色。 一、基于web标准的网页基本特征 1、页面代码容易读懂了。 我们现在一般的页面设计会简化成这样： <div id="header"> <menu> <li>首页</li> <li>栏目一</li> <li>栏目二</li> <li>栏目三</li> <li>栏目四</li> </menu> </div> <div id="left">左侧内容</div> <div id="right">右侧内容</div> <div id="bottom">尾部内容</div> 然后再通过外部的CSS对页面上的元素进行布局以及美化效果，这样的代码相对于前一段应该说更精短，更易读懂。而且这个易读性，可以让搜索引擎比较容易读懂你的内容。聋哑等有障碍人士也能通过一些特殊设备来读懂你的内容。用手机wap上网也能够比较顺畅地访问你的页面。 2、页面变小了 同样的网页在新的标准下制作和以前的传统制作相比，代码一般能节约40%以上，当然这是由于以下原因造成的： a、通常在符合标准的页面中，已经不再直接使用<td bgcolor="red" align="center" ....></td>这种方法直接去控制页面的样式，而是将样式的设计和控制，直接放在网页之外的CSS文件中去表现。 b、大量的javascript代码也被移植到了网页外部，在页面中将精简成<script type="text/javascript" src="../js/**.js"></script>。 到底如何去培养自己去编写精练的、有语义的、结构非常清晰的html代码呢。在下一节中我们来讨论如何将一个美工画出来的效果图拆分成结构层、表现层以及行为层，以及如何正确处理三者之间的关系。 二、表现与内容相分离 表现与内容相脱离，这应该算是web标准所提倡的核心了。按w3c提出的标准，将网页划分成了三大块，即结构层、表现层、行为层。 1、Html代码：比如一个普通页面的Html代码，从页面代码的角度上看，我们应该说只能看到这些东西：就是一个标题，以及一个详细的列表。所以说对于一个简单的页面，制作设计师在脑海中初步形成的代码应该是这样： <h4>标题</h4> <ul> <li>列表项</li> <li>列表项</li> <li>列表项</li> <li>列表项</li> ... <li>列表项</li> </ul> 2、CSS代码：就是大家看到的视觉效果。通过更换css文件，我们可以在不修练html代码的基础上任意变换这个页面的视觉效果。 所有的效果应该是与html内容本身没有关系的。因为视觉效果仅仅是为了让页面更漂亮、更容易让用户去接受。 3、Javascript部分: 细心的朋友会发现，标题栏左侧有一个小三角形。通过点击这个图标，我们可以完成一个收缩功能，这就是行为，也是与页面内容无关的东西。 所以就应该由三种角色去负责三个不同的分工，尽量不要去相互影响。 一个网页，应该以它的主体内容为根本，所以我主张应该先编写html代码，编写html代码的时候，我们尽量不去考虑为了迎合它的表现形式，这样才能够写出结构化、语义化的页面代码。 当然，在CSS实现以及行为脚本时，我们也允许最小程度的去修改现有的html代码。 这种表现与内容相脱离的设计思想，对于页面制作人员而言,也同时提出了更高的要求： a、抛弃"所见即所得"的网页编辑软件，改用手写。亲身去感受每一个html标签的真实意义。你会发现除了table标签，原来还有那么多有用而根本没有用过的标签。 以前只用DW、FP等软件拉出无数表格然后填充些东西进去就能保存为网页的时代过去了，你要懂每一个html标签的意义以及它们应该布置在网页的什么位置。 b、页面html代码不负责页面的效果，它只是告诉浏览器我这个页面的内容和结构。 c、要尽量让页面上的每一个标签都有它的实际意义。 四、重新认识javascript Javascript过去在很多网页制作人员的眼中，它就约等于特效，比如跑马灯效果、弹出窗口、网页关闭时弹出一个欢迎再来等等，还有专门的网站来收集javascript的特效，并将其归类为窗口特效、文字特效、图片特效等。这足以说明几年前 javascript在网页制作领域所处于边缘地位。但现在，如果你还把javascript当做是特效，我会反对你。 自从AJAX应用的兴起、web标准的提倡，可以说javascript和asp、asp.net、jsp等后台开发语言一样，处于不可轻视的地位。这就是“网页前台开发”。在注重用户体验、交互的今天，网页前台脚本开发担任了非常重要的角色。 网页，我认为大致可分为二类：一类为呈现内容型的，如一般的内容页面；另一类就是注重应用型的，如以Gmail为首的。一般的网页是内容和应用两者都有。 网页制作行业的分工与合作模式现在还处于摸索阶段，所以说，对于行为层代码的编写工作到底属于网页制作人员还是属于开发人员的。我觉得应该看各个开发团队的具体情况而定。不管怎么样，作为页面制作人员我觉得还是应该对Javascript以及DOM有所了解的。 五、页面制作人员应该了解的知识 如果说美工只负责出效果图，程序员只负责数据处理的话。那么网页制作人员需要负责的东西无疑是最多的。 1、XHTML（这是最根本的，也是最重要的。） 2、CSS（不学会这个，你根本没有办法去实现美工所画出来的效果图。） 3、Javascript（虽然说要注重结构、表现、行为的脱离，但很多时候我们也需要如何用javascript和css配合作战。） 4、Dom（文档对象模型，配合javascript使用。） 作为页面制作人员我觉得应该对Javascript以及DOM的知识都应该有所了解。 工具软件列表
我推荐的资源列表 网 站： http://www. 教 程： 样式表中文手册 -苏昱 经典论坛讨论： Trackback: http://tb.blog.csdn.net/TrackBack.aspx?PostId=1488618 |
|
|
来自： Amamatthew > 《我的图书馆》
