网页制作教程5a

网页制作教程5a 网页设计与制作网页设计与制作 Dreamweaver 8 网页制作与网站管理-３ 2 本周提示 申请百分制成绩的学生请于本周日（4月4 日）前提交申请 下周在网络学堂上公布申请百分制成绩的学生名单 3 内容提要 层的基本操作 行为、时间轴综合应用 4 层的概念  层(Layer)是一种 HTML 页面元素，可以定位在页面上的任意位置  层可以包含文本、图像或其它任何可在HTML 文档正文中放入的内容  层的出现使网页从二维平面拓展到...

网页设计与制作网页设计与制作 Dreamweaver 8 网页制作与网站管理-３ 2 本周提示 申请百分制成绩的学生请于本周日（4月4 日）前提交申请 下周在网络学堂上公布申请百分制成绩的学生名单 3 内容提要 层的基本操作 行为、时间轴综合应用 4 层的概念  层(Layer)是一种 HTML 页面元素，可以定位在页面上的任意位置  层可以包含文本、图像或其它任何可在HTML 文档正文中放入的内容  层的出现使网页从二维平面拓展到三维，可以使页面上元素进行重叠和复杂的布局  配合时间线（Timeline）的应用可以做出很多效果，使网页动感十足，还可以配合行为（Behaviors），使得网页在某种事件发生时显示隐藏指定的图层等。 5 创建层  执行“插入”/“布局对象”/“层”命令，插入一个预定义大小的层  “绘制层”按钮用鼠标拖动的方法可在网页任意位置画出任意大小的层，拖动时按住 Ctrl 键，可连续绘制多个层 6 编辑层 激活层：单击层中任一位置都可以激活层，层只有被激活后才可以插入对象层标记闪烁插入光标蓝色的层边框 选取层：在激活层的情况下，单击层边框或单击层上方的层选择柄，或单击标签选择器中层标记选中层，选中的层四周出现8个黑色的小方块。激活的层选取的层 7 编辑层 改变层位置：选中层后，可用鼠标拖动层的边框移动层的位置，或者在层属性面板中精确设置层的新位置（左和上的值） 改变层尺寸：选中层后，可用鼠标拖动层四周的小方块调整层的尺寸，或者在层属性面板中精确设置层的尺寸（宽和高的值） 8 编辑层 对齐层：选择多个需要对齐的层，执行“修改”/“排列顺序”命令，然后选择一个对齐选项层对齐命令是按最后一个选定层的边框来对齐一个或多个层的 9 设置层属性当前层的名称层在页面中的位置层的大小层在垂直方向的叠放次序层的背景图像层的背景颜色指定该层最初是否可见层中可以显示的区域控制当层的内容超过层指定大小时如何在浏览器中显示层 10 管理层  使用“层”面板可以管理文档中的层，可防止重叠，更改层的可见性，将层嵌套或堆叠，以及选择一个或多个层  层面板显示出当前页面的所有层，每个层的名称、垂直方向的索引值、层的可见性。层显示为按 z 轴顺序排列的名称列表。 “窗口”/“层” 11 管理层 改变层的叠放次序直接向上或向下拖动层继承其父级的可见性层可见层不可见 设置层的可见性 12 层布局可在浏览器中精确定位层，从而布局网页对象 13 使用行为  Dreamweaver提供了称为“行为”的方法，能响应鼠标或键盘的操作，给页面增添动态效果  行为是事件和该事件触发的动作的组合。事件是浏览器为每个网页对象定义的任务，如鼠标单击；动作是为完成指定的功能，预先用Javascript语言编写好的一段程序，如打开浏览器窗口、拖动图层、显示和隐藏图层等  使用Dreamweaver内置的行为，即使不熟悉Javascript语言，也可以制作出具有动态效果的网页 14 “行为”面板在“行为”面板中，可以先指定一个动作，然后指定触发该动作的事件，从而将行为添加到页面中。添加动作删除动作显示设置事件显示所有事件向上移动向下移动 “窗口”/“行为” 15 添加行为  选定要添加行为的对象，单击 “添加动作”按钮 在弹出的动作菜单中选择某个动作 在属性对话框中设置参数 在事件菜单中为动作选择触发事件 保存网页，然后可以在浏览器中观看效果事件菜单动作菜单 16 Dreamweaver内置的动作和事件 Dreamweaver自带了20多个行为动作，基本上可满足需要动作功能交换图像创建鼠标经过图像和其它图像效果弹出信息用于显示一个带有指定消息的警告窗口恢复交换图像在页面中加入交换图像后，将自动附加恢复交换图像动作打开浏览器窗口在一个新的窗口中打开一个URL 拖动层制作随鼠标移动而发生位移的网页特效控制Shockwave 或Flash 播放、停止、倒带或转到Shockwave或 Flash的帧播放声音为页面添加背景音乐 17 Dreamweaver内置的动作和事件动作功能改变属性发生某个事件后，自动改变文本或图像信息时间轴可以控制时间轴的相关操作显示-隐藏层当鼠标移到某个对象上时，原来隐藏的层显示，当鼠标离开该对象时，显示的层再次隐藏检查插件根据访问者是否安装了指定的插件将其转到不同的网页检查浏览器检查浏览器的属性，根据不同的浏览器显示不同的内容检查表单验证表单域中输入数据的合法性 18 Dreamweaver内置的动作和事件动作功能设置导航栏图像将某个图像变为导航条图像，或更改导航条中图像的显示和动作设置文本包含设置层文本、文本域文本、框架文本、状态栏文本四个选项调用JavaScript 可以执行预先编写好的一个JavaScript函数或者一行JavaScript代码跳转菜单和跳转菜单开始只有在文档窗口选择了一个跳转菜单后才能使用,可以通过该动作修改跳转菜单及改变默认的触发事件转到URL 指定在当前或其他的窗口中打开新的页面。预先载入图像预先下载图像保存在浏览器的高速缓存中，避免因下载图像时间过长引起显示延迟 19 常用事件事件说明 OnClik 网页中的指定对象被单击时 OnDblClick 网页中的指定对象被双击时 OnLoad 网页中指定对象载入完成时 OnMouseOut 鼠标离开指定对象时 OnMouseOver 鼠标刚开始指向指定对象时 OnMouseDown 鼠标键按下 OnMouseUp 释放鼠标 OnMouseMove 当鼠标在页面对象上移动时 OnUnLoad 离开页面时 OnSubmit 提交表单时 20 行为-例 加载页面后，打开一个新的浏览窗口 ① 打开要创建新浏览窗口的页面 ② 选中标记 ③ 在行为面板上为页面添加动作 ④ 设置行为属性 ⑤ 设置触发事件事件动作 21 行为-例 定制浏览器状态栏显示文字 ① 打开要设置状态栏文本的页面 ② 选中标记 ③ 在行为面板上为页面添加动作 ④ 设置行为属性 ⑤ 设置触发事件 22 时间轴  时间轴是Dreamweaver提供的使网页具有动态效果的工具 时间轴是一条贯穿时间的轴线，时间轴动画是把动画对象放置在不同的层中，通过改变图层的位置、叠放关系、可见性达到动画的效果 “窗口”/“时间轴” 动画通道时间轴选择框帧控制按钮动画播放组件行为通道播放头时间轴 23 制作时间轴动画 ① 插入一个层，在层中插入对象 ② 使用“窗口”/“时间轴”命令打开时间轴面板 ③ 将层拖到时间轴的第1帧上 ④ 选中第1帧,将层拖到动画开始位置 ⑤选中第15帧,将层拖到动画结束位置 ⑥ 选中自动播放和循环复选框 通过改变层位置创建时间轴动画 24 制作时间轴动画 通过改变层位置创建时间轴动画可以通过在动画中间增加关键帧的方法使动画沿设定的曲线移动 25 制作时间轴动画 在时间轴上添加行为时间轴配合行为可制作出复杂的动画效果 ①创建一个时间轴动画 ②在时间轴上添加一个关键帧 ③在“行为”面板上选择“交换图像”动作 ④设置要交换的图像 ⑤用同样的方法，可设置几幅交换图像 26 制作时间轴动画 在时间轴上添加行为 ①选中层，在行为面板上添加 “停止时间轴”动作 ②设置要停止的时间轴 ③行为面板上设置“停止时间轴” 动作的事件为onMouseOver 添加用鼠标控制动画播放的行为 ④选中层，在行为面板上添加 “播放时间轴”动作 ⑤设置要播放的时间轴，这里仍然是Timeline1 ⑥设置“播放时间轴”动作的事件为onMouseOut 当鼠标放在动画上，动画停止，鼠标移开动画，动画继续。 27 制作下拉菜单层、行为、时间轴综合应用层初始为隐藏步骤一：分别为各个菜单项创建对应的下拉菜单层。 28 制作下拉菜单指定行为动作：当鼠标指向菜单项时，隐藏的指定层将被显示，当鼠标移开菜单项时，显示的指定层重被隐藏。同理应用于下拉菜单层同理应用于下拉菜单层步骤二：分别为各个菜单项和下拉菜单层指定行为动作。层、行为、时间轴综合应用 29 层中的对象沿路径移动 “修改”/“时间轴”/ “录制层路径”命令层、行为、时间轴综合应用 30 滚动看版层、行为、时间轴综合应用嵌套层嵌套层的创建：创建层，如layer7 选中该层，按住 Alt键的同时，在其中创建其嵌套层。利用“剪辑”选项设置 layer7图层的可见区域 31 滚动看版层、行为、时间轴综合应用选中层Layer8，执行“修改”/“时间轴” /“录制层路径”命令，制作该层从层 Layer7底部移动到层Layer7顶部的运动效果——滚动看滚动看板板。起始帧结束帧 32 调整多个层的叠放顺序选中层Layer7，直接用鼠标将其拖拽到相应层次 33 上机练习制作下拉菜单、滚动看板、沿轨迹移动的图像和滚动的图片下拉菜单滚动看板沿轨迹移动的图滚动图片 34 制作要求 1.本例在1024*768显示分辨率下制作，具体设置如下: •下拉菜单文字大小14px，超链接颜色为黄色 •滚动看板背景色为#333333，宽430，高260，位置左270，上240 •右侧滚动的图像宽150，高380，位置左830，上 170 2.每个动画使用独立的时间轴 3.如果在其它显示分辨率下制作须自己指定层的位置,并注明显示分辨率。幻灯片编号 1 本周提示内容提要层的概念创建层编辑层编辑层编辑层设置层属性管理层管理层层布局使用行为 “行为”面板添加行为 Dreamweaver内置的动作和事件 Dreamweaver内置的动作和事件 Dreamweaver内置的动作和事件常用事件行为-例行为-例时间轴制作时间轴动画制作时间轴动画制作时间轴动画制作时间轴动画制作下拉菜单制作下拉菜单层中的对象沿路径移动滚动看版滚动看版调整多个层的叠放顺序上机练习制作要求

                    本文档为【网页制作教程5a】，请使用软件OFFICE或WPS软件打开。作品中的文字与图均可以修改和编辑，
                    图片更改请在作品中右键图片并更换，文字修改请直接点击文字进行修改，也可以新增和删除文档中的内容。 
 该文档来自用户分享，如有侵权行为请发邮件ishare@vip.sina.com联系网站客服，我们会及时删除。

                    [版权声明] 本站所有资料为用户分享产生，若发现您的权利被侵害，请联系客服邮件isharekefu@iask.cn，我们尽快处理。

                    本作品所展示的图片、画像、字体、音乐的版权可能需版权方额外授权，请谨慎使用。

                    网站提供的党政主题相关内容(国旗、国徽、党徽..)目的在于配合国家政策宣传，仅限个人学习分享使用，禁止用于任何广告和商用目的。
                

下载需要：免费已有0 人下载

立即下载

网页制作教程5a

你可能还喜欢