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

1、网页设计与制作教程（HTML+CSS+JavaScript）第2版机械工业出版社第6章 Div+CSS布局页面6.1 Div+CSS布局技术简介6.1.1 Div+CSS布局的优点采用Div+CSS布局方式的优点如下： Div用于搭建网站结构，CSS用于创建网站表现，将表现与内容分离。 缩短了网站的改版时间。 强大的字体控制和排版能力，使设计者能够更好的控制页面布局。 使提高搜索引擎对网页的索引效率。 用户可以将许多网页的风格格式同时更新。6.1 Div+CSS布局技术简介6.1.2 嵌套的Div实现页面排版Div标签是可以被嵌套的，这种嵌套的Div主要用于实现更为复杂的页面排版。下面以两个示

2、例说明嵌套的Div之间的关系。【演练6-1】未嵌套的Div容器，本例文件的Div布局效果如图6-1所示。【演练6-2】嵌套的Div容器，本例文件的Div布局效果如图6-2所示。6.2 典型的CSS布局样式6.2.1 两列布局样式页面布局整体上分为上、中、下3个部分，即header区域、container区域和footer区域。其中的container又包含mainBox（主要内容区域）和sideBox（侧边栏），布局示意图如图6-4所示。6.2 典型的CSS布局样式6.2.1 两列布局样式这里以最经典的三行两列宽度固定布局为例讲解最基础的固定分栏布局。【演练6-3】三行两列宽度固定布局。6.2

3、 典型的CSS布局样式6.2.1 两列布局样式【演练6-4】使用高度自适应的方法进行三行两列宽度固定布局。6.2 典型的CSS布局样式6.2.2 三列布局样式三列布局与两列布局非常相似，在处理方式上可以利用两列布局结构的方式处理，如图6-8所示的就是3个独立的列组合而成的三列布局。6.2 典型的CSS布局样式6.2.2 三列布局样式1两列定宽中间自适应的三列结构【演练6-5】两列定宽中间自适应的三列结构。6.2 典型的CSS布局样式6.2.2 三列布局样式2三列自适应结构【演练6-6】三列自适应结构。三列自适应结构的页面效果如图6-11所示。将浏览器窗口进行缩放，三列自适应宽度的效果，如图6-

4、12所示。6.3 综合案例制作光影世界最近活动局部页面6.3.1 页面布局规划通过成熟的构思与设计，光影世界最近活动局部页面的页面效果如图6-13所示，页面局部布局示意图如图6-14所示。6.3 综合案例制作光影世界最近活动局部页面6.3.2 页面的制作过程1前期准备（1）栏目目录结构在栏目文件夹下创建文件夹images和css，分别用来存放图像素材和外部样式表文件。（2）页面素材将本页面需要使用的图像素材存放在文件夹images下。（3）外部样式表在文件夹css下新建一个名为style.css的样式表文件。2制作页面6.4 实训制作家具商城产品明细局部页面6.4.1 页面布局规划通过成熟的构思与设计，家具商城产品明细局部内容的页面效果如图6-15所示，页面局部布局示意图如图6-16所示。6.4 实训制作家具商城产品明细局部页面6.4.2 页面的制作过程1前期准备（1）栏目目录结构在栏目文件夹下创建文件夹images和css，分别用来存放图像素材和外部样式表文件。（2）页面素材将本页面需要使用的图像素材存放在文件夹images下。（3）外部样式表在文件夹css下新建一个名为style.css的样式表文件。2制作页面习题6习题61制作如