《信息发布与网页设计-dreamweaver9层》由会员分享，可在线阅读，更多相关《信息发布与网页设计-dreamweaver9层（33页珍藏版）》请在金锄头文库上搜索。
1、信息发布与网页设计,DREAMWEAVER 第9章 层 信息学院 信息发布与网页设计课题组 2019年2月21日星期四,返回,3.9 层的使用,层是一种网页元素定位技术 层提供了一种对网页的对象进行灵活控制的手段； 可以放入BODY中的元素，都可以放入层中； 层具有如下优点： 可精确定位 可随意拖放 可控制“显示/隐藏” 可重叠 属性可继承,3.9.1 层的分类,CSS 层 DIV SPAN Netscape 层 LAYER ILAYER,3.9.2 创建层,3.9.2.1 创建普通层 方法1: “插入” “布局对象” “层” 方法2: “布局” 子面板 “描绘层”按钮，按下鼠标左键绘制层。,
2、3.9.2.2 创建嵌套层,在层内部点击，然后插入的层即为其子层，子层可继承父层的特性如：显示/隐藏等。 子层的物理位置不一定在父层中。,3.9.3 设置层的参数,设置层的默认参数 菜单“编辑” “首选参数” 选择分类中的“层” 设置具体参数 显示： 默认|继承|可见|隐藏 宽/高： 分别设置层的宽和高 背景： 颜色|图像,3.9.4 设置层的属性,选择一个层 三种方法： “窗口” “层” “层面板” 选择“层”的名称 单击层的选择柄（层左上角回形框）， 单击层的边框 选择多个层 按下Shift键，单击层面板中的层名称 按下Shift键，单击层边框或层中任意位置,3.9.4 设置层的属性,层属
3、性面板,层的浮动面板,3.9.5 层的基本操作,3.9.5.1 在层中添加内容 添加文字 添加图像 区别层的大小与插入层中的图像的大小,不一致时会有溢出、填充等。 层与插入层中的图像的大小可分别设置 3.9.5.2 更改层的大小 选择层,利用控制点调整大小 选择层,利用属性面板设置宽、高。,3.9.5.3 移动层,选择层，通过拖动，移动层。 选择层，通过层属性面板精确定位。 在拖动层的高级选项中，调用 JavaSvrpt:的文本框中输入：JavaSvrpt:alert(ok)，可弹出信息。,3.9.5.4 对齐层,选择多个层，可以：左对齐、右对齐、顶部对齐、底部对齐。 3.9.5.5 显示和隐
4、藏层 使用属性面板的“可见性” 在层标志上点击右键，选择“可见性” 使用层浮动面板中的“眼睛”按钮，眼睛睁开为可见，眼睛闭合为不可见。,3.9.5.6 更改层的名称,隐含的层名称为：Layer1、Layer2。 更改层名称（与内容相关） 方法一 双击层浮动面板上的层名称，更新 方法二 在层的属性面板 “层编号”文本框中，输入新的名称。,3.9.5.7 改变层的堆栈,Z-index确定层的垂直位置，即在浏览器中显示的顺序，数值大的在后，小的在前。隐藏前面的才可见后面的。 改变层堆栈 方法一 在层的浮动面板中更改Z列的数值 方法二 在层的属性面板中，更改Z-index的数值,3.9.6 表格与层的
5、转换,3.9.6.1 层转换为表格 “修改” “转换” “层到表格”,3.9.6.2 表格转换为层,“修改” “转换” “表格到层”,2019/2/21,16,层的应用练习一 利用层制作下拉菜单,层练习-下拉菜单-1,2019/2/21,18,下拉菜单的制作1,插入Layer1层，其中插入1行2列、边框为0、宽度为200的表格,制作主菜单。在两个单元格中分别输入 “名胜古迹”、“自然风景”作为菜单项。 插入Layer2层，其中插入1个5行1列的表格， 5行单元格中分别输入：东岳泰山、蛾眉金顶、九华山、南岳衡山、西岳华山；设置居中显示。 在主菜单的上一行位置，插入1个段落，其中插入3个强制换行标
6、记，给段落标志添加1个行为：onmouseover，隐藏Layer2 子菜单；,2019/2/21,19,在文档中连续插入5个层，分别命名为s1-s5，在5个层中各插入相应的一幅图像； 调整层的大小200宽、300高、顶点位置相同；如左：300；上50； 设置层的属性为“隐藏” 或分别选择5个层，调整成一样的大小。选择5个层，执行菜单【修改】、【对齐】中的“设置成宽度相同”； 和“设置成高度相同”命令。,对齐层,2019/2/21,20,选择“名胜古迹”，添加空连接“#”；点击行为的+号；选择“显示/隐藏层”；设置onMouseOver事件，Layer2 层为“显示”； 再次单击“”按钮，设置
7、“显示/隐藏层”， Layer2为“隐藏”，并修改事件为onMouseOut。保存并测试，同法设置其它图层。,为文字“”添加行为,提示浏览者点击,2019/2/21,21,层的应用练习二 拼图游戏的制作,2019/2/21,22,准备工作： 选择一幅作为拼图的合适图片； 计算图的尺寸、切分块数及切分后每个图的尺寸； 如设定： 2行X3列，6块图；大图尺寸：300X100；每个小图的尺寸为100X50； 确定每个图右上角的位置（距离左边和上边的距离）。,使用拖动层创建“拼图游戏”,2019/2/21,23,在Fireworks中打开图片，在工具箱中选择“切片工具”中的“矩形” 切片工具； 在图片
8、左上焦，按下鼠标左键，在切片区域的终点，松开鼠标左键；切割1块图片； 重复步骤2，将图片分割成大小相等的N块； 将图象碎片导出，方法：文件导出，对话框进行如下设置：,使用Fireworks MX制作拼图块1,2019/2/21,24,指定导出的HTML文件名为：拼图游戏 保存类型为：html and images 在Html 下拉菜单中选择：Export HTML Files 在Slices下拉菜单中选择：Export Slices 点击保存按纽，将1个HTML文件和分割的N个图片保存在指定的文件夹中。,使用Fireworks MX制作拼图块2,2019/2/21,25,回到Dreamweav
9、er中,按如下方法导入HTML文件 新建一个网页文件，名为：pingtu.htm。 将文档标题改为“拼图游戏”，输入文本“请将下面N幅图片拼成一个完整的图案”，保存； 插入拼图游戏切片 插入 图象对象 Fireworks HTML。载入步骤2导出的用表格表示的图象。 将表格转换为层 修改 变换 表格到层，将表格中的图片转换到层中。,使用Fireworks MX制作拼图块3,2019/2/21,26,分别调整层的大小为:200 X 100； 分别调整层中图片的大小为200 X 100；,使用Fireworks MX制作拼图块4,2019/2/21,27,设置层的位置,使用Fireworks MX
10、制作拼图块5,2019/2/21,28,建立一个新的层（宽600，高100），层的起点位置在（500，500），层中插入一个2行3列、边框为1的表格(每个单元格宽200高100)，作为拼图的目的位置。,设置拖动层的目的位置,2019/2/21,29,选择状态栏中的标记，有菜单栏上的“窗口”中，打开行为面板，点击（+）按纽，在行为列表中选择 “拖动层”（Drag Layer）； 在对话框中设置： 拖动的层名称； 设置拖动层的目的位置； 设定吸附距离； 点击确定退出，隐含设定事件为Onload alert(您好！欢迎访问我的主页。) 1 重复步骤16，设置其它层的拖动,设置拖动层的行为1,2019/2/21,30,高级选项中设置弹出信息 alert(继续努力！) 1,设置拖动层的行为2,2019/2/21,31,设置状态栏文本行为 选择，创建行为； “设置文本” “设置状态栏文本” 输入【消息】内容； 设置触发事件为：OnLoad 预览。,设置打开网页时的欢迎信息,2019/2/21,32,层的应用练习三 用JavaScript制作“欢迎”对话框,2019/2/21,33,调用JavaScript制作“欢迎”对话框 选择状态栏中的 添加行为“调用JavaScript” 输入对话框信息： alert(您好！欢迎访问我的主页。) 确认触发事件为 OnLoad,
