Web前端开发实例教程——HTML5 CSS3 JavaScript 第9章 Div+CSS布局页面.pptVIP

第9章 Div+CSS布局页面 Web前端开发实例教程 ——HTML5+CSS3+JavaScript 9.1 Div+CSS布局理念 9.1.1 认识Div+CSS布局 采用Div+CSS布局方式的优点如下： ? Div用于搭建网站结构，CSS用于创建网站表现，将表现与内容分离。 ? 缩短了网站的改版时间。 ? 强大的字体控制和排版能力，使设计者能够更好的控制页面布局。 ? 使提高搜索引擎对网页的索引效率。 ? 用户可以将许多网页的风格格式同时更新。 9.1 Div+CSS布局理念 9.1.2 正确理解Web标准 1．表格布局的思维模式 初学者很容易认为Div+CSS布局就是将原来使用表格的地方用Div来代替，原来是表格嵌套，现在是Div嵌套，使用这种思维模式进行设计其效果并不理想，意义也不大。 2．标签的使用 HTML标签是用来定义结构的，不是用来实现“表现”的。 3．CSS与ID 在对页面进行布局时，不需要为每个元素都定义一个ID，并且不是每段内容都要用div标签进行布局，完全可以使用p标签加以代替。 9.1 Div+CSS布局理念 9.1.3 将页面用Div分块 Div标签是可以被嵌套的，这种嵌套的Div主要用于实现更为复杂的页面排版。下面以两个示例说明嵌套的Div之间的关系。 【例9-1】未嵌套的Div容器，本例文件的Div布局效果如图9-1所示。 【例9-2】嵌套的Div容器，本例文件的Div布局效果如图9-2所示。 9.2 典型的CSS布局样式 9.2.1 两列布局样式 页面布局整体上分为上、中、下3个部分，即header区域、container区域和footer区域。其中的container又包含mainBox（主要内容区域）和sideBox（侧边栏），布局示意图如图9-4所示。 9.2 典型的CSS布局样式 9.2.1 两列布局样式 这里以最经典的三行两列宽度固定布局为例讲解经典的两列布局。 【例9-3】三行两列宽度固定布局。 9.2 典型的CSS布局样式 9.2.1 两列布局样式 【例9-4】使用高度自适应的方法进行三行两列宽度固定布局。本例文件9-4.html在浏览器中的页面效果如图9-7所示。 9.2 典型的CSS布局样式 9.2.2 三列布局样式 三列布局在网页设计时更为常用，如图9-8所示。对于这种类型的布局，浏览者的注意力最容易集中在中栏的信息区域，其次才是左右两侧的信息。 9.2 典型的CSS布局样式 9.2.2 三列布局样式 1．两列定宽中间自适应的三列结构 【例9-5】两列定宽中间自适应的三列结构。效果如图9-11所示。 9.2 典型的CSS布局样式 9.2.2 三列布局样式 2．三列自适应结构 【例9-6】三列自适应结构，如图9-13所示。 9.3 综合案例——制作珠宝商城博客页面 9.3.1 页面布局规划 珠宝商城博客页面采用的是典型的三行两列宽度固定的布局模式，页面显示效果如图9-14所示，页面布局示意图如图9-15所示。 9.3 综合案例——制作珠宝商城博客页面 9.3.2 页面的制作过程 1．前期准备 （1）栏目目录结构 在栏目文件夹下创建文件夹images和css，分别用来存放图像素材和外部样式表文件。 （2）页面素材 将本页面需要使用的图像素材存放在文件夹images下。 （3）外部样式表 在文件夹css下新建一个名为style.css的样式表文件。 2．制作页面 （1）制作页面的CSS样式 （2）制作页面的网页结构代码 9.4 综合案例——制作珠宝商城网络服务中心页面 9.4.1 页面布局规划 珠宝商城网络服务中心的效果如图9-16所示，页面布局示意图如图9-17所示。 9.4.2 页面的制作过程 1．前期准备 （1）栏目目录结构 在栏目文件夹下创建文件夹images和css，分别用来存放图像素材和外部样式表文件。 （2）页面素材 将本页面需要使用的图像素材存放在文件夹images下。 （3）外部样式表 在文件夹css下新建一个名为div.css的样式表文件。 2．制作页面 （1）制作页面的CSS样式 （2）制作页面的网页结构代码 9.4 综合案例——制作珠宝商城网络服务中心页面 习题9 习题9 1．制作如图9-22所示的三行两列固定宽度型布局。 2．制作如图9-23所示的三行三列固定宽度型布局。 3．综合使用Div+CSS布局技术创建如图9-24所示的页面。 4．综合使用Div+CSS布局技术创建如图9-25所示的页面。 5．综合使用Div+CSS布局技术创建如图9-26所示的页面。