高级网页制作.ppt

1、第5章 高级网页制作,学会制作基本的网页后，就要学习在网页中加入一些特殊的效果，例如图像运动、隐藏、增加一些动态文字效果等，这些都需要使用行为或编写脚本代码完成。使用模板和资源可以快速制作风格统一的网站。网站制作完成后，需要在服务器发布。本章将介绍这几种高级网页制作的知识。,第5章 高级网页制作,5.1 行为 5.2 使用JavaScript代码 5.3 网页模板和资源面板 5.4 管理站点,5.1 行为,行为是 Dreamweaver 8的又一个非常好的功能，它使用户不用亲自手动编写HTML代码就可以制作出功能齐全的页面。例如，可以直接调用JavaScript、改变属性、检查插件、检查浏览器

2、、拖动图层、播放声音等，还可以控制浏览器的显示、控制Shockwave、Flash以及时间轴等。一个行为通常由一个事件和一个动作组成。,5.1 行为,5.1.1 使用行为 1事件和动作 2行为和JavaScript脚本程序,5.1 行为,3使用行为的实例 【实例5.1】使用行为实现光标移动到图片上面时改变状态栏文字。,5.1 行为,4使用行为面板 设置了事件和动作后，在行为面板中会列出这些行为效果，如图所示。,行为面板,修改行为设置,5.1 行为,5.1.2 事件 事件就是在浏览器工作过程中的某种状态的变化。如网页浏览者在浏览某一个页面的时候，单击某一个元素，浏览器就会引发一个onClick事

3、件，这个事件可以用来调用为特定功能编写的JavaScript函数，使得网页具有交互性。事件也可以不用响应用户就可以产生，例如将网页设置为每隔10秒自动重载一次，就会自动引发相应事件。,5.1 行为,5.1.3 附加动作 通过行为面板可以将动作附加给各种与网页元素相关的事件，也可以附加给整个网页。附加动作前首先要选中要产生行为的元素，如果要附加给整个网页，则单击编辑窗口下方标签栏的标签。选中元素后，标签面板组的标题后面会出现选中的标签，例如、等。,5.1 行为,1检查浏览器 使用“检查浏览器”行为，可以根据浏览者所使用的浏览器品牌和版本发送不同的页面。 “检查浏览器”对话框如图所示。,5.1 行

4、为,2检查插件 “检查插件”行为用于检查在浏览器中是否安装了指定的插件（如Flash播放器、视频播放器等），从而将浏览者连接到不同的页面。,5.1 行为,3转到URL “转到URL”行为用于在当前窗口或指定的框架中，打开一个新的页面。 “转到URL”对话框如图所示。,5.1 行为,4. 跳转菜单 双击行为面板中现有跳转菜单的行为，或者在添加行为菜单中选择“跳转菜单”即可编辑跳转菜单，改变当前文件的路径或增加、改变菜单中的命令。 “跳转菜单开始”行为用按钮与跳转菜单相连，单击按钮打开在跳转菜单中选择的连接。,5.1 行为,5打开浏览器窗口 使用“打开浏览器窗口”行为可以在新窗口中打开一个URL，

5、并可以指定新窗口的属性。 【实例5.2】在网页调入的同时打开一个POP窗口。,5.1 行为,6弹出信息 “弹出信息”行为用于弹出一个显示指定消息的警告对话框。 “弹出信息”对话框如图所示。,5.1 行为,【实例5.3】制作一个显示当前URL的对话框。,5.1 行为,7设置文本 （1）设置状态栏文本 “设置状态栏文本”行为能在浏览窗口下方的状态栏中显示指定的信息。 （2）设置层文本 “设置层文本”行为可以用指定的内容来替换某一个页面上存在的层的内容和格式，但是并不改变原来层的包括颜色在内的属性。,5.1 行为,7设置文本 【实例5.4】一个显示会员简介的网页。,5.1 行为,8预先载入图像 “预

6、先载入图像”对话框如图所示。,5.1 行为,9设置导航栏图像 “设置导航栏图像”行为使图像成为导航条图像或改变在导航条中的图像显示。 “设置导航栏图像”对话框如图所示。,5.1 行为,10交换图像 “交换图像”行为用于改变IMG标签的SRC属性，即用另一幅图像替代当前的图像。 “交换图像”对话框如图所示。,5.1 行为,11改变属性 使用“改变属性”行为可以改变某个对象属性的值。 【实例5.5】光标移过图像时改变其大小。,5.1 行为,12显示-隐藏层 “显示-隐藏层”行为可以显示、隐藏或者恢复一个或多个层默认的可见性。 【实例5.6】鼠标移动到会员图像上时显示会员介绍。,5.1 行为,13拖

7、动层 【实例5.7】制作拖动图像进行类似拼图的效果，将会员图片拖动到指定位置。,5.1 行为,14调用JavaScript “调用JavaScript”行为用于事件发生时，执行在“行为”面板中指定的自定义函数或JavaScript语言脚本。 “调用 JavaScript”对话框如图所示。,5.1 行为,15控制Shockwave或Flash “控制Shockwave或flash”行为可控制Shockwave或flash的播放。 “控制Shockwave或flash”对话框如图所示。,5.1 行为,16播放声音 使用“播放声音”行为可以播放声音。例如，当光标移过了一个链接时可能希望有一种声音效果

8、，或者当一个页面载入的时候希望有一段音乐剪辑。 “播放声音”对话框如图所示。,5.1 行为,17检查表单 “检查表单”行为可检查表单指定文本区的内容，以确保用户输入的数据类型正确。 “检查表单”对话框如图所示。,5.1 行为,5.1.4 下载并安装第三方行为 若要从Macromedia Exchange Web站点下载并安装新行为，可执行以下操作。 （1）打开“行为”面板并从“添加行为”弹出菜单中选择“获取更多行为”。 （2）系统打开浏览器窗口，并连接到Exchange站点（此时计算机必须可以连接到因特网）。 （3）浏览或搜索扩展包。 （4）下载并安装所需的扩展包。,5.2 使用JavaScr

9、ipt代码,使用行为面板可以实现的功能是有限的，高级网页制作者往往需要直接操作代码实现更复杂的网页效果。Dreamweaver 8的代码片断面板提供了许多常用的代码，这里将给出了一些网页中常用的代码。,5.2 使用JavaScript代码,5.2.1 使用代码片断 1使用“代码片断”面板 使用菜单“窗口”“代码片断”，可打开“代码片断”面板，如图所示。,5.2 使用JavaScript代码,2几个使用代码片段的实例 【实例5.8】插入关闭窗口按钮。,5.2 使用JavaScript代码,【实例5.9】插入页眉和导航效果。,5.2 使用JavaScript代码,5.2.2 一些常用效果的脚本代码

10、 【实例5.12】显示用户输入的文字的长度。,5.2 使用JavaScript代码,【实例5.13】一个走马灯效果。可以使窗口标题、状态栏和窗口中的文字产生逐渐出现的变化效果，如图所示。,5.2 使用JavaScript代码,【实例5.14】在窗口中显示时钟。脚本中函数showTime()从date对象取出时间后显示在表单的单行文本框中，如图所示。,5.2 使用JavaScript代码,【实例5.20】使用动态CSS滤镜，当单击文字时，文字会发光。再次单击，发光消失，如图所示。,5.3 网页模板和资源面板,用模板和资源面板可以创建具有统一结构和外观的网站，在需要更改网站的整个外观时，只要将相应

11、的模板文件和资源项目稍做修改，即可应用模板和资源对整个网站进行快速更新，节省编辑时间。,5.3 网页模板和资源面板,5.3.1 生成模板 1保存模板文件 【实例5.21】将一个已存在的文件另存为模板。,5.3 网页模板和资源面板,2使用资源面板 【实例5.22】生成一新的空白模板。,5.3 网页模板和资源面板,5.3.2 设置模板的属性 1设置模板的页面属性 2定义模板的可编辑区 3定义重复区域 4定义可选区域 5定义嵌套模板,5.3 网页模板和资源面板,5.3.3 应用模板 1基于模板创建文件 2在已有的文件中应用模板 3将文件从模板中分离 4修改模板并更新站点,5.3 网页模板和资源面板,5.3.4 使用资源面板 1使用资源面板添加网页元素 使用菜单“窗口”“资源”可打开资源面板，如图所示。 2. 管理资源,5.3 网页模板和资源面板,5.3.5 使用库 使用库可处理在多个页面中使用并且需要经常更新的内容。 1生成库项目 2应用库项目 3编辑库项目 4修改使用库项目的页面,5.4 管理站点,Dreamweaver 8提供了完善的站点管理的功能，可以方便地完成站点上传、在线管理等网络传输功能，使用文件管理