1回顶部
本文目的:与您分享如何学习基于我们b标准的网页制作。 适合人群:网页制作初学者。有一定的页面制作基础,并想学或正在学习我们b标准的朋友们。 备注:本文只是从理解以及概念上去分享网页制作的学习方法和步骤。力求通俗易懂,所以没有任何具体的代码、规范等内容,比如Xhtml的代码规范、CSS样式手册等具体内容笔者将会在文章的最后“推荐的资源列表”中将笔者所看到过或学习过的教程一一列出。 一、新形势下的网页制作以及职业定位 随着网络的发展,前几年还只是国外网站以及国内少数个人网站才会去实施的我们b标准,现在已经是大行其道了。上至新浪、163等门户网站,下至刚从学校毕业的大学生们的个人网站。到处都是它的踪影。 网站建设的分工也从原来的一人承包(从效果到页面到程序代码)的模式也逐步转变成我们b Designer + Page Builder + Programer 的项目组合作开发模式。正是由于我们b标准的兴起,“页面工程师”这个称谓也慢慢走上了舞台并担任起了相当重要的角色。 曾在蓝色经典上看到Aether帖出来的土豆网(tudou.com)的招聘信息,感觉这个招聘信息非常的有代表性,原文如下: 引用: 页面工程师,1人 笔者非常的认同这种职业定位,所以转了过来。或许这将是未来比较流行的网站制作过程中的项目组分工合作的模式吧。 2回顶部 二、基于我们b标准的网页基本特征 从三年前开始接触网页到现在,笔者亲身经历了国内大多数网站的我们b标准重构。自己在不断的学习过程中也总结出了一点符合我们b标准的网页的一般特征,和大家一起分享一下。 1、页面代码容易读懂了。 举一个简单的例子,按以前如果要实现一个页面的布局,一般是使用表格来划分整个页面。请阅读并运行以下代码:
<TABLE width="100%" cellpadding="5" cellspacing="1" bgcolor="blue"> 而我们现在,一般会简化成这样: <div id="header"> 然后再通过外部的CSS对页面上的元素进行布局以及美化效果,这样的代码相对于前一段应该说更精短,更易读懂。而且这个易读性,你还可以理解成搜索引擎也比较容易读懂你的内容、聋哑等有障碍人士也能通过一些特殊设备来读懂你的内容、用手机wap上网也能比较顺畅地访问你的页面。 3回顶部 2、页面变小了 同样的网页在新的标准下制作和以前的传统制作相比,代码一般能节约40%以上,当然这是由于以下原因造成的:
当然以上所谈的特征非常的表面化、也非常的局限,只是就页面代码方面描述了比较浅显的特征,针对于页面制作人员而言,也同时提出了更高的要求,会在后边的文章中做详细的讲解。 有兴趣的朋友可以照着下边的这个效果图去用传统的方法试着做一下,然后再查看这个页面的html代码,是不是觉得的确精短了很多? 代码运行效果图 到底如何去培养自己去编写精练的、有语义的、结构非常清晰的html代码呢。在下一节中我们来讨论如何将一个美工画出来的效果图拆分成结构层、表现层以及行为层,以及如何正确处理三者之间的关系。 4回顶部 三、理解表现与内容相脱离 表现与内容相脱离,这应该算是我们b标准所提倡的核心了。按w3c提出的标准,将网页划分成了三大块,即结构层、表现层、行为层。下边我们还是以上一节中的效果图为例,来了解这三块内容。您可以在新窗口中打开这个页面。 <h4>标题</h4> CSS代码:就是大家看到的视觉效果。通过更换css文件,我们可以在不修练html代码的基础上任意变换这个页面的视觉效果。所有的效果应该是与html内容本身没有关系的。因为视觉效果仅仅是为了让页面更漂亮、更容易让用户去接受。 Javascript:细心的朋友会发现,标题栏左侧有一个小三角形。通过点击这个图标,我们可以完成一个收缩功能,这就是行为,也是与页面内容无关的东西。 三种角色负责三个不同的分工,尽量不要去相互影响。 一个网页,应该以它的主体内容为根本,所以笔者主张。先编写html代码,在编写html代码时,我们尽量不去考虑为了迎合它的表现形式,这样才能写出结构化、语义化的页面代码。当然,在CSS实现以及行为脚本时,我们也允许最小程度的去修改现有的html代码,毕竟还有很多客观因素在制约着。但这绝不意味着像某些网站,纯粹为了通过w3c验证、为了实现某些不合理的效果图去写出类似于N个div嵌套、满页都是div的现象。时下所流行的一种叫法 “div+css”让很多初学者对我们b标准产生了严重的误解,认为就是用div去代替以前的table,会产生“满页尽是div”的错误结论。 5回顶部 这种表现与内容相脱离的设计思想,对于页面制作人员而言,也同时提出了更高的要求:
四、重新认识javascript Javascript是什么?二年前,笔者说它是一个小丑,因为那时候在很多网页制作人员的眼中,它就约等于特效,比如跑马灯效果、弹出窗口、网页关闭时弹出一个欢迎再来等等,还有专门的网站来收集javascript的特效,并将其归类为窗口特效、文字特效、图片特效等。这足以说明几年前 javascript在网页制作领域所处于的小丑地位了。 但现在,如果你还说javascript是小丑,笔者会反对你。自从AJAX应用的兴起、我们b标准的提倡,可以说javascript和asp、asp.net、jsp等后台开发语言一样,处于不可轻视的地位。这就是“网页前台开发”。 网页,笔者认为大致可分为二类:一类为呈现内容型的,如一般的内容页面。另一类就是注重应用型的,如以Gmail为首的。当然,一般的网页都是二者都有的,只是孰轻孰重罢了。在注重用户体验、交互的今天,网页前台脚本开发担任了非常重要的角色。 网页制作行业的分工与合作模式现在还处于摸索阶段,所以说,对于行为层代码的编写工作到底属于网页制作人员还是属于开发人员的。笔者觉得应该看各个开发团队的具体情况而定。不管怎么样,作为页面制作人员笔者觉得还是应该对Javascript以及DOM有所了解的。 6回顶部 五、页面制作人员应该了解的知识 如果说美工只负责出效果图,程序员只负责数据处理的话。那么网页制作人员需要负责的东西无疑是最多的。
笔者所使用的工具软件列表
笔者推荐的资源列表 7回顶部 网站: http://www.w3.org 教程: 样式表中文手册 -苏昱
|
正在阅读:标准化网页制作人员的修炼之道标准化网页制作人员的修炼之道
2007-01-26 09:18
出处:
责任编辑:lizhe