加入收藏 社区论坛 网站地图
 

首 页 产品&服务 新闻中心 在线下载 代理加盟 技术文摘 客户服务 联系我们

4 Web2.0网站的视觉风格进
4 论页面制作人员的修练之
4 DHTML实现可控制的页面内
4 JS+ASP打造无刷新新闻列
4 (X)HTML Strict 下的嵌套
4 如何实现SQL Server 200
4 企业主对 Google 关键字
4 JS+CSS打造可拖动的聊天
4 如何用ASP生成XML数据文
4 提高IIS网站服务器的效率
4 利用渠道来提高Google A
4 对Alexa世界排名作弊方法
4 王通:网站的首页最应该
4 ASP连接数据库的11种方法
4 虚拟主机IIS防范入侵常见
4 参考:选择虚拟主机服务
4 国内网站首页四大特色分
4 互联网一朵花 教师个人网
4 <img src="http
4 如何安装微软IIS5.1安装
4 建立Web2.0网络社区的六
4 2007年,个人站长将何去
4 动态网站Web开发PHP、AS
4 美国网站在中国失败的10
4 <img src="http
4 PHP5.2+APACHE2.2+BugFr
4 新知:交换友情链接常见
4 <img src="http
4 <img src="http
4 <img src="http
4 <img src="http
4 <img src="http
4 <img src="http
4 <img src="http
4 <img src="http
4 <img src="http
4 IT网媒平台
4 <img src="http
4 扫盲:什么是静态网页和
4 个人网站发展初期如何节
4 威客(witkey)的商业模
4 美国式网站在中国落地犯
4 网站策划怎么做? 未来网
4 分享:个人网站站长常用
4 如何在Windows XP 家庭版
4 生活服务类及其它垂直搜
4 评论:十大通病制约个人
4 方法:如何诊断你的网站
4 WML开发教程--WAP网站服
4 使用IIS Request Viewer

 

 
 
 

 

 
所在位置:

论页面制作人员的修练之道(成长)

发布时间:2007-02-09 01:12:40   点击次数:        

0) {window.location=this.value;}">文章导读1、新形势下的网页制作以及职业定位2、基于web标准的网页基本特征3、理解表现与内容相脱离4、重新认识javascript5、页面制作人员应该了解的知识

本文目的:与您分享如何学习基于web标准的网页制作。
适合人群:网页制作初学者。有一定的页面制作基础,并想学或正在学习web标准的朋友们。
备注:本文只是从理解以及概念上去分享网页制作的学习方法和步骤。力求通俗易懂,所以没有任何具体的代码、规范等内容,比如Xhtml的代码规范、CSS样式手册等具体内容我将会在文章的最后“推荐的资源列表”中将我所看到过或学习过的教程一一列出。

一、新形势下的网页制作以及职业定位

随着网络的发展,前几年还只是国外网站以及国内少数个人网站才会去实施的web标准,现在已经是大行其道了。上至新浪、163等门户网站,下至刚从学校毕业的大学生们的个人网站。到处都是它的踪影。
网站建设的分工也从原来的一人承包(从效果到页面到程序代码)的模式也逐步转变成Web Designer + Page Builder + Programer 的项目组合作开发模式。正是由于web标准的兴起,“页面工程师”这个称谓也慢慢走上了舞台并担任起了相当重要的角色。
曾在蓝色经典上看到Aether帖出来的土豆网(tudou.com)的招聘信息,感觉这个招聘信息非常的有代表性,原文如下:

引用:
页面工程师,1人
技能要求:
1、对W3C网页标准(Web Standards)有较深理解;
  ·精通结构层代码(XHTML)和样式层代码(CSS)。
  ·对语义、结构与内容分离等有深刻理解;
  ·熟悉Javascript,并对行为层编程机理有一定理解,并了解后台程序制作流程。
2、有成熟作品,目前将主要从事代码方向工作;
3、精通Javascript优先。
工作内容:
配合页面架构(Web Architect,负责总体规划),完成页面制作(Page Builder)。
其上游是页面设计(Web Designer),下游是网站程序员(Programer)。

我非常的认同这种职业定位,所以转了过来。或许这将是未来比较流行的网站制作过程中的项目组分工合作的模式吧。

第1页:新形势下的网页制作以及职业定位第2页:基于web标准的网页基本特征第3页:理解表现与内容相脱离第4页:重新认识javascript第5页:页面制作人员应该了解的知识共5页。 1 2 3 4 5 : 0) {window.location=this.value;}">文章导读1、新形势下的网页制作以及职业定位2、基于web标准的网页基本特征3、理解表现与内容相脱离4、重新认识javascript5、页面制作人员应该了解的知识

二、基于web标准的网页基本特征

从三年前开始接触网页到现在,我亲身经历了国内大多数网站的web标准重构。自己在不断的学习过程中也总结出了一点符合web标准的网页的一般特征,和大家一起分享一下。

1、页面代码容易读懂了。

举一个简单的例子,按以前如果要实现一个页面的布局,一般是使用表格来划分整个页面。请阅读并运行以下代码:

运行代码框

运行代码复制代码另存代码收藏本页

而我们现在,一般会简化成这样:

当然以上所谈的特征非常的表面化、也非常的局限,只是就页面代码方面描述了比较浅显的特征,针对于页面制作人员而言,也同时提出了更高的要求,会在后边的文章中做详细的讲解。
有兴趣的朋友可以照着下边的这个效果图去用传统的方法试着做一下,然后再查看这个页面的html代码,是不是觉得的确精短了很多?

到底如何去培养自己去编写精练的、有语义的、结构非常清晰的html代码呢。在下一节中我们来讨论如何将一个美工画出来的效果图拆分成结构层、表现层以及行为层,以及如何正确处理三者之间的关系。

第1页:新形势下的网页制作以及职业定位第2页:基于web标准的网页基本特征第3页:理解表现与内容相脱离第4页:重新认识javascript第5页:页面制作人员应该了解的知识共5页。 9 1 2 3 4 5 : 0) {window.location=this.value;}">文章导读1、新形势下的网页制作以及职业定位2、基于web标准的网页基本特征3、理解表现与内容相脱离4、重新认识javascript5、页面制作人员应该了解的知识

三、理解表现与内容相脱离

表现与内容相脱离,这应该算是web标准所提倡的核心了。按w3c提出的标准,将网页划分成了三大块,即结构层、表现层、行为层。下边我们还是以上一节中的效果图为例,来了解这三块内容。您可以在新窗口中打开这个页面。
Html代码:从页面代码的角度上看,我们应该说只能看到这些东西:就是一个标题,以及一个详细列表。所以说在脑海中初步形成的代码应该是:

                    ...
   

CSS代码:就是大家看到的视觉效果。通过更换css文件,我们可以在不修练html代码的基础上任意变换这个页面的视觉效果。所有的效果应该是与html内容本身没有关系的。因为视觉效果仅仅是为了让页面更漂亮、更容易让用户去接受。

Javascript:细心的朋友会发现,标题栏左侧有一个小三角形。通过点击这个图标,我们可以完成一个收缩功能,这就是行为,也是与页面内容无关的东西。

三种角色负责三个不同的分工,尽量不要去相互影响。

一个网页,应该以它的主体内容为根本,所以我主张。先编写html代码,在编写html代码时,我们尽量不去考虑为了迎合它的表现形式,这样才能写出结构化、语义化的页面代码。当然,在CSS实现以及行为脚本时,我们也允许最小程度的去修改现有的html代码,毕竟还有很多客观因素在制约着。但这绝不意味着像某些网站,纯粹为了通过w3c验证、为了实现某些不合理的效果图去写出类似于N个div嵌套、满页都是div的现象。时下所流行的一种叫法“div+css”让很多初学者对web标准产生了严重的误解,认为就是用div去代替以前的table,会产生“满页尽是div”的错误结论。
这种表现与内容相脱离的设计思想,对于页面制作人员而言,也同时提出了更高的要求:

抛弃"所见即所得"的网页编辑软件,改用手写。亲身去感受每一个html标签的真实意义。你会发现除了table标签,原来还有那么多有用而根本没有胜过的标签。 以前只用DW、FP等软件拉出无数个表格然后填充些东西进去就能保存为网页的时代过去了,你要懂每一个html标签它应该布置在网页的什么位置。 页面html代码不负责页面的效果,它只是告诉浏览器我这个页面的结构和内容,所以刚开始时,你会觉得符合标准的页面做出来都比较难看,那是因为你还没有学会CSS,就算学会了,你还没有经过多次的这种html代码与css代码分开编写的实践。 要尽量让页面上的每一个标签都有它的实际意义。不要让html代码为css而活着。第1页:新形势下的网页制作以及职业定位第2页:基于web标准的网页基本特征第3页:理解表现与内容相脱离第4页:重新认识javascript第5页:页面制作人员应该了解的知识共5页。 9 1 2 3 4 5 : 0) {window.location=this.value;}">文章导读1、新形势下的网页制作以及职业定位2、基于web标准的网页基本特征3、理解表现与内容相脱离4、重新认识javascript5、页面制作人员应该了解的知识

四、重新认识javascript

Javascript是什么?二年前,我说它是一个小丑,因为那时候在很多网页制作人员的眼中,它就约等于特效,比如跑马灯效果、弹出窗口、网页关闭时弹出一个欢迎再来等等,还有专门的网站来收集javascript的特效,并将其归类为窗口特效、文字特效、图片特效等。这足以说明几年前javascript在网页制作领域所处于的小丑地位了。

但现在,如果你还说javascript是小丑,我会反对你。自从AJAX应用的兴起、web标准的提倡,可以说javascript和asp、asp.net、jsp等后台开发语言一样,处于不可轻视的地位。这就是“网页前台开发”。

网页,我认为大致可分为二类:一类为呈现内容型的,如一般的内容页面。另一类就是注重应用型的,如以Gmail为首的。当然,一般的网页都是二者都有的,只是孰轻孰重罢了。在注重用户体验、交互的今天,网页前台脚本开发担任了非常重要的角色。

网页制作行业的分工与合作模式现在还处于摸索阶段,所以说,对于行为层代码的编写工作到底属于网页制作人员还是属于开发人员的。我觉得应该看各个开发团队的具体情况而定。不管怎么样,作为页面制作人员我觉得还是应该对Javascript以及DOM有所了解的。

第1页:新形势下的网页制作以及职业定位第2页:基于web标准的网页基本特征第3页:理解表现与内容相脱离第4页:重新认识javascript第5页:页面制作人员应该了解的知识共5页。 9 1 2 3 4 5 : 0) {window.location=this.value;}">文章导读1、新形势下的网页制作以及职业定位2、基于web标准的网页基本特征3、理解表现与内容相脱离4、重新认识javascript5、页面制作人员应该了解的知识

五、页面制作人员应该了解的知识

如果说美工只负责出效果图,程序员只负责数据处理的话。那么网页制作人员需要负责的东西无疑是最多的。

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宝典(第四版)


  阅读关于 网页制作 web标准 JS 网页陶吧 CSS 的全部文章第1页:新形势下的网页制作以及职业定位第2页:基于web标准的网页基本特征第3页:理解表现与内容相脱离第4页:重新认识javascript第5页:页面制作人员应该了解的知识共5页。 9 1 2 3 4 5

收藏此页】【 】【打 印 】【关 闭
 相关链接
 

 

 

 


联系我们 |  人才招聘产品答疑关于我们产品论坛

Copyright ©  2004 - 2006 All Rights Reserved   北京智联时代科技有限公司  Tel:  010 - 51286090
QQ:1000631  点击这里给我发消息
京ICP备05011984号
 

Power by Do123