CSS+Div布局PPT课件VIP

精选,1,第8章CSS+Div布局,网页设计与制作DreamweaverCC标准教程,精选,2,本章学习的主要内容：,1.盒子模型2.布局技术3.“上中下”布局4.“左中右”布局,精选,3,8.1盒子模型,盒子模型是CSS样式布局的重要概念。网页中元素都占据一定的空间，除了元素内容之外还包括元素周围的空间，一般地把元素和它周围空间所形成的矩形区域称为盒子（box）。从布局的角度看，网页是由很多盒子组成，根据需要将诸多盒子在网页中进行排列和分布，就形成了网页布局。,精选,4,8.1盒子模型,8.1.1盒子结构8.1.2盒子属性,精选,5,8.1.1盒子结构,盒子模型通过定义模型结构，描述网页元素的显示方式和元素之间的相互关系，确定网页元素在网页布局中的空间和位置。,精选,6,8.1.1盒子结构,盒子模型的结构由四个部分组成：content（内容）、padding（内边距或填充）、border（边框）和margin（外边距），如图8-1所示。,精选,7,8.1.2盒子属性,在CSS样式中，将盒子模型的内边距、边框和外边距，按top、bottom、left、right的四个方向，分别进行定义和设置，描述盒子属性。,精选,8,8.1.2盒子属性,例如，在网页中创建一个标签，ID标识为Div1，并在其中插入一个图像，代码如下：,精选,9,8.1.2盒子属性,精选,10,8.2布局方法,在CSS+Div布局中，标签是盒子模型的主要载体，具有分割网页的功能。CSS样式中的position属性和float属性决定这些标签的相互关系和分布排列的位置。,精选,11,8.2布局技术,8.2.1标签8.2.2position定位属性8.2.3浮动方式,精选,12,8.2.1标签,一个块状容器类标签，即在和之间可以容纳各种HTML元素，同时也构成一个独立的矩形区域。无论在页面中使用多少个标签，标签之间仅存在并列关系和内嵌关系。,精选,13,8.2.1标签,精选,14,8.2.1标签,精选,15,8.2.2position定位属性,position（定位）属性包括了四种属性值：static，relative，absolute和fixed.Static静态定位为默认值，网页元素遵循HTML的标准定位规则，即网页各种元素按照“前后相继”的顺序进行排列和分布。Relative相对定位，网页元素也遵循HTML的标准定位规则，但需要为网页元素相对于原始的标准位置设置一定的偏移距离。CSS+Div的布局方式采用了标准定位规则的布局方式，这也是系统的默认方式。,精选,16,8.2.2position定位属性,absolute绝对定位方式，网页元素不再遵循HTML的标准定位规则，脱离了“前后相继”的定位关系，以该元素的上级元素为基准设置偏移量进行定位。Fixed固定定位与绝对定位类似，也脱离了“前后相继”的定位规则，但元素的定位是以浏览器窗口为基准进行。,精选,17,8.2.3浮动方式,float属性包含三个属性值：Left控制网页元素向左浮动，Right控制网页元素向浮右动，None没有浮动。clear属性包括三个属性值：left清除向左浮动，right清除向浮右动，none没有清除。clear属性与float属性配合使用，清除各种浮动。,精选,18,8.2.3浮动方式,无浮动,精选,19,8.2.3浮动方式,精选,20,8.2.3浮动方式,左右浮动,精选,21,8.2.3浮动方式,精选,22,8.2.3浮动方式,全部左浮动,精选,23,8.2.3浮动方式,精选,24,8.2.3浮动方式,使用左清除,精选,25,8.2.3浮动方式,精选,26,8.3“上中下”布局,在“上中下”布局中，标签按照前后相继的顺序排列，分割网页空间，不需要使标签浮动，其大小和外观由CSS样式控制。,精选,27,8.3“上中下”布局,8.3.1课堂案例-网页设计大赛8.3.2在Dreamweaver中插入标签,精选,28,8.3.1课堂案例-网页设计大赛,案例学习目标：学习“上中下”布局的方法。案例知识要点：在【插入】面板【HTML】选项卡中，使用【Div】按钮创建网页布局结构；在【CSS设计器】面板中，使用【添加选择器】按钮创建标签的ID样式，并采用缺省的【position】和【float】属性，完成“上中下”的布局。素材所在位置：光盘/案例素材/ch08/课堂案例-网页设计大赛。案例布局要求如图8-9所示，案例效果如图8-10所示。,精选,29,精选,30,精选,31,8.3.2在Dreamweaver中插入标签,在【插入Div标签】对话框中，各个选项含义如下：【ID】：可以在下拉框中直接输入或选择一个名称，为标签设置网页中的唯一标识。【类】：可以在下拉框中直接输入或选择一个名称，为标签设置一个类样式，设置网页布局和外观。【新建CSS规则】：为标签新建一个ID样式或类样式。【插入】：其各种选项决定了标签之间是并列关系还是嵌入关系，其选项包括：,精选,32,8.3.2在Dreamweaver中插入标签,“在插入点”表示在插入点插入一个标签，嵌入已经存在的标签中，如果插入点前有内容，那么换行插入。“在选定内容旁换行”表示在该文字所在行插入一个标签，嵌入已经存在的标签中，保留原内容。“在标签之前”表示插入一个标签，与指定的标签形成并列关系。“在标签之后”表示插入一个标签，与指定的标签形成并列关系。,精选,33,8.3.2在Dreamweaver中插入标签,“在开始标签之前”表示在标签之前，插入一个标签。“在开始标签之后”表示在标签之后，插入一个标签。,精选,34,8.4“左中右”布局,在“左中右”布局中，首先插入若干个标签，并按照前后相继顺序排列；然后，设置CSS样式的【float】和【clear】属性，使标签浮动，实现“左中右”的布局；最后，设置CSS样式其他属性控制标签的外观。,精选,35,8.4“左中右”布局,8.4.1课堂案例-连锁餐厅8.4.2使用CSS样式布局,精选,36,8.4.1课堂案例-连锁餐厅,案例学习目标：学习“左中右”布局的方法。案例知识要点：在【插入】面板【HTML】选项卡中，使用【Div】按钮，插入标签；在【插入Div】对话框中，使用【新建CSS规则】按钮，创建标签的相关样式，设置【position】、【float】和【clear】属性，完成“左中右”的网页布局。素材所在位置：光盘/案例素材/ch08/课堂案例-连锁餐厅。案例布局要求如图8-38所示，案例效果如图8-39所示。,精选,37,精选,38,精选,39,8.4.2使用CSS样式布局,1.在Dreamweaver中标签的浮动设置2.常用布局形式在CSS+Div布局中，将网页版面分割成左侧，中部和右侧三个部分的形式。将网页分割成左右两个部分。,精选,40,8.4.2使用CSS样式布局,精选,41,8.4.2使用CSS样式布局,精选,42,8.4.2使用CSS样式布局,精选,43,8.5练习案例,8.5.1练习案例-电子产品8.5.2练习案例-装修公司,精选,44,8.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。,精选,45,8.5.1练习案例-电子产品,4利用#menu样式为menu的标签添加图像背景。在#nav标签中，输入文字“公司介绍产品展示客户服务人员招募互动社区”，并设置#nav样式，字体大小为16px，行高度为30px，颜色为#FFF。5设置#nava:link，#nava:visited样式属性，颜色为#FFF，文字装饰为无，设置#nava:hover样式属性，文字装饰为下划线，完成导航条的制作。6在ID名称为info的标签中，插入1*3表格，宽度为100%，将三个图像分别插入到单元格中，设置#info样式背景为黑色。素材所在位置：光盘/案例素材/ch08/练习案例-电子产品。案例布局要求如图8-67所示，案例效果如图8-68所示。,精选,46,精选,47,精选,48,8.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的标签取消左浮动。,精选,49,8.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。,精选,50,8.5.2练习案例-装修公司,6设置#info1