搜索
网页设计与制作教程第5版机械工业出版社同名教材配套电子教案8.1JavaScript简介8.2在网页中插入JavaScript的方法及定义8.3常见的网页特效8.4实训——制作二级纵向列表模式的导航菜单第8章网页特效——JavaScriptJavaScript语言的前身叫作LiveScript，自从Sun公司推出著名的Java语言后，Netscape公司引进了Sun公司有关Java的程序概念，将LiveScript重新进行设计，并改名为JavaScript。目前流行的多数浏览器都支持JavaScript，如Netscape公司的Navigator3.0以上版本，Microsoft公司的InternetExplorer3.0以上版本。JavaScript是一种行为脚本语言，用JavaScript可以创建出运行在多平台和浏览器上的交互行为和效果。8.1JavaScript简介8.2.1在HTML文档中嵌入脚本程序JavaScript的脚本程序包括在HTML中，使之成为HTML文档的一部分。其格式为：scriptlanguage=JavaScriptJavaScript语言代码;JavaScript语言代码;…/Script【演练8-1】在HTML文档中嵌入JavaScript的脚本，本例文件8-1.html在浏览器中显示的效果如图8-1和图8-2所示。8.2在网页中插入JavaScript的方法及定义8.2.2引用脚本文件如果已经存在一个脚本文件（以js为扩展名），则可以使用script标记的src属性引用外部脚本文件的URL。采用引用脚本文件的方式，可以提高程序代码的利用率。其格式为：head…scripttype=text/javascriptsrc=脚本文件名.js/script…/head8.2在网页中插入JavaScript的方法及定义8.2.3在HTML标签内添加脚本可以在HTML表单的输入标记符内添加脚本，以响应输入的事件。【演练8-2】在标记中添加JavaScript的脚本，本例文件8-2.html在浏览器中显示的效果如图8-3和图8-4所示。8.2在网页中插入JavaScript的方法及定义8.3.1循环滚动的图文字幕在网站的首页经常可以看到循环滚动的图文展示信息，来引起浏览者的注意，这种技术是通过滚动字幕技术实现的。1．字幕标签的语法在网页中，制作滚动字幕使用marquee标签，其格式为：marqueedirection=left|right|up|downbehavior=scroll|side|alternateloop=i|-1|infinitehspace=mvspace=nscrollamount=iscrolldelay=jbgcolor=色彩width=x|x%height=y流动文字或（和）图片/marquee8.3常见的网页特效8.3.1循环滚动的图文字幕2．案例——循环展示的图书【演练8-3】制作循环滚动的图像字幕。制作书城图书展示的网页，滚动的图像支持超链接，并且鼠标指针移动到图像上时，画面静止；鼠标指针移出图像后，图像继续滚动，页面显示的效果如图所示。8.3常见的网页特效8.3.2幻灯片切换的广告1．准备幻灯片播放器2．案例——幻灯片切换的广告【例8-4】制作Flash幻灯片广告，每隔一段时间，广告自动切换到下一幅画面；用户单击广告下方的数字，将直接切换到相应的画面；用户单击链接文字，可以打开相应的网页（读者可以根据需要自己设置链接的页面，这里不再制作该链接功能），页面显示的效果如图所示。8.3常见的网页特效【实训】在前面的章节中已经讲解了纵向列表模式导航菜单，在本章的实训中将讲解使用CSS样式结合JavaScript脚本制作二级纵向列表模式的导航菜单，本例文件8-5.html在浏览器中的浏览效果如图8-7所示。8.4实训——制作二级纵向列表模式的导航菜单1．在Web页面中用中文显示当天的日期和星期，如2013年11月26日星期二。2．制作一个Web页面，当鼠标悬停（onMouseOver）在文字链接上时，Web页面从蓝色自动变为红色（document.bgColor='red'），如图8-9所示。3．在网页中显示一个工作中的数字时钟，如图8-10所示。4．制作一个禁止使用鼠标右键操作的网页。当浏览者在网页上单击鼠标右键时，自动弹出一个警告对话框，禁止用户使用右键快捷菜单，实例效果如图8-11所示。5．制作网络鞋城商品幻灯片展示广告，如图8-12所示。习题8