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

信息发布与网页设计 DREAMWEAVER 第9章 层 信息学院 《信息发布与网页设计》课题组 * 9 层的使用 层是一种网页元素定位技术 层提供了一种对网页的对象进行灵活控制的手段； 可以放入BODY中的元素，都可以放入层中； 层具有如下优点： 可精确定位 可随意拖放 可控制“显示/隐藏” 可重叠 属性可继承 9.1 层的分类 CSS 层 DIV SPAN Netscape 层 LAYER ILAYER 9.2 创建层 首先了解： 块标记div与span标记的区别 9.2.1 创建普通层 方法1: “插入” → “布局对象” → “层” 方法2: “布局” 子面板 → “描绘层”按钮，按下鼠标左键绘制层。 9.2.2 创建嵌套层 在层内部点击，然后插入的层即为其子层，子层可继承父层的特性如：显示/隐藏等； 子层的物理位置不一定在父层中； 子层与父层的相对物理位置保持固定。 9.3 设置层的参数 设置层的默认参数 菜单“编辑” → “首选参数” → 选择分类中的“层” 设置具体参数 显示： 默认|继承|可见|隐藏 宽/高： 分别设置层的宽和高 背景： 颜色|图像 9.4 设置层的属性 选择一个层 三种方法： “窗口” → “层” → “层面板” → 选择“层”的名称 单击层的选择柄（层左上角回形框）， 单击层的边框 选择多个层 按下Shift键，单击层面板中的层名称 按下Shift键，单击层边框或层中任意位置 9.4 设置层的属性 层属性面板 9.5 层的基本操作 9.5.1 在层中添加内容 添加文字 添加图像 区别层的大小与插入层中的图像的大小,不一致时会有溢出、填充等。 层与插入层中的图像的大小可分别设置 9.5.2 更改层的大小 选择层,利用控制点调整大小 选择层,利用属性面板设置宽、高。 9.5.3 移动层 选择层，通过拖动，移动层。 选择层，通过层属性面板精确定位。 在拖动层的高级选项中，调用 JavaSvrpt:的文本框中输入：JavaSvrpt:alert(‘ok’)，可弹出信息‘ok’。 9.5.4 对齐层 选择多个层，可以：左对齐、右对齐、顶部对齐、底部对齐。 9.5.5 显示和隐藏层 使用属性面板的“可见性” 在层标志上点击右键，选择“可见性” 使用层浮动面板中的“眼睛”按钮，眼睛睁开为可见，眼睛闭合为不可见。 9.5.6 更改层的名称 隐含的层名称为：Layer1、Layer2…。 更改层名称（与内容相关） 方法一 双击层浮动面板上的层名称，更新 方法二 在层的属性面板 “层编号”文本框中，输入新的名称。 9.5.7 改变层的堆栈 Z-index确定层的垂直位置，即在浏览器中显示的顺序，数值大的在后，小的在前。隐藏前面的才可见后面的。 改变层堆栈 方法一 在层的浮动面板中更改Z列的数值 方法二 在层的属性面板中，更改Z-index的数值 9.6 表格与层的转换 9.6.1 层转换为表格 “修改” →“转换” →“层到表格” 9.6.2 表格转换为层 “修改” →“转换” →“表格到层” 欢迎辞 欢迎辞 欢迎辞 欢迎辞 欢迎辞 欢迎辞 欢迎辞 欢迎辞 欢迎辞 欢迎辞 欢迎辞 欢迎辞 欢迎辞 欢迎辞 欢迎辞 * * 返回 层的浮动面板 层的应用练习一 利用层制作下拉菜单 下拉菜单的制作1 插入Layer1层，其中插入1行2列、边框为1、宽度为200的表格,制作主菜单。在两个单元格中分别输入 “名胜古迹”、“自然风景”作为菜单项。 插入Layer2层，其中插入1个5行1列的表格， 5行单元格中分别输入：东岳泰山、蛾眉金顶、九华山、南岳衡山、西岳华山；设置居中显示。 在主菜单的上一行位置，插入1个段落p/p，其中插入3个强制换行标记br，给段落标志添加1个行为：onmouseover，隐藏Layer2 子菜单； 在文档中连续插入5个层，分别命名为s1-s5，在5个层中各插入相应的一幅图像； 调整层的大小200宽、300高、顶点位置相同；如左：300；上50； 设置层的属性为“隐藏” 或分别选择5个层，调整成一样的大小。选择5个层，执行菜单【修改】、【对齐】中的“设置成宽度相同”； 和“设置成高度相同”命令。 对齐层 选择“名胜古迹”，添加空连接“#”；点击行为的+号；选择“显示/隐藏层”；设置onMouseOver事件，Layer2 层为“显示”； 再次单击“＋”按钮，设置“显示/隐藏层”， Layer2为“隐藏”，并修改事件为onMouseOut。保存并测试，同法设置其它图层。 为文字“”添加行为 提示浏览者点击 层的应用练习二 拼图游戏的制作 准备工作： 选择一幅作为拼图的合适图片; 以自己学号命名； 在Fireworks中,根据图的尺寸、切分块数。 使用拖动层创建“拼图游戏