使用表格和Div布局网.ppt

第五章 使用表格和Div布局网页,1、创建与编辑表格 2、创建AP 3、编辑AP Div,第五章 使用表格和Div布局网页,5.1表格 一、布局表格 在网页的设计中，非常重要的一点就是网页的布局，也就是网页中的文字、图像与动画等对象如何安排 通常在插入对象以前先进行区域分割。区域分割可以使用框架、层或表格，使用最多的是表格。,第五章 使用表格和Div布局网页,在DW8“布局”栏提供了“布局表格”和“绘制布局单元格”两个布局工具。使用它们可以方便地制作出网页布局的表格。布局工具栏，如下图所示：,第五章 使用表格和Div布局网页,1、创建布局表格 2、创建布局单元格 如果没有绘制布局表格就绘制布局单元格，则会自动产生一个布局表格。,第五章 使用表格和Div布局网页,注意： （1）不可以在布局单元格内绘制布局表格和布局单元格。 （2）不能将单元格移出所在的布局表格，也不能将单元格移到其他单元格之上。 (3)当一个行划分了若干单元格时，必须先用布局表格，后用布局单元格,第五章 使用表格和Div布局网页,3、布局表格属性,第五章 使用表格和Div布局网页,4、布局单元格属性,水平的默认值为左对齐 垂直的默认值为居中对齐,第五章 使用表格和Div布局网页,布局表格菜单和布局单元格菜单：,布局表格菜单,布局单元格菜单,第五章 使用表格和Div布局网页,清除所有高度：可以将布局表格内的单元格的高（即单元格顶部与布局表格顶部的间距）清除。如果布局表格内没有单元格，则自动建立充满布局表格的单元格。,第五章 使用表格和Div布局网页,使所有宽度一致：使所有布局单元格的宽度一样 移除所有分隔符图像：删除所有的间隔图像,第五章 使用表格和Div布局网页,删除嵌套：删除选中的布局表格中的间隔图像。 列设置为自动伸展：使选中的布局单元格的列自动适应布局表格的宽度。,第五章 使用表格和Div布局网页,添加间隔图像：在选中的布局单元格内添加间隔图像。间隔图像是透明图，在浏览器中是看不见的，但它可以用来控制自动伸展表的间隔。间隔图像会维持页面上已经设置的表格和单元格的宽度。,第五章 使用表格和Div布局网页,如何加快表格布局网页加载的速度？ 要加快表格布局网页加载的速度，可以在表格标签中添加及实现，代码如下：,第五章 使用表格和Div布局网页,第五章 使用表格和Div布局网页,例题1： 如图所示，制作该网页 要求：1、采用布局网页方式布局 2、导航栏的宽度保持一致 3、页面设计美观、合理,第五章 使用表格和Div布局网页,第五章 使用表格和Div布局网页,例题2：利用表格布局制作网页 要求： 1、表格第一行：左边为登陆，右边为设为主页和收藏 2、表格第二行：主题和LOGO放置区 3、表格第三行：高度为30像素、宽度为100%、红色的线条,4、表格第四行：左边为导航区，右边为内容显示区 5、表格第五行：为图像滚动特效，图像向右滚动 6、表格第六行：版权声明区域,第五章 使用表格和Div布局网页,作业：利用表格布局制作网页 要求： 1、表格第一行：主题和LOGO放置区 2、表格第二行：高度为30像素、宽度为100%、红色的线条 3、表格第三行：为导航栏,4、表格第四行：左边上半部分为登陆、下半部分为友情链接，右边为内容显示区 5、表格第五行：为图像滚动特效，图像向右滚动 6、表格第六行：版权声明区域,例题3：页面导航栏使用FLASH导航 例题4：页面导航栏使用FLASH文本导航,第五章 使用表格和Div布局网页,5.2 创建Div Div是网页布局中一个非常重要的对象。在DW中主要包括Div标签及Ap Div两种对象。,第五章 使用表格和Div布局网页,Div标签和Ap Div严格意义上说是相同的对象，即都是标签，但由于采用了不同的CSS样式定义，两者在外观及属性上有了不同的表现。,第五章 使用表格和Div布局网页,AP Div是灵活性最大的网页元素，具有可移植性，可以在网页内任意移动，也可以在任意位置创建，可重叠或设置是否显示，因此AP Div常在网页中实现一些特殊功能，如制作弹出菜单、漂浮图像等。,第五章 使用表格和Div布局网页,Div标签默认状态下不能移动，也不具有重叠属性，因此常用于网页布局。,第五章 使用表格和Div布局网页,创建AP Div 层(AP Div)可以精确定位的网页元素。 层是一个可以容纳文本、图像等网页元素的容器，是一个可以单独编辑处理的对象，是一个可以进行三维精确定位的元素。 利用层可以更灵活的完成网页布局以及一些网页行为效果。,插入层,第五章 使用表格和Div布局网页,第五章 使用表格和Div布局网页,在网页中插入一个层以后生成的代码为： ,第五章 使用表格和Div布局网页,2.选择层 在网页中选择一个层有两种方法： 在设计窗口中选择一个层 在代码窗口中选中层的代码（）后，则在设计窗口会选中相应的层,第五章 使用表格和Div布局网页,3.设置层的属性,“可见性”属性一般选择default和hidden。 hidden为隐藏的。该属性也可以在“层”面板中单击层名称中的“可见性”列来设置。,第五章 使用表格和Div布局网页,“溢出”属性设置层内的内容超出了层的大小时的出来方式，其中选项如下所示： visible：自动向右下方扩展以显示所有的内容。 hidden：不显示溢出部分内容。 scroll：为层加上滚动条用于溢出浏览。 auto：在产生溢出时，自动添加滚动条用于溢出浏览。,第五章 使用表格和Div布局网页,“剪辑”属性用于设置显示在层内的部分内容。 其中“左”、“上”和“右”、“下”指定显示区域相对于层的左上角坐标和右下角坐标。,第五章 使用表格和Div布局网页,4. 对齐层 （1）使用多个层“属性”面板 按住Shift键，单击多个层完成多个层的选择，可在多个层“属性”面板中设置层的相关属性 （2）使用菜单操作 按住Shift键选中多个层，在菜单中使用“修改排列顺序”，可设置相关属性。,第五章 使用表格和Div布局网页,5. 层内容编辑：可以在层内插入文本、图象、表格等。,第五章 使用表格和Div布局网页,习题1：如图所示，利用层进行布局，制作该网页。,第五章 使用表格和Div布局网页,行为 1、行为 “行为”是帮助用户编写JavaScript脚本代码的工具，在用户不了解JavaScript脚本编程知识的情况下实现DHTML动态网页的制作。,第五章 使用表格和Div布局网页,“行为”是面向“事件驱动”的脚本程序，即当页面上发生某一“事件”时，根据事先的定义去执行该事件的过程代码，在页面上产生某种效果的“动作”。 所谓“行为”就是根据发生的“事件”而采取的“动作”。,第五章 使用表格和Div布局网页,2、事件 事件是网页中发生的某种动作。常用的事件如下所示： onLoad：页面或图像文件被打开时发生的事件。 onUnload：页面或图像文件关闭时发生的事件。,第五章 使用表格和Div布局网页,onMouseOver：当鼠标移动到对象上面时发生的事件。 onMouseOut：当鼠标从对象上移开时发生的事件。,第五章 使用表格和Div布局网页,onMouseDown：当鼠标按下时发生的事件。 onMouseUp：当鼠标放开时发生的事件。 onClick：当单击对象时发生的事件。 onDblClick：当双击对象时发生的事件。,第五章 使用表格和Div布局网页,onKeyDown：当键盘上有键按下时发生的事件 onKeyUp：当键盘按键放开时发生的事件。 onKeyPress：当键盘有按键时发生的事件。,第五章 使用表格和Div布局网页,3、添加行为,第五章 使用表格和Div布局网页,4、行为对象：一般是页面、和层。文本的行为可以通过添加， 但是有些行为不能为文本添加。 如果需要为文本添加这些行为，就需要将文本制作成一个“空链接”，即将超链接的目标地址属性设置为“#”。,第五章 使用表格和Div布局网页,5、行为菜单 行为对象不能添加的行为在行为菜单中显示为灰色状态，表示该行为不能用于该对象。 6、添加行为过程 7、编辑行为动作,第五章 使用表格和Div布局网页,1、交换图像 交换图像行为一般用于图像对象。该行为的动作为：当鼠标移动到图像上面时，图像位置处显示另一幅图像；当鼠标从图像上移开时，恢复原来图像显示。 onMouseOver-交换图像 onMouseOut-恢复交换图像,第五章 使用表格和Div布局网页,习题：利用交换图像制作页面,2、弹出信息 弹出信息行为对象一般是页面标签。 当页面打开或关闭时弹出一个信息框。 onClick-在页面打开时弹出信息 onUnload-在页面退出时弹出信息,第五章 使用表格和Div布局网页,习题：制作一页面，要求在该页面打开单击页面任一位置时弹出一信息框显示“欢迎您的光临！”，当关闭该页面时弹出一信息框显示“欢迎您的再次光临！”。,第五章 使用表格和Div布局网页,3、设置状态栏文本 设置状态栏文本行为可以用于超链接、图像或页面。当发生onLoad、onUnload、onMouseOver、onMouseOut事件时，在状态栏中显示特定的提示信息。,第五章 使用表格和Div布局网页,习题：制作一页面，要求当鼠标放在网页中某一对象上时，在页面的状态栏显示相应的说明信息，当鼠标从该对象上移开时说明信息消失。,第五章 使用表格和Div布局网页,4、打开浏览器窗口 打开浏览器窗口行为对象一般是超链接标记，在单击超链接时在新的浏览器窗中显示超链接目标文档。打开浏览器窗口行为和在超链接标记中使用Target属性值_blank的不同之处是，打开浏览器窗口行为可以定义新窗口的外观。,第五章 使用表格和Div布局网页,习题：制作一页面，要求当单击页面中某一超链接时，链接内容在另外一个自定义的浏览器窗口中打开。,5、显示-隐藏层 显示-隐藏层行为对象一般是超链接标记或图像标记。显示-隐藏层行为是利用鼠标移到对象之上或从对象上移开的事件来触发对层“可见性”属性的修改，从而形成层内容的动态显示效果。,第五章 使用表格和Div布局网页,例如：制作一图像浏览网页，当选择“1”时打开第一幅图像，当选择“2”时打开第二幅图像。,习题：制作一网页，打开该网页时在该页面中只显示3个超链接，分别是蜘蛛侠、后天、北极熊三个电影名称，当鼠标放在其中一个链接上时，则在某一位置显示该链接对应的电影图片。,第五章 使用表格和Div布局网页,6、设置层文本 设置层文本是通过设置一个层的不同内容来形成页面内容的动态效果。设置层文本行为的对象一般是超链接。通过编写HTML代码及HTML文本来实现动态效果。,第五章 使用表格和Div布局网页,例如：当鼠标放在超链接上时显示相应内容，当鼠标移开时恢复原始显示状态。,第五章 使用表格和Div布局网页,7、制作弹出式菜单 弹出式菜单一般用于超链接、图片，在DW中制作弹出式菜单有两种方法： （1）使用显示-隐藏层行为，在层内设置超链接标记。 （2）使用“显示弹出式菜单”行为。,第五章 使用表格和Div布局网页,第五章 使用表格和Div布局网页,8、播放声音 播放声音行为对象可以是（onload事件）、超链接（onClick事件）或图像。在事件发生时，打开播放器，自动播放指定的声音文件。,第五章 使用表格和Div布局网页,9、控制播放flash动画 控制播放flash动画行为对象一般是超链接标记或flash按钮。 注意:(1)Flash动画必须命名后才能控制 (2)播放控制只能控制Flash主时间轴动画，对于影片剪辑不能控制。,第五章 使用表格和Div布局网页,时间轴 时间轴用于在网页中制作一些简单的“层”移动动画。如图像、文字的简单移动，常见的网页飘动广告等。 所谓“层”移动动画就是说时间轴只能移动层。若要使图像或文本移动，就必须将图像、文本等内容插入到一个层内。,第五章 使用表格和Div布局网页,时间轴面板,第五章 使用表格和Div布局网页,简单时间轴面板 1、直线时间轴动画 可以实现层的直线移动。层内放置图片或文字时，形成图像、文字移动效果,第五章 使用表格和Div布局网页,习题：制作一网页，实现图片从左到右（从上到下）的移动效果。 注意：当时间轴的探头放在不同位置时，所达到的动画效果不一样。,第五章 使用表格和Div布局网页,2、曲线时间轴动画 可以实现层的元素沿着某一预先定义的曲线运动。 制作方法： （1）在直线动画的时间轴中添加若干关键帧，然后拖动层 （2）在时间轴快捷菜单中选择“录制层路径”，然后拖动层,第五章 使用表格和Div布局网页,习题：制作一页面，在该页面层内插入网页元素，利用时间轴面板，制作该层的曲线移动动画。,第五章 使用表格和Div布局网页,思考： 1、在曲线时间轴动画（或直线时间轴动画）中，如何限定动画播放的时间。 2、在曲线时间轴动画（或直线时间轴动画）中，当页面打开3s后，动画才开始播放，即页面打开的前3s动画处于静止状态,第五章 使用表格和Div布局网页,时间轴行为包括针对时间轴的行为和时间轴行为通道中的帧行为。 1、播放时间轴和停止时间轴行为 针对时间轴行为的一般动作是播放时间轴和停止时间轴。行为对象一般是标签，标签和层。,时间轴行为,时间轴行为,例如：当鼠标停在飘动的广告上及移开时所引发的事件。,2、行为通道帧行为 选中时间轴面板行为通道中的某个帧，就可以在“行为”面板中为该帧添加行为。帧对象的行为事件一般是“onFrame帧编号”，即执行到该帧时发生的动作。 行为动作一般是显示-隐藏层，转到时间轴n帧等。一个帧中添加了行为之后，该帧上将出现“-”。,时间轴行为,时间轴行为,习题: 制作一网页,要求在该页面中有一闪动的图片，时间间隔为2秒钟。（例如：在夜空中一些星星一闪一闪）,时间轴行为,习题 ：在网页中制作一飘动的广告，当鼠标放在该广告上时，图片停止运动，当鼠标移开时，图片继续运行。,网页上有多个对象的动画分成两种情况：分时移动和同时移动。 在制作方式上有同一动画层、不同动画层和不同时间轴三种方法。,多对象移动动画,1、多对象分时移动动画 多对象分时移动动画是在同一时间轴内，各个对象分时移动的动画。,多对象移动动画,多对象移动动画,例如：制作一个网页，一个图象从窗口左方移动到窗口右方，然后其图像区域由大变小（或由小变大），最后消失。,多对象移动动画,分析： 1、图像从左到右移动 2、图片由大到小：注意设置层的溢出属性，且由大到小必须是拖动层的左上角。 3、图片最后消失：设置层的显示-隐藏层行为,2、多对象同时运动 当多个对象层需要同时运动，或者在时间上有重叠时只能使用多个动画通道层完成。,多对象移动动画,多对象移动动画,例如：制作时间动画让文字“欢迎光临”从右边同一位置向左拉开。每个字的动作时间为两秒，动作相互间间隔为1秒，最后一字区域原地从小到大展开。,多对象移动动画,分析： 1、文字从同一位置从右到左运动，运行时间为2秒，每个字之间的时间间隔为1秒 2、 最后一字原地从小到大展开,3、多时间轴动画 在多对象动画中，如果使用播放时间轴和停止时间轴行为，停止时间轴后所有对象的移动都被停止。如果需要避免这种干扰，就需要使用多时间轴动画。,多对象移动动画,例如：与飘动广告结合在一起，并且当鼠标移动到飘动的广告上面时，广告图像停