第七讲 Div应用.ppt

1、执行校长,李 伟,Div,企业网站制作(第七讲 ),课程回顾,CSS有哪几种类型？ 可以通过哪几种方式应用样式表？,本讲目录,层的创建与编辑 层的属性设置和高级操作 Div+CSS网页布局,本讲重点、难点,重点 层的创建与编辑 层的属性设置 难点 Div+CSS进行网页布局,创建Div,菜单 插入栏 层嵌套、父Div与子Div,使用层面板,选择【窗口】【AP元素】命令或按【F2】键，即可打开【AP元素】面板。 对AP Div进行重命名 修改元素的重叠顺序 选择AP Div元素,DIV元素的基本编辑,选中 拖动 对齐 调整 添加内容,层的属性设置,溢出 设置当内容超出层范围后内容的显示方式 剪辑

2、 设置层的可见区域与边界的距离 Z轴 设置层在网页中的重叠顺序，值大的位于上方,Div的高级操作,时间轴 行为层 在其中可以添加各种行为，以便对时间轴进行控制 元素层 在其中可以添加一些网页元素，并通过添加关键帧和改变网页元素的属性来实现动画效果,行为层,Div的高级操作,将网页元素添加到时间轴上 选中要添加到时间轴上的层对象 拖动到时间轴的某一层中 注意：只有AP Div和图像可以添加到时间轴上，默认延长15帧，并在开始和结束位置各添加一个关键帧,Div高级操作,延长持续时间 增加关键帧 设置元素显示的时间段 什么是关键帧，作用如何？,层与表格相互转换,为了解决低版本浏览器不支持AP Div

3、，操作步骤 修改-转换-将AP Div转换为表格 修改-转换-将表格转换为AP Div,Div+CSS网页布局,使用Div+CSS进行网页布局，不仅十分灵活，代码更简洁，而且提高了网页加载速度，已经成为当今网页设计的一项主流技术。,Div+CSS网页布局,CSS网页布局使用层叠样式表格式（而不是传统的HTML表格或框架）组织网页上的内容。CSS布局的基本构造块是Div标签，它是一个HTML标签，在大多数情况下用做文本、图像或其他页面元素的容器。我们在用Div+CSS进行布局时，将Div标签放在页面上，通过设定各个Div标签的属性（如位置、大小、背景和边距等）来构成页面的区块，再向这些区块中添加

4、内容，从而构成完整的页面。,插入Div标签进行布局,使用Dreamweaver 实现CSS网页布局的关键步骤是对各Div的样式规则进行定义。我们一般在页面中插入Div标签的同时新建相应的CSS样式对该Div标签进行定义；也有的设计人员按照页面Div结构插入所有Div后，再统一定义各Div对应的CSS样式规则。,盒模型,W3C组织就建议把所有网页上的对象都放在一个盒(box)中，设计师可以通过创建定义来控制这个盒的属性，这些对像包括段落、列表、标题、图片以及层。,CSS+Div布局实例解析,float属性 float 属性定义元素在哪个方向浮动 四个值：left，right，none、inher

5、it clear 三个值：left，right，both 111112222,两个Div如何在一行显示？,为第一个Div添加一个float：left,再改为两行显示呢？,为第二个Div加一个clear：left,CSS+Div布局实例解析,CSS+Div布局实例解析,CSS+Div布局实例解析,overflow属性 有四个值：visible (默认), hidden, scroll, 和auto 两个overflow的姐妹属性overflow-y 和overflow-x,CSS+Div布局实例解析,CSS+Div布局实例解析,列左窄右宽、高度自适应+头部+导航+尾部,CSS+Div布局实例解析

6、, This is the Header This is the Menu This is the sidebar This is the sidebar This is the sidebar This is the sidebar This is the sidebar This is the sidebar This is the sidebar 列 This is the footer ,body font-family:Verdana; font-size:14px; margin:0; line-height:150%; #container margin:0 auto; widt

7、h: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;/*因为是固定宽度，采

8、用左右浮动方法可有效避免ie 3像素bug*/ #footer height:60px; background:#6cf; .clearfloat clear:both; height:0; font-size: 1px; line-height: 0px;,CSS+Div布局实例解析,列左窄右宽高度自适应且未知高度底部平齐、型+头部+导航+尾部,CSS+Div布局实例解析, This is the Header This is the Menu This is the sidebar This is the sidebar This is the sidebar This is the si

9、debar This is the sidebar This is the sidebar This is the sidebar This is the footer ,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-bott

10、om:5px; #mainContent background:url(bg.gif) right 0 repeat-y; overflow:auto;zoom:1; margin-bottom:5px; #sidebar float:right; width:200px; background:#9ff; #content float:left; width:675px; padding:10px; background:#cff; #footer height:60px; background:#6cf; .clearfloat clear:both; height:0; font-siz

11、e: 1px; line-height: 0px;,CSS+Div布局实例解析,overflow属性清除浮动 设置overflow并不会在该元素上清除浮动，它将清除自己。意思就是，利用了overflow(auto或hidden)的元素，将会扩大到它需要的那么大以包抄它里面的浮动的子元素(而不是叠了起来(collapsing),CSS+Div布局实例解析,右侧固定左侧自适应宽度，未知高度+头部+导航+尾部,CSS+Div布局实例解析, This is the Header This is the Menu This is the sidebar 列 This is the ,body font-

12、family:Verdana; font-size:14px; margin:0; #container margin:0 auto; width:100%; #header height:100px; background:#9c6; margin-bottom:5px; #menu height:30px; background:#693; margin-bottom:5px; #mainContent margin-bottom:5px; #sidebar float:right; width:200px;background:#cf9; #content margin-right:20

13、5px !important; margin-right:202px; height:auto !important; height:100px; background:#ffa;/*当content设定高度后，3像素会跑到content外侧，这样，我们用!important修正在ie下向左多浮动2像素，加上3像素的bug正好是5像素，所以在火狐和IE下显示是一样的*/ #footer height:60px; background:#9c6; .clearfloat clear:both; height:0; font-size: 1px; line-height: 0px;,CSS+Div

14、布局实例解析,2列左侧固定右侧自适应宽度，未知高度且底部平齐+头部+导航+尾部,CSS+Div布局实例解析, This is the Header This is the Menu This is the sidebar 列 This is the ,body font-family:Verdana; font-size:14px; margin:0; #container margin:0 auto; width:100%; #header height:100px; background:#9c6; margin-bottom:5px; #menu height:30px; background:#693; margin-bottom:5px; #mainContent background:url(bg.gif) 0 0 repeat-y; overflow:auto;zoom:1; margin-bottom:5px; #sidebar float:left; width:200px;background:#cf9; #content margin-lef