网页设计与制作教程第6章-Div+CSS布局页面课件.ppt

1、网页设计与制作教程（HTML+CSS+JavaScript）第2版机械工业出版社第6章 Div+CSS布局页面6.1 Div+CSS布局技术简介布局技术简介6.1.1 Div+CSS布局的优点采用采用Div+CSS布局方式的优点如下：布局方式的优点如下：Div用于搭建网站结构，用于搭建网站结构，CSS用于创建网站表现，将表现与内容分离。用于创建网站表现，将表现与内容分离。缩短了网站的改版时间。缩短了网站的改版时间。强大的字体控制和排版能力，使设计者能够更好的控制页面布局。强大的字体控制和排版能力，使设计者能够更好的控制页面布局。使提高搜索引擎对网页的索引效率。使提高搜索引擎对网页的索引效率。用

2、户可以将许多网页的风格格式同时更新。用户可以将许多网页的风格格式同时更新。6.1 Div+CSS布局技术简介布局技术简介6.1.2 嵌套的Div实现页面排版Div标签是可以被嵌套的，这种嵌套的标签是可以被嵌套的，这种嵌套的Div主要用于实现更为复杂的页面主要用于实现更为复杂的页面排版。下面以两个示例说明嵌套的排版。下面以两个示例说明嵌套的Div之间的关系。之间的关系。【演练【演练6-1】未嵌套的】未嵌套的Div容器，本例文件的容器，本例文件的Div布局效果如图布局效果如图6-1所示。所示。【演练【演练6-2】嵌套的】嵌套的Div容器，本例文件的容器，本例文件的Div布局效果如图布局效果如图6-

3、2所示。所示。6.2 典型的典型的CSS布局样式布局样式6.2.1 两列布局样式页面布局整体上分为上、中、下页面布局整体上分为上、中、下3个部分，即个部分，即header区域、区域、container区区域和域和footer区域。其中的区域。其中的container又包含又包含mainBox（主要内容区域）和（主要内容区域）和sideBox（侧边栏），布局示意图如图（侧边栏），布局示意图如图6-4所示。所示。6.2 典型的典型的CSS布局样式布局样式6.2.1 两列布局样式这里以最经典的三行两列宽度固定布局为例讲解最基础的固定分栏布局。这里以最经典的三行两列宽度固定布局为例讲解最基础的固定分栏

4、布局。【演练【演练6-3】三行两列宽度固定布局。】三行两列宽度固定布局。6.2 典型的典型的CSS布局样式布局样式6.2.1 两列布局样式【演练【演练6-4】使用高度自适应的方法进行三行两列宽度固定布局。】使用高度自适应的方法进行三行两列宽度固定布局。6.2 典型的典型的CSS布局样式布局样式6.2.2 三列布局样式三列布局与两列布局非常相似，在处理方式上可以利用两列布局结构的三列布局与两列布局非常相似，在处理方式上可以利用两列布局结构的方式处理，如图方式处理，如图6-8所示的就是所示的就是3个独立的列组合而成的三列布局。个独立的列组合而成的三列布局。6.2 典型的典型的CSS布局样式布局样式

5、6.2.2 三列布局样式1两列定宽中间自适应的三列结构两列定宽中间自适应的三列结构【演练【演练6-5】两列定宽中间自适应的三列结构。】两列定宽中间自适应的三列结构。6.2 典型的典型的CSS布局样式布局样式6.2.2 三列布局样式2三列自适应结构三列自适应结构【演练【演练6-6】三列自适应结构。三列自适应结构的页面效果如图】三列自适应结构。三列自适应结构的页面效果如图6-11所示。所示。将浏览器窗口进行缩放，三列自适应宽度的效果，如图将浏览器窗口进行缩放，三列自适应宽度的效果，如图6-12所示。所示。6.3 综合案例综合案例制作光影世界最近活动局部页面制作光影世界最近活动局部页面6.3.1 页

6、面布局规划通过成熟的构思与设计，光影世界最近活动局部页面的页面效果如图通过成熟的构思与设计，光影世界最近活动局部页面的页面效果如图6-13所示，页面局部布局示意图如图所示，页面局部布局示意图如图6-14所示。所示。6.3 综合案例综合案例制作光影世界最近活动局部页面制作光影世界最近活动局部页面6.3.2 页面的制作过程1前期准备前期准备（1）栏目目录结构）栏目目录结构在栏目文件夹下创建文件夹在栏目文件夹下创建文件夹images和和css，分别用来存放图像素材和外，分别用来存放图像素材和外部样式表文件。部样式表文件。（2）页面素材）页面素材将本页面需要使用的图像素材存放在文件夹将本页面需要使用的

7、图像素材存放在文件夹images下。下。（3）外部样式表）外部样式表在文件夹在文件夹css下新建一个名为下新建一个名为style.css的样式表文件。的样式表文件。2制作页面制作页面6.4 实训实训制作家具商城产品明细局部页面制作家具商城产品明细局部页面6.4.1 页面布局规划通过成熟的构思与设计，家具商城产品明细局部内容的页面效果如图通过成熟的构思与设计，家具商城产品明细局部内容的页面效果如图6-15所示，页面局部布局示意图如图所示，页面局部布局示意图如图6-16所示。所示。6.4 实训实训制作家具商城产品明细局部页面制作家具商城产品明细局部页面6.4.2 页面的制作过程1前期准备前期准备（

8、1）栏目目录结构）栏目目录结构在栏目文件夹下创建文件夹在栏目文件夹下创建文件夹images和和css，分别用来存放图像素材和外，分别用来存放图像素材和外部样式表文件。部样式表文件。（2）页面素材）页面素材将本页面需要使用的图像素材存放在文件夹将本页面需要使用的图像素材存放在文件夹images下。下。（3）外部样式表）外部样式表在文件夹在文件夹css下新建一个名为下新建一个名为style.css的样式表文件。的样式表文件。2制作页面制作页面习题习题6习题61制作如图制作如图6-17所示的两列固定宽度型布局。所示的两列固定宽度型布局。2制作如图制作如图6-18所示的三列固定宽度居中型布局。所示的三列固定宽度居中型布局。3综合使用综合使用Div+CSS布局技术创建如图布局技术创建如图6-19所示的博客页面。所示的博客页面。