信息发布与网页设计Dreamweaver9 层.pptVIP

信息发布与网页设计;3.9 层的使用;3.9.1 层的分类;3.9.2 创建层;3.9.2.2 创建嵌套层;3.9.3 设置层的参数;3.9.4 设置层的属性;3.9.4 设置层的属性;3.9.5 层的基本操作;3.9.5.3 移动层;3.9.5.4 对齐层;3.9.5.6 更改层的名称;3.9.5.7 改变层的堆栈;3.9.6 表格与层的转换;3.9.6.2 表格转换为层;层的应用练习一 利用层制作下拉菜单 ;层练习-下拉菜单-1;下拉菜单的制作1;在文档中连续插入5个层，分别命名为s1-s5，在5个层中各插入相应的一幅图像； 调整层的大小200宽、300高、顶点位置相同；如左：300；上50； 设置层的???性为“隐藏” 或分别选择5个层，调整成一样的大小。选择5个层，执行菜单【修改】、【对齐】中的“设置成宽度相同”； 和“设置成高度相同”命令。;选择“名胜古迹”，添加空连接“#”；点击行为的+号；选择“显示/隐藏层”；设置onMouseOver事件，Layer2 层为“显示”； 再次单击“＋”按钮，设置“显示/隐藏层”， Layer2为“隐藏”，并修改事件为onMouseOut。保存并测试，同法设置其它图层。;层的应用练习二 拼图游戏的制作 ;准备工作： 选择一幅作为拼图的合适图片； 计算图的尺寸、切分块数及切分后每个图的尺寸； 如设定： 2行X3列，6块图；大图尺寸：300X100；每个小图的尺寸为100X50； 确定每个图右上角的位置（距离左边和上边的距离）。;在Fireworks中打开图片，在工具箱中选择“切片工具”中的“矩形” 切片工具； 在图片左上焦，按下鼠标左键，在切片区域的终点，松开鼠标左键；切割1块图片； 重复步骤2，将图片分割成大小相等的N块； 将图象碎片导出，方法：文件?导出，对话框进行如下设置：;指定导出的HTML文件名为：拼图游戏 保存类型为：html and images 在Html 下拉菜单中选择：Export HTML Files 在Slices下拉菜单中选择：Export Slices 点击保存按纽，将1个HTML文件和分割的N个图片保存在指定的文件夹中。;回到Dreamweaver中,按如下方法导入HTML文件 新建一个网页文件，名为：pingtu.htm。 将文档标题改为“拼图游戏”，输入文本“请将下面N幅图片拼成一个完整的图案”，保存； 插入拼图游戏切片 插入 ? 图象对象 ? Fireworks HTML。载入步骤2导出的用表格表示的图象。 将表格转换为层 修改 ? 变换 ? 表格到层，将表格中的图片转换到层中。;分别调整层的大小为:200 X 100； 分别调整层中图片的大小为200 X 100； ;设置层的位置 ;建立一个新的层（宽600，高100），层的起点位置在（500，500），层中插入一个2行3列、边框为1的表格(每个单元格宽200高100)，作为拼图的目的位置。;选择状态栏中的body标记，有菜单栏上的“窗口”中，打开行为面板，点击（+）按纽，在行为列表中选择 “拖动层”（Drag Layer）； 在对话框中设置： 拖动的层名称； 设置拖动层的目的位置； 设定吸附距离； 点击确定退出，隐含设定事件为Onload alert(‘您好！欢迎访问我的主页。’) 1 重复步骤16，设置其它层的拖动;高级选项中设置弹出信息 alert(‘继续努力！’) 1 ;设置状态栏文本行为 选择body，创建行为； “设置文本” “设置状态栏文本” 输入【消息】内容； 设置触发事件为：OnLoad 预览。;层的应用练习三 用JavaScript制作“欢迎”对话框 ;调用JavaScript制作“欢迎”对话框 选择状态栏中的body 添加行为“调用JavaScript” 输入对话框信息： alert(‘您好！欢迎访问我的主页。’) 确认触发事件为 OnLoad;