Div应用.ppt

创建Div 菜单 插入栏 层嵌套、父Div与子Div 使用层面板 选择【窗口】→【AP元素】命令或按【F2】键，即可打开【AP元素】面板。 对AP Div进行重命名 修改元素的重叠顺序 选择AP Div元素 DIV元素的基本编辑 选中 拖动 对齐 调整 添加内容 层的属性设置 溢出 设置当内容超出层范围后内容的显示方式 剪辑 设置层的可见区域与边界的距离 Z轴 设置层在网页中的重叠顺序，值大的位于上方 Div的高级操作 时间轴 行为层 在其中可以添加各种行为，以便对时间轴进行控制 元素层 在其中可以添加一些网页元素，并通过添加关键帧和改变网页元素的属性来实现动画效果 Div的高级操作 将网页元素添加到时间轴上 选中要添加到时间轴上的层对象 拖动到时间轴的某一层中 注意：只有AP Div和图像可以添加到时间轴上，默认延长15帧，并在开始和结束位置各添加一个关键帧 Div高级操作 延长持续时间 增加关键帧 设置元素显示的时间段 什么是关键帧，作用如何？ 层与表格相互转换 为了解决低版本浏览器不支持AP Div，操作步骤 修改-转换-将AP Div转换为表格 修改-转换-将表格转换为AP Div Div+CSS网页布局 使用Div+CSS进行网页布局，不仅十分灵活，代码更简洁，而且提高了网页加载速度，已经成为当今网页设计的一项主流技术。 Div+CSS网页布局 CSS网页布局使用层叠样式表格式（而不是传统的HTML表格或框架）组织网页上的内容。CSS布局的基本构造块是Div标签，它是一个HTML标签，在大多数情况下用做文本、图像或其他页面元素的容器。我们在用Div+CSS进行布局时，将Div标签放在页面上，通过设定各个Div标签的属性（如位置、大小、背景和边距等）来构成页面的区块，再向这些区块中添加内容，从而构成完整的页面。 插入Div标签进行布局 使用Dreamweaver 实现CSS网页布局的关键步骤是对各Div的样式规则进行定义。我们一般在页面中插入Div标签的同时新建相应的CSS样式对该Div标签进行定义；也有的设计人员按照页面Div结构插入所有Div后，再统一定义各Div对应的CSS样式规则。 盒模型 W3C组织就建议把所有网页上的对象都放在一个盒(box)中，设计师可以通过创建定义来控制这个盒的属性，这些对像包括段落、列表、标题、图片以及层。 CSS+Div布局实例解析 float属性 float 属性定义元素在哪个方向浮动 四个值：left，right，none、inherit clear 三个值：left，right，both div style=width:100px;11111/divdiv style=width:150px2222/div CSS+Div布局实例解析 CSS+Div布局实例解析 CSS+Div布局实例解析 overflow属性 有四个值：visible (默认), hidden, scroll, 和auto 两个overflow的姐妹属性overflow-y 和overflow-x CSS+Div布局实例解析 CSS+Div布局实例解析 列左窄右宽、高度自适应+头部+导航+尾部 CSS+Div布局实例解析 body { font-family:Verdana; font-size:14px; margin:0; line-height:150%;} #container {margin:0 auto; width:900px;} #header { height:100px; background:#6cf; margin-bottom:5px;} #menu { height:30px; background:#09c; margin-bottom:5px;} #mainContent {} #sidebar { float:left; width:200px; background:#9ff; margin-bottom:5px;} #content { float:right; width:675px; padding:10px; background:#cff; margin-bottom:5px;}/*因为是固定宽度，采用左右浮动方法可有效避免ie 3像素bug*/ #footer { height:60px; background:#6cf;} .clearfloat { clear:both; height:0; font-size: 1px; line-height: 0px;} CSS+Div布局实例解析 列左窄右宽高度自适应且未知高度底部平齐、型+头部+导航+尾部 CSS+Div布局实例解析 CSS+Div布局实例解析 ove