论坛交流
首页办公自动化| 网页制作| 平面设计| 动画制作| 数据库开发| 程序设计| 全部视频教程
应用视频: Windows | Word2007 | Excel2007 | PowerPoint2007 | Dreamweaver 8 | Fireworks 8 | Flash 8 | Photoshop cs | CorelDraw 12
编程视频: C语言视频教程 | HTML | Div+Css布局 | Javascript | Access数据库 | Asp | Sql Server数据库Asp.net  | Flash AS
当前位置 > 文字教程 > div+css布局教程
Tag:css,入门,技巧,div,实例,示例,菜单,布局,web2.0,ul,li,经验,列表,web标准,xhtml,web标准,浏览器,兼容,css hack,表格,视频教程

{WEB标准}CSS网友:关于WEB标准化过程中的语义化描述!

文章类别:div+css布局 | 发表日期:2008-9-26 11:53:08

  在使用XHTML CSS制作标准化的界面原型的时候,我觉得需要把握两个原则:

  1.良好的语义化的结构描述

  2.结合CSS,实现最大限度的表现与数据相分离

  这两个要素其实也是WEB标准化的意义所在,常看到一些制作师只为实现而实现,思路还是在沿袭Table时代的思路,这已经背弃了WEB标准化的原则。

  一个有着良好的语义化描述的结构,应该就是一个结构良好的XML,理想的情况下,除了数据,不应该再出现任何的冗余(当然在XHTML中,完全做到没有冗余不太可能)。所有的描述应该基于语义,例如结构的划分,ID的定义,伪类的建立等等。一个良好的结构或许会占用你更多的思考时间,或许也会增加你实现的难度,但它带来的极强的可读性和更好的扩展性将让你获益匪浅,同时实际上也降低了维护的成本,长远看,也为跨各种浏览终端做了铺垫。

  具体举例来说,假如你在ID定义中使用了“Left”,“Right”诸如此类的词语,你已经在不知不觉中犯错误了,或许某一天你的界面布局会做一个“乾坤大挪移”,那时候“Left”或“Right”的定义还有何意义?同理,“Red”,“Size12” 等等,在语义描述中,应该都属于杜绝使用的词语。

  假如你的界面布局中有一条分隔线,你会怎么做?或许你会使用<div class=\"line\"></div>这样的写法,实际上,为基于表现的元素建立标签是错误的,你应该巧妙的将它用于内容所在的容器上,具体实现方法不再阐述。

  甚至有时候,为了保持一个良好的结构,同时要实现一些比较复杂的交互方式,比如滑动门效果,我们需要将种种复杂的行为都封装到JavaScript文件中。在界面元素上写onmouseover等事件是不可取的,因为这样会破坏良好的语义结构,同时也限制了界面的可扩展性,事实上,你可以很巧妙的将它们统统封装到JavaScript中去,这并不太难。繁杂的工作总要有人做,那就交给Javascript去做吧,反正它的使命其实就是这样的。

  假如你已经建立了一个结构良好的XHTML文档,为它书写对应的CSS也不是难事,CSS更多依靠的是技巧,而良好的语义结构是需要你来思考的。

  本文作者:Richbox
视频教程列表
文章教程搜索
 
div+css推荐教程
div+css热门教程
看全部视频教程
购买方式/价格
购买视频教程: 咨询客服
tel:15972130058