CSS+Div布局PPT课件

1、2021/3/91网页设计与制作Dreamweaver CC 标准教程2021/3/921. 盒子模型2. 布局技术3. “上中下”布局4. “左中右”布局2021/3/93盒子模型是CSS样式布局的重要概念。网页中元素都占据一定的空间，除了元素内容之外还包括元素周围的空间，一般地把元素和它周围空间所形成的矩形区域称为盒子（box）。从布局的角度看，网页是由很多盒子组成，根据需要将诸多盒子在网页中进行排列和分布，就形成了网页布局。2021/3/948.1.1 盒子结构8.1.2 盒子属性2021/3/95盒子模型通过定义模型结构，描述网页元素的显示方式和元素之间的相互关系，确定网页元素在网页布

2、局中的空间和位置。2021/3/96盒子模型的结构由四个部分组成：content（内容）、padding（内边距或填充）、border（边框）和margin（外边距），如图8-1所示。2021/3/97在CSS样式中，将盒子模型的内边距、边框和外边距，按top、bottom、left、right的四个方向，分别进行定义和设置，描述盒子属性。2021/3/98例如，在网页中创建一个标签，ID标识为Div1，并在其中插入一个图像，代码如下：#apDiv1 position:absolute; width:300px; height:181px; padding-top: 15px; padding

3、-right: 18px;padding-bottom: 15px;padding-left: 18px;border: 30px solid #333;2021/3/992021/3/910在CSS+Div布局中，标签是盒子模型的主要载体，具有分割网页的功能。CSS样式中的position属性和float属性决定这些标签的相互关系和分布排列的位置。2021/3/9118.2.1 标签8.2.2 position定位属性8.2.3 浮动方式2021/3/912一个块状容器类标签，即在和之间可以容纳各种HTML元素，同时也构成一个独立的矩形区域。无论在页面中使用多少个标签，标签之间仅存在并列关系

4、和内嵌关系。2021/3/9132021/3/914使用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 box2box32021/3/915position（定位）属性包括了四种属性值：

5、static，relative，absolute和fixed.Static静态定位为默认值，网页元素遵循HTML的标准定位规则，即网页各种元素按照“前后相继”的顺序进行排列和分布。Relative相对定位，网页元素也遵循HTML的标准定位规则，但需要为网页元素相对于原始的标准位置设置一定的偏移距离。CSS+Div的布局方式采用了标准定位规则的布局方式，这也是系统的默认方式。2021/3/916absolute绝对定位方式，网页元素不再遵循HTML的标准定位规则，脱离了“前后相继”的定位关系，以该元素的上级元素为基准设置偏移量进行定位。Fixed固定定位与绝对定位类似，也脱离了“前后相继”的定位

6、规则，但元素的定位是以浏览器窗口为基准进行。2021/3/917float属性包含三个属性值：Left控制网页元素向左浮动，Right控制网页元素向浮右动，None没有浮动。clear属性包括三个属性值：left清除向左浮动，right清除向浮右动，none没有清除。clear属性与float属性配合使用，清除各种浮动。2021/3/918无浮动2021/3/919#box1 height: 100px; width: 150px; background-color: #F90; #box2 height: 100px; width: 200px; background-color: #C30

7、; #box3 height: 100px; width: 250px; background-color: #3FF; 2021/3/920左右浮动2021/3/921#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

8、; 2021/3/922全部左浮动2021/3/923#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; 2021/3/924使用左清除2021/3/925#box1 height: 100px; width: 150p

9、x; 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; 2021/3/926在“上中下”布局中，标签按照前后相继的顺序排列，分割网页空间，不需要使标签浮动，其大小和外观由CSS样式控制。2021/3/9278.3.1 课堂案例-网页设计大赛8.3.2 在Drea

10、mweaver中插入标签2021/3/928案例学习目标：学习“上中下”布局的方法。案例知识要点：在【插入】面板【HTML】选项卡中，使用【Div】按钮 创建网页布局结构；在【CSS设计器】面板中，使用【添加选择器】按钮 创建标签的ID样式，并采用缺省的【position】和【float】属性，完成“上中下”的布局。素材所在位置：光盘/案例素材/ch08/课堂案例-网页设计大赛。案例布局要求如图8-9所示，案例效果如图8-10所示。2021/3/9292021/3/9302021/3/931在【插入Div标签】对话框中，各个选项含义如下：【ID】：可以在下拉框中直接输入或选择一个名称，为标签设

11、置网页中的唯一标识。【类】：可以在下拉框中直接输入或选择一个名称，为标签设置一个类样式，设置网页布局和外观。【新建CSS规则】：为标签新建一个ID样式或类样式。【插入】：其各种选项决定了标签之间是并列关系还是嵌入关系，其选项包括：2021/3/932“在插入点”表示在插入点插入一个标签，嵌入已经存在的标签中，如果插入点前有内容，那么换行插入。“在选定内容旁换行”表示在该文字所在行插入一个标签，嵌入已经存在的标签中，保留原内容。“在标签之前”表示插入一个标签，与指定的标签形成并列关系。“在标签之后”表示插入一个标签，与指定的标签形成并列关系。2021/3/933“在开始标签之前”表示在标签之前，

12、插入一个标签。“在开始标签之后”表示在标签之后，插入一个标签。2021/3/934在“左中右”布局中，首先插入若干个标签，并按照前后相继顺序排列；然后，设置CSS样式的【float】和【clear】属性，使标签浮动，实现“左中右”的布局；最后，设置CSS样式其他属性控制标签的外观。2021/3/9358.4.1 课堂案例-连锁餐厅8.4.2 使用CSS样式布局2021/3/936案例学习目标：学习“左中右”布局的方法。案例知识要点：在【插入】面板【HTML】选项卡中，使用【Div】按钮 ，插入标签；在【插入Div】对话框中，使用【新建CSS规则】按钮，创建标签的相关样式，设置【position

13、】、【float】和【clear】属性，完成“左中右”的网页布局。素材所在位置：光盘/案例素材/ch08/课堂案例-连锁餐厅。案例布局要求如图8-38所示，案例效果如图8-39所示。2021/3/9372021/3/9382021/3/9391. 在Dreamweaver中标签的浮动设置2. 常用布局形式在CSS+Div布局中，将网页版面分割成左侧，中部和右侧三个部分的形式。将网页分割成左右两个部分。2021/3/9402021/3/9412021/3/9422021/3/9438.5.1 练习案例-电子产品8.5.2 练习案例-装修公司2021/3/944案例练习目标：练习“上中下”布局的方

14、法。案例操作要点：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。2021/3/9454利用#menu样式为menu的标签添加图像背景。在#nav标签中，输入文字“公司介绍 产品展示 客户

15、服务 人员招募 互动社区”，并设置#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所示。2021/3/9462021/3/9472021/3/948案例练习目标：练习“左中右

16、”布局的方法。案例操作要点：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的标签取消左浮动。2021/3/9493在footer标签中，插入两个标签，其类样式名称为.f1和.f2，其宽度分别为580px和280px，并设置它们为左浮动。4设置页面属性的背景为#CCC，边距为为0，字体大小为12px，文字颜色为#999。设置#container样式的背景为白色。5标题样式.text1，文本大小为30px，颜色为#451B08，左对齐；副标题样式.text2，文本大小为18px；职位标题文本样式.text3，文本大小14px，下部内边距5px，下部边框为实线，宽度为1px，颜色为#999。2021/3/9506设置#info1