动态文本技术讲座.ppt

动态文本技术讲座 1 特色说明在网页制作中 用JavaScript可以制作许多网页特效 但要编程序总免不了要跟语句打交道 想用JavaScript的强大功能但不想编程 怎么办 DreamweaverMX2004的行为功能可以给我们解决这个问题 行为的主要功能就是在网页中插入JavaScript程序而无需编写代码 用它我们可以轻松地做出许许多多的网页特效 2 具体步骤 1 新建一个空白页面 在页面中输入所需要的文字 并绘制一个图层 在图层中输入文本 这是会变颜色的文字 效果图如下 2 选中页面中的文字 改变为红色 在 属性 面板中的 链接 下拉列表框中输入 就将此文本设置成了可以响应鼠标事件的空链接 对 改变为蓝色 改变为黑色 改变文字 恢复文字 隐藏文字 显示文字 都作如此设置 3 选择 改变为红色 打开行为面板 选择 改变属性 在对话框中的 对象类型 下拉列表框中选择DIV选项 在 命名对象 下拉列表框中选择div Layer1 选项 在 属性 选项区选择style color选项 在 新的值 文本框中输入 red 单击 确定 按钮 4 触发事件选择onMouseOver选项 这样也就说当我们把鼠标悬停于 改变为红色 文本上 层内文本 这是会变颜色的文字 会变为红色 5 参考以上步骤 为 改变为蓝色 改变为黑色 分别添加相应的行为 6 将光标定位在 改变文字 上 选择行为 设置文本 下的 设置层文本 选项 在 设置层文本 的对话框中的 层 下接列表框中选择 层Layer1 选项 在 新建HTML 列表框中输入 这是改变后的文字 将鼠标事件更改为悬停事件 7 参考以上步骤 设置 恢复文字 的鼠标悬停事件为恢复Layer1 在 新建HTML 列表框中输入 这是会变颜色的文字 8 选择 隐藏文字 选择 显示 隐藏层 行为 在 显示 隐藏层 对话框的 命名的层 列表中选择 层Layer1 选项 单击 隐藏 按钮 则Layer1就被设置了隐藏属性 将鼠标事件更改为悬停事件 9 参考以上步骤 设置 显示文字 空链接的悬停事件为显示Layer1 2 改变文字的背景 1 插入一个层 并在此层写上文字 这是可以改变背景颜色的文字 2 在页面上写上这样的文字 点击这里可以改变下面的背景色 选取这段文字 并将它做成空链接 3 选择 改变属性 动作 在对话框中的 对象类型 下拉列表框中选择DIV选项 在 命名对象 下拉列表框中选择div Layer1 选项 在 新的值 右边的输入窗口中输入背景颜色或代码 如 ffffff 行为的触发事件是onClick 单击鼠标 3 改变文字的大小 1 在页面上插入一个层 在层内输入文本 鼠标移到这段文字上 文字将被放大 鼠标移开 文字恢复原大小 2 选取文本做一个空链接 选择文本 选择 改变属性 在对话框中 对象类型 中选择 div 在 命名对象 中选择 div layer1 属性 项选择 style fontSize 在 新的值 项中输入 36pt 把触发事件改为鼠标移到对象上 onMouseOver 4 变色按钮 1 插入一个一行一列的表格 若要制作多个按钮则可以插入一个多行多列的表格 2 把表格的背景色设置为 CCFFCC 单击表格的背景色设置为 CCCCFF 边框设置为1 这样做的目的是使按钮产生立体感 3 在表格中输入按钮的名称 并把它设置居中 这时将产生一个 div 标记 为网页源代码中的 div 加个名字 button 4 把按钮的名称作成超链接 并在超链接上加载两个改变背景色的行为 一个触