CSS+Div布局.ppt

第8章 CSS+Div布局网页设计与制作Dreamweaver CC 标准教程1本章学习的主要内容：1.盒子模型2.布局技术3.“上中下”布局4.“左中右”布局28.1 盒子模型盒子模型是CSS样式布局的重要概念。网页中元素都占据一定的空间，除了元素内容之外还包括元素周围的空间，一般地把元素和它周围空间所形成的矩形区域称为盒子（box）。从布局的角度看，网页是由很多盒子组成，根据需要将诸多盒子在网页中进行排列和分布，就形成了网页布局。38.1 盒子模型8.1.1 盒子结构8.1.2 盒子属性48.1.1 盒子结构盒子模型通过定义模型结构，描述网页元素的显示方式和元素之间的相互关系，确定网页元素在网页布局中的空间和位置。58.1.1 盒子结构盒子模型的结构由四个部分组成：content（内容）、padding（内边距或填充）、border（边框）和margin（外边距），如图8-1所示。68.1.2 盒子属性在CSS样式中，将盒子模型的内边距、边框和外边距，按top、bottom、left、right的四个方向，分别进行定义和设置，描述盒子属性。78.1.2 盒子属性例如，在网页中创建一个标签，ID标识为Div1，并在其中插入一个图像，代码如下：#apDiv1 position:absolute;width:300px;height:181px;padding-top:15px;padding-right:18px;padding-bottom:15px;padding-left:18px;border:30px solid#333;88.1.2 盒子属性98.2 布局方法在CSS+Div布局中，标签是盒子模型的主要载体，具有分割网页的功能。CSS样式中的position属性和float属性决定这些标签的相互关系和分布排列的位置。108.2 布局技术8.2.1 标签8.2.2 position定位属性8.2.3 浮动方式118.2.1 标签一个块状容器类标签，即在和之间可以容纳各种HTML元素，同时也构成一个独立的矩形区域。无论在页面中使用多少个标签，标签之间仅存在并列关系和内嵌关系。128.2.1 标签138.2.1 标签使用div#box1 height:120px;width:200px;background-color:#C93;margin:10px;padding:10px;#box2 height:60px;width:100px;background-color:#F63;margin:10px;padding:10px;#box3 height:100px;width:300px;background-color:#6CF;box1 box2box3148.2.2 position定位属性position（定位）属性包括了四种属性值：static，relative，absolute和fixed.Static静态定位为默认值，网页元素遵循HTML的标准定位规则，即网页各种元素按照“前后相继”的顺序进行排列和分布。Relative相对定位，网页元素也遵循HTML的标准定位规则，但需要为网页元素相对于原始的标准位置设置一定的偏移距离。CSS+Div的布局方式采用了标准定位规则的布局方式，这也是系统的默认方式。158.2.2 position定位属性absolute绝对定位方式，网页元素不再遵循HTML的标准定位规则，脱离了“前后相继”的定位关系，以该元素的上级元素为基准设置偏移量进行定位。Fixed固定定位与绝对定位类似，也脱离了“前后相继”的定位规则，但元素的定位是以浏览器窗口为基准进行。168.2.3 浮动方式float属性包含三个属性值：Left控制网页元素向左浮动，Right控制网页元素向浮右动，None没有浮动。clear属性包括三个属性值：left清除向左浮动，right清除向浮右动，none没有清除。clear属性与float属性配合使用，清除各种浮动。178.2.3 浮动方式无浮动188.2.3 浮动方式#box1 height:100px;width:150px;background-color:#F90;#box2 height:100px;width:200px;background-color:#C30;#box3 height:100px;width:250px;background-color:#3FF;198.2.3 浮动方式左右浮动208.2.3 浮动方式#box1 height:100px;width:150px;background-color:#F90;float:left;#box2 height:100px;width:200px;background-color:#C30;float:left;#box3 height:100px;width:250px;background-color:#3FF;float:right;218.2.3 浮动方式全部左浮动228.2.3 浮动方式#box1 height:100px;width:150px;background-color:#F90;float:left;#box2 height:100px;width:200px;background-color:#C30;float:left;#box3 height:100px;width:250px;background-color:#3FF;float:left;238.2.3 浮动方式使用左清除248.2.3 浮动方式#box1 height:100px;width:150px;background-color:#F90;float:left;#box2 height:100px;width:200px;background-color:#C30;float:left;#box3 height:100px;width:250px;background-color:#3FF;float:left;clear:left;258.3“上中下”布局在“上中下”布局中，标签按照前后相继的顺序排列，分割网页空间，不需要使标签浮动，其大小和外观由CSS样式控制。268.3“上中下”布局8.3.1 课堂案例-网页设计大赛8.3.2 在Dreamweaver中插入标签278.3.1课堂案例-网页设计大赛案例学习目标：学习“上中下”布局的方法。案例知识要点：在【插入】面板HTML】选项卡中，使用【Div】按钮 创建网页布局结构；在【CSS设计器】面板中，使用【添加选择器】按钮 创建标签的ID样式，并采用缺省的【position】和【float】属性，完成“上中下”的布局。素材所在位置：光盘/案例素材/ch08/课堂案例-网页设计大赛。案例布局要求如图8-9所示，案例效果如图8-10所示。2829308.3.2 在Dreamweaver中插入标签在【插入Div标签】对话框中，各个选项含义如下：【ID】：可以在下拉框中直接输入或选择一个名称，为标签设置网页中的唯一标识。【类】：可以在下拉框中直接输入或选择一个名称，为标签设置一个类样式，设置网页布局和外观。【新建CSS规则】：为标签新建一个ID样式或类样式。【插入】：其各种选项决定了标签之间是并列关系还是嵌入关系，其选项包括：318.3.2 在Dreamweaver中插入标签“在插入点”表示在插入点插入一个标签，嵌入已经存在的标签中，如果插入点前有内容，那么换行插入。“在选定内容旁换行”表示在该文字所在行插入一个标签，嵌入已经存在的标签中，保留原内容。“在标签之前”表示插入一个标签，与指定的标签形成并列关系。“在标签之后”表示插入一个标签，与指定的标签形成并列关系。328.3.2 在Dreamweaver中插入标签“在开始标签之前”表示在标签之前，插入一个标签。“在开始标签之后”表示在标签之后，插入一个标签。338.4 “左中右”布局在“左中右”布局中，首先插入若干个标签，并按照前后相继顺序排列；然后，设置CSS样式的【float】和【clear】属性，使标签浮动，实现“左中右”的布局；最后，设置CSS样式其他属性控制标签的外观。348.4 “左中右”布局8.4.1 课堂案例-连锁餐厅8.4.2 使用CSS样式布局358.4.1课堂案例-连锁餐厅案例学习目标：学习“左中右”布局的方法。案例知识要点：在【插入】面板【HTML】选项卡中，使用【Div】按钮，插入标签；在【插入Div】对话框中，使用【新建CSS规则】按钮，创建标签的相关样式，设置【position】、【float】和【clear属性，完成“左中右”的网页布局。素材所在位置：光盘/案例素材/ch08/课堂案例-连锁餐厅。案例布局要求如图8-38所示，案例效果如图8-39所示。3637388.4.2 使用CSS样式布局1.在Dreamweaver中标签的浮动设置2.常用布局形式在CSS+Div布局中，将网页版面分割成左侧，中部和右侧三个部分的形式。将网页分割成左右两个部分。398.4.2 使用CSS样式布局408.4.2 使用CSS样式布局418.4.2 使用CSS样式布局428.5 练习案例8.5.1 练习案例-电子产品8.5.2 练习案例-装修公司438.5.1练习案例-电子产品案例练习目标：练习“上中下”布局的方法。案例操作要点：1创建文件名称为index.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。448.5.1 练习案例-电子产品4利用#menu样式为menu的标签添加图像背景。在#nav标签中，输入文字“公司介绍 产品展示 客户服务 人员招募 互动社区”，并设置#nav样式，字体大小为16px，行高度为30px，颜色为#FFF。5设置#nav a:link，#nav a:visited样式属性，颜色为#FFF，文字装饰为无，设置#nav a:hover样式属性，文字装饰为下划线，完成导航条的制作。6在ID名称为info的标签中，插入1*3表格，宽度为100%，将三个图像分别插入到单元格中，设置#info样式背景为黑色。素材所在位置：光盘/案例素材/ch08/练习案例-电子产品。案例布局要求如图8-67所示，案例效果如图8-68所示。4546478.5.2 练习案例-装修公司案例练习目标：练习“左中右”布局的方法。案例操作要点：1创建文件名称为index.html的新文档，并将所有样式存放在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的标签取消左浮动。488.5.2练习案例-装修公司3在footer标签中，插入两个标签，其类样式名称为.f1和.f2，其宽度分别为580px和280px，并设置它们为左浮动。4设置页面属性的背景为#CCC，边距为为0，字体大小为12px，文字颜色为#999。设置#container样式的背景为白色。5标题样式.text1，文本大小为30px，颜色为#451B08，左对齐；副标题样式.text2，文本大小为18px；职位标题文本样式.text3，文本大小14px，下部内边距5px，下部边框为实线，宽度为1px，颜色为#999。498.5.2 练习案例-装修公司6设置#info1样式的左右内边距分别为85px；#info2样式的左右内边距为10px；#info3样式的左右内边距分别为10px，上部内边距为10px；.f1样式的上部和左侧外边距分别为20px和60px；.f2样式的上部和左侧外边距分别为30px和60px，字体为黑体，大小为20px，颜色为#66250F。素材所在位置：光盘/案例素材/ch08/练习案例-装修公司。案例布局要求如图8-69所示，案例效果如图8-70所示。505152