《网页设计与制作》第五章高级网页制作.ppt

1 第5章高级网页制作 网页设计与制作 南海学院计算机系制作 2 第5章高级网页制作 行为事件和动作行为和JavaScript脚本程序 3 认识 行为 面板 行为 面板是添加和控制操作行为的场所 选择 窗口 行为 命令或按Shift F3键 打开 行为 面板 在面板中会显示已添加的行为 行为 面板中各按钮的功能如下 4 认识 行为 面板 单击按钮只显示已设置的事件列表 单击按钮显示所有事件列表 单击按钮会弹出 行为 菜单 在该菜单中选择相应的行为后 会打开相应的对话框 设置完成后将为指定的对象添加行为 单击按钮会删除一个行为 5 认识 行为 面板 单击按钮将向上移动所选择的动作 若该按钮为灰色 则表示不能移动 单击按钮将向下移动所选择的动作 6 实例5 1 使用行为实现鼠标移动到图片上面改变状态栏文字 事件附加动作 7 检查浏览器 由于访问者可能会使用不同类型和版本的浏览器 利用 检查浏览器 行为可根据访问者使用的浏览器而跳转到不同的页面 8 检查插件 检查插件 行为的目的是检查浏览者的电脑是否安装了指定的插件 从而决定将网页转到不同的页面 如让安装了Shockwave插件的访问者转到有Shockwave影片的页面 让未安装该插件的访问者转到没有Shockwave影片的页面 9 转到URL 转到URL 行为可以在当前窗口或指定的框架中打开一个新页面 利用此行为可以通过一次单击更改两个或多个框架的内容 非常方便 10 跳转菜单 跳转菜单 行为可通过选择 插入 表单 跳转菜单 命令进行创建 并可通过 行为 面板对已有的跳转菜单进行编辑修改 在 跳转菜单 对话框中可设置跳转菜单的属性 打开该对话框的方法有以下两种 11 跳转菜单 选中已插入的跳转菜单 双击 行为 面板中的 跳转菜单 动作 打开 跳转菜单 对话框 选中已插入的跳转菜单 在打开的 行为 面板中单击 按钮 在弹出的 行为 菜单中选择 跳转菜单 命令 打开 跳转菜单 对话框 在 跳转菜单 对话框中设置跳转菜单的方法和 跳转菜单 的创建基本相同 完成后单击按钮关闭对话框 如有需要可在面板中修改事件 12 打开浏览器窗口 使用 打开浏览器窗口 行为可打开一个新的浏览器窗口显示指定的文档 并且可以指定新窗口的属性和名称 实例2 在网页调入的同时 打开一个POP窗口 13 弹出信息 添加了 弹出信息 行为后 当触发设定的事件时将会弹出预设对话框 实例5 3 制作一个显示URL的对话框 14 设置文本 设置状态栏文本 行为 设置状态栏文本 行为可用于在浏览器窗口底部左侧的状态栏中显示消息 设置层文本 行为 设置层文本 行为可以设置层的内容和格式 但保留层的属性 如颜色等 该内容可以包括任何有效的HTML源代码 15 实例一个显示会员简介的网页 16 预先载入图像 预先载入图像 行为将不会立即出现在页面上的图像预先载入浏览器缓存中 可防止图像出现时由于下载而导致延迟 17 设置导航栏图像 使用 设置导航栏图像 行为不仅可以将某个图像变为导航条图像 还可以更改导航条中图像的显示和动作 18 交换图像 在页面中插入鼠标经过图像实际上就是Dreamweaver自动添加了一个 交换图像 行为 交换图像 行为通过更改标签的属性将一个图像和另一个图像进行交换 该行为创建了按钮变换和其他图像效果 包括一次交换多个图像 19 改变属性 使用 改变属性 行为可更改对象的某些属性 其中可更改的属性是由浏览器决定的 实例5 5 鼠标移过图像时改变大小 20 显示 隐藏层 显示 隐藏层 行为用于交互时显示信息 可以显示 隐藏或恢复一个或多个层的可见性 实例5 6 鼠标移动到会员图像上时显示会员介绍 21 拖动层 浏览者在访问添加了 拖动层 行为的页面时可拖动层到页面的任意位置 拖动层 行为可通过 拖动层 对话框实现 选中所需的层并打开 行为 面板 单击按钮 在弹出的 行为 菜单中选择 拖动层 命令 打开 拖动层 对话框 该对话框中有 基本 和 高级 两个选项卡 可以设定浏览者向水平 垂直或任意方向拖动层 以及用JavaScript函数名或代码实现一些特殊功能 22 拖动层 1 基本 选项卡2 高级 选项卡 23 1 基本 选项卡 基本 选项卡中可选择添加行为的层 拖动限制等 24 2 高级 选项卡 单击对话框的 高级 选项卡 在其中可进行层的拖动控制点 在拖动层时跟踪层的移动以及当放下层时触发一个动作等设置 25 实例5 7 制作拖动图像进行类似拼图的效果 将会员图片拖到指定位置 26 调用JavaScript 调用JavaScript 行为允许用户使用 行为 面板指定当发生某个事件时执行自定义功能 27 控制Shockwave或Flash 使用 控制Shockwave或Flash 行为可播放 停止 倒退 转到Flash或Shockwave文件中的帧 28 播放声音 使用 播放声音 行为可以在页面载入时播放音乐 29 检查表单 检查表单行为用于检查用户输入的文本区的内容是否正确 此行为可以附加给onBlur或Submit事件 30 使用JavaScript代码 认识使用代码片断面板执行窗口 代码片断拖动代码片断到编辑窗口得网页中 在编辑窗口中要插入代码片断的地方单击 然后双击代码片断 在编辑窗口要插入代码片断的地方单击 然后执行插入按钮 31 JavaSrript代码实例 实例一 插入关闭窗口按钮 实例二 会暂停的滚动字幕 32 模板的使用 在创建模板前需先创建站点 因为模板必须保存在站点中 否则创建模板时系统会提示创建站点 创建模板有两种方式 将现有网页另存为模板和直接创建空白模板 33 1 将现有网页另存为模板 34 2 直接创建空白模板 35 设置模板的属性 1 设置模板的页面属性 使用菜单 修改 页面属性 改变模板的页面属性 2 定义模板的可编辑区 每个模板都包含可编辑区和不可编辑区两部分 可编辑区指的是一个页面中可以更改的部分 它所包含的内容是经常变换的 不可编辑区是指在所有页面中不能改变的内容 它的内容只能在模板中编辑 如某些公共标识符等 36 3 定义重复区域 重复区域指的是一个页面中可以任意多地增加的部分 例如表格中的内容等 重复区域是不可编辑区 如果要在重复区域中编辑不同的内容 必须在重复区域中插入可编辑区域 4 定义可选区域 可选区域是指在满足一定条件下才在页面中显示的区域 5 定义嵌套模板 嵌套模板是指在一个模板中调用了另一个模板的内容 37 应用模板 1 基于模板创建文件 使用菜单 文件 新建 在弹出的对话框中选择 模板 选项卡 出现 从模板新建 对话框 在对话框中选择一个模板 然后单击 创建 按钮 或使用资源面板 2 在已有的文件中应用模板 使用菜单 修改 模板 应用模板到页 从列表中选择一个模板 然后单击 选定 按钮 38 从资源面板的模板子面板中拖动模板到文本窗口中 在资源面板中选中一个模板 然后 点击应用按钮 3 将文件从模板中分离使用菜单 修改 模板 从模板中分离 39 应用举例 创建和应用模板 40 使用库 生成库项目在 设计 模式下 选中窗口中的一个或多个元素 然后 将其拖动到资源面板的库项目列表中 就生成了一个新的库项目 应用库项目在站点的任一网页中 可以通过拖动一个库项目到网页编辑窗口中 41 编辑库项目选中资源面板中的一个库项目 单击编辑按钮进行编辑 修改使用库项目的页面 1 执行修改 库 更新页面命令 2 在 更新页面 对话框中 选择需要修改的文件 3 单击开始按钮完成更新 42 网站的发布与维护 站点的测试和发布的主要工作和步骤如下 申请域名 申请站点空间 本地站点的测试 网页的上传 网站的宣传推广 43 申请主页空间及域名 若要发布网站 需要先申请一个主页存放空间 将完成的Web页上传到这个空间里 然后申请一个域名 浏览者即可通过该域名访问到站点 44 申请主页空间 主页空间通常有免费和收费两种 免费主页空间的大小和运行的支持条件会受一定限制 收费主页空间一般由网站托管机构提供 其空间大小及支持条件可供用户根据需要进行选择 45 申请免费主页空间 网上可申请免费主页空间的网站比较多 各个网站上的申请操作基本相同 下面以中华网 为例 介绍免费主页空间的申请过程 46 站点的管理 1 配置FTP上传功能使用菜单 站点 管理站点 打开 管理站点 对话框 2 上传文件使用菜单 窗口 文件 打开 文件面板 在文件面板的下面列出站点的文件 47 管理站点的文件 1 站点中的文件结构 1 分门别类地将文件存放在不同的目录下 2 在每个主目录下建立独立的images目录 3 目录的层次不要太深 建议不要超过3层 4 不要使用中文文件名和中文目录名 使用中文的名字可能对网址的正确显示造成困难 有一些浏览器不支持中文文件名和目录名的调用 5 不要使用过长的目录名 尽管大多数服务器支持长文件名 但是太长的目录名不便于记忆 也不容易管理 48 2 文件管理窗口 单击 文件 面板的按钮 窗口转换为文件管理的模式 单击其中的站点文件按钮 在左右两栏分别显示远程文件和本地文件 3 地图视图 在文件管理窗口单击地图视图按钮 4 检查链接 使用菜