【网站制作视频教程】-第16讲 css理解表现与结构相分离！-传智播客

 

网页设计视频教程下载地址：http://icd.itcast.cn/icd/video.shtml?from=wl

视频介绍：

对于初学者，我们常看见web标准的好处之一是“能做到表现和结构相分离”，那这到底是什么意思呢？我将以一个实际的例子来详细说明。首先我们必须先明白一些基本的概念：内容、结构、表现和行为。

1.内容

内容就是页面实际要传达的真正信息，包含数据、文档或者图片等。注意这里强调的“真正”，是指纯粹的数据信息本身。比如一个不包含辅助的信息,比如导航菜单、装饰性图片等。举个例子，有下面一段文本是我们页面要表现的信息。

2.结构(Structure)

可以看到上面的文本信息本身已经完整。但是混乱一团，难以阅读和理解，我们必须给它格式化一下。把它分成标题、作者、章、节、段落和列表等。

2.表现(Presentation)

虽然定义了结构，但是内容还是原来的样式没有改变，例如标题字体没有变大，正文的颜色也没有变化，没有背景，没有修饰。所有这些用来改变内容外观的东西，我们称之为“表现”。下面是对上面文本用表现处理过后的效果:

3.行为(Behavior)

行为就是对内容的交互及操作效果。例如，我们最熟悉不过的JavaScript。使用JavaScript我们可以使内容动起来，可以判断一些表单提交，可以相应你的一些操作。这个我就不再举例子了。

所有HTML和XHTML页面就是由“结构、表现和行为”这三方面组成的。抽象一点理解，内容是基础层，然后是附加上去结构层和表现层，作后再对它们做点

4.传统的HTML方法

传统的HTML3.2/4.0标签里既有控制结构的标签，例如<title>,<p>，又有控制表现的标签，例如<font>,<b>，还有本意用于结构后来被滥用于控制表现的标签，例如：<h1>,<table>等。结构标签与表现标签混杂在一起。

例如上面举例的页面，你可能很熟练的2-5个表格来控制边框、背景和文本居中；用<h2><h3>来定义标题和小节标题；用<font>和<b>来控制字体大小、颜色和粗体。轻而易举地就能制作好页面。

5.web标准推荐的方法

对于内容、结构与表现相分离，最早是在软件开发架构理论中提出来的。QQ用过吧，QQ面板的变更皮肤就是内容不变，外观表现在变化；还有 winamp的skin也是这种原理的典型体现。其实我们大多数的设计师已经在实践中都接触到。我们的动态信息发布系统，实际上就是基于这个原理制作的，设计师只需要设计模版，程序员将数据(标题、作者、发布日期、摘要、相关文章、相关图片等等)从数据库中读出，嵌入你的模板，形成一个新的页面再展示给浏览者。其中的内容已经被结构化后分别保存在数据库的不同字段中。例如查找作者，我们只要在作者字段中搜索，这样的效率就提高很多了。