《CSSDiv布局PPT精选文档》由会员分享，可在线阅读，更多相关《CSSDiv布局PPT精选文档（52页珍藏版）》请在金锄头文库上搜索。
1、第8章CSS+Div布局网页设计与制作DreamweaverCC标准教程1.本章学习的主要内容：1.盒子模型2.布局技术3.“上中下”布局4.“左中右”布局2.8.1盒子模型盒子模型是CSS样式布局的重要概念。网页中元素都占据一定的空间，除了元素内容之外还包括元素周围的空间，一般地把元素和它周围空间所形成的矩形区域称为盒子（box）。从布局的角度看，网页是由很多盒子组成，根据需要将诸多盒子在网页中进行排列和分布，就形成了网页布局。3.8.1盒子模型8.1.1盒子结构8.1.2盒子属性4.8.1.1盒子结构盒子模型通过定义模型结构，描述网页元素的显示方式和元素之间的相互关系，确定网页元素在网页布
2、局中的空间和位置。5.8.1.1盒子结构盒子模型的结构由四个部分组成：content（内容）、padding（内边距或填充）、border（边框）和margin（外边距），如图8-1所示。6.8.1.2盒子属性在CSS样式中，将盒子模型的内边距、边框和外边距，按top、bottom、left、right的四个方向，分别进行定义和设置，描述盒子属性。7.8.1.2盒子属性例如，在网页中创建一个标签，ID标识为Div1，并在其中插入一个图像，代码如下：#apDiv1position:absolute;width:300px;height:181px; padding-top:15px;paddin
3、g-right:18px;padding-bottom:15px;padding-left:18px;border:30pxsolid#333;8.8.1.2盒子属性9.8.2布局方法在CSS+Div布局中，标签是盒子模型的主要载体，具有分割网页的功能。CSS样式中的position属性和float属性决定这些标签的相互关系和分布排列的位置。10.8.2布局技术8.2.1标签8.2.2position定位属性8.2.3浮动方式11.8.2.1标签一个块状容器类标签，即在和之间可以容纳各种HTML元素，同时也构成一个独立的矩形区域。无论在页面中使用多少个标签，标签之间仅存在并列关系和内嵌关系。1
4、2.8.2.1标签13.8.2.1标签使用div#box1height:120px;width:200px;background-color:#C93;margin:10px;padding:10px;#box2height:60px;width:100px;background-color:#F63;margin:10px;padding:10px;#box3height:100px;width:300px;background-color:#6CF;box1box2box314.8.2.2position定位属性position（定位）属性包括了四种属性值：static，relative，
5、absolute和fixed.Static静态定位为默认值，网页元素遵循HTML的标准定位规则，即网页各种元素按照“前后相继”的顺序进行排列和分布。Relative相对定位，网页元素也遵循HTML的标准定位规则，但需要为网页元素相对于原始的标准位置设置一定的偏移距离。CSS+Div的布局方式采用了标准定位规则的布局方式，这也是系统的默认方式。15.8.2.2position定位属性absolute绝对定位方式，网页元素不再遵循HTML的标准定位规则，脱离了“前后相继”的定位关系，以该元素的上级元素为基准设置偏移量进行定位。Fixed固定定位与绝对定位类似，也脱离了“前后相继”的定位规则，但元素
6、的定位是以浏览器窗口为基准进行。16.8.2.3浮动方式float属性包含三个属性值：Left控制网页元素向左浮动，Right控制网页元素向浮右动，None没有浮动。clear属性包括三个属性值：left清除向左浮动，right清除向浮右动，none没有清除。clear属性与float属性配合使用，清除各种浮动。17.8.2.3浮动方式无浮动18.8.2.3浮动方式#box1height:100px;width:150px;background-color:#F90;#box2height:100px;width:200px;background-color:#C30;#box3height:
7、100px;width:250px;background-color:#3FF;19.8.2.3浮动方式左右浮动20.8.2.3浮动方式#box1height:100px;width:150px;background-color:#F90;float:left;#box2height:100px;width:200px;background-color:#C30;float:left;#box3height:100px;width:250px;background-color:#3FF;float:right;21.8.2.3浮动方式全部左浮动22.8.2.3浮动方式#box1height:1
8、00px;width:150px;background-color:#F90;float:left;#box2height:100px;width:200px;background-color:#C30;float:left;#box3height:100px;width:250px;background-color:#3FF;float:left;23.8.2.3浮动方式使用左清除24.8.2.3浮动方式#box1height:100px;width:150px;background-color:#F90;float:left;#box2height:100px;width:200px;ba
9、ckground-color:#C30;float:left;#box3height:100px;width:250px;background-color:#3FF;float:left;clear:left;25.8.3“上中下”布局在“上中下”布局中，标签按照前后相继的顺序排列，分割网页空间，不需要使标签浮动，其大小和外观由CSS样式控制。26.8.3“上中下”布局8.3.1课堂案例-网页设计大赛8.3.2在Dreamweaver中插入标签27.8.3.1课堂案例-网页设计大赛案例学习目标：学习“上中下”布局的方法。案例知识要点：在【插入】面板【HTML】选项卡中，使用【Div】按钮创建网
10、页布局结构；在【CSS设计器】面板中，使用【添加选择器】按钮创建标签的ID样式，并采用缺省的【position】和【float】属性，完成“上中下”的布局。素材所在位置：光盘/案例素材/ch08/课堂案例-网页设计大赛。案例布局要求如图8-9所示，案例效果如图8-10所示。28.29.30.8.3.2在Dreamweaver中插入标签在【插入Div标签】对话框中，各个选项含义如下：【ID】：可以在下拉框中直接输入或选择一个名称，为标签设置网页中的唯一标识。【类】：可以在下拉框中直接输入或选择一个名称，为标签设置一个类样式，设置网页布局和外观。【新建CSS规则】：为标签新建一个ID样式或类样式。
11、【插入】：其各种选项决定了标签之间是并列关系还是嵌入关系，其选项包括：31.8.3.2在Dreamweaver中插入标签“在插入点”表示在插入点插入一个标签，嵌入已经存在的标签中，如果插入点前有内容，那么换行插入。“在选定内容旁换行”表示在该文字所在行插入一个标签，嵌入已经存在的标签中，保留原内容。“在标签之前”表示插入一个标签，与指定的标签形成并列关系。“在标签之后”表示插入一个标签，与指定的标签形成并列关系。32.8.3.2在Dreamweaver中插入标签“在开始标签之前”表示在标签之前，插入一个标签。“在开始标签之后”表示在标签之后，插入一个标签。33.8.4“左中右”布局在“左中右”
12、布局中，首先插入若干个标签，并按照前后相继顺序排列；然后，设置CSS样式的【float】和【clear】属性，使标签浮动，实现“左中右”的布局；最后，设置CSS样式其他属性控制标签的外观。34.8.4“左中右”布局8.4.1课堂案例-连锁餐厅8.4.2使用CSS样式布局35.8.4.1课堂案例-连锁餐厅案例学习目标：学习“左中右”布局的方法。案例知识要点：在【插入】面板【HTML】选项卡中，使用【Div】按钮，插入标签；在【插入Div】对话框中，使用【新建CSS规则】按钮，创建标签的相关样式，设置【position】、【float】和【clear】属性，完成“左中右”的网页布局。素材所在位置：
13、光盘/案例素材/ch08/课堂案例-连锁餐厅。案例布局要求如图8-38所示，案例效果如图8-39所示。36.37.38.8.4.2使用CSS样式布局1.在Dreamweaver中标签的浮动设置2.常用布局形式在CSS+Div布局中，将网页版面分割成左侧，中部和右侧三个部分的形式。将网页分割成左右两个部分。39.8.4.2使用CSS样式布局40.8.4.2使用CSS样式布局41.8.4.2使用CSS样式布局42.8.5练习案例8.5.1练习案例-电子产品8.5.2练习案例-装修公司43.8.5.1练习案例-电子产品案例练习目标：练习“上中下”布局的方法。案例操作要点：1创建文件名称为index.
14、html的文档，并将所有样式存放在product样式文档中。插入ID名称为container的标签，宽度为1000px，并居中对齐。2在container的标签中，插入ID名称为header，menu，banner，info和footer的5个标签，宽度均为1000px，高度分别为38px，34px，468px，165px和64px。3在menu的标签中，插入名称为nav的标签，宽度450px，高度34px，左外边距550px。44.8.5.1练习案例-电子产品4利用#menu样式为menu的标签添加图像背景。在#nav标签中，输入文字“公司介绍产品展示客户服务人员招募互动社区”，并设置#na
15、v样式，字体大小为16px，行高度为30px，颜色为#FFF。5设置#nava:link，#nava:visited样式属性，颜色为#FFF，文字装饰为无，设置#nava:hover样式属性，文字装饰为下划线，完成导航条的制作。6在ID名称为info的标签中，插入1*3表格，宽度为100%，将三个图像分别插入到单元格中，设置#info样式背景为黑色。素材所在位置：光盘/案例素材/ch08/练习案例-电子产品。案例布局要求如图8-67所示，案例效果如图8-68所示。45.46.47.8.5.2练习案例-装修公司案例练习目标：练习“左中右”布局的方法。案例操作要点：1创建文件名称为index.ht
16、ml的新文档，并将所有样式存放在decoration样式文档中。插入ID名称为container的标签，宽度为1000px，高度为860px，并居中对齐。2在container的标签中，插入ID名称为menu，info1，info2，info3和footer的5个标签，宽度和高度分别为1000px和107px，160px和670px，320px和670px，310px和670px，1000px和83px。其中ID名称为info1，info2，info3的标签为左浮动，ID名称为footer的标签取消左浮动。48.8.5.2练习案例-装修公司3在footer标签中，插入两个标签，其类样式名称为.
17、f1和.f2，其宽度分别为580px和280px，并设置它们为左浮动。4设置页面属性的背景为#CCC，边距为为0，字体大小为12px，文字颜色为#999。设置#container样式的背景为白色。5标题样式.text1，文本大小为30px，颜色为#451B08，左对齐；副标题样式.text2，文本大小为18px；职位标题文本样式.text3，文本大小14px，下部内边距5px，下部边框为实线，宽度为1px，颜色为#999。49.8.5.2练习案例-装修公司6设置#info1样式的左右内边距分别为85px；#info2样式的左右内边距为10px；#info3样式的左右内边距分别为10px，上部内边距为10px；.f1样式的上部和左侧外边距分别为20px和60px；.f2样式的上部和左侧外边距分别为30px和60px，字体为黑体，大小为20px，颜色为#66250F。素材所在位置：光盘/案例素材/ch08/练习案例-装修公司。案例布局要求如图8-69所示，案例效果如图8-70所示。50.51.52.
