杂谈--如何学习标准化

最新推荐文章于 2024-09-20 16:06:21 发布

gsong

最新推荐文章于 2024-09-20 16:06:21 发布

阅读量1.4k

点赞数

分类专栏： HTML类文章标签： xhtml table div css 浏览器 html

HTML类专栏收录该内容

8 篇文章 0 订阅

订阅专栏

转帖自： http://www.lenvo.cn/post/235.html

[杂谈一]刚刚起步的学习——

最初接触网站制作是2002年学校开的一门Frontpage2000的课程，几乎已经忘记当时是怎么去做的一个主页。大概是先用word画了一个很简单的图，然后再Frontpage里面通过鼠标点击插入图片、插入按钮、然后写上字。简单的几个页面就完成了。除了输入几乎全是鼠标作业。布局似乎也很简单，就是想画图一样，上面一块左面一块右面一块。根本没有了解什么是代码，只知道html、head、body几个标签似乎是必不可少的。当然，这个存在1.44M软盘的作品不久以后就消失得无影无踪了。

第二次接触网页制作是04年底，那个时候我从一家国内最大的网站被解雇出来。想做一个校友录，最初是用Photoshop画图照着教程在Dreamwaver里面插入图片，开始复杂的鼠标点击操作。最终不了了之，不过随即发现了几个好网站，织梦的Firewoks教程吸引了我，随后在其友情链接里面发现了一个零点论坛和经典论坛。学习的全部是Fireworks特效，比如水印文字、88*31pxLogo制作等。

第三次就是在05年4月了，在昆山帮朋友组建起一个五个人设计制作团队，办公地点租赁、设备采购、人员招聘。并且从事很大一部份的美工工作。发现了很多不足，美工本身的活做得粗。但是发现我们的一个员工他做网站很少在设计界面，而是在代码界面删除、复制粘贴。然后便跟他学习到了table的嵌套。页面分几部分，几行几列先写一个大的table然后用rowspan和colspan合并单元格，也能通过对单元格添加width和height控制大小。大约三个月后，基本上熟悉了表格的属性，这个时候因为业务来源中断不得已解散团队，其间完成了昆山几个企业网站的单子，钱没赚到多少。但算是第一次创业吧。

凭着在昆山学习到的table多少有些自信的来到现在的公司。开始无穷尽table嵌套，而且基本上抛弃设计界面全部手写代码了。这个时候发现一个最大的问题，那就是如果要改动布局整个外层的table需要重新写，单元格需要重新组合改变。劳动量太大了。最先接触到标准化大约是2月份，论坛关于《网站重构》的讨论吸引了我的注意。随后第一个全是

的页面得到了老板的鼓励，然后开始买书、学习、翻标准化版的老贴（原网站设计综合版）。

[杂谈二]我理解的标准化——

首先说明，这些只是我个人的理解，用一些通俗并且零乱的文字表述出来。层次很低，错误是肯定存在的。请看到的朋友不要拿来当学习教材，并请指出错误共同进步。
我理解的标准化有三个要点
1、改变传统的布局
《html和xhtml权威指南》第“636页 div.../div 在文档内创建一个部分”，第656页 “table.../table定义一个表格”table 英文解释为桌子, 餐桌, 工作台, 平地层, 石板, 表格。很明显在html里面我们取的是表格这个含义,显示tabluar data表格数据的。div(即dvisition)英文解释为分（开），分裂，区域，选区，部分，部门。我们要的是区域、部分这个含义。从英文单词本身div(division)正是我们去描述一个页面布局里所说的这部分，那部分。在我的理解，传统的布局特点就是整个网页是一个大的table,然后这个table的td里面又嵌入N多层table，除了table、tr、td似乎很难找出其他的标签来。而标准化推荐用div来布局。即把页面用div来划分几个部分。div除了默认的块状元素换行，没有定位和布局信息包含在div本身。而table不同，tr和td本身就有着行和列的定义，浏览器能接受的。而div只是定义一个部分，它需要css来协助定位，这部分float:left,那部分position:obsevl;top:200px;right:10px;一个简单的示例:
用table实现上图的布局

用div布局，省略css部分

从这里我们可以看出w3c在制定整个html和xhtml的时候就考虑到了布局的问题，要不然div，定义一个部分应该怎么去理解呢。而在众多标签里面div是一个很模糊的概念，就如大多数初次接触标准化设计的朋友做得全是div的页面，他不光代替了表格而且代替了h系列，代替ul、li,几乎能代替所有的页面元素。回到这个简单的示例，很明显，div布局时xhtml部分要比table布局少很多行，而且容易理解。这一部分标识为head那一部分标识为side。我们操作的是一部分一部分，而table里我们操作的是这一格那一格，似乎在玩文字游戏了……如果页面比较复杂的话，这一点就相当突出。

2、页面代码结构化、语义化

我所理解的结构化就是把所有内容部分拿掉，只剩下所有的html或者xhtml标签时，能清晰地看到页面结构。上面的简单示例也说明了这一点。

关于结构：如果我们了解了html和xhtml标签的话，从代码我们能看出来这一部分依次是标题、一个列表、一个标题、一个表格、一个标题、一个段落。结构清晰明显。结合标签本身的定义和id命名能读懂页面的结构，这里是结构而不是布局。比如描述人体，头、躯干、脚这是结构，而头在上面，脚在下面这才是布局。说到结构，我觉得最重要的是整理内容，包括总结、分类、重要性等东西。因为网页仅仅是和书本、报纸、电视一样的内容载体，仅仅是为内容服务。在代码层就是利用div把本页要发布的内容按结构分布在各个部分。一个要点是所有标签都需要封闭.
关于语义：不用去看代码的显示效果，我们能读懂这个页面有些什么内容。一个人都能容易读懂的东西机器是不是更容易接受呢？我们阅读的过程模拟了浏览器的解析过程。语义化的意义就是能让浏览器能准确的了解页面认知页面,有利于搜索引擎分析页面结构。语义话不是对用户来说的，他们不会去看代码的。而是对浏览器而言的。浏览器对代码的认识是已经定义好了的，我们尽可能的去用它能认知的标签。比如对听觉障碍的朋友，我们尽可能去用手语和肢体语言表达，当然前提是他学习过手语。一个没有学习过手语的朋友，就如老版本的浏览器不得不被我们抛弃，当然是在做过一些努力（Csshack）之后了。用合适的表达方式面对表达的对象。用合适的标签向浏览器表达合适的内容。
3、表现与结构分离
这是标准化的重点所在。css和xhtml（注意是xhtml而不是div）分别担当了表现和结构两个同一层次的角色。标准化中还有一个和表现、结构并列的元素行为。我们能看到的分离就是尽可能不要把style写在xhtml里面，而是独立写在css文件或者style中间。举个通俗似乎并不恰当的例子，人体的结构是已经固定了的（当然你可以做个手术把脚丫子接到脑袋上，嘿嘿），扒掉全部衣服人都一样，脑袋、躯干、四肢。头发拔了不好先留着。肤色、发型、脸型、身高等等这些可以理解为浏览器默认那些表现的东西，你可以通过手术、护肤、理发师这些（CSS）去改变这些默认的表现。而穿上衣服（CSS）看上去人和人就很不同了。我想没有谁愿意把衣服（表现/CSS）用哥俩好粘在身上（结构/xhtml）吧，于是衣服（表现/css）的设计必须能脱下来能换能改，今天穿绿色的戴红帽子明天穿红衣服戴绿帽子（哈哈），这就是页面的换肤技术。仅仅是换衣服换帽子当然很方便了，但是如果衣服粘在身上，那就得用画笔描衣服颜色，肯定了很麻烦，弄不好还伤身体。不恰当例子说完了。事实上我就是这样理解表现与结构分离的。
4、div+css是什么东西？
我觉得这个说法最初的意图是表达标准化布局的，用div和css来进行网页布局。论坛里很多朋友用这个来描述和理解标准化是一个误区。而且在《CSS网站布局实录》里也出现过这样的问题。这是一个误区。首先div和css不是一个层次上的东西不能够相提并论。div只是xhtml众多表浅中的一个，而css是和xhtml同一层次分别实现表现和结构的。简单的说div代表不了xhtml。在这个问题上容易产生误解，尤其是对新接触标准化的朋友来说，最常见的错误就是整个页面全是div而忽略和冷落了xhtml那么多其他的标签，违背了标准化关于语义化的定义。
当然说div+css来进行网页布局就没问题了。
5其他
这些都是我个人站在一个最低层次对标准化的理解，远远不到标准化和网站重构真正的意图。至于可访问性基础、向后兼容、多种平台兼容以及向xml过渡这些都属于高层次的理解。就不敢写出来让人笑话，其实更怕是误导看到这些零乱文字的朋友了。

[杂谈三]如何学习标准化——

二、如何学习标准化
1、几本书、几个网站、几篇贴子、几个blog
《网站重构》掀起国内web标准热潮的第一本相关著作。理论性质多一些，全书涉及到具体操作和代码的部分很少。新手初次阅读很可能觉得没有实际用途。建议在阅读学习《CSS网站布局实录》有了一定的技术基础了再回头学习，反思自己之前学习和设计过程中的问题，这样才能有效地提高。
《样式表中文手册》必备的工具，我一般放在桌面随时查询。里面提供了详细的使用说明和实例。
《CSS网站布局实录》较新的一本标准化著作。告诉你怎么去写符合标准的xhtml和css代码，告诉你一些常见布局和页面效果的代码是什么样子。这本书很适合初学者，基本上都是针对实例的布局、效果的实际操作，比较系统的讲述了如何进行标准化网站制作。这本书只是在讲具体的实现，关于标准化的概念、网站重构的目标这些指导实际操作的理念性东西几乎没有。可以在学习这本书之后读一下《网站重构》，二者结合起来学习效果不错。目前的版本可能因为时间问题，校对很仓促，有不少错别字和有问题的句子没，但涉及到代码到没有发现错误。
《CSS权威指南》详细阐述CSS1.0每个属性的规则和定义，并且展望了CSS2.0许多诱人的东西。对实现web标准化有着重要的意义。通过本书的学习可以深入理解浏览器如何解析属性的规则和定义，为准确实现设计意图提供保障。
《html和xhtml权威指南》应该是一本权威的工具书，没有必要通读，可以在实际设计制作过程中参考。详细的讲述了html和xhtml的规则定义使用技巧。
《javascript权威指南》作为行为层的主要技术，不学习javascript就不能完整地学习web标准。

网站设计师最初接触web标准化学习必须访问并且认真阅读的网站。包含教程、资讯、参考资料等重要信息。
蓝色理想标准化专版这个不用说吧，对几位版主热心勤劳在此致敬。不少牛人潜水与此。但近期的学习氛围略显浮躁，没有深入理解停留在css表现层次的朋友较多。
CSSer.org 这个网站不知道怎么关掉了……有段时间不去看了，等待站长再次开放吧。
网易作为门户网站里较早采用web标准的站点之一，其最新版本很值得研究。

CSS入门教程http://bbs.blueidea.com/thread-2525023-1-1.html
新手入门http://bbs.blueidea.com/thread-2304671-1-1.html

下面是一些web标准届牛人朋友的blog，跟着他们能学习很多，而且通过blog这样亲切的形式学习效果应该很好。建议静心阅读他们的系列教程。
http://www.realazy.org/blog/
http://www.andymao.com/andy/
http://old9.blogsome.com/
http://www.greengnn.com/
http://blog.pr1984.com/
http://www.loaoao.com/

2、如何学习

1、读写读书读上面我推荐的贴子、网站和blog。互联网的宗旨在于共享和传播，那些接触技术比较早的理解和实践比较深入的朋友给我们提供经验和教程。要静下心来，不能仅仅为了一个效果或者一个布局的实现去找答案。而是去理解教程给我们带来的实现思路。要系统地读书也要针对性的搜集某个问题的方法去总结提取。读到的时候就要写，写一些代码片断，一些布局结构，一些效果的实现。哪怕是照着书敲出代码来，加深记忆和理解，效果要比单纯的度过效果要好得多。
2、改动改，不是抄袭。把别人的网站另存下来，改动其中的部分内容，看看页面显示有什么变化，在这些变化中去理解你所改动部分代码再实现页面效果中起到了什么作用。这是一个很重要的学习方法。你看到的效果变化来源于你的改动，这本身就是一个加深记忆和理解的过程。另外一种改法就是把复杂的页面简单化，简单到能演示效果为主，代码少了看起来清晰有利于学习。或者把简单的布局填充内容之后看页面怎么显示，会不会影响到布局，自适应的还是固定大小的，超出固定大小的内容hidden了还是流向了结构之外？有没有什么Bug？青蛙用永远逮不到一个安安静静站在那里的蜻蜓，只有蜻蜓飞起来了青蛙才能判断才能捕食。
3、睡觉睡觉前的思考。在显示器之外去思考之前学习到的东西，要有一定的距离和空间高度去看待去思考，比如今天写的布局是不是合理，有没有必要这样复杂，如果把浮动改成绝对定位呢。等等，就像作平面设计一样，有时候椅子往后一仰，稍稍的远离屏幕，对之前的细节处理就能有一个全新的认识。
4、收藏好记性不如烂笔头，总去发帖提问也不是办法。把看到的有用的教程收集起来分类整理，比如布局代码、导航特效、浏览器兼容hack写法等等。建立自己的文档库，时间久了整理整理，如果有合适的条件不要忘记和朋友们分享。
5、实践作一个完整的网站/网页项目，未必要复杂或者庞大。但至少要有一个完整的页面，尽可能用熟悉的技术去实现。检验自己、发现问题给自己继续学习的动力。