信息发布与网页设计-Dreamweaver9 层_第1页
信息发布与网页设计-Dreamweaver9 层_第2页
信息发布与网页设计-Dreamweaver9 层_第3页
信息发布与网页设计-Dreamweaver9 层_第4页
信息发布与网页设计-Dreamweaver9 层_第5页
已阅读5页,还剩27页未读 继续免费阅读

下载本文档

版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领

文档简介

信息发布与网页设计DREAMWEAVER第9章层信息学院?信息发布与网页设计?课题组24三月2024返回3.9层的使用3.9.1层的分类CSS层DIVSPANNetscape层LAYERILAYER3.9.2创立层3.9.2.1创立普通层方法1:“插入〞→“布局对象〞→“层〞方法2:“布局〞子面板→“描绘层〞按钮,按下鼠标左键绘制层。3.9.2.2创立嵌套层在层内部点击,然后插入的层即为其子层,子层可继承父层的特性如:显示/隐藏等。子层的物理位置不一定在父层中。3.9.3设置层的参数设置层的默认参数菜单“编辑〞→“首选参数〞→选择分类中的“层〞设置具体参数显示: 默认|继承|可见|隐藏宽/高: 分别设置层的宽和高背景: 颜色|图像 3.9.4设置层的属性选择一个层三种方法:“窗口〞→“层〞→“层面板〞→选择“层〞的名称单击层的选择柄〔层左上角回形框〕,单击层的边框选择多个层按下Shift键,单击层面板中的层名称按下Shift键,单击层边框或层中任意位置3.9.4设置层的属性层属性面板层的浮动面板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显示和隐藏层使用属性面板的“可见性〞在层标志上点击右键,选择“可见性〞使用层浮动面板中的“眼睛〞按钮,眼睛睁开为可见,眼睛闭合为不可见。3.9.5.6更改层的名称隐含的层名称为:Layer1、Layer2…。更改层名称〔与内容相关〕方法一 双击层浮动面板上的层名称,更新方法二 在层的属性面板“层编号〞文本框中,输入新的名称。3.9.5.7改变层的堆栈Z-index确定层的垂直位置,即在浏览器中显示的顺序,数值大的在后,小的在前。隐藏前面的才可见后面的。改变层堆栈方法一 在层的浮动面板中更改Z列的数值方法二在层的属性面板中,更改Z-index的数值3.9.6表格与层的转换3.9.6.1层转换为表格 “修改〞→“转换〞→“层到表格〞3.9.6.2表格转换为层“修改〞→“转换〞→“表格到层〞层的应用练习一利用层制作下拉菜单4/25/202416层练习-下拉菜单-1风景图片名胜古迹东岳泰山蛾眉金顶九华山故宫十三陵颐和园南岳衡山长城西岳华山天坛下拉菜单的制作1插入Layer1层,其中插入1行2列、边框为0、宽度为200的表格,制作主菜单。在两个单元格中分别输入“名胜古迹〞、“自然风景〞作为菜单项。插入Layer2层,其中插入1个5行1列的表格,5行单元格中分别输入:东岳泰山、蛾眉金顶、九华山、南岳衡山、西岳华山;设置居中显示。在主菜单的上一行位置,插入1个段落<p></p>,其中插入3个强制换行标记<br>,给段落标志添加1个行为:onmouseover,隐藏Layer2子菜单;4/25/202418在文档中连续插入5个层,分别命名为s1-s5,在5个层中各插入相应的一幅图像;调整层的大小200宽、300高、顶点位置相同;如左:300;上50;设置层的属性为“隐藏〞或分别选择5个层,调整成一样的大小。选择5个层,执行菜单【修改】、【对齐】中的“设置成宽度相同〞;和“设置成高度相同〞命令。对齐层4/25/202419选择“名胜古迹〞,添加空连接“#〞;点击行为的+号;选择“显示/隐藏层〞;设置onMouseOver事件,Layer2层为“显示〞;再次单击“+〞按钮,设置“显示/隐藏层〞,Layer2为“隐藏〞,并修改事件为onMouseOut。保存并测试,同法设置其它图层。为文字“〞添加行为提示浏览者点击4/25/202420层的应用练习二拼图游戏的制作4/25/202421准备工作:选择一幅作为拼图的适宜图片;计算图的尺寸、切分块数及切分后每个图的尺寸;如设定:2行X3列,6块图;大图尺寸:300X100;每个小图的尺寸为100X50;确定每个图右上角的位置〔距离左边和上边的距离〕。使用拖动层创立“拼图游戏〞4/25/202422在Fireworks中翻开图片,在工具箱中选择“切片工具〞中的“矩形〞切片工具;在图片左上焦,按下鼠标左键,在切片区域的终点,松开鼠标左键;切割1块图片;重复步骤2,将图片分割成大小相等的N块;将图象碎片导出,方法:文件导出,对话框进行如下设置:使用FireworksMX制作拼图块14/25/202423指定导出的HTML文件名为:拼图游戏保存类型为:htmlandimages在Html下拉菜单中选择:ExportHTMLFiles在Slices下拉菜单中选择:ExportSlices点击保存按纽,将1个HTML文件和分割的N个图片保存在指定的文件夹中。使用FireworksMX制作拼图块24/25/202424回到Dreamweaver中,按如下方法导入HTML文件新建一个网页文件,名为:pingtu.htm。将文档标题改为“拼图游戏〞,输入文本“请将下面N幅图片拼成一个完整的图案〞,保存;插入拼图游戏切片 插入图象对象FireworksHTML。载入步骤2导出的用表格表示的图象。将表格转换为层 修改变换表格到层,将表格中的图片转换到层中。使用FireworksMX制作拼图块34/25/202425分别调整层的大小为:200X100;分别调整层中图片的大小为200X100;

使用FireworksMX制作拼图块44/25/202426设置层的位置层1层2层3层4层5层6使用FireworksMX制作拼图块54/25/202427建立一个新的层〔宽600,高100〕,层的起点位置在〔500,500〕,层中插入一个2行3列、边框为1的表格(每个单元格宽200高100),作为拼图的目的位置。设置拖动层的目的位置4/25/202428选择状态栏中的<body>标记,有菜单栏上的“窗口〞中,翻开行为面板,点击〔+〕按纽,在行为列表中选择“拖动层〞〔DragLayer〕;在对话框中设置: 拖动的层名称; 设置拖动层的目的位置; 设定吸附距离; 点击确定退出,隐含设定事件为Onloadalert(‘您好!欢送访问我的主页。’)1重复步骤16,设置其它层的拖动设置拖动层的行为14/25/202429高级选项中设置弹出信息

alert(‘继续努力!’)1设置拖动层的行为24/25/202430设置状态栏文本行为选择<body>,创立行为;“设置文本〞“设置状态栏文本〞输入【消息】内容;设置触发事件为:OnLoad预览。设置翻开网页时的欢送信息4

温馨提示

  • 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

评论

0/150

提交评论