第七讲 Div应用.ppt
《第七讲 Div应用.ppt》由会员分享,可在线阅读,更多相关《第七讲 Div应用.ppt(31页珍藏版)》请在得力文库 - 分享文档赚钱的网站上搜索。
1、1执行校长李 伟Div企业网站制作企业网站制作(第七讲第七讲 )2课程回顾课程回顾nCSS有哪几种类型?有哪几种类型?n可以通过哪几种方式应用样式表?可以通过哪几种方式应用样式表?3本讲目录本讲目录n层的创建与编辑层的创建与编辑n层的属性设置和高级操作层的属性设置和高级操作nDiv+CSS网页布局网页布局4本讲重点、难点本讲重点、难点n重点重点p层的创建与编辑p层的属性设置n难点难点pDiv+CSS进行网页布局5创建创建Divn菜单菜单n插入栏插入栏n层嵌套、父层嵌套、父DivDiv与子与子DivDiv6使用层面板使用层面板n选择选择【窗口窗口】【AP元素元素】命令或按命令或按【F2】键,键,
2、即可打开即可打开【AP元素元素】面板。面板。p对AP Div进行重命名p修改元素的重叠顺序p选择AP Div元素7DIV元素的基本编辑元素的基本编辑n选中选中n拖动拖动n对齐对齐n调整调整n添加内容添加内容8层的属性设置层的属性设置n溢出溢出p设置当内容超出层范围后内容的显示方式n剪辑剪辑p设置层的可见区域与边界的距离nZ轴轴p设置层在网页中的重叠顺序,值大的位于上方9Div的高级操作的高级操作n时间轴时间轴n行为层行为层p在其中可以添加各种行为,以便对时间轴进行控制n元素层元素层p在其中可以添加一些网页元素,并通过添加关键帧和改变网页元素的属性来实现动画效果时间轴名称时间轴名称当前帧当前帧行
3、为层行为层元素层元素层10Div的高级操作的高级操作n将网页元素添加到时间轴上将网页元素添加到时间轴上p选中要添加到时间轴上的层对象p拖动到时间轴的某一层中p注意:只有AP Div和图像可以添加到时间轴上,默认延长15帧,并在开始和结束位置各添加一个关键帧11Div高级操作高级操作n延长持续时间延长持续时间n增加关键帧增加关键帧n设置元素显示的时间段设置元素显示的时间段n什么是关键帧,作用如何?什么是关键帧,作用如何?12层与表格相互转换层与表格相互转换n为了解决低版本浏览器不支持为了解决低版本浏览器不支持AP Div,操作步骤,操作步骤p修改-转换-将AP Div转换为表格p修改-转换-将表
4、格转换为AP Div13Div+CSS网页布局网页布局n使用使用Div+CSSDiv+CSS进行网页布局,不仅十分灵活,代码进行网页布局,不仅十分灵活,代码更简洁,而且提高了网页加载速度,已经成为当更简洁,而且提高了网页加载速度,已经成为当今网页设计的一项主流技术。今网页设计的一项主流技术。14Div+CSS网页布局网页布局nCSSCSS网页布局使用层叠样式表格式(而不是传统的网页布局使用层叠样式表格式(而不是传统的HTMLHTML表格或框架)组织网页上的内容。表格或框架)组织网页上的内容。CSSCSS布局的布局的基本构造块是基本构造块是DivDiv标签,它是一个标签,它是一个HTMLHTML
5、标签,在大标签,在大多数情况下用做文本、图像或其他页面元素的容多数情况下用做文本、图像或其他页面元素的容器。我们在用器。我们在用Div+CSSDiv+CSS进行布局时,将进行布局时,将DivDiv标签放标签放在页面上,通过设定各个在页面上,通过设定各个DivDiv标签的属性(如位置、标签的属性(如位置、大小、背景和边距等)来构成页面的区块,再向大小、背景和边距等)来构成页面的区块,再向这些区块中添加内容,从而构成完整的页面。这些区块中添加内容,从而构成完整的页面。15插入插入Div标签进行布局标签进行布局 n使用使用Dreamweaver 实现实现CSS网页布局的关网页布局的关键步骤是对各键步
6、骤是对各Div的样式规则进行定义。的样式规则进行定义。我们一般在页面中插入我们一般在页面中插入Div标签的同时新标签的同时新建相应的建相应的CSS样式对该样式对该Div标签进行定义;标签进行定义;也有的设计人员按照页面也有的设计人员按照页面Div结构插入所结构插入所有有Div后,再统一定义各后,再统一定义各Div对应的对应的CSS样样式规则。式规则。16盒模型盒模型nW3CW3C组织就建议把所有网页上的对象都放在一个盒组织就建议把所有网页上的对象都放在一个盒(box)(box)中,设计师可以通过创建定义来控制这个盒中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落、列表、标题、图片
7、的属性,这些对像包括段落、列表、标题、图片以及层。以及层。17CSS+Div布局实例解析布局实例解析nfloat属性属性pfloat 属性定义元素在哪个方向浮动 p四个值:left,right,none、inheritnclearp三个值:left,right,bothn111112222两个两个Div如何在一行显示?如何在一行显示?为第一个为第一个Div添加一个添加一个float:left再改为两行显示呢?再改为两行显示呢?为第二个为第二个Div加一个加一个clear:left18CSS+Div布局实例解析布局实例解析19CSS+Div布局实例解析布局实例解析20CSS+Div布局实例解析布
8、局实例解析noverflow属性属性p有四个值:visible(默认),hidden,scroll,和auto p两个overflow的姐妹属性overflow-y 和overflow-x 21CSS+Div布局实例解析布局实例解析22CSS+Div布局实例解析布局实例解析n列左窄右宽、高度自适应列左窄右宽、高度自适应+头部头部+导航导航+尾部尾部23CSS+Div布局实例解析布局实例解析 This is the Header This is the Menu This is the sidebar This is the sidebar This is the sidebar This is
9、 the sidebarThis is the sidebarThis is the sidebarThis is the sidebar 列列 This is the footerbody 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
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 第七讲 Div应用 第七 Div 应用
限制150内