Dreamweaver 网页设计与制作（第二版）课件：制作茶文化网站——应用 Div+CSS技术布局网页.pptx

;任务?制作网站首页和子页

——使用Div+CSS

技术制作网页;◆了解Web标准的含义、构成，认识Div

◆熟练掌握使用Div+CSS技术构建网页的方法;一、Web标准的含义

Web标准是由W3C和其他标准化组织制定的一套规范，包括XHTML、JavaScript及CSS等一系列标准，其目的在于创建一个统一的用于Web表现层的技术标准，以便于通过不同浏览器或终端设备（计算机、手机等）向最终用户展示信息内容。

从狭义上讲，Web标准就是采用Div+CSS代码进行网站建设，现在Div+CSS俨然成了标准化的代名词。;二、Web标准的构成

1.结构

结构技术用于对网页中用到的信息（文本、图像、动画等）进行分类和整理，目前用于结构化设计的Web标准技术主要是XHTML。

2.表现

表现技术用于对已被结构化的信息进行显示上的控制，包括位置、颜色、字体、大小等形式控制。目前用于表现设计的Web标准技术就是CSS。简单来说就是表现与内容完全分离，使站点的维护更加容易。

;3.行为

行为是指对整个文档的一个模型定义和交互行为的编写。目前用于行为设计的Web标准技术主要有以下两个。

DOM（DocumentObjectModel）：文档对象模型，相当于浏览器与内容结构之间的一个接口。它定义了访问和处理HTML文档的标准方法，把网页和脚本以及其他的编程语言联系起来。

ECMAScript（JavaScript的扩展脚本语言）：由CMA（ComputerManufacturersAssociation）制定的脚本语言（JavaScript），用于实现网页对象的交互操作。;三、认识Div

Div全称Division，意为“区分”。Div的使用方法与其他标签一样。如果单独使用Div而不加CSS，则它在网页中的效果和段落标记“p/p”相似。

Div是用来为XHTML文档中的块内容设置结构和背景属性的元素。它相当于一个容器，由起始标签Div和结束标签/Div之间的所有内容来构成这个块。

XHTML中可以作为容器的标签有很多，相比之下，Div除了可以作为容器，还具有一个特有的优点，即不带有任何原始属性。;使用Div标签和p标签的区别;四、Div+CSS布局的优缺点

1.优点

（1）CSS的优势体现在它简洁的代码上。

（2）使用Div+CSS技术制作的网站改版更加方便简单。

（3）可以一次设计，多处发布。

（4）可以更好、更轻松地控制网页布局。

（5）将设计部分剥离出来，放在一个单独的样式表文件中，可以减少网页无效的可能性。

（6）布局灵活性大。

（7）如果对JavaScript比较精通，可以不必写ID，使用class即可。

（8）代码更简洁。;2.缺点

对于CSS的高度依赖，使得网页设计变得比较复杂。

CSS文件异常将会影响整个网站的正常显示。

对于用Div+CSS技术制作的网站，非常容易出现浏览器兼容性问题。

Div+CSS技术对搜索引擎的优化效果，取决于网页设计者的专业水平而不是Div+CSS技术本身。;五、绝对定位与相对定位

1.绝对定位

绝对定位在CSS中的写法是“position:absolute；”。其表达的意思是参照浏览器的左上角，配合top、right、bottom、left（上、右、下、左）值来定位元素，如下CSS代码：

#lay{

position:absolute；

left:5px；

top:5px；};它表示应用#lay样式的对象为绝对定位模式，它将始终保持距离浏览器窗口左边框5px、上边框5px，如图所示。;2.相对定位

相对定位在CSS中的写法是“position:relative；”。其表达的意思是以父级（它所在的容器）的坐标原点为坐标原点。无父级则以body的坐标原点为坐标原点，配合上、右、下、左（TRBL）进行定位，当父级内有padding等CSS属性时，当前级的坐标原点则参照父级内容区的坐标原点进行定位，如图所示。;六、浮动定位

浮动定位在CSS中用“float”属性来表示。当“float”值为“Bone”时，表示对象不浮动；为“left”时，表示对象向左浮动；为“right”时，表示对象向右浮动。

浮动是一种非常先进的布局方式，可以改变网页中对象的前后流动顺序，这样使得内容的排版变得简单且具有良好的可伸缩性。

如果使用浮动定位方式，为Div中的所有列都加上“float:left”属性，那么它们会挨个向左排列。如果让一个元素浮动，它会往右或者往左浮动直至遇到容器的边缘。

应该为所有使用“float”属性的元素