使用表格和Div布局网页.pptx
《使用表格和Div布局网页.pptx》由会员分享,可在线阅读,更多相关《使用表格和Div布局网页.pptx(91页珍藏版)》请在咨信网上搜索。
1、第五章第五章 使用表格和使用表格和Div布局网页布局网页5.1表格表格一、布局表格一、布局表格在网页的设计中,非常重要的一点就是在网页的设计中,非常重要的一点就是网页的布局,也就是网页中的文字、图网页的布局,也就是网页中的文字、图像与动画等对象如何安排像与动画等对象如何安排通常在插入对象以前先进行区域分割。通常在插入对象以前先进行区域分割。区域分割可以使用框架、层或表格,使区域分割可以使用框架、层或表格,使用最多的是表格。用最多的是表格。第五章第五章 使用表格和使用表格和Div布局网页布局网页在在DW8“布局布局”栏提供了栏提供了“布局表格布局表格”和和“绘制布局单元格绘制布局单元格”两个布局
2、工具。两个布局工具。使用它们可以方便地制作出网页布局的使用它们可以方便地制作出网页布局的表格。布局工具栏,如下图所示:表格。布局工具栏,如下图所示:第五章第五章 使用表格和使用表格和Div布局网页布局网页1、创建布局表格、创建布局表格2、创建布局单元格、创建布局单元格 如果没有绘制布局表格就绘制布局单元如果没有绘制布局表格就绘制布局单元格,则会自动产生一个布局表格。格,则会自动产生一个布局表格。第五章第五章 使用表格和使用表格和Div布局网页布局网页注意:注意:(1)不可以在布局单元格内绘制布局表)不可以在布局单元格内绘制布局表格和布局单元格。格和布局单元格。(2)不能将单元格移出所在的布局表
3、格,)不能将单元格移出所在的布局表格,也不能将单元格移到其他单元格之上。也不能将单元格移到其他单元格之上。(3)当一个行划分了若干单元格时,必须当一个行划分了若干单元格时,必须先用布局表格,后用布局单元格先用布局表格,后用布局单元格第五章第五章 使用表格和使用表格和Div布局网页布局网页3、布局表格属性、布局表格属性第五章第五章 使用表格和使用表格和Div布局网页布局网页4、布局单元格属性、布局单元格属性水平的默认值为左对齐水平的默认值为左对齐垂直的默认值为居中对齐垂直的默认值为居中对齐第五章第五章 使用表格和使用表格和Div布局网页布局网页布局表格菜单和布局单元格菜单:布局表格菜单和布局单元
4、格菜单:布局表格菜单布局表格菜单布局单元格菜单布局单元格菜单第五章第五章 使用表格和使用表格和Div布局网页布局网页清除所有高度:可以将布局表格内的单清除所有高度:可以将布局表格内的单元格的高(即单元格顶部与布局表格顶元格的高(即单元格顶部与布局表格顶部的间距)清除。如果布局表格内没有部的间距)清除。如果布局表格内没有单元格,则自动建立充满布局表格的单单元格,则自动建立充满布局表格的单元格。元格。第五章第五章 使用表格和使用表格和Div布局网页布局网页使所有宽度一致:使所有布局单元格的使所有宽度一致:使所有布局单元格的宽度一样宽度一样移除所有分隔符图像:删除所有的间隔移除所有分隔符图像:删除所
5、有的间隔图像图像第五章第五章 使用表格和使用表格和Div布局网页布局网页删除嵌套:删除选中的布局表格中的间删除嵌套:删除选中的布局表格中的间隔图像。隔图像。列设置为自动伸展:使选中的布局单元列设置为自动伸展:使选中的布局单元格的列自动适应布局表格的宽度。格的列自动适应布局表格的宽度。第五章第五章 使用表格和使用表格和Div布局网页布局网页添加间隔图像:在选中的布局单元格内添加间隔图像:在选中的布局单元格内添加间隔图像。间隔图像是透明图,在添加间隔图像。间隔图像是透明图,在浏览器中是看不见的,但它可以用来控浏览器中是看不见的,但它可以用来控制自动伸展表的间隔。间隔图像会维持制自动伸展表的间隔。间
6、隔图像会维持页面上已经设置的表格和单元格的宽度。页面上已经设置的表格和单元格的宽度。第五章第五章 使用表格和使用表格和Div布局网页布局网页如何加快表格布局网页加载的速度?如何加快表格布局网页加载的速度?要加快表格布局网页加载的速度,可以要加快表格布局网页加载的速度,可以在表格标签中添加在表格标签中添加及及实现,代码如下:实现,代码如下:第五章第五章 使用表格和使用表格和Div布局网页布局网页 第五章第五章 使用表格和使用表格和Div布局网页布局网页例题例题1:如图所示,制作该网页如图所示,制作该网页要求:要求:1、采用布局网页方式布局、采用布局网页方式布局 2、导航栏的宽度保持一致、导航栏的
7、宽度保持一致 3、页面设计美观、合理、页面设计美观、合理第五章第五章 使用表格和使用表格和Div布局网页布局网页第五章第五章 使用表格和使用表格和Div布局网页布局网页例题例题2:利用表格布局制作网页:利用表格布局制作网页要求:要求:1、表格第一行:左边为登陆,右边为设、表格第一行:左边为登陆,右边为设为主页和收藏为主页和收藏2、表格第二行:主题和、表格第二行:主题和LOGO放置区放置区3、表格第三行:高度为、表格第三行:高度为30像素、宽度为像素、宽度为100%、红色的线条、红色的线条4、表格第四行:左边为导航区,右边为、表格第四行:左边为导航区,右边为内容显示区内容显示区5、表格第五行:为
8、图像滚动特效,图像、表格第五行:为图像滚动特效,图像向右滚动向右滚动6、表格第六行:版权声明区域、表格第六行:版权声明区域第五章第五章 使用表格和使用表格和Div布局网页布局网页作业:利用表格布局制作网页作业:利用表格布局制作网页要求:要求:1、表格第一行:主题和、表格第一行:主题和LOGO放置区放置区2、表格第二行:高度为、表格第二行:高度为30像素、宽度为像素、宽度为100%、红色的线条、红色的线条3、表格第三行:为导航栏、表格第三行:为导航栏4、表格第四行:左边上半部分为登陆、表格第四行:左边上半部分为登陆、下半部分为友情链接,右边为内容显示下半部分为友情链接,右边为内容显示区区5、表格
9、第五行:为图像滚动特效,图像、表格第五行:为图像滚动特效,图像向右滚动向右滚动6、表格第六行:版权声明区域、表格第六行:版权声明区域例题例题3:页面导航栏使用:页面导航栏使用FLASH导航导航例题例题4:页面导航栏使用:页面导航栏使用FLASH文本导航文本导航第五章第五章 使用表格和使用表格和Div布局网页布局网页5.2 创建创建Div Div是网页布局中一个非常重要的对是网页布局中一个非常重要的对象。在象。在DW中主要包括中主要包括Div标签及标签及Ap Div两种对象。两种对象。第五章第五章 使用表格和使用表格和Div布局网页布局网页Div标签和标签和Ap Div严格意义上说是相同严格意义
10、上说是相同的对象,即都是的对象,即都是标签,但由于采标签,但由于采用了不同的用了不同的CSS样式定义,两者在外观样式定义,两者在外观及属性上有了不同的表现。及属性上有了不同的表现。第五章第五章 使用表格和使用表格和Div布局网页布局网页AP Div是灵活性最大的网页元素,具有是灵活性最大的网页元素,具有可移植性,可以在网页内任意移动,也可移植性,可以在网页内任意移动,也可以在任意位置创建,可重叠或设置是可以在任意位置创建,可重叠或设置是否显示,因此否显示,因此AP Div常在网页中实现一常在网页中实现一些特殊功能,如制作弹出菜单、漂浮图些特殊功能,如制作弹出菜单、漂浮图像等。像等。第五章第五章
11、 使用表格和使用表格和Div布局网页布局网页Div标签默认状态下不能移动,也不具有标签默认状态下不能移动,也不具有重叠属性,因此常用于网页布局。重叠属性,因此常用于网页布局。第五章第五章 使用表格和使用表格和Div布局网页布局网页创建创建AP Div层层(AP Div)可以可以精确定位的网页元素。精确定位的网页元素。层层是一个可以容纳文本、图像等网页是一个可以容纳文本、图像等网页元素的容器,是一个可以单独编辑处元素的容器,是一个可以单独编辑处理的对象,是一个可以进行三维精确理的对象,是一个可以进行三维精确定位的元素。定位的元素。利用层可以更灵活的完成网页布局以利用层可以更灵活的完成网页布局以及
12、一些网页行为效果。及一些网页行为效果。1.插入层插入层第五章第五章 使用表格和使用表格和Div布局网页布局网页第五章第五章 使用表格和使用表格和Div布局网页布局网页在网页中插入一个层以后生成的代码为:在网页中插入一个层以后生成的代码为:第五章第五章 使用表格和使用表格和Div布局网页布局网页2.选择层选择层在网页中选择一个层有两种方法:在网页中选择一个层有两种方法:在设计窗口中选择一个层在设计窗口中选择一个层在代码窗口中选中层的代码在代码窗口中选中层的代码()后,则在设计窗口会选)后,则在设计窗口会选中相应的层中相应的层第五章第五章 使用表格和使用表格和Div布局网页布局网页3.设置层的属性
13、设置层的属性“可见性可见性”属性一般选择属性一般选择default和和hidden。hidden为隐藏的。该属性也为隐藏的。该属性也可以在可以在“层层”面板中单击层名称中的面板中单击层名称中的“可可见性见性”列来设置。列来设置。第五章第五章 使用表格和使用表格和Div布局网页布局网页“溢出溢出”属性设置层内的内容超出了层的属性设置层内的内容超出了层的大小时的出来方式,其中选项如下所示:大小时的出来方式,其中选项如下所示:visible:自动向右下方扩展以显示所有:自动向右下方扩展以显示所有的内容。的内容。hidden:不显示溢出部分内容。:不显示溢出部分内容。scroll:为层加上滚动条用于溢
14、出浏:为层加上滚动条用于溢出浏览。览。auto:在产生溢出时,自动添加滚动:在产生溢出时,自动添加滚动条用于溢出浏览。条用于溢出浏览。第五章第五章 使用表格和使用表格和Div布局网页布局网页“剪辑剪辑”属性用于设置显示在层内的部属性用于设置显示在层内的部分内容。分内容。其中其中“左左”、“上上”和和“右右”、“下下”指定显示区域相对于层的左上角坐标和右指定显示区域相对于层的左上角坐标和右下角坐标。下角坐标。第五章第五章 使用表格和使用表格和Div布局网页布局网页4.对齐层对齐层(1)使用多个层)使用多个层“属性属性”面板面板 按住按住Shift键键,单击多个层完成多,单击多个层完成多个层的选择
15、,可在多个层个层的选择,可在多个层“属性属性”面面板中设置层的相关属性板中设置层的相关属性(2)使用菜单操作)使用菜单操作 按住按住Shift键选中多个层键选中多个层,在菜单,在菜单中使用中使用“修改修改排列顺序排列顺序”,可设置相,可设置相关属性。关属性。第五章第五章 使用表格和使用表格和Div布局网页布局网页 5.层内容编辑:可以在层内插入文本、层内容编辑:可以在层内插入文本、图象、表格等。图象、表格等。第五章第五章 使用表格和使用表格和Div布局网页布局网页习题习题1:如图所示,利用层进行布局,制:如图所示,利用层进行布局,制作该网页。作该网页。第五章第五章 使用表格和使用表格和Div布
16、局网页布局网页行为行为1、行为、行为 “行为”是帮助用户编写是帮助用户编写JavaScript脚脚本代码的工具,在用户不了解本代码的工具,在用户不了解JavaScript脚本编程知识的情况下实现脚本编程知识的情况下实现DHTML动态网动态网页的制作。页的制作。第五章第五章 使用表格和使用表格和Div布局网页布局网页“行为行为”是面向是面向“事件驱动事件驱动”的脚本程的脚本程序,序,即当页面上发生某一即当页面上发生某一“事件事件”时,根时,根据事先的定义去执行该事件的过程代码,据事先的定义去执行该事件的过程代码,在页面上产生某种效果的在页面上产生某种效果的“动作动作”。所谓所谓“行为行为”就是根
17、据发生的就是根据发生的“事件事件”而采取的而采取的“动作动作”。第五章第五章 使用表格和使用表格和Div布局网页布局网页2、事件、事件 事件是网页中发生的某种动作。常用事件是网页中发生的某种动作。常用的事件如下所示:的事件如下所示:onLoad:页面或图像文件被打开时发:页面或图像文件被打开时发生的事件。生的事件。onUnload:页面或图像文件关闭时:页面或图像文件关闭时发生的事件。发生的事件。第五章第五章 使用表格和使用表格和Div布局网页布局网页onMouseOver:当鼠标移动到:当鼠标移动到对象上面时发生的事件。对象上面时发生的事件。onMouseOut:当鼠标从对象上:当鼠标从对象
18、上移开时发生的事件。移开时发生的事件。第五章第五章 使用表格和使用表格和Div布局网页布局网页 onMouseDown:当鼠标按下时发生:当鼠标按下时发生的事件。的事件。onMouseUp:当鼠标放开时发生的:当鼠标放开时发生的事件。事件。onClick:当单击对象时发生的事件。:当单击对象时发生的事件。onDblClick:当双击对象时发生的事:当双击对象时发生的事件。件。第五章第五章 使用表格和使用表格和Div布局网页布局网页 onKeyDown:当键盘上有键按:当键盘上有键按下时发生的事件下时发生的事件 onKeyUp:当键盘按键放开时发:当键盘按键放开时发生的事件。生的事件。onKey
19、Press:当键盘有按键时:当键盘有按键时发生的事件。发生的事件。第五章第五章 使用表格和使用表格和Div布局网页布局网页3 3、添加行为、添加行为第五章第五章 使用表格和使用表格和Div布局网页布局网页4 4、行为对象:一般是页面、行为对象:一般是页面、和层和层。文本的行为可以通过。文本的行为可以通过添加,添加,但是有些行为不能为文本添加。但是有些行为不能为文本添加。如果需要为文本添加这些行为,就需要如果需要为文本添加这些行为,就需要将文本制作成一个将文本制作成一个“空链接空链接”,即将超链接,即将超链接的目标地址属性设置为的目标地址属性设置为“#”。第五章第五章 使用表格和使用表格和Div
20、布局网页布局网页5 5、行为菜单、行为菜单 行为对象不能添加的行为在行为菜行为对象不能添加的行为在行为菜单中显示为灰色状态,表示该行为不能单中显示为灰色状态,表示该行为不能用于该对象。用于该对象。6 6、添加行为过程、添加行为过程7 7、编辑行为动作、编辑行为动作第五章第五章 使用表格和使用表格和Div布局网页布局网页1 1、交换图像、交换图像 交换图像行为一般用于图像对象。该交换图像行为一般用于图像对象。该行为的动作为:当鼠标移动到图像上面时,行为的动作为:当鼠标移动到图像上面时,图像位置处显示另一幅图像;当鼠标从图图像位置处显示另一幅图像;当鼠标从图像上移开时,恢复原来图像显示。像上移开时
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 使用 表格 Div 布局 网页
1、咨信平台为文档C2C交易模式,即用户上传的文档直接被用户下载,收益归上传人(含作者)所有;本站仅是提供信息存储空间和展示预览,仅对用户上传内容的表现方式做保护处理,对上载内容不做任何修改或编辑。所展示的作品文档包括内容和图片全部来源于网络用户和作者上传投稿,我们不确定上传用户享有完全著作权,根据《信息网络传播权保护条例》,如果侵犯了您的版权、权益或隐私,请联系我们,核实后会尽快下架及时删除,并可随时和客服了解处理情况,尊重保护知识产权我们共同努力。
2、文档的总页数、文档格式和文档大小以系统显示为准(内容中显示的页数不一定正确),网站客服只以系统显示的页数、文件格式、文档大小作为仲裁依据,平台无法对文档的真实性、完整性、权威性、准确性、专业性及其观点立场做任何保证或承诺,下载前须认真查看,确认无误后再购买,务必慎重购买;若有违法违纪将进行移交司法处理,若涉侵权平台将进行基本处罚并下架。
3、本站所有内容均由用户上传,付费前请自行鉴别,如您付费,意味着您已接受本站规则且自行承担风险,本站不进行额外附加服务,虚拟产品一经售出概不退款(未进行购买下载可退充值款),文档一经付费(服务费)、不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
4、如你看到网页展示的文档有www.zixin.com.cn水印,是因预览和防盗链等技术需要对页面进行转换压缩成图而已,我们并不对上传的文档进行任何编辑或修改,文档下载后都不会有水印标识(原文档上传前个别存留的除外),下载后原文更清晰;试题试卷类文档,如果标题没有明确说明有答案则都视为没有答案,请知晓;PPT和DOC文档可被视为“模板”,允许上传人保留章节、目录结构的情况下删减部份的内容;PDF文档不管是原文档转换或图片扫描而得,本站不作要求视为允许,下载前自行私信或留言给上传者【快乐****生活】。
5、本文档所展示的图片、画像、字体、音乐的版权可能需版权方额外授权,请谨慎使用;网站提供的党政主题相关内容(国旗、国徽、党徽--等)目的在于配合国家政策宣传,仅限个人学习分享使用,禁止用于任何广告和商用目的。
6、文档遇到问题,请及时私信或留言给本站上传会员【快乐****生活】,需本站解决可联系【 微信客服】、【 QQ客服】,若有其他问题请点击或扫码反馈【 服务填表】;文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“【 版权申诉】”(推荐),意见反馈和侵权处理邮箱:1219186828@qq.com;也可以拔打客服电话:4008-655-100;投诉/维权电话:4009-655-100。