《Dreamweaver 网页设计与制作》课件——项目八 制作茶文化网站——应用 Div+CSS技术布局网页.pptVIP

* LOGO * LOGO * LOGO 项目八?制作茶文化网站——应用 Div+CSS 技术布局网页 任务?制作网站首页和子页——使用 Div+CSS 技术制作网页 任务 2 布局子页——表格的高级应用 任务3　汉字编码训练 任务4　万能五笔输入法使用技巧 * LOGO 项目八?制作茶文化网站——应用 Div+CSS 技术布局网页 任务?制作网站首页和子页——使用 Div+CSS 技术制作网页 任务 2 布局子页——表格的高级应用 任务3　汉字编码训练 任务4　万能五笔输入法使用技巧 任务 制作网站首页和子页——使用 Div+CSS 技术制作网页 任务?制作网站首页和子页 ——使用 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（Document Object Model）：文档对象模型，相当于浏览器与内容结构之间的一个接口。它定义了访问和处理 HTML 文档的标准方法，把网页和脚本以及其他的编程语言联系起来。 ECMAScript（JavaScript 的扩展脚本语言）：由 CMA（Computer Manufacturers Association）制定的脚本语言（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，如图所示。 绝对定位? * LOGO * LOGO * LOGO 项目八?制作茶文化网站——应用 Div+CSS 技术布局网页 任务?制作网站首页和子页——使用 Div+CSS 技术制作网页 任务 2 布局子页——表格的高级应用 任务3　汉字编码训练 任务4　万能五笔输入法使用技巧 *