《信息发布与网页设计Deamweaver9 层》由会员分享，可在线阅读，更多相关《信息发布与网页设计Deamweaver9 层（33页珍藏版）》请在金锄头文库上搜索。
1、信息发布与网页设计信息发布与网页设计DREAMWEAVER 第第9章章 层层信息学院信息发布与网页设计课题组04 九月 2024返回3.9 层的使用层的使用o层是一种网页元素定位技术o层提供了一种对网页的对象进行灵活控制的手段；o可以放入BODY中的元素，都可以放入层中；o层具有如下优点：n可精确定位n可随意拖放n可控制“显示/隐藏”n可重叠n属性可继承3.9.1 层的分类层的分类oCSS 层nDIVnSPANoNetscape 层nLAYERnILAYER3.9.2 创建层创建层3.9.2.1 创建普通层o方法1:“插入” “布局对象” “层”o方法2:“布局” 子面板 “描绘层”按钮，按下
2、鼠标左键绘制层。3.9.2.2 创建嵌套层创建嵌套层o在层内部点击，然后插入的层即为其子层，子层可继承父层的特性如：显示/隐藏等。o子层的物理位置不一定在父层中。3.9.3 设置层的参数设置层的参数o设置层的默认参数菜单“编辑” “首选参数” 选择分类中的“层”设置具体参数显示：默认|继承|可见|隐藏宽/高： 分别设置层的宽和高背景：颜色|图像3.9.4 设置层的属性设置层的属性o选择一个层三种方法：n“窗口” “层” “层面板” 选择“层”的名称n单击层的选择柄（层左上角回形框），n单击层的边框o选择多个层n按下Shift键，单击层面板中的层名称n按下Shift键，单击层边框或层中任意位置3
3、.9.5 层的基本操作层的基本操作3.9.5.1 在层中添加内容o添加文字o添加图像区别层的大小与插入层中的图像的大小,不一致时会有溢出、填充等。层与插入层中的图像的大小可分别设置3.9.5.2 更改层的大小o选择层,利用控制点调整大小o选择层,利用属性面板设置宽、高。3.9.5.3 移动层移动层o选择层，通过拖动，移动层。o选择层，通过层属性面板精确定位。o在拖动层的高级选项中，调用 JavaSvrpt:的文本框中输入：JavaSvrpt:alert(ok)，可弹出信息。3.9.5.4 对齐层对齐层o选择多个层，可以：左对齐、右对齐、顶部对齐、底部对齐。3.9.5.5 显示和隐藏层o使用属性
4、面板的“可见性”o在层标志上点击右键，选择“可见性”o使用层浮动面板中的“眼睛”按钮，眼睛睁开为可见，眼睛闭合为不可见。3.9.5.6 更改层的名称更改层的名称o隐含的层名称为：Layer1、Layer2。o更改层名称（与内容相关）n方法一双击层浮动面板上的层名称，更新n方法二在层的属性面板 “层编号”文本框中，输入新的名称。3.9.5.7 改变层的堆栈改变层的堆栈oZ-index确定层的垂直位置，即在浏览器中显示的顺序，数值大的在后，小的在前。隐藏前面的才可见后面的。o改变层堆栈n方法一在层的浮动面板中更改Z列的数值n方法二在层的属性面板中，更改Z-index的数值3.9.6 表格与层的转换
5、表格与层的转换3.9.6.1 层转换为表格 “修改修改” “转换转换” “层到表格层到表格”3.9.6.2 表格转换为层表格转换为层o “修改” “转换” “表格到层”层的应用练习一层的应用练习一利用层制作下拉菜单利用层制作下拉菜单2024/9/416层练习层练习-下拉菜单下拉菜单-1风景图片名胜古迹东岳泰山蛾眉金顶九华山故宫十三陵颐和园南岳衡山长城西岳华山天坛下拉菜单的制作下拉菜单的制作11.1.插入插入Layer1Layer1层，其中插入层，其中插入1 1行行2 2列、边框为列、边框为0 0、宽度为、宽度为200200的表格的表格, ,制作主菜单制作主菜单。在两个单元格中分别输入在两个单元
6、格中分别输入 “ “名胜古迹名胜古迹”、“自然风景自然风景”作为菜单项。作为菜单项。2.2.插入插入Layer2Layer2层，其中插入层，其中插入1 1个个5 5行行1 1列的表格，列的表格， 5 5行单元行单元格中分别输入：格中分别输入：东岳泰山、蛾眉金顶、九华山、南岳东岳泰山、蛾眉金顶、九华山、南岳衡山、西岳华山衡山、西岳华山；设置居中显示。；设置居中显示。3.3.在主菜单的上一行位置，插入在主菜单的上一行位置，插入1 1个段落个段落 p，其中其中插入插入3 3个强制换行标记个强制换行标记 ，给段落标志添加给段落标志添加1 1个行为：个行为：onmouseoveronmouseover，
7、隐藏隐藏Layer2 Layer2 子菜单；子菜单；2024/9/4184.在文档中连续插入在文档中连续插入5 5个层，分别命名为个层，分别命名为s1-s5s1-s5，在在5 5个层中各插入相应的一幅图像；个层中各插入相应的一幅图像；5.调整层的大小调整层的大小200200宽、宽、300300高、顶点位置相同；高、顶点位置相同；如左：如左：300300；上；上5050；6.设置层的属性为设置层的属性为“隐藏隐藏”7.或分别选择或分别选择5 5个层，调整成一样的大小。选择个层，调整成一样的大小。选择5 5个层，执行菜单个层，执行菜单【修改修改】、【对齐对齐】中的中的“设设置成宽度相同置成宽度相同
8、”； 和和“设置成高度相同设置成高度相同”命命令。令。对齐层对齐层2024/9/41910.选择选择“名胜古迹名胜古迹”，添加空连接添加空连接“# #”；点击行；点击行为的为的+ +号；选择号；选择“显示显示/ /隐藏层隐藏层”；设置；设置onMouseOveronMouseOver事件，事件，Layer2Layer2 层为层为“显示显示”；11.再次单击再次单击“”按钮，设置按钮，设置“显示显示/ /隐藏层隐藏层”， Layer2Layer2为为“隐藏隐藏”，并修改事件为，并修改事件为onMouseOutonMouseOut。保存并测试，同法设置其它图层。保存并测试，同法设置其它图层。为文字
9、为文字“”添加行为添加行为提示浏览者点击2024/9/420层的应用练习二层的应用练习二拼图游戏的制作拼图游戏的制作2024/9/421准备工作：准备工作：选择一幅作为拼图的合适图片；选择一幅作为拼图的合适图片；计算图的尺寸、切分块数及切分后每个图的尺寸；计算图的尺寸、切分块数及切分后每个图的尺寸；如设定：如设定： 2 2行行X3X3列，列，6 6块图；大图尺寸：块图；大图尺寸：300X100300X100；每个小图的尺寸为；每个小图的尺寸为100X50100X50；确定每个图右上角的位置（距离左边和上边的距确定每个图右上角的位置（距离左边和上边的距离）。离）。使用拖动层创建使用拖动层创建“拼
10、图游戏拼图游戏”2024/9/4221.1.在在FireworksFireworks中打开图片，在工具箱中选中打开图片，在工具箱中选择择“切片工具切片工具”中的中的“矩形矩形” ” 切片工具；切片工具；2.2.在图片左上焦，按下鼠标左键，在切片区在图片左上焦，按下鼠标左键，在切片区域的终点，松开鼠标左键；切割域的终点，松开鼠标左键；切割1 1块图片；块图片；3.3.重复步骤重复步骤2 2，将图片分割成大小相等的，将图片分割成大小相等的N N块；块；4.4.将图象碎片导出，方法：文件将图象碎片导出，方法：文件导出导出，对，对话框进行如下设置：话框进行如下设置：使用使用Fireworks MX制作
11、拼图块制作拼图块12024/9/4235.5.指定导出的指定导出的HTMLHTML文件名为：拼图游戏文件名为：拼图游戏6.6.保存类型为：保存类型为：html and imageshtml and images7.7.在在Html Html 下拉菜单中选择：下拉菜单中选择：Export HTML Export HTML FilesFiles8.8.在在SlicesSlices下拉菜单中选择：下拉菜单中选择：Export Export SlicesSlices9.9.点击保存按纽，将点击保存按纽，将1 1个个HTMLHTML文件和分割的文件和分割的N N个图片保存在指定的文件夹中。个图片保存在指
12、定的文件夹中。使用使用Fireworks MX制作拼图块制作拼图块22024/9/424回到回到DreamweaverDreamweaver中中, ,按如下方法导入按如下方法导入HTMLHTML文件文件新建一个网页文件，名为：新建一个网页文件，名为：pingtupingtu. .htmhtm。将文档标题改为将文档标题改为“拼图游戏拼图游戏”，输入文本，输入文本“请请将下面将下面N N幅图片拼成一个完整的图案幅图片拼成一个完整的图案”，保存；，保存；插入拼图游戏切片插入拼图游戏切片插入插入 图象对象图象对象 Fireworks HTMLFireworks HTML。载入。载入步骤步骤2 2导出的
13、用表格表示的图象。导出的用表格表示的图象。12.12.将表格转换为层将表格转换为层修改修改 变换变换 表格到层，将表格中的图片表格到层，将表格中的图片转换到层中。转换到层中。使用使用Fireworks MX制作拼图块制作拼图块32024/9/42513.13.分别调整层的大小为分别调整层的大小为:200 X 100:200 X 100；14.14.分别调整层中图片的大小为分别调整层中图片的大小为2 200 X 10000 X 100； 使用使用Fireworks MX制作拼图块制作拼图块42024/9/426设置层的位置设置层的位置层层1层层2层层3层层4层层5层层6使用使用Fireworks
14、 MX制作拼图块制作拼图块52024/9/427建立一个新的层（宽建立一个新的层（宽6 60000，高，高100100），层的起点位），层的起点位置在置在（500500，500500），层中插入一个），层中插入一个2 2行行3 3列、边列、边框为框为1 1的表格的表格( (每个单元格宽每个单元格宽2 20000高高10100)0)，作为，作为拼图的目的位置。拼图的目的位置。设置拖动层的目的位置设置拖动层的目的位置2024/9/42815.15.选择状态栏中的选择状态栏中的 body标记，有菜单栏上的标记，有菜单栏上的“窗口窗口”中，打开行为面板，点击（中，打开行为面板，点击（+ +）按纽，）按
15、纽，在行为列表中选择在行为列表中选择 “ “拖动层拖动层”（Drag Drag LayerLayer）；）；16.16.在对话框中设置：在对话框中设置：拖动的层名称；拖动的层名称；设置拖动层的目的位置；设置拖动层的目的位置；设定吸附距离；设定吸附距离；点击确定退出，隐含设定事件为点击确定退出，隐含设定事件为OnloadOnload17.17.alert(alert(您好！欢迎访问我的主页您好！欢迎访问我的主页。) ) 1 18.18.重复步骤重复步骤1616，设置其它层的拖动，设置其它层的拖动设置拖动层的行为设置拖动层的行为12024/9/429高级选项中设置弹出信息高级选项中设置弹出信息 a
16、lert(alert(继续努力！继续努力！) ) 1 设置拖动层的行为设置拖动层的行为22024/9/430设置状态栏文本行为设置状态栏文本行为设置状态栏文本行为设置状态栏文本行为1.1.选择选择，创建行为；，创建行为；2.2.“设置文本设置文本”3.3.“设置状态栏文本设置状态栏文本”4.4.输入输入【消息消息】内容；内容；5.5.设置触发事件为：设置触发事件为：OnLoadOnLoad预览。预览。设置打开网页时的欢迎信息设置打开网页时的欢迎信息2024/9/431层的应用练习三层的应用练习三用用JavaScript制作制作“欢迎欢迎”对话框对话框2024/9/432调用调用调用调用JavaScriptJavaScriptJavaScriptJavaScript制作制作制作制作“欢迎欢迎欢迎欢迎”对话框对话框对话框对话框1.1.选择状态栏中的选择状态栏中的2.2.添加行为添加行为“调用调用JavaScript”JavaScript”3.3.输入对话框信息：输入对话框信息：alert(alert(您好！欢迎访问我的主页您好！欢迎访问我的主页。) )4.4.确认触发事件为确认触发事件为 OnLoadOnLoad2024/9/433
