叁柒設計 三七设计 Three seven design
详细信息
来自:关键字:

网站重构与Web标准设计(相关知识)

  December 26th,2008 13:07:48   Category : 网页设计
 Click (1142)

文章来源于:亚当学院
网站重构 & Web标准设计(相关知识)

前言

网站重构能够实现加快网页解析的速度,实现信息跨平台的可用性以及更加良好的用户体验,网站重构以高效开发与简单维护降低服务器成本,最重要的是它便于改版,实现与未来兼容。

Web标准就是实现网站重构的一种方法,所谓Web标准, Web标准并不是指某一个单一的标准,而是一系列标准的集合。一般指网站重构采用基于XHTML语言的网站设计标记语言,Web标准中典型的布局应用模“DIV+CSS”。


优秀网页设计师

经常有人会问做为一个优秀网页设计师要具备哪些方面的知识以及技能?

1.掌握一款良好的图形图形处理软件(例如:Photoshop,Fireworks ,AI...
2.掌握可视化编辑工具或者编辑器(例如:TopStyle,Dreamweaver ,EditPlus...
3.掌握最基本的实质性知识,也就是网页的三层结构Xhtml,CSS,Javascript(结构,表现,行为)
4.掌握网站据有分析策划的能力
5.掌握具有美术的一些基础配色知识最起码不要让网页的颜色太难看
6.掌握一款网络动画软件(例如Flash)

如果你可以达到以上的要求,可以说的上你算一个网页设计师,不要认为一个网页设计师只会用PS做出一张图片然后用PS直接分割另存为html页面的就是网页设计师,一个会用Dreamweaver可视化软件做出一个垃圾网站(传统的table+gif技术实现的网站)的就叫网页设计师。

身为一个网页设计师接触的知识和技术是非常多的,掌握几款我们开发效率提高的软件固然很重要,但是最中要的并不是工具本身,而是我们学习工具驾驭工具的一种思想。

思想是工具的灵魂,就像我们的计算机软件是计算机硬件的灵魂一样,没有了软件,计算机的硬件即使再好也没有任何作用,如同废铁,所以我们在学习的时候要明确我们的最终目是什么,我们要学的是这门技术的思想而不是去重视实现这门技术的一种应用工具。当然思想与工具都很重要,但是他们最大的区别在于,学会了思想我们可以选择很多不同的工具来实现这门技术,例如我们用Dreamweaver,EditPlus,甚至记事本等都可以实现我们想要的技术,工具最大的作用在于可以提高我们的工作效率,这是工具最重要的作用。所以我们不要走错的方向。

例如我们如果想处理一张图片的时候我们如果没有一些美术基础我们怎么可能设计出好的作品呢,知识PS这个工具放在你的面前给你用,你会吗,如果说一个人连RGB,CMYK,色彩的三个属性:色相,饱和度,明暗度的话你还这么去用PS,天空是蓝色的你非要搞成黑色,你觉得合适吗?

例如你要做一个动画你连最基础动画是如何产生的原理都不懂你要这么去制作动画呢,就是你做出来了,有会不什么效果呢。

由此可见思想的重要性,我们无论在学习什么,主要要掌握最核心的思想,如果没有学好思想工具在你面前就是废物,没有任何作用,如果我们能掌握核心思想在去驾驭工具为我所用,这样才能达到事半功倍的效果。

掌握学习的思想


学习是一种思想,一种不断思考,一种不断实践,一种不断创新的过程……

学习没有捷径,只有勤奋,努力,实践,思考……

如何学习Web知识

学习任何一门技能的时候,首先要明确思想,只有明确了思想才能够少有很多弯路,初学者学习Web标准,首先就要明确一点,到底什么是Web标准,如果错误的理解了Web标准的思想,很难学好Web标准。

给初学者的建议:初学者很容易犯的错误就是把Web标准理解为Div+CSS,以为DIV的作用就是简单的替代表格去做表格以前做的事情,于是乎许多采用新技术的网站开始了DIV+CSS制作网页,当打开页面代码的时候,看到整个页面基本都是采用了DIV标签,给每个DIV标签都指定一个class,这是对Web标准的一种滥用方式。Web标准的思想是实现结构,表现,行为的分离,不只是简单的把table换成DIV,因为div+css只是应用在网站的大块不去上,并不是所有的元素都是用Div标签,严格的说法应该是采用Xhtml+CSS对网站进行重构,最终制作出符合Web标准的网站,如果要学好web标准的思想,首先要做的就是抛弃传统的表格布局思想。那么接下来我就会给大家先讲思想课,让大家更好的了解究竟什么是web标准的思想。

DIV+CSS不等于Web标准

Web标准不是某一个标准,而是一系列标准的集合。网页主要由三部分组成:
结构(Structure)
表现(Presentation)
行为(Behavior)    
     

对应的标准也分三方面:结构化标准语言主要包括XHTML和XML,表现标准语言主要包括CSS,行为标准主要包括对象模型(如W3CDOM)、ECMAScript等。这些标准大部分由W3C起草和发布,也有一些是其他标准组织制订的标准,比如ECMA(EuropeanComputer Manufacturers Association)的ECMAScript标准。
               
               


我们通过W3c技术架构可以看到Web标准是一系列标准的集合,我们在布局方面用到Xhtml+CSS,那麽有此可见DIV+CSS是根本不等于Web标准的。采用Xhtml+CSS对网站进行制作,只是现阶段一个良好的解决方案,当然也有其他的一些技术。

W3C(World Wide Web Consortium)

W3C组织是对网络标准制定的一个非赢利组织,像HTML、XHTML、CSS、XML的标准就是由W3C来定制。W3C会员(大约500名会员)包括生产技术产品及服务的厂商、内容供应商、团体用户、研究实验室、标准制定机构和政府部门,一起协同工作,致力在万维网发展方向上达成共识。

Web标准组织(W3C)于1998年发起,目的是说服Netscape、Microsoft和其他浏览器生产商彻底支持标准。他采用从容进行、坚持和策略性的方法,最终使得浏览器生产商同意引进一系列标准。通过共同的标准协同工作,是Web 向前发展必需的观点。

我们了解了以上几点是很重要的,现在我们就明白了我们是在学习标准,那么是在学习谁的标准呢,无可厚非我们是在学习W3C推荐的Web标准,而不是为了IE浏览器学的标准,注意是推荐,W3C组织是对网络标准制定的一个非赢利组织,他没有强迫你一定要使用,虽然是推荐标准,但是已经成为了全世界公认的标准,为什么呢,因为web方面的技术离不开W3C,很多Web技术都是W3C研究出来的。

Netscape and Internet Explorer

早在1997年,有一个通用的惯例,Netscape浏览器使用Javascript,IE使用Jscript(一种类似于Javasrcipt的脚本语言)。Javasrcipt只能运行在Netscape,而微软的ActiveX和Jscript只能运行在IE。只能为不同的浏览器采用不同的代码去适应,这些事情是为3.0版本浏览器做的,1997年下半年的时候,Netscape和IE都推出了4.0版本浏览器,他们各自吹嘘自己的浏览器有强大的Dhtml(动态的html),但他们的浏览器完全不兼容,更不用说不知名的浏览器了,而且Netscape和IE跟他们3.0的版本也无法兼容,想让自己的网站在几个不同版本的浏览器中同时使用的话就要做几个不同的版本,每个功能都要做几个不同的版本去适应不同的浏览器,开发成本至少增加了25%;所以一些开发者限制他们的网站只适应其中一个版本的浏览器。而且网站随时面临着过时的命运和被淘汰的怪圈。

在Web传统网站的旧时代,Web非常混乱,许多东西都没有真正意义上的一个标准,当时的网景和IE的浏览器大战就是个最好的例子,当时的浏览器没有统一的标准,大家都各有自己私有的标准,加上当时的浏览器支持非常劣质的CSS1.0,所以在当时没有一个有效的方法可以解决浏览器之间的兼容性问题,就是这个时候DavidSiegel利用Table和透明的GIF布局技术出现了,并引起了一片新的网站布局浪潮。也就是我们所说的传统网站。

看了这些我想大家应该了解为什么要遵循标准进行开发了吧,我们的日常生活中也一样例如电视机的大小都有标准,我们的银行卡也有一定标准,如果世界都是没有一个相对的标准的话会变成什么样,这个大家去思考。

浏览器内核

通常所谓的浏览器内核也就是浏览器所采用的渲染引擎,渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。不同的浏览器内核对网页编写语法的解释也有不同,因此同一网页在不同的内核的浏览器里的渲染(显示)效果也可能不同,这也是网页编写者需要在不同内核的浏览器中测试网页显示效果的原因。

主流浏览器内核

Trident:IE浏览器使用的内核,该内核程序在1997年的IE4中首次被采用,是微软在Mosaic代码的基础之上修改而来的,并沿用到目前的IE7。Trident实际上是一款开放的内核,其接口内核设计的相当成熟,因此才有许多采用IE内核而非IE的浏览器涌现(如 Maxthon、TheWorld 、TT、GreenBrowser、AvantBrowser等)。

Geckos: Netcape6开始采用的内核,后来的Mozilla FireFox也采用了该内核,Geckos的特点是代码完全公开,因此,其可开发程度很高,全世界的程序员都可以为其编写代码,增加功能。

Presto: 目前Opera采用的内核,该内核在2003年的Opera7中首次被使用,该款引擎的特点就是渲染速度的优化达到了极致,也是目前公认网页浏览速度最快的浏览器内核,然而代价是牺牲了网页的兼容性。

Webkit:Safari浏览器使用的内核。Webkit引擎包含WebCore排版引擎及JavaScriptCore解析引擎,均是从KDE的KHTML及KJS引擎衍生而来,它们都是自由软件,在GPL条约下授权,同时支持BSD系统的开发。所以Webkit也是自由软件,同时开放源代码。在安全方面不受IE、Firefox的制约,所以Safari浏览器还是比较安全的浏览器。(Google的Chrome浏览器也是采用Webkit)

注意,牺牲了网页的兼容性是说牺牲不好的网页兼容,因为Opera浏览器以开始就对标准支持的非常良好,所以对写法要求比较严格,那些不符合标准的网站在Opera下自然也就不能运行。

微软属下的MSN网站曾被指排挤Opera用者,迫使他们改用微软产品。

2001年10月,在WindowsXP推出后不久,MSN即对主页作出重大更新,Opera用者指无法进入MSN主页,微软指“该主页转用了XHTML标准,Opera无法进入是因为它不支持XHTML”,但Opera方面则反驳,指Opera浏览器更切合标准,并以W3CValidator证明,MSN的主页并非使用正确的编码,要求微软“在指责其他人以前,请先看看自己是否尊重公开标准”,并在网站有关的新闻稿页面,另制作了一个标准 XHTML版本来“还击”,IE6无法正确显示,而Netscape6和Opera则可以。微软有见于此,便停止排挤Opera用者,但随后微软也有在其主页上“做手脚”,刻意对Opera及MozillaFirefox等用者使用错误的CSS,令MSN无法在其他浏览器上显示

现代浏览器
                         


浏览器兼容性

下面我们来看一下浏览器对css的兼容表

(弱弱的说下,这上面的opera不是最新版本,opera粉丝们不要砖头砸我 )
通过以上的图片我们可以大概看到各个浏览器对CSS支持的程度,可见IE浏览器的性能是最差的,当然IE也在慢慢向标准靠拢,最起码IE7要比IE6和IE5好很多,有很多朋友会遇到一个问题,为什么我的页面效果在IE下正常了,在FF和OP其他浏览器中都不正常了,很简单,那就是你没有符合标准,你首先选择一个对标准本身就支持不好的浏览器,我们试着想一下,用一个对标准支持不好的浏览器开发标准,最终的结果就是在不标准的IE浏览器中正常了,其他符合Web标准对CSS支持良好的浏览器都不正常了,这种思路本身就是错误的,所以在我们开发的时候首先要选择一款符合标准的浏览器,例如firefox,opera,safari,ie7(ie浏览器在css支持上是这些浏览器中最差的).正常呢我们最起码真确认我们做的是符合标准的,最后我们在通过一些办法去修复那些对标准支持不好的浏览器IE6,这样最终才能做到兼容的效果。

关于CSS hack
相信大多数朋友为了解决浏览器兼容的问题,首先想到了css hack,很多css技术网站也在介绍csshack,这里我要提醒大家,我们做为只是了解下就可以,没有必要深入,为什么呢,我来简单说明下,现在浏览器基本对标准支持都非常好了,我们只要注意文档的良好结构,基本上可以1个csshack都不去使用,因为我们不需要去考虑ie5了,ie6虽然说对css支持不是很好,但是他毕竟支持css2,有些地方虽然不正确但是我们可以通过一些技巧对他进行修复我们可以用ie特有的
<!--[if IE 6]>
<link href="css/layoutIE6.css" rel="stylesheet" type="text/css" />
<![endif]-->

条件注释语句对ie6进行修复,还有一些csshack告诉你如何修复mac版本的ie5的bug,这些都没有必要了,因为ie在mac机器上早就停止开发了,我们要了解技术是不断更新的,以前流行的css hack在今天由于浏览器对标准支持良好我们完全可以抛弃了,就连浏览器官方都推荐大家不要去使用css hack。

浏览器的一些看法


很多人也在讨论关于firefox和其他一些浏览器的问题,说这些浏览器很垃圾很不好,在ie下正常的效果,在firefox那是因为你乱用的web标准,是你的问题不是浏览器的问题,那是因为你拿ie错误的bug理解成对的,把本身对web标准支持好的浏览器当成错的,更有写人说了Firefox用的人不到1%或这10%,我们不需要做管他们,做为一个设计师和开发人员,我只能说你说的话非常不负责,你可以去跑到你老板哪里说老板我们1%-10%的潜在用户可以不要了好吗,你的老板会笑这跟你说:行,不就百分之10%,不要就不要了。如果可以你就可以不考虑了,再说了现在firefox也不至10%吧,我以自己的网站为例,2008-06-17到2008-06-30用firefox访问我网站的用户占了21%,7月分到现在是占有了19%,有时间听别人说不如自己去测试下就清楚了,不要把自己的能力不足找一些理由说浏览器有问题所以我们不要支持,当然ie也是用的浏览器,因为他比较流行所以bug会很快被找出来,如果是普通用户的话,他们要的是服务,选择什么样的浏览器无所谓只要能达到我的要求,我们不会去管浏览器是什么东西,国内的许国网站不支持firefox,opera以及其他的浏览器,那不是其他浏览器的问题,那是开发人员的问题,国外基本都支持符合标准的浏览器,做为开发人员如果说其他的浏览器不好,那他真的就是流氓了,还有要说明一点许多人用的遨游,tt,世界之窗那不算是浏览器,那只是ie浏览器的皮肤和外加一些插件调用用ie的内核,没有ie这些都用不了,国人目前还没有自己的浏览器,ie7现在也越来越标准了,但是还是没有完全支持标准,希望以后会越来越好。

希望我的这篇文章可以给大家带来帮助,大家觉得有问题的地方可以随时跟我交流,多多支持标准浏览器!!!

文章来源于:亚当学院

 

[ 资讯评论 ]
暂时没有任何评论!
[ 提交评论 ]
请选择表情
  • 昵称:
  • *
  • 验证码:
  • *点击更换验证码
  • 尚能输入个字符
申明:本网站部分分享内容来自网络,如有侵权请及时与我联系,谢谢,另网友评论仅代表个人观点,与本站立场无关,如果在评论中发表违反我国任何法律的,请即时与我们联系(QQ:77132915),我们将立即予以删除. [ 注:提交评论后,通过审核后方能在网站上显示!]