《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.