资源简介

3.2. 6 应用Div+CSS技术布局网页

教学目标

了解Div技术。
能够使用Div技术快速的对页面进行布局。
知道三种布局方式的区别。

教学
重难点
使用Div技术对页面进行布局
教学资源
网站设计素材、网络教室
教学过程
教师活动
学生活动
导


入



提问：
在Dreamweaver中我们学习了哪些方法来对网页进行布局？

这两种方法各有什么优缺点呢？


展示用表格布局和Div+CSS两种方式制作的网页，请大家来说一说使用哪种方式更好？
1.学会了使用表格布局和框架布局网页两种方法。

2．表格用于划分页面区域，而框架用于分割浏览器窗口。
框架的优点：不需要为每个页面重新加载导航条。表格的优点：有很好的兼容性，可被绝大多数浏览器支持，使用表格会使页面结构清晰，布局整齐。

新


授

一、三种布局方式的区别。　　
1、div+css和表格相比较，其优点是其布局定位简单，表格布局需要使用文字做内容，当想修改部分内容就要改动整个表格甚至真个界面，不利于后期的维护和前期的开发。　　
2、div+css提升了网页访问速度，div+css布局较传统的Table布局比较，减少了许多代码，其浏览访问速度自然得以提升，从而提升了网站的用户体验度。　　
3、div+css有利于优化。采用div-css布局的网站对于搜索引擎很是友好，简洁、结构化的代码更加有利于突出重点和适合搜索引擎抓取。

二、使用Div标签布局网页
Div标签是HTML中的一个元素，用来为HTML文档内大块（block - level）的内容提供结构和背景的元素。Div的起始标签和结束标签之间的所有内容都是属于这个块的，其中所包含元素的特性由Div标签的属性来控制，或者是通过使用样式表格式化这个块来进行控制。

三、实践出真知
1.启动Dreamweaver?，打开已有的“dongwu”站点，新建页面并选择“设计”视图。
2.执行“插入→布局对象→Div标签”命令，出现“插入Div标签”对话框，在ID栏中可输入名称，单击“确定”按钮。
3.网页文档编辑区出现如图3-2-30所示内容：Div标签以一个框的形式出现在文档中，并带有占位符文本。将指针移到该框的边缘上时，Dreamweaver会高亮显示该框，单击后即可选中该Div标签。另外，单击状态栏上相应标签，也可进行Div标签的选择。
4.将插入点置于Div标签中的文字后，执行“插入→布局对象→Div标签”命令，便实现了标签嵌套的效果，类似于表格的嵌套。

















学生了解什么是Div标签












根据老师讲解，学生动手操作。
课堂评价

在4个小组中选出两个好的作品进行展示，并让学生说一说他的优点是什么，最后选出全班最优秀的作品进行表扬。
课堂小结

通过以上的学习，我们知道了现在主流的网站均采用Div+CSS方法进行布局，在今后的课程中，我们要进一步加深学习，以便做出更加出色的网站。
教学反思

展开更多......

收起↑