6.2 添加网页特效（课件）-高二《网页设计与制作》同步教学（北京出版社）

6.2 添加网页特效 任务导入 学习目标 任务实施 思考与练习 任务导入 基本制作好网站后，小赵总觉得不够漂亮，有些呆板，而他看到网上有些网站有很漂亮的网页特效，比如鼠标形状非常漂亮，还有弹出提示小人动画等，那么，在自己这个公司网站中能否使用这些特殊的网页效果呢？ 本任务将学习弹出特效、鼠标特效、状态栏特效等的使用方法。 学习目标 （1）了解Vbscrip与Javascript脚本基本知识，分析脚本代码结构。 （2）会分析一般特效网页的特效代码。 （3）掌握特效代码的一般保存与使用方法，能够使用网页特效软件制作特效页面。 任务实施 1. Vbscrip脚本基本知识 学习VBScript之前，应具备HTML和CSS的基本知识，以便能够熟练地编写网页。 VBScript是一种脚本语言，可以用于微软IE浏览器的客户端脚本和微软IIS（Internet Information Service）的服务器端脚本。VBScript是微软编程语言Visual Basic家族中的一个成员。如果熟悉微软的Visual Basic或者Visual Basic for Applications，会很快就熟悉VBScript。 我们可以在HTML文件中直接嵌入VBScript脚本，从而扩展HTML，使它不仅仅是一种页面格式语言。 任务实施 1）VBSscript语句格式 在网页中插入VBSscript语句，应使用<script>，格式为： <script type="text/vbscript"> ...... </script> 2）入门示例 在HTML文件中，使用<SCRIPT>标记引用VBScript代码。VBScript代码写在标记<SCRIPT>…</SCRIPT>之间。 任务实施 2. Javascript脚本基本知识 Javascript是一种“脚本”（Script），它直接把代码写到HTML文档中，浏览器读取它们时才进行编译、执行，所以能查看HTML源文件就能查看Javascript源代码。Javascript没有独立的运行窗口，浏览器当前窗口就是它的运行窗口。 Javascript和Java很类似，但却不同。Java是一种比Javascript更复杂的程序语言，而Javascript则是相当容易了解的语言。它们的相同点，都是以Java作编程语言。 一个Javascript程序其实是一个文档、一个文本文件。由于它是嵌入到HTML文档中的，所以任何可以编写HTML文档的软件都可以用来开发Javascript。 任务实施 3. 特效脚本在网页中的引用 在对前面的脚本进行介绍后，小赵感到有些吃力，因为对很多脚本代码理解得似乎并不是十分透彻。老张介绍道，这些脚本代码里的内容很多，如果要学习它们的制作使用，还需要一段时间。 不过，对于我们现在来讲，并不需要完全了解脚本代码的具体编写，有时可以把它们看做“黑匣子”，只需了解它的功能，知道它的执行效果，在此基础上做简单的修改，并且能够正确地应用到网页中，就可以了。 任务实施 4. 制作弹出“小人”网页特效 在有些网站中，打开页面时会出现某个小人物，并出现一些具有广告性质的“语句”，如“欢迎光临本网站”、“这是某某网站”、“有什么问题可以与客服联系”等，有的还带有声音，显示效果如图所示。 弹出“小人”网页特效 【提示】 将特效代码插入到网页中的 <body>与</body>之间的任何 位置都是可以的，但要注意， 成对的代码可以嵌套，但不能 交叉，并且对于这个网页特效 代码来讲，不要插入在任何一 个除了body外的其他网页元素 代码中，这样可以保证网页元 素的完 整性与易读性。 任务实施 5. 制作“文字跟随鼠标”特效 在有些网站中，打开页面时会出现文字跟随鼠标移动的效果，如图所示。 “文字跟随鼠标”特效 任务实施 6. 制作“状态栏循环滚动文字”特效 在有些网站中，打开页面时状态栏会出现循环滚动文字，如图所示。 “状态栏循环滚动文字”特效 任务实施 8. 制作“水中倒影”特效 很多网页制作者用Flash、Photoshop可以制作出水中倒影的效果，而实际上在网页中添加JavaScript代码就可以实现水中倒影的效果，而且制作方法非常简单，如图所示。 “水中倒影”特效 任务实施 9. 制作“保护网页内容”特效 在有些网站中，打开页面后不能进行文字图片内容的选择、复制，甚至单击鼠标右键的快捷菜单也失效，这样的网页很好地保护了网页内容不被盗取。 下面介绍实现制作“保护网页内容”特效的方法，这是通过<body>标签的属性来实现的特效。 <BODY onmouseup="if(document.all) document.selection.empty()" oncontext