dreamweaver cs5 css教程,网页设计与制作——Dreamweaver CS5标准教程第12章 CSS+Div布局.pptx...-CSDN博客

第12章 CSS+Div布局;1. 盒子模型2. 布局技术3. “上中下”布局4. “左中右”布局;12.1.1盒子结构网页中元素都占据一定的空间，除了元素内容之外还包括元素周围的空间，一般地把元素和它周围空间所形成的矩形区域称为盒子(box)。从布局的角度看，网页是由很多盒子组成，根据需要将诸多盒子在网页中进行排列和分布，就形成了网页布局。;12.1.1盒子结构模型的结构由4个部分组成，content(内容)、padding(内边距或填充)、border(边框)和margin(外边距)。;12.1.2盒子属性在CSS样式中，将盒子???型的内边距、边框和外边距，按top、bottom、left、right的4个方向，分别进行定义和设置。;12.1.2盒子属性例如，在网页中创建一个层，ID标识为apDiv1，并在其中插入一个图像，代码如下：;12.1.2盒子属性;12.2.1

标签

一个块状容器类标签，即在

和

之间可以容纳各种HTML元素，同时也构成一个独立的矩形区域。无论在页面中使用多少个标签，

标签之间仅存在并列关系和内嵌关系。;12.2.1

标签;12.2.1

标签;12.2.2 position定位属性position(定位)属性包括了4种属性值：static，relative，absolute和fixed.Static静态定位为默认值，网页元素遵循HTML的标准定位规则，即网页各种元素按照“前后相继”的顺序进行排列和分布。Relative相对定位，网页元素也遵循HTML的标准定位规则，但需要为网页元素相对于原始的标准位置设置一定的偏移距离。;Absolute绝对定位方式，网页元素不再遵循HTML的标准定位规则，脱离了“前后相继”的定位关系，以该元素的上级元素为基准设置偏移量进行定位。Fixed固定定位与绝对定位类似，也脱离了“前后相继”的定位规则，但元素的定位是以浏览器窗口为基准进行。;12.2.3 浮动方式Float属性包含3个属性值：Left控制网页元素向左浮动，Right控制网页元素向浮右动，None没有浮动。Clear属性包括3个属性值：left清除向左浮动，right清除向浮右动，none没有清除。Clear属性与Float属性配合使用，清除各种浮动。;12.2.3 浮动方式无浮动;12.2.3 浮动方式;12.2.3 浮动方式左右浮动;12.2.3 浮动方式;12.2.3 浮动方式全部左浮动;12.2.3 浮动方式;12.2.3 浮动方式使用左清除;12.2.3 浮动方式;12.3.1课堂案例-网页设计大赛案例学习目标：学习“上中下”布局的方法。案例知识要点：在【插入】面板【布局】选项卡中，使用【插入Div标签】按钮创建网页布局结构；在【CSS样式】面板中，使用【新建CSS规则】按钮创建

标签的ID样式，并采用缺省的【position】和【float】属性，完成“上中下”的布局。素材所在位置：光盘/案例素材/ch12/课堂案例-网页设计大赛。案例布局要求如图12-9所示，案例效果如图12-10所示。;12.3.2 在Dreamweaver中插入

标签在【插入Div标签】对话框中，各个选项含义如下：【ID】：为

标签设置网页中的唯一标识。【类】：可以在下拉框中为

标签选择一个已经存在的类样式。【新建CSS规则】：为

标签新建一个以ID标识为名称的样式。【插入】：其各种选项决定了

标签之间是并列关系还是嵌入关系，其选项包括：;“在插入点”表示在插入点插入一个

标签，嵌入已经存在的

标签中，如果插入点前有内容，那么换行插入。“在选定内容旁换行”表示在该文字所在行插入一个