全国“xx杯”计算机类教师说课大赛一等奖作品：《DIV+CSS布局网页》教学课件.ppt

1、 CSS+Div是网站标准中常用的术语之一，CSS和Div的结构被越来越多的 人采用，很多人都摒弃了表格而使用CSS来布局页面，它的好处很多，可以使 结构更加简洁，定位更加灵活，CSS布局的最终目的是搭建完善的页面架构。 通常在XHTML网站设计标准中，不再使用表格定位技术，而是采用CSS+Div 的方式实现各种定位。 7.1 CSS+Div的定义 Div元素体现了网页技术的一种延伸，是一种新的发展方向，有了Div 元素，就可以在网页中实现下拉菜单、图片、文本的各种效果；CSS是用 于创建网页表现（样式/美化）的样式表的统称，要通过CSS来设置Div标 签样式，我们将这二者的联合使用称为CSS

2、+Div。 7.1 CSS+Div的定义 XHTML是目前国际上倡导的网站标准设计语言，因为XHTML具有网 站设计语言的基本特点，这种CSS+Div模式的网站设计具有一定的优势。 首先，CSS的优势表现在简洁的代码。对于一个大型网站来说，可以节省 大量带宽。而且众所周知，搜索引擎喜欢简洁的代码，因此使用CSS+Div 的Web标准制作的网站具有更易被搜索引擎搜索的优势。 其次，CSS+Div使得网站改版相对简单，很多问题只需要改变CSS而不需 要改动程序就可以解决，从而降低了网站改版的成本。 7.1.1 CSS+Div的优势 7.1 CSS+Div的定义 7.1.2 CSS+Div的问题 尽

3、管CSS+Div具有一定的优势，不过现阶段CSS+Div网站建设 存在的问题也比较明显。 7.2 表格布局与CSS布局的区别 很多人也许会觉得，有时候使用HTML一样可以实现页面样式的设置，那为什么 还要使用CSS呢？接下来，从两个网页的效果分析一下使用CSS的必要性。 7.3 盒子模式 什么是CSS盒子模式呢？为什么叫它是盒子？首先说说在网页设计中常听到的属 性名：内容（Content）、填充（Padding）、边框（Border）、边（Margin）。 CSS盒子模式具备这些属性，如图7-5所示。 7.4 可视化布局块 在“设计”视图中，可以使CSS布局块可视化。CSS布局块是一个 HTM

4、L页面元素，可以将它定位在页面上的任意位置。具体而言，CSS布 局块是不带“display:inline；” 的 Div 标签，或者是包括 “display:block;”、“position:absolute;”或“position:relative；”CSS 声 明的任何其他页面元素。下面是几个在Dreamweaver中被视为CSS布局 块的元素的示例。 7.5 CSS网页布局 如果想要制作出既美观、使用起来又方便的网站，那么把网站布局设计好是十分必要的。设 计的布局是指把文本、图像、符号等各种构成要素在指定的空间内进行合理的安排配置的工作。 在网页设计中布局的概念也是差不多的，网页设计的

5、布局就是把进入网页的各种构成要素（文字、 图像、图表、表单等）在网页浏览器中有效地排列起来。网站的文字或图像等网页的构成要素配 置是否协调，将决定页面给人的感觉及其实用性。 网站的布局不是盲目地在网页里罗列各种构成要素。如何才能实现网页构成的目的，使网站 看起来既美观又实用，这才是每一个设计网页布局的人应该首先考虑到的问题。如果网页布局不 合理，则会在向用户传达网页内容的时候发生困难，也不会让人对其产生兴趣。因此，为了能够 设计出既美观、新颖，又使用方便的网页，有必要多多参考优秀的布局方法。在仔细研究那些优 秀的布局方式的同时，对如何在有限的空间里把页面中丰富多彩的内容更加有机地结合起来，如

6、何营造出一种良好的视觉效果这些问题进行认真思考。 7.5.1 网站布局设计原则 7.5 CSS网页布局概述 7.5.2 CSS网页布局分类 1一列固定宽度 2.一列自适应 3.一列固定宽度居中 4二列固定宽度 5.二列宽度自适应 6.右栏宽度自适应 7.二列固定宽度居中 8.三列浮动中间列宽度自适应 9.高度自适应 7.6 知识与技能梳理 尽管CSS+Div具有一定的优势，不过现阶段CSS+Div网站建设存在的问 题也比较明显，CSS+Div能否优化搜索引擎取决于网页设计的专业水平而不 是CSS+Div本身。CSS+Div网页设计并不能保证网页对搜索引擎的优化，甚 至不能保证一定比HTML网站有更简洁的代码设计。 重要工具：CSS+Div。 核心技术：根据不同的需要将CSS技术应用到网页中去。 实际应用：企业网站、旅游网站、个人主页。