Web网页标准学习:从“div+css”说起谈结构的重要性

css|web|标准|网页

大家都知道,web标准在中国传播初期,人们使用“div+css”描述web标准,似乎有点道理,根据国内网页设计师的编码水平,看似就是使用div配合css来替代table布局。

可是学过一段时间web标准的人士,都知道这是误解,那么有人提出,摒弃div+css的说法,提倡XHTML+CSS的说法,因为要使用两门语言来架构网页,但是这种称呼也不准确,不完整,因为只提到了XHTML1.0标准和CSS2.0(CSS2.1)规范。

其实web标准就是web标准,叫别的都不对,他就是web开发中的一些列标准的集合,XHTML,XML,CSS,DOM,ECMAScript,制定这些标准是为了更好的约束,web运行平台(浏览器)的开发厂商,而我们遵循web标准开发,也是为自己着想,通过大众的努力,迫使流氓开发商,遵循统一标准,降低开发者的难度,让我们的作品能更好的跨平台,跨越浏览器的障碍(IE,FF,Opera等等),跨越设备的障碍(PC,手持设备,手机,打印设备等),跨越用户障碍(色盲,色弱,视力不好,肢体残疾等)。

为什么要遵循web标准进行设计和开发?上一段也已经宏观的提到了,跨平台统一于一个标准,最终降低开发难度。具体实施上肯定没有一个老板这么伟大的投身标准事业,商人总是依照利益的驱动,是哪些利益驱动了他们应用web标准的?

更少的代码和组件,容易维护

带宽要求降低(代码更简洁),成本降低。

更容易被搜寻引擎搜索到

改版方便,不需要变动页面内容

提供打印版本而不需要复制内容

提高网站易用性。

当最终老板看到在应用web标准后的代码很简洁,出现了许多未曾谋面的div,然后你给他展示,可以随意改版,多种设备兼容,多种浏览器兼容,很好,老板很欣赏,这么多的好处,我们全力支持web标准,而导致的结果,web标准技术人才火热,应用web标准开发的项目增多,开发效率成为问题,开发模式还在摸索之中,里面出现了,在web标准应用中的一些错误方法,div的滥用,class的滥用,结构一塌糊涂,人们重视css比重视xhtml多了许多。

div是什么?刚开始人们的认识是无语义,应用无语义的事物来布局,是正确的,既然无语义,div这三个字母就不会出现。

Jeffrey Zeldman的解释是“用短语division解释div,是最恰当不过的了”。Div和span一样是用作裁减分割文档的,那么他们也就拥有语义了。Div联合id和class属性,提供了一个把结构添加到文档的通用机制。
Div将文档分割成一块一块的,怎么区分这一块块来进行布局呢?也就是怎么给独有的div赋予一个唯一标识ID,通用的div赋予一个class值,也可以在class的基础上再赋一个id。如果不用id看似也可以,全部class,只要合理的命名就可以,你可以为header区域,添加class, <div class="IdHeader"> ,类IdHeader告诉你,这里是唯一的而且是header区域。可是ID是最能体现文档结构的一个属性。当你为ID不能重用而牢骚时,想想ID的强大功能吧!

ID的属性有着令人难以置信的强大功能。ID属性可以完成下列功能:

作为一个样式表的选择器,可以让我们创建紧凑的、最小化了的XHTML页面文件。

最为一个超文本链接的目标anchor,用来替代过时的name属性(或者向前兼容和她共存)

作为基于DOM的脚本中特殊元素的引用方法。

作为一个声明的对象元素名字。

作为通常目的流程处理的工具(W3C的例子中:“当丛HTML页面提取数据倒一恶数据库,或者把HTML文档转化到另外一个格式等,这个实惠用来标明区域”)

现在也经常出现组合class的结构,就是拥有一个CSS框架,然后任意组合class实现布局,看似是提高效率的捷径,可是花费的代价却是破坏结构,(当然也有例外,如Grids CSS),一般的做法就像土豆网前台编码的设计

<div class='box_abstract box_program box_border'>

这个维护带来了很大的困难,也就是结构设计的不够合理,只是为了div+css而不是为了web标准。

Web标准的要把握几点:

Use structural, semantic markup.

Separate presentation from the (X)HTML document using CSS.

Rely on JavaScript as an enhancement for, not a replacement of, website features.

使用结构化,语义化的标签

使用CSS分离出(X)HTML文档中的表现元素

依靠Javascript去增强,而不是替代,网站的特征(具个例子就是如果css做不了的,交给Javascript而不是替代css去做他能做的)

对于多样式组合的结构我一直是很反感的,可能我理解的不够深入,体会不到他的好处,或许合理的组合可以兼顾结构和开发效率,可是我没有发现,我就要抵触。

对样式组合方式是这样的

<div class=”class1 class2 … classn”></div>

举个布局例子

<div class=”f-left w400 bgfff”>

几个类组合成一个左浮动,宽400 背景为白色的一个区域
你可能拥有一个庞类库,页面只需要任意的class的组合就可以完成,省去大部分花费在css上的时间,可是带来的是下次结构的混乱,这样做和table布局没什么两样,只是代码看着好看而以,而且代码量相差也不会太大。在应用web标准初期,合理的table布局也是允许的。如此多的class让我想起了table冗长的属性

<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 ALIGN=CENTER WIDTH=100%  HEIGHT=100%>

难道辛辛苦苦就是想使用div配合css模拟出一个table很容易实现的效果?而且达到和table布局一样的拙劣?

语义化也是结构的一个部分,语义除了合理的使用(X)HTML标记语言,id也是一个语义组成的部分,div的id就像一格即时贴,告诉你div的语义,告诉你这个区块的意义。

微格式(Microformat)是在标准 XHTML 代码中嵌入结构化数据的一种新方法。他的诞生也很明确的说明了web的结构永远是第一位,语义化的优势很现实的体现出来,div的属性规划也体现着语义,而不仅仅是一个传递对样式工作的接口。可以去看看ibm文档中心的一篇“使用 microformats 分离数据与格式”了解它的工作原理。

其实说了这么多,我也有点没头绪了。主要就是我对结构和开发效率之间的矛盾的一个说明,css框架如何才能不破环结构的一个疑问。而且对于结构和效率我的观点就是“只有合理的结构,才是你web标准化的根本动机”,web是承载信息的,没有理由为了视觉效果,而破坏合理的结构。

时间: 2024-09-08 09:22:27

Web网页标准学习:从“div+css”说起谈结构的重要性的相关文章

从“div+css”说起谈结构的重要性

大家都知道,web标准在中国传播初期,人们使用"div+css"描述web标准,似乎有点道理,根据国内网页设计师的编码水平,看似就是使用div配合css来替代table布局. 可是学过一段时间web标准的人士,都知道这是误解,那么有人提出,摒弃div+css的说法,提倡XHTML+CSS的说法,因为要使用两门语言来架构网页,但是这种称呼也不准确,不完整,因为只提到了XHTML1.0标准和CSS2.0(CSS2.1)规范. 其实web标准就是web标准,叫别的都不对,他就是web开发中的

网页标准学习:XHTML+CSS调用样式表

css|xhtml|标准|网页|样式表    web标准设计网站,过渡的方法主要是采用XHTML+CSS,css样式表是必不可少的.这就要求所有网页设计师必须熟练掌握CSS,如果你以前不常用,那么现在就开始学习吧.要制作符合web标准的网站,不懂CSS是设计不出漂亮的页面的.    事实上,所有表现的地方都需要用CSS来实现.我们以前都习惯用table来定位和布局,现在要改用DIV来定位和布局.这是思维方式的变化,一开始有些不习惯.呵呵,任何变革都会有阻力的,为了享受标准带来的"益处"

从“div+css”说起谈结构的合理

css  大家都知道,web标准在中国传播初期,人们使用"div+css"描述web标准,似乎有点道理,根据国内网页设计师的编码水平,看似就是使用div配合css来替代table布局. 可是学过一段时间web标准的人士,都知道这是误解,那么有人提出,摒弃div+css的说法,提倡XHTML+CSS的说法,因为要使用两门语言来架构网页,但是这种称呼也不准确,不完整,因为只提到了XHTML1.0标准和CSS2.0(CSS2.1)规范. 其实web标准就是web标准,叫别的都不对,他就是we

网页标准学习:利用CSS同比例缩小图片技巧

css|标准|技巧|网页 当然,生成缩略图这个工作如果交给程序来完成,效果会好很多,但是有时出于某种因素,例如服务器不支持GD之类的,难免就要请CSS代劳. 把一副大图片按比例缩小到某个尺寸,对于现代浏览器,直接使用max-width和max-height两条CSS属性即可. 对于IE 6.0及以下版本,以上两条CSS属性均不会被理会.之前处理这种事情,我们往往会借助Javascript,然后为图片加上onload事件.例如: <imgsrc="..."alt="...

WEB标准教程:Div+CSS布局入门教程

css|web|web标准|教程|入门教程 在网页制作中,有许多的术语,例如:CSS.HTML.DHTML.XHTML等等.在下面的文章中我们将会用到一些有关于HTML的基本知识,而在你学习这篇入门教程之前,请确定你已经具有了一定的HTML基础.下面我们就开始一步一步使用DIV+CSS进行网页布局设计吧. 所有的设计第一步就是构思,构思好了,一般来说还需要用PhotoShop或FireWorks(以下简称PS或FW)等图片处理软件将需要制作的界面布局简单的构画出来,以下是我构思好的界面布局图.

网页标准学习:关于web标准的思考

web|web标准|网页 我是从去年初开始学习web标准的,两年下来也有些心得.最近跳槽了正好闲在家里,写一些出来和大家交流一下. 1 对于web标准和W3C XHTML规范的理解 按照习惯的理解,这两个概念似乎都是指的一个东西(就是咱们在这个版里讨论的这些个"高深理论"^_^).但我认为,事实上从技术的角度上讲,这两个事物几乎没有任何相关性.web标准简而言之就是将页面的结构.表现和行为各自独立实现,更通俗的讲就是如今招聘时流行的语言"div+css".但W3C

感受Web标准,第一次DIV+CSS

css|web|web标准 受好友dodo和同事常可的影响,开始关注Web标准.周六日按照标准改造了dearbook的几个页面,总结一些经验如下,供以后参考: DIV+CSS结构的好处是能够做完一块展示一块,可以边看效果边做,这不仅比Table方式节省代码,而且控制能力更强. dodo提到目前还没有支持Web标准的可视化编辑器.不过Visual Studio.NET对CSS的支持和提供功能还是不错,适合我这样的新手.另外,使用Web标准的页面,VS.NET也不在HTML代码中间乱加FONT标志.

网页标准学习之详细讲解CSS网页页面布局

css|标准|网页|页面 用CSS 来布局很容易.如果你已经习惯用表格布局的话,起先会感觉比较困难.其实不难,只不过动机不同,并且在实践中更有意义. 你可以把这一页面的各个部分当作独立的版块来看待,无论你选择哪一块.你可以绝对或相对地用彼块取代此块. 定位 定位属性position用于定义一个元素是否absolute(绝对),relative(相对),static(静态),或者fixed(固定). static值是元素的默认值,它会按照普通顺序生成,就如它们在HTML的出现一般. relativ

学习网页标准制作技术之CSS相关基础知识

一.三种样式选择器 属性选择器 p {color:red;}类选择器 .p {color:red;}ID选择器 #p {color:red;}二.transparentBackground:transparent; 防止定义背景被覆盖三.Netscape4.X(IE/WINDOWS4.0以前的版本)下错误的透明背景理解Background:inhrit; 在netscape4.x下透明背景将被理解为黑绿四.字体默认选择:Body {font-family:"lucida Grande"