课程教案
授课内容
项目八 制作茶文化网站——应用Div+CSS技术布局网页
授课班级
授课学时
16课时
教学方法与手段
讲授法、演示法、讨论法。多媒体教学
项目内容
本项目的工作是为某茶文化公司建设，要求网站能充分展现中华茶文化的悠久历史，加大对中国茶文化的宣传。网站的设计要求有：网站涉及较多有关茶的各类资讯，应便于查询检索；站内图片清晰度要高，并且要有美感。
按照公司提出的要求，经过分析，要完成好本次任务，应该采用近年来流行的“Div+CSS”技术来布局网页。在网页设计领域，Web 标准的呼声越来越高。简单来说，要使网站符合 Web 标准，就要使用“Div+CSS”技术来布局网页。本任务通过使用“Div+CSS”技术构建茶文化网站，介绍了“Div+CSS”技术在实际网页制作中的应用。
教学目标
学生通过本项目的学习，能：
1、 了解 Web 标准的概念
2、 熟练掌握使用“Div+CSS”技术构建网页的方法
教学重点与难点
教学重点：熟悉 “Div+CSS”技术
教学难点：使用“Div+CSS”技术构建网页
教学过程设计
项目效果
【任务】制作网站首页和子页——使用Div+CSS技术制作网页
（一）什么是Web标准
Web 标准是由 W3C 和其他标准化组织制定的一套规范，包括 XHTML、JavaScript及 CSS 等一系列标准，其目的在于创建一个统一的用于 Web 表现层的技术标准，以便于通过不同浏览器或终端设备（计算机、手机等）向最终用户展示信息内容。
从狭义上讲，Web 标准就是采用“Div+CSS”代码进行网站建设，现在“Div+CSS”俨然成了标准化的代名词。但实际上，采用“Div+CSS”代码制作的网站并不一定符合Web 标准，这与对“Div+CSS”代码应用的熟练程度有很大关系。
（二）Web标准的构成
Web 标 准 由 结 构（Structure）、 表 现（Presentation） 和 行 为（Behavior）三部分组成：
1. 结构
结构技术用于对网页中用到的信息（文本、图像、动画等）进行分类和整理，目前用于结构化设计的 Web 标准技术主要是 XHTML。
2. 表现
表现技术用于对已被结构化的信息进行显示上的控制，包括位置、颜、字体、大小等形式控制。目前用于表现设计的 Web 标准技术就是 CSS。W3C 创建 CSS 的目的是用 CSS 来控制整个网页的布局，与 XHTML 所实现的结构完全分离。简单来说就是表现与内容完全分离，使站点的维护更加容易。这也正是“Div+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> 之间的所有内容来构成这个块。在它里面可以内嵌表格（table）、文本（text）等其他 XHTML 代码。其中所包含的元素特性由Div 标签的属性来控制，或使用样式表格式化这个块来控制。
XHTML 中可以作为容器的标签有很多，相比之下，Div 除了可以作为容器，还具有一个特有的优点，即不带有任何原始属性。例如，P 标签为段落属性，使用它作为容器就会导致放入 P 标签的内容与前后段落之间出现一个空行的间隔，而用 Div 就不会出现这种情况，上图所示为使用 Div 作为容器的效果，下图所示为使用 P 标签作为容器的效果。可以很明显地看出，P 标签内的内容与上下行之间产生一个空行的间距。
（四）Div+CSS布局的优缺点
1. 优点
（1）CSS 的优势体现在它简洁的代码上。对于一个大型网站来说，可以节省大
量带宽。而简洁的代码使得有效关键字在网页总代码中所占的比例提高，因此使用“Div+CSS”制作的符合 Web 标准的网站具有容易被搜索引擎搜索到的优势。
distinct查询（2）使用“Div+CSS”技术制作的网站改版更加方便简单，很多问题只需要改变CSS 而不需要改动程序。
（3）可以一次设计，多处发布。设计的作品不仅可以用于 Web 浏览器，还可以发布在其他设备或软件上，如 PowerPoint。
（4）可以更好、更轻松地控制网页布局。
（5）将设计部分剥离出来，放在一个单独的样式表文件中，可以减少网页无效的可能性。
（6）布局灵活性大。相比较而言，传统的表格布局只能遵循 table、tr、td 的格式，而 Div 可以遵循 div、ul（无序列表）、li（列表内容）格式，也可以遵循 ol（有序列表）、li 格式，还可以遵循 ul、li……格式，不过最好有序书写。
（7）如果对 JavaScript 比较精通，可以不必去写 ID，而用 class 就可以了。当客户端程序员写完程序后需要调整时，可以再利用它的 ID 进行控制。
（8）代码更简洁。在使用表格布局时，往往会生成很多垃圾代码，修饰性的样式和布局代码混合在一起，很不直观。
（9）以前一些必须通过图片转换才能实现的功能，现在只用 CSS 就可以轻松实现，从而加快了网页的下载速度。
2. 缺点
尽管“Div+CSS”技术具有一定的优势，不过其存在的问题也比较明显，主要表现在以下几个方面：
● 对于 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属性时，当前级的坐标原点则参照父级内容区的坐标原点进行定位。
有时还要使用“z.index”属性来设定容器的上下关系，数值范围是自然数，数值越大，容器位置越靠上。但是需要注意的是，父子关系是无法用“z.index”属性来设定上下关系的，一定是子级在上，父级在下。
（六）浮动定位
浮动定位在 CSS 中用“float”属性来表示。当“float”值为“Bone”时，表示对象不浮动；为“left”时，表示对象向左浮动；为“right”时，表示对象向右浮动。
如果使用浮动定位方式，为Div中的所有列都加上“float：left”属性，那么它们会挨个向左排列。如果让一个元素浮动，它会往右或者往左浮动直至遇到容器的边缘。如果向同一方向再浮动一个元素，它会浮动直至碰到前一个浮动元素的边缘。
（七）插入Div标签
Div标签与表格、图像等网页对象的插入方法类似，所不同的是，在插入Div标签的同时可以为其设置样式。
步骤 1  首先在文档页面上要插入 Div 标签的位置单击，以确定插入点位置。
步骤 2  将“常用”插入栏切换至“布局”插入栏，并单击其中的“插入Div标签”按钮，打开“插入Div标签”对话框。设置各项参数后，单击“确定”按钮，即可在插入点所在位置插入 Div 标签。
【任务实施】
在学习了“Div+CSS”技术的相关知识后，下面通过制作一个使用“Div+CSS”技术制作的茶文化网站来学习其在实际网页制作中的应用。
span 属性
（一）制作网站首页
1. 制作网页上部
步骤 1  将本项目素材中的“tea”文件夹拷贝至本地磁盘，然后在Dreamweaver中定义站点“tea”。
步骤 2  在站点“tea”中新建文档并重命名为“index.html”。
步骤 3  在“文件”面板中双击打开新建的文档，在文档编辑窗口中定位插入
点，然后将“插入”栏切换至“布局”栏，并单击其中的“插入Div标签”按钮。
步骤4  打开“插入Div标签”对话框，在“ID”编辑框中输入ID名（此处为“top”），然后单击“新建 CSS 样式”按钮。
步骤 5  打开“新建CSS规则”对话框，选择器类型默认为“高级”，选择器名为“#top”，在“定义在”列表区选择“新建样式表文件”，然后单击“确定”按钮。
步骤 6  打开“保存样式表文件为”对话框，在“保存在”下拉列表中选择网站根文件夹，在文件名编辑框中输入文件名（此处为“s1”），然后单击“保存”按钮。
步骤 7  打开“#top的CSS规则定义”对话框，在左侧的“分类”列表中选择“方框”，设置“宽”为“1 000”像素，然后单击“确定”按钮。
步骤 8  回到“插入Div标签”对话框，单击“确定”按钮，插入Div标签。切换至“常用”插入栏，单击“图像”按钮。
步骤 9  打开“选择图像源文件”对话框，在“查范围”下拉列表中选择图像所在文件夹（此处为网站根文件夹下的“images”文件夹），在文件列表中选择图像文件“main_01.jpg”，然后单击“确定”按钮。
步骤 10  插入图像，并将其上方的文本删除，效果如图所示。
步骤 11  单击图像，然后按向右方向键，将插入点置于图像后，参照前面的方法插入其余图片，效果如图所示。
2. 制作网页中部
步骤 1  接着上面的操作，为确保Div位置的准确性，单击“文档”工具栏中的“拆分”按钮，在文档窗口上方打开代码视图，对照代码进行后面的操作。
步骤 2  蓝奏云软件合集资料首先将插入点定位在前面插入的ID为top的Div内，然后单击“标签选择器”中的“div#top”，选中整个 Div。
步骤 3  按键盘上的向右方向键，将插入点置于Div后，然后单击“布局”插入栏中的“插入 Div 标签”按钮，如图所示。
步骤 4  打开“插入 Div 标签”对话框，在“ID”编辑框中输入 ID 名“content”，然后单击“新建 CSS 样式”按钮。
步骤5  打开“新建CSS规则”对话框，“选择器类型”默认为“高级”，选择器名为“#content”，在“定义在”列表区选择“s1.css”，然后单击“确定”按钮。
步骤6  打开“#content 的 CSS 规则定义”对话框，在“分类”列表中选择“背景”，然后设置背景颜为白“#FFFFFF”。
步骤 7  在“分类”列表中选择“方框”，设置“宽”为 1 000 像素，“高”为 140像素，然后单击“确定”按钮，插入 ID 为“content”的 Div。
步骤 8  参照前面的方法，对照代码将插入点置于Div内，在其中嵌套一个ID为“news”的 Div，并打开“#news 的 CSS 规则定义”对话框。
步骤 9  在“分类”列表中选择“方框”，设置“宽”为362像素，“浮动”为左对齐，然后单击“确定”按钮。
步骤 10  在 ID 为“news”的 Div 中插入图像“main_05.jpg”，并将其中的文本删除。
步骤 11  对照代码将插入点置于图片后方，然后单击“插入Div标签”按钮，在ID 为“news”的 Div 中嵌套一个 ID 为“newscontent”的 Div，并打开“#newscontent 的CSS规则定义”对话框。设置“字体”为宋体，“大小”为12像素，“行高”为20像素，颜为灰“#999999”。
步骤 12  在“分类”列表中选择“区块”，然后在“文本对齐”下拉列表中选择“左对齐”。
步骤 13  在“分类”列表中选择“方框”，然后设置“宽”为 362 像素。
步骤 14  在“分类”列表中选择“列表”，然后设置“类型”为“方块”，“位置”为“外”，最后单击“确定”按钮。
步骤 15  将 ID 为“newscontent”的 Div 中文本删除后输入新文本，并将这些文本分为不同的段落。之后选中文本，单击“属性”面板上的“项目列表”按钮，Div中的文本将应用前面设置的列表样式。
步骤 16  对照代码将插入点置于 ID 为“news”的 Div 后，继续在 ID 为“content”的Div 中嵌套一个 ID 为“center”的 Div，并打开“＃ center 的 CSS 规则定义”对话框。在“分类”列表中选择“方框”，设置“宽”为 315 像素，“浮动”为左对齐。
步骤 17  在 ID 为“center”指数函数的例子的 Div 中插入图像“main_06.jpg”，并将其中的文本删除。
步骤 18  将插入点置于 ID 为“center”的 Div 后，继续嵌套 ID 为“right”的 Div，并打开“#right 的 CSS 规则定义”对话框。
在“分类”列表中选择“方框”，设置“浮动”为“左对齐”，取消选择“填充”区域的“全部相同”复选框，设置“上”为22像素，“左”为19像素，之后单击“确定”按钮。
步骤 19  在 ID 为“right”的 Div 中插入图像“main_09.jpg”，这样网页中部就制作完成了。
3. 制作网页下部
网页下部的制作相对来说要简单很多，因为只需要插入一个Div，并在其中输入文本即可。
html个人网页完整代码div+css
步骤 1  接着上面的操作，对照代码将插入点置于ID为“content”的Div后，插入ID 为“bottom”的 Div，并打开“#bottom 的 CSS 规则定义”对话框，设置“大小”为12 像素，“颜”为灰“#999999”。
步骤 2  在“分类”列表中选择“背景”，设置“背景颜”为浅灰“#EEEEEE”。
步骤 3  在“分类”列表中选择“区块”，然后在“文本对齐”下拉列表中选择“居中”。
步骤 4  在“分类”列表中选择“方框”，然后设置“宽”为1 000 像素，“高”为30像素，取消选择“填充”区的“全部相同”复选框，设置“上”为10像素，最后单击“确定”按钮。
步骤 5  将ID为“bottom”oracle存储过程初学实例的Div中的原有文本删除，重新输入新文本，可见其自动套用了前面设置的样式。
步骤 6  分别保存网页文档和样式文件，然后在浏览器中预览文档，可以看到网页四周均有空白，且下方出现了滚动条。
4. 设置“body”样式
下面通过设置“body”样式，来解决网页四周的空白和滚动条问题。
步骤 1  单击“CSS 样式”面板下方的“新建 CSS 规则”按钮，打开“新建 CSS”
对话框，在“选择器类型”区选择“标签”，在“标签”下拉列表中选择“body”，在定义在”列表区选择“s1.css”，然后单击“确定”按钮。
步骤 2  打开“body的CSS规则定义”对话框，在左侧的“分类”列表中选择“区块”，然后在“文本对齐”下拉列表中选择“居中”，以使所有内容居中对齐。
步骤 3  在左侧的“分类”列表中选择“方框”，设置“边界”值为0，然后单击确定”按钮。
步骤 4  分别保存网页文档和样式文件，然后在浏览器中预览文档，可以看到网页左侧和上方的空白，以及下方的滚动条均已消失。
【任务实施】
接下来，请同学们参考首页制作步骤，完成网站子页。包含以下几个步骤：
1. 制作网页上部
2. 制作网页中部
3. 制作网页下部
效果图：
【知识拓展】初学Web标准的几个误区
初次接触Web标准的用户可能会受表格布局或其他一些问题的影响，常见问题及解决建议如下：
1. 不要用传统的表格思维来套 div
用惯了表格的用户可能会觉得，CSS布局就是将原来用table的地方用div来代替，原来是 table 嵌套，现在是 div 嵌套。这种观点是错误的。
应该跳出表格布局的禁锢，抛弃一个td接一个td放置内容的思维方式。按前文所述，Web标准的目的是将内容和表现完全分离。即在加入表现之前，页面里有的仅仅是内容，在没有修饰的情况下，它就是一张有一些文字和图像（图像是指内容中的图像，是有真正意义的图像，而非修饰性的图像）的简单页面，这些文字和图像仅仅是依次罗列下来，只有结构，没有任何样式。当加入表现，将所有修饰的图像作为背景，用CSS 来定义每一块内容的位置、字体、颜等时，才构成了一个完整的页面。
这样制作的页面才是内容与表现完全分离的，即抽掉CSS文件，剩下的就只是干净的内容。
2. 不必为每块内容都创建一个 id
内容都是有结构的，相同结构的内容可以用同一个样式来定义，如相同级别的标题、正文、图像等。对于多次引用的样式可以用class来定义，不需要全部用id；另外，也不是说只能用 div 布局，在需要的时候，完全可以用 p 来代替。
至于仅仅为了行高、间距，或者一个修饰性图像而增加的div，随着大家对CSS应用的熟练和理解，很快就会知道这是没有必要的。希望大家多研究CSS，做出最简练、最有效的样式表。
作业：
1．Web标准由哪几部分构成？
2．简述绝对定位与相对定位的含义？
3．Div标签中，“类”与“ID”有何区别？

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。