(2). w3c规定的网页三要素 a.结构层（structural layer）由 HTML 或 XHTML 之类的标记语言负责创建。标签，也就是那些出现 在尖括号里的单词，对网页内容的语义含义做出了描述，但 这些标签不包含任何关于如何显示有关内容的信息。例如，P 标签表达了这样一种语义：“这是一个文本段。” b.表示层（presentation layer） 由 CSS 负 责创建。 CSS 对“如何显示有关内容”的问题做出了回答。 c.行为层（behavior layer）负责回答“内容 应该如何对事件做出反应”这一问题。这是 Javascript 语言 和 DOM 主宰的领域。 (3).网页设计为何要遵循web标准
2.div用法
代码示例: <div>内容</div> 上述代码就是一个div的使用实例,看上去毫无新意的一个标签,为 什么有如此大的功效值得人们去讨论呢,请看一段比较复杂的代码
这段代码来自著名的博客程序wordpress的当 前首页，显示效果最终如下：
（注意：之所以提取wordpress这个程序的代码进行分析，是考虑到它十 分注重遵循web标准，对我们从底层开始学习web标准有利） 可以从这段代码中得知：div在此充当了框架建设的作用，目标是打造一 个网页的标题导航块，做到了结构清晰，条理分明的特点
3）类选择器 .f-blue {color:blue;} p.f-blue {font-style:italic;} strong.f-blue { text-decoration:underline;}
4）多类选择器 <p class="one two three"> 5）ID选择器 #four{ color:blue;} p#four{ font-style:italic;}
a.内联样式
<a style=“color:red”href=“#”>asdfsadf</a> 通过上述方式，我们已经声明了一条行内样式，样式内容 就是将对应的div的文字展示为红色（color:red); 内联定义即是在对象的标记内，使用对象的style属性定义 适用其的样式表属性。用这种方式主要是对特定的层或标 记设置样式，如设置一个层的边框，即只代表这个层的样 式，对其他层或标记无效。 内联定义的使用有一个好处就是可以灵活地设置对象的样 式，缺点是样式扩展性差，即不能让其他的对象享用它的 样式，
长大在线2011年暑期培 训之div+css
第一讲 课程背景(为什么要学习div+css)
1.web标准
(1).定义 a.Web标准不是某一个标准，而是一系列标准 的集合。网页主要由3部分组成：结构（Structure）、表现 （Presentation）和行为（Behavior）。对应的标准也分为 3个方面：结构化标准语言，主要包括XHTML和XML；表现 标准主要包括CSS；行为标准主要包括对象模型（如W3C DOM）和ECMAScript等。这些标准大部分由W3C组织起草 和发布，也有一些是其他标准组织制订的标准，如ECMA （European Computer Manufacturers Association）的 ECMAScript标准。
1.名词解释:css 从前面的课程中我们了解到css是属于表示层 的,CSS 对“如何显示有关内容”的问题做出了回答。 其实css是Cascading Style Sheet的缩写，中文全称 为”层叠样式表”,它是用来控制网页样式并允许将样 式信息与网页内容分离的一种标记性语言。
2.css的基本存在形式 a.行内样式(优先级最高) b.内部样式(优先级中) c.外联样式(优先级最低)
2.div+css
(1).div+css是一个术语,是一种网页布局方法的简称, 网 页布局就是将一个网页通过html或xhtml标记语言按照一定的 布局形式展现出来,常见的有table型布局(传统)和div+css型 布局(现代) (2).div+css与html的关系 div+css都是属于html范围的,但是由于他们十分重要, 故设计者将之提出后专门进行讨论 (3).既然属于html范围,为何专门讨论它? web标准要求三层分离, 而div+css布局方式倡导页面 表示层与结构层相分离, 我们作为一名网页设计者,要遵循web 标准,尽量做到三层分离,所以才专门讨论div+css
c.外联样式
<link href=“a.css”type=“text/css”rel=“stylesheet” /> <div>div1</div> <div>div2</div> a.css 中的内容： div { color:red } 通过上述方式，我们已经导入了一个外联样式表（a.css,将txt文件 后缀改为css可得），理论上这个样式表可以存在于代码的任何部 位,但是我们通常将之置于<head>之间,这个外部样式表也只有一条 规则，就是将所有的div的文字展示为红色（color:red);
链接代码：<link type=”text/css” rel=”stylesheet” src=’style.css”> 通过标记<link>即可把外面的样式文本链接到网页， 这也是绝大多数网站所采用的方法，这样更有效率，只完成一 张样式表，即可控制所有的页面效果。当然，当修改样式表的 同时，链接了该样式表的所有网页都会受到影响。这样对整个 项目效率会提高，也是为什么网站都采用这个样式的原因。
其实，简单的几行代码，我们就已经搭建好了这个网页的 架子，但是，现在我们在浏览器里头浏览却不是我们想要 的结果，为什么呢？因为div是结构层，它只负责页面在逻 辑结构上的表示，我们要让他表现成想要的效果，还需要 对代码在表示层应用一定的css规则，了解css之后，我们再 回头处理并完善这个布局。ຫໍສະໝຸດ 第三讲: css (表示层)
CSS外链接是把CSS文件放在网页外面，通过链接使 CSS文件对本网页的样式有效，这样的链接称为外链接。 由<link>开始，里面的属性有type和rel，其中type和上一节 学的一样，设置type为text/css，表示CSS文本，rel是样式， 即stylesheet，最重要的是地址了，地址用src表示，下面是一 个完整外链接，假如CSS文件和页面是同一目录。
(4.)div+css布局的优点 1、缩减代码，提高页面浏览速度。采用CSS布局，共用css文件，大大缩减 页面代码，提高页面浏览速度,降低带宽需求,压缩成本。 2、结构清晰，用只包含结构化内容的HTML代替嵌套的标签，主次分明， 对搜索引擎更加友好。配合优秀的内容和一些SEO处理可以获得更好的网站 排名。 3、使用CSS可以结构化HTML，提高易用性和可访问性。例如：p标签只用 来控制段落，table标签只用来表现格式化的数据等等。设计兼容性良好的 页面可以跨平台访问(电脑,手机,各种支持html标准的终端) 4、表现和内容相分离，干净利落。将设计部分剥离出来放在一个独立样式 文件中，而网页主要来放置您的内容，你可以减少未来网页无效的可能。 5、简单的修改，缩短改版时间。共用css方便调整页面表现风格。 6、更灵活控制页面布局。通常页面的下载是按照代码的排列顺序，通过 CSS控制可以调整代码的排列顺序而不影响布局,而表格布局代码的排列代表 从上向下，从左到右，无法改变。
我们可以做如下的拆分：
第二步.代码编写 在做出上述结构的分析后，我们就可以开 始进行代码的编写了，上述结构中有五个块， 并且他们不是嵌套的关系，对于这种并列而非 嵌套的关系，我们直接按划分的块的数量创建 相同数量的div即可 代码如下：
<html><head></head><body> <div>main menu区块</div> <div>header区块</div> <div>content区块</div> <div>side bar区块</div> <div>footer区块</div></body></html>
b. 内部样式
<style type=“text/css”> div { color:red } </style> <div>div1</div> <div>div2</div> 通过上述方式，我们已经声明了一个内部样式表，这个内 部样式表只有一条样式规则，内容就是将所有div的文字展 示为红色（color:red); 通常，我们将style标签放在<head>标签内部，但是理论 上是可以放在代码任意一个位置的，但是应尽量放在head 内部
3.如何用div进行基础性布局
第1步.分析页面结构,划分功能区域 第2步.进入结构层代码编写（div） 第3步.进入表示层代码编写（css） 第4步.代码测试（ie6-8,firefox,safari,opera....) 第5步.代码维护和优化
第一步.分析结构
对一个网页的布局设计，首先要分析其结构，比如 如下效果图
要对一个网页元素(div等)应用样式,首先要找到这个元素(选取)
选择器
声明
声明块
声明
h1
{ color :
black;
background : yellow }
属性 记得用中括号括起来哦
值
属性
值
常用选择器:
1）元素选择器 body{ color : green;} h1{ color : red; } p{ color : blue;} 2）群组选择器 h1 , p ,strong{font-style:italic;}
