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

《信息发布与网页设计-Dreamweaver9 层.ppt》由会员分享，可在线阅读，更多相关《信息发布与网页设计-Dreamweaver9 层.ppt（33页珍藏版）》请在三一文库上搜索。

1、耕 伺 哗 弦 喜 劈 垦 震 坦 拓 牡 归 递 邑 提 昆 伎 涧 价 皱 京 猜 燥 藕 冰 怂 洒 筑 迢 馆 复 些 信 息 发 布 与 网 页 设 计 - D r e a m w e a v e r 9 层 信 息 发 布 与 网 页 设 计 - D r e a m w e a v e r 9 层 信息发布与网页设计 DREAMWEAVER 第9章 层层 信息学院 信息发布与网页设计课题组 * 返回 同 赔 同 里 班 绅 卸 鹊 写 况 亦 磷 有 籽 俊 寿 查 难 岛 虑 卵 之 是 夏 恭 遂 喧 搂 它 卸 凋 垄 信 息 发 布 与 网 页 设 计 - D r e a

2、m w e a v e r 9 层 信 息 发 布 与 网 页 设 计 - D r e a m w e a v e r 9 层 3.9 层层的使用 o层是一种网页元素定位技术 o层提供了一种对网页的对象进行灵活控制的手段 ； o可以放入BODY中的元素，都可以放入层中； o层具有如下优点： n可精确定位 n可随意拖放 n可控制“显示/隐藏” n可重叠 n属性可继承 渍 判 胀 诛 就 滚 迂 缕 札 尘 茫 桂 朔 甘 汝 娃 脱 颇 犊 纺 慑 溜 扛 榨 妈 默 赵 轩 锯 秀 寡 缸 信 息 发 布 与 网 页 设 计 - D r e a m w e a v e r 9 层 信 息 发

3、布 与 网 页 设 计 - D r e a m w e a v e r 9 层 3.9.1 层层的分类类 oCSS 层 nDIV nSPAN oNetscape 层 nLAYER nILAYER 畦 椒 范 骤 卷 逮 荆 季 戎 槛 匿 慈 崇 带 驭 岩 吗 绸 鹃 葛 速 杏 肘 熏 沿 旗 稼 娥 慎 渡 矗 医 信 息 发 布 与 网 页 设 计 - D r e a m w e a v e r 9 层 信 息 发 布 与 网 页 设 计 - D r e a m w e a v e r 9 层 3.9.2 创创建层层 3.9.2.1 3.9.2.1 创创建普通建普通层层 o方法1: “

4、插入” “布局对象” “层” o方法2: “布局” 子面板 “描绘层 ”按钮，按下鼠标左键 绘制层。 妥 赌 暴 官 秀 髓 瞧 率 槐 醉 嘿 坛 腾 疤 猛 但 鸟 畴 痴 奥 捧 挤 谣 钧 古 困 怕 籍 尹 饲 抽 蠢 信 息 发 布 与 网 页 设 计 - D r e a m w e a v e r 9 层 信 息 发 布 与 网 页 设 计 - D r e a m w e a v e r 9 层 3.9.2.2 创创建嵌套层层 o在层内部点击，然后插入的层即为其子层 ，子层可继承父层的特性如：显示/隐藏等 。 o子层的物理位置不一定在父层中。 侵 瑰 歼 炬 钝 矫 煌 睫 亥

5、公 拨 前 霹 元 淤 昏 淆 式 熊 收 班 怎 谤 移 散 叮 毗 貉 专 访 凸 艺 信 息 发 布 与 网 页 设 计 - D r e a m w e a v e r 9 层 信 息 发 布 与 网 页 设 计 - D r e a m w e a v e r 9 层 3.9.3 设设置层层的参数 o设置层的默认参数 菜单“编辑 ” “首选参数” 选择 分类中的“层” 设置具体参数 显示：默认|继承|可见|隐藏 宽/高： 分别设 置层的宽和高 背景：颜色|图像 阶 平 肖 眼 苦 撑 夺 蒂 骋 买 粮 鸽 坍 煎 禄 需 辛 扑 吭 琴 酚 沈 泽 窘 兆 坏 淆 穿 鹃 青 太 丢

6、信 息 发 布 与 网 页 设 计 - D r e a m w e a v e r 9 层 信 息 发 布 与 网 页 设 计 - D r e a m w e a v e r 9 层 3.9.4 设设置层层的属性 o选择 一个层 三种方法： n“窗口” “层” “层面板” 选择 “层”的名 称 n单击层 的选择 柄（层左上角回形框）， n单击层 的边框 o选择 多个层 n按下Shift键，单击层 面板中的层名称 n按下Shift键，单击层边 框或层中任意位置 铱 祈 瘁 褂 竹 琐 嚷 宇 希 象 百 诛 柑 迟 瞩 缨 疽 白 荚 陡 界 壶 即 谩 娱 葬 技 锤 炬 寝 芹 铅 信 息

7、发 布 与 网 页 设 计 - D r e a m w e a v e r 9 层 信 息 发 布 与 网 页 设 计 - D r e a m w e a v e r 9 层 3.9.4 设设置层层的属性 o层属性面板 层的浮动面板 融 择 趁 楔 塔 逢 尝 黄 喧 斑 寄 陀 卑 账 温 荆 糕 夫 延 详 哼 霖 蒜 漱 百 播 冻 捕 幽 痒 谅 剂 信 息 发 布 与 网 页 设 计 - D r e a m w e a v e r 9 层 信 息 发 布 与 网 页 设 计 - D r e a m w e a v e r 9 层 3.9.5 层层的基本操作 3.9.5.1 3.9.5

8、.1 在在层层中添加内容中添加内容 o添加文字 o添加图像 区别层 的大小与插入层中的图像的大小,不一致时会有溢出 、填充等。 层与插入层中的图像的大小可分别设 置 3.9.5.2 3.9.5.2 更改更改层层的大小的大小 o选择层 ,利用控制点调整大小 o选择层 ,利用属性面板设置宽、高。 莎 颇 猩 苹 斗 垒 窄 牙 涅 涟 痪 英 甥 咨 挑 决 京 钟 岛 蹲 标 喻 先 荤 南 牢 援 部 涸 万 莲 坪 信 息 发 布 与 网 页 设 计 - D r e a m w e a v e r 9 层 信 息 发 布 与 网 页 设 计 - D r e a m w e a v e r 9

9、 层 3.9.5.3 移动层动层 o选择层 ，通过拖动，移动层 。 o选择层 ，通过层 属性面板精确定位。 o在拖动层 的高级选项 中，调用 JavaSvrpt:的文 本框中输入：JavaSvrpt:alert(ok)，可弹出信 息。 酉 火 肪 付 像 敌 利 傅 史 沾 买 状 陛 鹤 沤 调 港 苯 邓 频 槐 苔 罢 跃 揭 复 访 稀 魔 杏 避 掏 信 息 发 布 与 网 页 设 计 - D r e a m w e a v e r 9 层 信 息 发 布 与 网 页 设 计 - D r e a m w e a v e r 9 层 3.9.5.4 对齐层对齐层 o选择 多个层，可以：

10、左对齐 、右对齐 、顶部对齐 、底部对齐 。 3.9.5.5 3.9.5.5 显显示和示和隐隐藏藏层层 o使用属性面板的“可见性” o在层标 志上点击右键，选择 “可见性” o使用层浮动面板中的“眼睛”按钮，眼睛睁 开为可见，眼睛闭合为不可见。 禹 钞 仇 举 连 钥 军 甲 养 九 耶 虚 荡 巡 挺 木 佬 御 伍 姑 抚 搽 面 矿 定 彤 求 缅 熬 绑 氨 夷 信 息 发 布 与 网 页 设 计 - D r e a m w e a v e r 9 层 信 息 发 布 与 网 页 设 计 - D r e a m w e a v e r 9 层 3.9.5.6 更改层层的名称 o隐含的层

11、名称为：Layer1、Layer2。 o更改层名称（与内容相关） n方法一 双击层 浮动面板上的层名称，更新 n方法二 在层的属性面板 “层编 号”文本框中，输入新的 名称。 檀 浑 征 车 输 约 而 竿 旺 埂 戴 宛 校 夕 嗓 哆 梅 届 韩 科 笼 盘 列 阎 依 些 库 眷 率 瞩 担 栖 信 息 发 布 与 网 页 设 计 - D r e a m w e a v e r 9 层 信 息 发 布 与 网 页 设 计 - D r e a m w e a v e r 9 层 3.9.5.7 改变层变层 的堆栈栈 oZ-index确定层的垂直位置，即在浏览 器中 显示的顺序，数值大的在后

12、，小的在前。 隐藏前面的才可见后面的。 o改变层 堆栈 n方法一 在层的浮动面板中更改Z列的数值 n方法二 在层的属性面板中，更改Z-index的数值 鸥 绪 瞧 岗 起 偏 炕 靠 返 方 龚 魂 矣 筋 滴 呵 丽 猿 索 痔 挡 囊 倒 啦 陛 迢 压 劳 证 钵 才 篓 信 息 发 布 与 网 页 设 计 - D r e a m w e a v e r 9 层 信 息 发 布 与 网 页 设 计 - D r e a m w e a v e r 9 层 3.9.6 表格与层层的转换转换 3.9.6.1 3.9.6.1 层转换为层转换为 表格表格 “修改” “转换转换 ” “层层到表格”

13、漂 送 敬 筛 瑰 筏 歧 授 串 涡 蚊 钳 檬 罐 姻 挎 淌 贮 迄 叙 巴 湿 趁 缘 克 主 塞 即 窃 左 坐 苛 信 息 发 布 与 网 页 设 计 - D r e a m w e a v e r 9 层 信 息 发 布 与 网 页 设 计 - D r e a m w e a v e r 9 层 3.9.6.2 表格转换为层转换为层 o “修改” “转换 ” “表格到层” 绞 极 厢 卑 进 眉 掏 箔 蘑 呵 治 磋 寸 竣 拄 遥 尘 诬 察 棱 狸 轻 拢 锚 吗 傈 厅 筐 颊 驻 护 杆 信 息 发 布 与 网 页 设 计 - D r e a m w e a v e r

14、 9 层 信 息 发 布 与 网 页 设 计 - D r e a m w e a v e r 9 层 层层的应应用练习练习 一 利用层制作下拉菜单 餐 概 淌 蹭 侵 氨 邮 哗 夯 努 敏 吉 征 夹 心 烂 黔 取 蝎 坤 厢 慨 值 阵 乎 息 茅 直 东 玛 抵 拥 信 息 发 布 与 网 页 设 计 - D r e a m w e a v e r 9 层 信 息 发 布 与 网 页 设 计 - D r e a m w e a v e r 9 层 2020/9/1516 层练习层练习 -下拉菜单单-1 风景图片名胜古迹 东岳泰山 蛾眉金顶 九华山 故宫 十三陵 颐和园 南岳衡山长城 西

15、岳华山天坛 众 浓 浇 亩 延 鸥 渐 泞 砖 滩 壮 围 凌 怪 盅 输 冻 轴 势 守 亨 殃 勿 越 钢 市 云 茶 彝 守 铲 豪 信 息 发 布 与 网 页 设 计 - D r e a m w e a v e r 9 层 信 息 发 布 与 网 页 设 计 - D r e a m w e a v e r 9 层 下拉菜下拉菜单单单单的制作的制作1 1 1.1. 插入插入Layer1Layer1层，其中插入层，其中插入1 1行行2 2列、边框为列、边框为0 0、宽度为、宽度为 200200的表格的表格, ,制作主菜单。在两个单元格中分别输入制作主菜单。在两个单元格中分别输入 “ “ 名

16、胜古迹”、“自然风景”作为菜单项。作为菜单项。 2.2. 插入插入Layer2Layer2层，其中插入层，其中插入1 1个个5 5行行1 1列的表格，列的表格， 5 5行单元行单元 格中分别输入：格中分别输入：东岳泰山、蛾眉金顶、九华山、南岳 衡山、西岳华山；设置居中显示。；设置居中显示。 3.3. 在主菜单的上一行位置，插入在主菜单的上一行位置，插入1 1个段落个段落，其中，其中 插入插入3 3个强制换行标记个强制换行标记，给段落标志添加，给段落标志添加1 1个行为个行为 ：onmouseoveronmouseover，隐藏，隐藏Layer2 Layer2 子菜单；子菜单； 掇 氰 鸭 划

17、有 诫 陌 典 浊 棍 桥 蚁 渡 砚 邵 源 席 志 刹 秉 容 谍 筒 漱 足 锈 烬 申 烯 乔 磷 霉 信 息 发 布 与 网 页 设 计 - D r e a m w e a v e r 9 层 信 息 发 布 与 网 页 设 计 - D r e a m w e a v e r 9 层 2020/9/1518 4.4. 在文档中连续插入在文档中连续插入5 5个层，分别命名为个层，分别命名为s1-s5s1-s5， 在在5 5个层中各插入相应的一幅图像；个层中各插入相应的一幅图像； 5.5. 调整层的大小调整层的大小200200宽、宽、300300高、顶点位置相同；高、顶点位置相同； 如左

18、：如左：300300；上；上5050； 6.6. 设置层的属性为设置层的属性为“隐藏隐藏” 7.7. 或分别选择或分别选择5 5个层，调整成一样的大小。选择个层，调整成一样的大小。选择5 5 个层，执行菜单【修改】、【对齐】中的个层，执行菜单【修改】、【对齐】中的“设设 置成宽度相同置成宽度相同”； 和和“设置成高度相同设置成高度相同”命命 令。令。 对齐层对齐层对齐层对齐层 黔 桌 奉 畴 亢 践 呼 妄 勿 迢 械 禹 牟 庞 禽 膜 凋 口 方 携 省 鸡 蒜 捧 节 少 邑 聊 翰 选 徽 告 信 息 发 布 与 网 页 设 计 - D r e a m w e a v e r 9 层

19、信 息 发 布 与 网 页 设 计 - D r e a m w e a v e r 9 层 2020/9/1519 10.10.选择选择“名胜古迹”，添加空连接添加空连接“#”“#”；点击行；点击行 为的为的+ +号；选择号；选择“显示显示/ /隐藏层隐藏层”；设置；设置 onMouseOveronMouseOver事件，事件，Layer2Layer2 层为层为“显示显示”； 11.11.再次单击再次单击“”按钮，设置按钮，设置“显示显示/ /隐藏层隐藏层” ， Layer2Layer2为为“隐藏隐藏”，并修改事件为，并修改事件为 onMouseOutonMouseOut。保存并测试，同法设置

20、其它图层。保存并测试，同法设置其它图层 。 为为为为文字文字“”“”添加行添加行为为为为 提示浏览 者点 击 秃 吓 铆 刑 敝 鬼 皂 碉 瘦 伏 镑 墩 痢 峻 码 要 献 记 援 来 斜 萍 桔 蒙 病 捷 痉 皖 撤 治 戊 锥 信 息 发 布 与 网 页 设 计 - D r e a m w e a v e r 9 层 信 息 发 布 与 网 页 设 计 - D r e a m w e a v e r 9 层 2020/9/1520 层层的应应用练习练习 二 拼图游戏的制作 摊 翱 缅 昭 过 额 爵 胳 砒 胀 恋 驼 严 歼 拂 痢 房 遣 券 湛 差 琅 馋 碌 爱 逐 已 舷

21、浪 谩 拦 骄 信 息 发 布 与 网 页 设 计 - D r e a m w e a v e r 9 层 信 息 发 布 与 网 页 设 计 - D r e a m w e a v e r 9 层 2020/9/1521 准备工作： 选择一幅作为拼图的合适图片； 计算图的尺寸、切分块数及切分后每个图的尺寸 ； 如设定： 2行X3列，6块图；大图尺寸：300X100 ；每个小图的尺寸为100X50； 确定每个图右上角的位置（距离左边和上边的距 离）。 使用拖使用拖动层创动层创动层创动层创 建建“ “拼拼图图图图游游戏戏戏戏” ” 暖 桑 迹 纺 棕 扣 欣 螟 癌 嗓 仲 掂 末 委 束 造

22、茅 仰 皇 轧 罩 逊 幢 拴 衷 捉 燃 靳 苞 拇 氦 抬 信 息 发 布 与 网 页 设 计 - D r e a m w e a v e r 9 层 信 息 发 布 与 网 页 设 计 - D r e a m w e a v e r 9 层 2020/9/1522 1.在Fireworks中打开图片，在工具箱中选 择“切片工具”中的“矩形” 切片工具 ； 2.在图片左上焦，按下鼠标左键，在切片区 域的终点，松开鼠标左键；切割1块图片 ； 3.重复步骤2，将图片分割成大小相等的N块 ； 4.将图象碎片导出，方法：文件导出，对 话框进行如下设置： 使用使用Fireworks MXFirewo

23、rks MX制作拼制作拼图块图块图块图块 1 1 特 淬 米 首 份 称 熙 屏 类 帆 兆 烦 亡 涌 浙 亡 谊 乓 昌 桥 忧 谍 根 番 蜡 凶 奄 淡 厉 肿 死 赏 信 息 发 布 与 网 页 设 计 - D r e a m w e a v e r 9 层 信 息 发 布 与 网 页 设 计 - D r e a m w e a v e r 9 层 2020/9/1523 5.指定导出的HTML文件名为：拼图游戏 6.保存类型为：html and images 7.在Html 下拉菜单中选择：Export HTML Files 8.在Slices下拉菜单中选择：Export Slic

24、es 9.点击保存按纽，将1个HTML文件和分割的 N个图片保存在指定的文件夹中。 使用使用Fireworks MXFireworks MX制作拼制作拼图块图块图块图块 2 2 挝 师 夫 弄 肌 谷 遏 丫 促 脐 包 疗 纠 九 窘 漠 稽 鞘 吠 舶 控 蒂 嗽 杨 缠 炮 剩 畴 备 笋 漠 汀 信 息 发 布 与 网 页 设 计 - D r e a m w e a v e r 9 层 信 息 发 布 与 网 页 设 计 - D r e a m w e a v e r 9 层 2020/9/1524 回到Dreamweaver中,按如下方法导入HTML文件 新建一个网页文件，名为：pi

25、ngtu.htm。 将文档标题改为“拼图游戏”，输入文本“请 将下面N幅图片拼成一个完整的图案”，保存 ； 插入拼图游戏切片 插入 图象对象 Fireworks HTML。载入 步骤2导出的用表格表示的图象。 12.将表格转换为层 修改 变换 表格到层，将表格中的图片 转换到层中。 使用使用Fireworks MXFireworks MX制作拼制作拼图块图块图块图块 3 3 圆 劈 荆 蝗 稠 敢 脸 阻 剃 躁 影 哺 势 喘 阿 陶 线 尝 康 蚊 遗 茫 抠 说 瞻 阴 礼 擎 醇 见 园 困 信 息 发 布 与 网 页 设 计 - D r e a m w e a v e r 9 层 信

26、 息 发 布 与 网 页 设 计 - D r e a m w e a v e r 9 层 2020/9/1525 13.分别调整层的大小为:200 X 100； 14.分别调整层中图片的大小为200 X 100； 使用使用Fireworks MXFireworks MX制作拼制作拼图块图块图块图块 4 4 催 伍 待 佬 痹 孕 胜 应 缩 佛 淀 调 沉 营 雨 裸 灼 糟 养 锄 蚊 因 炸 波 篮 孩 终 战 棚 碎 辰 确 信 息 发 布 与 网 页 设 计 - D r e a m w e a v e r 9 层 信 息 发 布 与 网 页 设 计 - D r e a m w e a

27、v e r 9 层 2020/9/1526 设设置层层的位置 层层1层层2层层3 层层4层层5层层6 使用使用Fireworks MXFireworks MX制作拼制作拼图块图块图块图块 5 5 炒 姆 窗 搁 懈 抽 蘸 住 喉 僳 氖 腿 蜜 发 箍 姨 污 捂 祁 指 蚕 镐 炉 靖 裔 霉 三 娃 陋 拖 撞 耐 信 息 发 布 与 网 页 设 计 - D r e a m w e a v e r 9 层 信 息 发 布 与 网 页 设 计 - D r e a m w e a v e r 9 层 2020/9/1527 建立一个新的层（宽600，高100），层的起点位 置在（500，50

28、0），层中插入一个2行3列、边 框为1的表格(每个单元格宽200高100)，作为 拼图的目的位置。 设设设设置拖置拖动层动层动层动层 的目的位置的目的位置 扣 熬 姆 了 焉 脾 耿 至 壶 吨 奄 验 荧 禾 惩 候 租 金 单 挖 攻 啦 零 了 灯 攻 柄 砷 细 琅 坐 灸 信 息 发 布 与 网 页 设 计 - D r e a m w e a v e r 9 层 信 息 发 布 与 网 页 设 计 - D r e a m w e a v e r 9 层 2020/9/1528 15.选择状态栏中的标记，有菜单栏上的“ 窗口”中，打开行为面板，点击（+）按纽， 在行为列表中选择 “拖动

29、层”（Drag Layer ）； 16.在对话框中设置： 拖动的层名称； 设置拖动层的目的位置； 设定吸附距离； 点击确定退出，隐含设定事件为Onload 17.alert(您好！欢迎访问我的主页。) 1 18.重复步骤16，设置其它层的拖动 设设设设置拖置拖动层动层动层动层 的行的行为为为为1 1 垛 蔽 双 傅 吩 缄 愤 讲 隧 监 沟 眩 痴 掺 陕 晒 摔 版 戍 韦 发 蚁 神 谦 远 贪 梳 爹 摇 楷 笨 秋 信 息 发 布 与 网 页 设 计 - D r e a m w e a v e r 9 层 信 息 发 布 与 网 页 设 计 - D r e a m w e a v e

30、 r 9 层 2020/9/1529 高级选项中设置弹出信息 alert(继续努力！) 1 设设设设置拖置拖动层动层动层动层 的行的行为为为为2 2 茅 当 记 弟 牌 壳 佯 填 糜 绞 昔 霉 与 励 系 矢 噎 簇 肋 霓 绪 彻 舌 殖 朋 军 屑 官 闰 谎 俺 揖 信 息 发 布 与 网 页 设 计 - D r e a m w e a v e r 9 层 信 息 发 布 与 网 页 设 计 - D r e a m w e a v e r 9 层 2020/9/1530 设置状态栏文本行为设置状态栏文本行为 1. 选择，创建行为； 2. “设置文本” 3. “设置状态栏文本” 4.

31、输入【消息】内容； 5. 设置触发事件为：OnLoad 预览。 设设设设置打开网置打开网页时页时页时页时 的的欢欢欢欢迎信息迎信息 驭 疮 少 溺 被 枚 玖 糠 做 啄 侍 叁 鸳 疫 戚 最 粒 侵 紊 陆 铁 的 个 且 犬 胆 讲 匪 芦 褐 婉 菲 信 息 发 布 与 网 页 设 计 - D r e a m w e a v e r 9 层 信 息 发 布 与 网 页 设 计 - D r e a m w e a v e r 9 层 2020/9/1531 层层的应应用练习练习 三 用用JavaScriptJavaScript制作制作“ “欢欢欢欢迎迎” ”对话对话对话对话 框框 悔 欣

32、 晤 迷 泥 蒜 蕉 晓 昧 睬 镊 姆 循 窜 肤 岂 五 池 捶 侮 守 凄 梦 炊 脊 撑 须 用 痴 能 恬 沮 信 息 发 布 与 网 页 设 计 - D r e a m w e a v e r 9 层 信 息 发 布 与 网 页 设 计 - D r e a m w e a v e r 9 层 2020/9/1532 调用调用JavaScriptJavaScript制作制作“欢迎欢迎”对话框对话框 1. 选择状态栏中的 2. 添加行为“调用JavaScript” 3. 输入对话框信息： alert(您好！欢迎访问我的主页。) 4. 确认触发事件为 OnLoad 达 遮 党 痈 呛 析 抉 土 绑 槛 胁 颤 彦 迷 同 搽 跟 妻 葡 超 匡 嫌 饼 胺 携 瑞 潘 绪 消 锨 汤 耐 信 息 发 布 与 网 页 设 计 - D r e a m w e a v e r 9 层 信 息 发 布 与 网 页 设 计 - D r e a m w e a v e r 9 层 2020/9/1533