实训二Div元素及布局应用

1、实训二 Div元素及布局应用本节内容1.1.什么是什么是DivDiv Div Div是一个容器，在是一个容器，在HTMLHTML页面中的每一个标签几乎都可以称为一个容页面中的每一个标签几乎都可以称为一个容器，例如器，例如标签。标签。 文本文本 标签作为一个容器，其中放入了文本。同样，标签作为一个容器，其中放入了文本。同样，DivDiv也是一个容器，也是一个容器，能够放置文本、图片等网页元素。例如：能够放置文本、图片等网页元素。例如： 文本文本 Div Div是是HTMLHTML中指定的专门用于布局设计的容器对象。传统表格的布局中指定的专门用于布局设计的容器对象。传统表格的布局之所以能够进行网页

2、的布局设计，完全依赖于表格对象之所以能够进行网页的布局设计，完全依赖于表格对象tabletable。在页面中。在页面中绘制一个由多个单元格组成的表格，然后在相应的单元格放置内容，并通绘制一个由多个单元格组成的表格，然后在相应的单元格放置内容，并通过对表格单元格的位置控制实现布局的目的，是表格式布局的核心。而过对表格单元格的位置控制实现布局的目的，是表格式布局的核心。而Div+CSSDiv+CSS布局是一种全新的布局方式，布局是一种全新的布局方式，DivDiv是这种布局的核心对象，使用是这种布局的核心对象，使用CSSCSS布局的页面不需要使用表格，仅从布局的页面不需要使用表格，仅从DivDiv的

3、使用上说，做一个简单的布局的使用上说，做一个简单的布局只需要使用只需要使用DivDiv与与CSSCSS。6.3使用使用Div+CSS布局网页布局网页 2.Div+CSS2.Div+CSS的优势的优势1 1）表现和内容相分离）表现和内容相分离2 2）提高搜索引擎对网页的索引效率）提高搜索引擎对网页的索引效率3 3）代码简洁，提高页面浏览速度）代码简洁，提高页面浏览速度4 4）易于维护和改版）易于维护和改版6.3使用使用Div+CSS布局网页布局网页 3 3插入插入DivDiv 在在Dreamweaver CS5Dreamweaver CS5中可以方便快捷地插入中可以方便快捷地插入DivDiv，以

4、插入一个，以插入一个“header”Divheader”Div标签为例。方法如下：标签为例。方法如下： 1 1）在）在“插入插入”面板中选择面板中选择“布局布局”选项卡，点击选项卡，点击“插入插入DivDiv标签标签”，打开打开“插入插入DivDiv标签标签”对话框，在对话框，在IDID中输入中输入“header” header” 。可以通过类。可以通过类（classclass）或）或idid设置样式。设置样式。 2 2）点击）点击“新建新建CSSCSS规则规则”按钮，打开新建按钮，打开新建CSSCSS规则对话框。可以看到规则对话框。可以看到“选择器类型选择器类型”自动选择自动选择“ID”ID

5、”，“选择器名称选择器名称”自动设置为自动设置为“#header”#header”，“规则定义规则定义”选择选择“新建样式表文件新建样式表文件”。点击。点击“确定确定”按按钮，将样式表文件保存到站点文件夹下，名称为钮，将样式表文件保存到站点文件夹下，名称为“cssfile.css”cssfile.css”。点击。点击“确定确定”按钮，打开按钮，打开CSSCSS规则定义对话框。规则定义对话框。 3 3）在）在“类别类别”中选择中选择“方框方框”项，宽为项，宽为700px700px，高为，高为60px60px，取消，取消“边边界界”中的中的“全部相同全部相同”复选框的对勾，复选框的对勾，“左左”、

6、“右右”设为设为“自动自动”，点，点击击“确定确定”按钮，再在按钮，再在“插入插入DivDiv标签标签”对话框中点击对话框中点击“确定确定”按钮。此按钮。此时窗口中插入一个时窗口中插入一个idid为为“header”Divheader”Div标签。标签。6.3使用使用Div+CSS布局网页布局网页 4 4DivDiv的嵌套的嵌套为了实现更为复杂的网页布局排版，为了实现更为复杂的网页布局排版，DivDiv可以进行多层嵌套，例如设置一可以进行多层嵌套，例如设置一个垂直布局的网页。个垂直布局的网页。DivDiv代码如下：代码如下：头部（头部（toptop）主体部分（主体部分（mainmain）底部（

7、底部（bottombottom）在代码中每个在代码中每个标签通过标签通过idid名称在名称在CSSCSS样式样式中定义宽度、高度等属性，中定义宽度、高度等属性，toptop、mainmain、bottombottom三个三个DivDiv之间属于并列关系，垂直排列，如要在主体部之间属于并列关系，垂直排列，如要在主体部分增加两列（侧面和主体内容），这就需要用到分增加两列（侧面和主体内容），这就需要用到DivDiv嵌套，嵌套，sidersider、containercontainer与与mainmain形成一种嵌套关系，形成一种嵌套关系，sidersider和和containercontainer被

8、控制左被控制左右显示。右显示。头部（头部（toptop） 侧面（侧面（sidersider） 主体内容（主体内容（containercontainer）底部（底部（bottombottom）6.3使用使用Div+CSS布局网页布局网页 6.3使用使用Div+CSS布局网页布局网页 5 5Div+CSSDiv+CSS布局的定位布局的定位 （1 1）浮动定位浮动定位 浮动定位是浮动定位是CSSCSS排版中非常重要的手段。排版中非常重要的手段。DivDiv可以左右移动，直到外边可以左右移动，直到外边缘碰到包含它的缘碰到包含它的父元素父元素的边界或另一个的边界或另一个DivDiv的边缘。的边缘。浮动定

9、位共有三种方式：浮动定位共有三种方式： 1 1）leftleft：文本或图像会移到父元素的左侧。：文本或图像会移到父元素的左侧。 2 2）rightright：文本或图像会移到父元素的右侧。：文本或图像会移到父元素的右侧。 3 3）nonenone：默认。文本或图像会显示于它在文档中出现的位置。：默认。文本或图像会显示于它在文档中出现的位置。6.3使用使用Div+CSS布局网页布局网页 （2 2）positionposition定位定位 PositionPosition定位与浮动定位一样，也是定位与浮动定位一样，也是CSSCSS排版中非常重要的概念。排版中非常重要的概念。 PositionPo

10、sition即块相对于其父块的位置和相对于它自身所在的位置。共有三种即块相对于其父块的位置和相对于它自身所在的位置。共有三种方式：方式： 1 1）绝对：将对象从文档流中拖出，通过）绝对：将对象从文档流中拖出，通过widthwidth、heightheight、leftleft、rightright、toptop和和bottombottom等属性与等属性与marginmargin、paddingpadding、borderborder进行绝对定位，进行绝对定位，绝对定位的元素可以有边界，但这些边界不压缩。而其层叠通过绝对定位的元素可以有边界，但这些边界不压缩。而其层叠通过z-indexz-ind

11、ex属性来定义。属性来定义。 2 2）固定：使元素固定在屏幕的某个位置，其包含块是可视区域本身，）固定：使元素固定在屏幕的某个位置，其包含块是可视区域本身，因此它不随滚动条的滚动而滚动。因此它不随滚动条的滚动而滚动。 3 3）相对：对象不重叠，但依据）相对：对象不重叠，但依据leftleft、rightright、toptop、bottombottom等属性在等属性在正常文档流中偏移位置。正常文档流中偏移位置。 4 4）静态：无特殊定位。）静态：无特殊定位。6.3使用使用Div+CSS布局网页布局网页 6 6CSSCSS盒模型组成盒模型组成 一个一个CSSCSS盒子模型是由盒子模型是由内容内容

12、(content)(content)、填充填充(padding(padding，也称内边距，也称内边距) )、边框边框(border)(border)、边界边界(margin(margin，也称外边距，也称外边距) )四个部分组成，如图所示。四个部分组成，如图所示。 为了方便理解，我们可以把盒子模型想象成现为了方便理解，我们可以把盒子模型想象成现实中上方开口的盒子，然后从正上往下俯视，边框实中上方开口的盒子，然后从正上往下俯视，边框相当于盒子的厚度，内容相对于盒子中所装物体的相当于盒子的厚度，内容相对于盒子中所装物体的空间，而填充相当于为防震而在盒子内填充的泡沫，空间，而填充相当于为防震而在盒

13、子内填充的泡沫，边界相当于在这个盒子周围要留出一定的空间，方边界相当于在这个盒子周围要留出一定的空间，方便取出。便取出。6.3使用使用Div+CSS布局网页布局网页 7 7DIV+CSSDIV+CSS布局网页的制作布局网页的制作流程流程 在此，以在此，以“送花常识送花常识”网页为例，从网页效果图分网页为例，从网页效果图分析，到布局规划再到使用析，到布局规划再到使用CSSCSS样式组建网页，最后完样式组建网页，最后完成布局进行分析。成布局进行分析。 （1 1）效果图分析）效果图分析 “ “送花常识送花常识”网页较为网页较为简单，是一个典型的简单，是一个典型的“一列一列三行三行”的布局形式，在中间

14、的布局形式，在中间行又有两个部分。因此将其行又有两个部分。因此将其分成四个部分：头部分、主分成四个部分：头部分、主要内容、侧面栏目和页脚部要内容、侧面栏目和页脚部分。分。6.3使用使用Div+CSS布局网页布局网页 （2 2）页面布局规划）页面布局规划 在网页中需要考虑今后改版可能遇到的情况以及其它页面的需要，尽量做到在网页中需要考虑今后改版可能遇到的情况以及其它页面的需要，尽量做到“代码代码”重用，尽可能地增加灵活性与适应性。将网页划分为三个区域：头部重用，尽可能地增加灵活性与适应性。将网页划分为三个区域：头部（headerheader）、主体部分（）、主体部分（mainmain）和页脚部分

15、（）和页脚部分（footerfooter）。其中主体部分（）。其中主体部分（mainmain）又分为主要内容（又分为主要内容（containercontainer）和侧面栏目（）和侧面栏目（sidersider），如图所示。各部分的英文），如图所示。各部分的英文名称即相应名称即相应DivDiv标签的标签的IDID。6.3使用使用Div+CSS布局网页布局网页 （3 3）切割及导出图片）切割及导出图片 经过上面的规划分析，对页面的构成已经非常清晰，下面开始切割图片，为经过上面的规划分析，对页面的构成已经非常清晰，下面开始切割图片，为页面提供必要的素材与页面提供必要的素材与“原料原料”。共需要切出

16、三张图片。共需要切出三张图片banner.gifbanner.gif、bg.gifbg.gif和和footer_bg.giffooter_bg.gif，后面两张图片将在网页中做平铺背景，如图所示。这一操作需要，后面两张图片将在网页中做平铺背景，如图所示。这一操作需要在在PhotoshopPhotoshop中完成。中完成。6.3使用使用Div+CSS布局网页布局网页 （4 4）页面主体结构规划）页面主体结构规划 页面的主体结构由三部分构成：页面的主体结构由三部分构成：headerheader、mainmain和和footerfooter。其中。其中mainmain包括包括containercontainer和和sidersider，containercontainer和和sidersider还包括其它标签。还包括其它标签。 6.3使用使用Div+CSS布局网页布局网页 （5 5）应用）应用CSSCSS样式组建网页样式组建网页 最后，在最后，在CSSCSS样式文件中通过样式文件中通过IDID设置设置DivDiv标签的宽度、高度、定位、边距、填标签的宽度、高度、定位、边距、填充