1 / 28

网页制作技术 ( 三剑客 )

网页制作技术 ( 三剑客 ). 第五章 特效网页集锦. 5.1 使用层制作网页下拉菜单 5.1.1 最终效果 ( 制作下拉菜单 .html). 第五章 特效网页集锦. 〓 制作过程点睛 〓 1. 插入层 ① 【 插入 】—>【 布局对象 】—>【 层 】 ② 调整层的大小及位置 2. 在层中插入表格 (4 行 1 列 ) ，输入下拉菜单的选项。 3. 设置行为 ① 选择图像“首页” ②【 标签检查器 】 面板中添加行为 【 显示 - 隐藏层 】 ，添加显示层行为，触发事件是 onMouseOver

amir-burgess
Download Presentation

网页制作技术 ( 三剑客 )

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 网页制作技术(三剑客)

  2. 第五章 特效网页集锦 5.1 使用层制作网页下拉菜单 5.1.1 最终效果 (制作下拉菜单.html)

  3. 第五章 特效网页集锦 〓制作过程点睛〓 1.插入层 ①【插入】—>【布局对象】—>【层】 ② 调整层的大小及位置 2.在层中插入表格(4行1列)，输入下拉菜单的选项。 3.设置行为 ① 选择图像“首页” ②【标签检查器】面板中添加行为【显示-隐藏层】，添加显示层行为，触发事件是onMouseOver ③【标签检查器】面板中添加行为【显示-隐藏层】，添加显示层行为，触发事件是onMouseOut

  4. 第五章 特效网页集锦 5.2 设置状态栏文本 5.2.1 最终效果 (制作下拉菜单.html)

  5. 第五章 特效网页集锦 〓制作过程点睛〓 1.设置页面行为 ①【标签检查器】面板中添加行为【设置文本】—>【设置状态栏文本】 ② 弹出“设置状态栏文本”对话框，输入文本信息。 ③ 点击【确定】

  6. 第五章 特效网页集锦 5.3 滑动折叠菜单 5.3.1 最终效果 (滑动折叠菜单.html)

  7. 第五章 特效网页集锦 〓制作过程点睛〓 1.新建一个文件并添加层 新建一个网页，在网页中添加一个父层(第一级的层)和(ALT+【绘制层】)子层(第二级的层)，分别设置层的大小和位置。 2.插入表格和文字 ① 在layer1层中插入表格(1行3列，宽度300像素， 背景颜色#336699，高：25像素) ② 在表格中输入菜单文字 “音乐天堂”“美图共赏”“文学交流” ③ 设置文字参数 颜色：#FFFFFF

  8. 第五章 特效网页集锦 〓制作过程点睛〓 3.设置layer2层 ① 设置layer2层的背景颜色为#336699 ② 在其上输入文字，并设置超链接 “古典音乐”“流行音乐”“名家音乐”“杂七杂八” 4.将层layer2添加到时间轴上 ① 选择layer2层 ② 在时间轴Timeline1右键菜单中选中【添加对象】命令 5.新建一个时间轴Timeline2，并将layer2层添加到新的时间轴上 ① 在时间轴Timeline1右键菜单中选中【添加时间轴】命令 ② 选择layer2层

  9. 第五章 特效网页集锦 〓制作过程点睛〓 ③在时间轴Timeline2右键菜单中选中【添加对象】命令 6.设置时间轴 ① 选择时间轴Timeline1的第1帧，将【高】设置为0px ② 选择时间轴Timeline2的第15帧,将【高】设置为0px. 7.添加行为 ① 选中layer1层中的第一个单元格 ② 添加行为：【时间轴】—>【播放时间轴】(Timeline1) ③ 设置触发事件为onMouseOver 8.继续添加行为 再为该单元格添加4个onMouseOut行为

  10. 第五章 特效网页集锦 〓制作过程点睛〓 9.为层layer2添加行为 ① 选中layer2层 ② 添加行为：两个onMouseOver和两个onMouseOut

  11. 第五章 特效网页集锦 5.4 极酷的鼠标外观 5.4.1 最终效果 (极酷的鼠标外观.html)

  12. 第五章 特效网页集锦 〓制作过程点睛〓 1.新建一个文件 (光标文件和网页文件同属一个目录) 2.新建body标签CSS样式 ① 【新建css规则】 选择器类型：标签； 标签：body 定义于：仅对该文档 ② 在“body的CSS规则定义”对话框中 设置【扩展】类别的【光标】一项中输入“url(dinosaur.ani)” 单击【确定】 注：在制作时如果网页是空白的，那么会发现只有将鼠标在页面上是没有鼠标样式设定显示的。这时需要在页面制作时输入其他内容或者连续按【enter】键输入空段落，保证页面有足够多的内容。

  13. 第五章 特效网页集锦 5.5 网页过渡效果 5.5.1 最终效果 (网页过渡效果.html)

  14. 第五章 特效网页集锦 〓制作过程点睛〓 1.新建两个文件 (分别为1.html和2.html) 2.添加超级链接并插入图片 ① 在1.html网页中插入“网页过渡”文字，并设置超级链接到 2.html页面，然后插入图片。 ② 在2.html网页中插入“网页过渡”文字，并设置超级链接到 1.html页面，然后插入图片。 3.插入代码 在1.html页面中，【插入】—>【HTML】—>【文件头标签】 —>【Meta】 在弹出的【Meta】对话框中设置如下参数：

  15. 对2.html文件执行相同的操作。

  16. 第五章 特效网页集锦 5.6 甩不掉的鼠标尾巴 5.6.1 最终效果 (鼠标尾巴.html) 本案例利用Dreamweaver的插件扩展功能，定制一个鼠标跟随效果。

  17. 第五章 特效网页集锦 〓制作过程点睛〓 1.安装“MouseTail.htm”文件 ① 找到Dreamweaver的安装目录 ② 将“MouseTail.htm”文件放进安装目录里面的 【Configuration】/【Commands】目录中。 注意：这个文件并不是标准的插件文件“*.mxp”，所以不能用 Macromedia的插件管理器来安装，需要自己安装到Dreamweaver的目录 里面。 2.设置鼠标跟随效果 ① 运行Dreamweaver，如果Dreamweaver已经打开，则需关闭Dreamweaver后重新将其打开。 ② 新建一个网页文档 ③ 点击菜单【命令】—>【MouseTail】，打开设置窗口。如下

  18. 点击【Cheese Please】完成设置 输入鼠标跟随的文字 输入文字跟随的速度 第五章 特效网页集锦 〓制作过程点睛〓 提示：适当调整文字跟随鼠标的速度，speed的值越小，文字跟随的速度越快。

  19. 第五章 特效网页集锦 〓制作过程点睛〓 注意： 一旦单击设置面板中的【Cheese Please】按钮关闭了设置窗口后，就不能重新打开设置窗口修改参数了。要重新修改参数，只能回到Dreamweaver的代码视图里修改相关代码 。 3.修改鼠标跟随效果代码 ① 进入代码视图，找到“Var message=“*”，语句中的“*”是在设置面板中输入的鼠标跟随文字。直接修改这些文字即可。 本例中为： ② 找到“var timer=setTimeout(“HappyTrails( )”,*)”语句， 语句中的“*”是鼠标跟随的速度值，直接修改这个数值即可。 本例中为：

  20. 第五章 特效网页集锦 〓制作过程点睛〓 4.如果想修改跟随文字的文字大小、粗细、颜色等文字样式，可以依据以下操作： ① 【窗口】—>【CSS样式】 打开CSS样式面板 ② 双击CSS样式面板中的“.spanstyel”样式，进入【.spanstyle的CSS样式定义】窗口，修改文字大小、粗细及颜色等参数。

  21. 第五章 特效网页集锦 5.7 随机广告图片 5.7.1 最终效果 (随机广告.html) 本案例利用Dreamweaver的插件扩展功能，实现广告图片的随机播放。

  22. 第五章 特效网页集锦 〓制作过程点睛〓 1.安装插件 ① 菜单【命令】—>【扩展管理】，调出【Macromedia扩展管理器】 对话框。 选择【文件】—>【安装扩展】，在弹出的【选取要安装的扩展】对话框中选择插件文件(Advance_Random_Images.mxp)

  23. 第五章 特效网页集锦 〓制作过程点睛〓 在弹出的许可协议窗口中，选择【接受】 安装完成后，出现安装成功提示。

  24. 选择随机变换图像选项 设置图像变换时间 指定变换的图片 第五章 特效网页集锦 〓制作过程点睛〓 2.插入随机广告插件 ① 将光标置于要插入广告的位置 ② 点击菜单【命令】—>【Kaosweaver.com】—>【Advanced Random Images】 ③ 在弹出的【RandomImages】对话框中对图片变换属性进行设置。如下

More Related