第8章网页源代码的编辑.docx
- 文档编号:12625738
- 上传时间:2023-04-21
- 格式:DOCX
- 页数:18
- 大小:20.97KB
第8章网页源代码的编辑.docx
《第8章网页源代码的编辑.docx》由会员分享,可在线阅读,更多相关《第8章网页源代码的编辑.docx(18页珍藏版)》请在冰豆网上搜索。
第8章网页源代码的编辑
第8章网页源代码的编辑
课题:
脚本简介(8.2)
教学分析与准备
1.教学任务
了解什么是JavaScript
掌握在HTML中使用JavaScript的方法
理解常见网页特效的脚本设计
2.教学重点
什么是JavaScript
3.教学难点
在HTML中使用JavaScript的方法
4.教学策略
任务驱动学习和协作学习、探究学习相结合
5.教学环境
多媒体网络教室
6.建议课时数
4课时
三、学习过程
教学环节及手段
教学内容
备注
组织课堂:
导入新课:
教师演示网页脚本特效,吸引学生兴趣,引入新课
讲述新课:
讲授法
PPT演示
多媒体演示
讲授法
讲授法
演示制作过程
讲授法
提示学生虽然HTML语言是不区分大小写的,但是JavaScript是区分大小写的。
课堂练习
讲授法
演示制作过程
课堂练习
讲授法
演示制作过程
课堂练习
讲授法
演示制作过程
课堂练习
讲授法
演示制作过程
课堂练习
讲授法
演示制作过程
课堂练习
讲授法
演示制作过程
课堂练习
讲授法
演示制作过程
课堂练习
讲授法
演示制作过程
课堂练习
课堂小结
师生问好
整顿课堂纪律,检查书本情况,准备进入教学。
第8章网页源代码的编辑
8.2脚本简介
8.2.1JavaScript在HTML中的使用
1.什么是JavaScript。
JavaScript是Netscape(网景)开发的一种脚本语言。
脚本是一系列程序指令或语句,脚本语言的作用是扩展使用它的应用程序的性能,而JavaScript脚本语言的作用则是扩展HTML的功能。
具体来说,JavaScript是专用于WWW的,它是对编写Web网页的标记语言HTML的扩展。
使用JavaScript,可以让静态的HTML网页变成动态的具有真正交互性的网页。
JavaScript的命令和函数可以同HTML标识符一起,放置在用户的Web网页中。
当用户的浏览器检查网页时,浏览器将直接运行这些程序并执行相应的操作。
2.在HTML文档中使用JavaScript。
使用HTML标记,就可将JavaScript代码嵌入到HTML文档中,其基本格式如下:
--
JavaScript程序代码……
//-->
例8.6一个最简单的JavaScript程序。
这个例子通过JavaScript代码显示一个提示框,提示框中的内容为“这是我的第一个JavaScript程序!
”,如图8-6所示。
单击提示框中的“确定”按钮后,提示框即可关闭。
(网页原代码见教材)
【注意事项】
1.JavaScript代码使用标记集成到HTML文档中。
在一个HTML文档中,可以有多对标记来嵌入多段JavaScript代码。
每段JavaScript代码中可以包含一个或多个JavaScript语句。
2.每个JavaScript语句以分号“;”结束。
3.以为结束标记的JavaScript代码,原则上可以放在HTML文档的任何部分,但为了使HTML文档结构清晰、便于维护,通常把实现数学计算、字符串处理或函数定义的JavaScript代码,放在
和标记之间,而把实现在网页上显示处理结果的JavaScript代码放在和标记之间。4.
--和-->是HTML中注释的开始标记和结束标记。
由于一些较老的不支持JavaScript的浏览器在打开含有JavaScript代码的HTML文档时,会将JavaScript代码当作一般的HTML来处理,从而导致页面显示混乱,因此,为了避免这种现象,通常将JavaScript代码放在HTML的注释标记
--和-->之间。
支持JavaScript的浏览器,能够识别并执行放在HTML注释标记之间的JavaScript代码,而不支持JavaScript的浏览器,则会忽略HTML注释标记之间的JavaScript代码。
5.“//”符号是JavaScript语言的注释标记,可以将对程序的说明和注释等文字放在“//”符号之后。
如,例8.6中的JavaScript代码段可改写如下:
--
alert("这是我的第一个JavaScript程序!
");
//JavaScript代码结束-->
这里,“//”符号之后的“JavaScript代码结束”就是注释文字。
学生根据例题进行练习
8.2.2鼠标跟踪的脚本设计
例8.7图片跟随鼠标移动。
这个例子的运行结果是,当鼠标在网页上移动时,始终有一个IE标志图片跟随着鼠标同时移动。
(网页原代码见教材)
【注意事项】
1.如果想在你自己的HTML文档中套用这个图片跟随鼠标移动的特效,就将范例代码中
和之间的JavaScript代码段复制到你的网页原代码中的和之间,并将范例代码中和之间的JavaScript代码段复制到你的网页原代码中的和之间。2.如果想把范例中跟随鼠标移动的IE标志图片改为你自己喜欢的图片,则可修改下面的JavaScript代码:
document.write(' absolute; TOP: 5pt;LEFT: 5pt;Z-INDEX: 10;visibility: hidden;">'); 只要将src="ie.gif"中的ie.gif换成自己的图片文件名即可。 学生根据例题进行练习 例8.8文字跟随鼠标移动。 本例的运行结果是,当鼠标在网页上移动时,会有一串文字随着鼠标移动,而且文字跟随鼠标移动时会有一种漂动的效果。 (网页原代码见教材) 【注意事项】 1.本例代码中,下面的代码段定义了跟随鼠标移动的字符串的样式: .spanstyle { position: absolute; visibility: visible; top: -50px; font-size: 13pt; font-family: 楷体; color: #2010D0; font-weight: bold; } 其中,font-size定义字符大小,font-family定义字体,color定义字符的颜色。 可以通过修改这些属性的值,来修改跟随鼠标移动的字符串的格式。 2.如果想修改跟随鼠标移动的字符串的内容,则可修改以下代码: varmessage="欢迎光临网上之家! "; 只要将字符串"欢迎光临网上之家! "改为自己想要的文字内容即可。 3.如果想调整字符串各个字符之间的间距,则可修改以下代码: varstep=25; 该语句定义了一个用于存放字符间距值的变量step,并将其初始化为25,即字符间距为25px。 学生根据例题进行练习 8.2.3状态栏的脚本设计 状态栏位于IE浏览器窗口的底部,其中显示了当前浏览器的运行状况。 我们可以通过JavaScript脚本设计,来自由设置状态栏中显示的内容,或是设置动态显示的状态栏信息,使网页效果更加富有趣味性。 例8.9改变状态栏的显示信息。 在本例中,我们将看到如何通过设置window对象的defaultStatus属性和status属性,来改变状态栏的显示信息。 本例的运行结果如图8-9所示,当鼠标光标置于超链接“”处时,状态栏中会显示“单击这里进入天府热线”,而当鼠标光标位于超链接之外时,状态栏中则会显示“欢迎访问网上之家”。 (网页原代码见教材) 【注意事项】 1.window对象的defaultStatus属性表示状态栏的缺省信息,在没有设置状态栏的显示内容时,状态栏中将显示defaultStatus属性的值。 2.如果想临时改变状态栏的显示内容,则可设置window对象的status属性。 学生根据例题进行练习 例8.10在状态栏产生闪烁的文本效果。 本例的运行结果是在状态栏产生闪烁的文字。 (网页原代码见教材) 【注意事项】 1.如果想将状态栏中的闪烁文字“欢迎访问网上之家! ”改成其他文字,只需在定义字符串变量message时,将其初始化为自己想要的字符串,即,需要修改如下代码: varmessage="欢迎访问网上之家! "; 2.变量speed的作用是存放文字闪烁的延迟时间值,其时间单位为毫秒。 你可以通过修改speed的值来调整状态栏中文字的闪烁速度,speed的值越大,文字闪烁的速度越慢,speed的值越小,文字闪烁的速度就越快。 3.注意下面的代码: 在
学生根据例题进行练习
8.2.4窗口的脚本设计
设计网页时,常常会涉及到对窗口的控制,如打开一个新窗口和关闭窗口,等等。
下面给出的范例中,将详细介绍打开和关闭窗口的方法。
例8.11打开和关闭窗口。
本例的运行结果是一装载网页即自动打开一个新窗口,该窗口5秒钟后又自动关闭。
(网页原代码见教材)
【注意事项】
1.注意下面的代码:
newwindow=window.open("new.htm","newwindow"
"left=100,top=120,width=300,height=100,status,
scrollbars");
该语句用window.open()方法定义了一个名为newwindow的窗口对象,window.open()方法的功能是打开一个新窗口,其调用格式为:
window.open("URL","windowname",["window
Features"]);
其中三个参数的意义如下:
(1)"URL":
表示新建窗口中显示的页面的
URL地址。
(2)"windowname":
表示新窗口的名称。
(3)"windowFeatures":
此项参数为可选项,
具体包含对新窗口的位置、大小以及菜单栏、工具栏、状态栏和滚动条等属性的设置。
如:
newwindow=window.open("new.htm","newwindow",
"left=100,top=120,width=300,height=100,status,
scrollbars");
表示打开一个新窗口,该窗口内显示的网页为new.htm,窗口的名称为newwindow,窗口左上角在屏幕上的位置是(100,120),窗口的宽度为300,高度为100,新窗口有状态栏,有滚动条。
2.语句setTimeout("newwindow.close();",5000)的作用是延迟5000毫秒之后关闭newwindow窗口。
注意,close()方法的作用是关闭一个窗口,其具体使用格式为:
窗口对象名.close();
学生根据例题进行练习
8.2.5链接的脚本设计
在FrontPage2000中对文本对象设置超链接时,被链接的文字会自动加上下划线。
本节的范例将介绍如何通过脚本设计,取消链接文字的下划线。
例8.12没有下划线的超链接。
本例中,将产生一个没有下划线的链接文本“网上之家”,单击该超链接之后,则会在当前浏览器窗口中打开链接的目标网页。
(网页原代码见教材)
【注意事项】
1.注意下面的代码:
hand"onclick="newpage();"> size="5">网上之家 这段代码对文本“网上之家”设置了超链接。 其中,和标记的作用是使文本以粗体显示,和标记的作用是使文本以斜体显示。 标记定义了文本的字体格式,标记中的face属性定义文本的字体类型,color属性定义文本的颜色,size属性定义文本的大小。 2.style="cursor: hand"表示当鼠标光标置于链接文本之上时,将鼠标变成手形光标。 修改hand可得到其他形状的光标,例如: style="cursor: help" 表示将鼠标变成带问号的帮助光标。 3.onclick="newpage();"表示当鼠标在链接文本上单击时,执行函数newpage()中的代码。 4.在newpage()函数中,代码: window.location="new.htm"; 其作用在当前浏览器窗口中,打开网页new.htm。 window对象的location属性表示窗口中当前文档的URL。 学生根据例题进行练习 8.2.6其他脚本设计 本节介绍两种特殊显示效果的脚本设计,一种效果是不停闪烁的图片,另一种效果则是网页的背景颜色不断变化。 例8.13不停闪烁的图片。 网页上不停闪烁的图片能够吸引人的视线。 本例中,一个设置有超链接的图片以闪烁的方式显示。 (网页原代码见教材) 【注意事项】 1.本例中最关键的代码段是: functionblink() { soccer.style.visibility=(soccer.style.visibility =="hidden")? "visible": "hidden"; setTimeout("blink()",time); } 当soccer.style.visibility的值为visible时,将显示指定的图片,而当soccer.style.visibility的值为hidden时,则会隐藏图片。 2.time的值越小,则图片闪烁的速度就越快,反之,图片闪烁的速度越慢。 学生根据例题进行练习 例8.14网页的背景颜色不断变化。 本例的运行结果是,网页的背景颜色在10种事先设置好的颜色之间交替变化。 (网页原代码见教材) 【注意事项】 1.十种预设的颜色值被放在一个名为col的数组对象中,数组的定义由下面的代码实现: col=newArray(); 数组对象的下标从0开始,下面的代码段将十种不同的颜色值依次输入到数组对象的各个下标元素中: col[0]="yellow"; col[1]="coral"; col[2]="orange"; col[3]="red"; col[4]="greenyellow"; col[5]="lime"; col[6]="turquoise"; col[7]="coral"; col[8]="blueviolet"; col[9]="violet"; 2.改变网页背景颜色的代码段是: functionchangColor() { if(pos<0||pos>9)pos=0; document.bgColor=col[pos]; pos++; setTimeout("changColor()",3000); } 其中,语句document.bgColor=col[pos];的作用是,将页面的背景设置为以pos为下标的数组对象col的值所代表的颜色。 学生根据例题进行练习 【学习提示】 在Internet上,网页的源代码是公开的,这就为我们学习HTML语言和脚本语言提供了方便之门。 多浏览好的网页,不断向他人的网页学习,是迅速提高网页制作水平的行之有效的方法。 总结重点及难点知,总识结任务完成情况 学生做好了给予鼓励,出现问题及时给予其提示 学生做好了给予鼓励,出现问题及时给予其提示 学生做好了给予鼓励,出现问题及时给予其提示 学生做好了给予鼓励,出现问题及时给予其提示 学生做好了给予鼓励,出现问题及时给予其提示 学生做好了给予鼓励,出现问题及时给予其提示 学生做好了给予鼓励,出现问题及时给予其提示 学生做好了给予鼓励,出现问题及时给予其提示 学生做好了给予鼓励,出现问题及时给予其提示 鼓励学生总结 展示优秀学生作品 课下任务拓展: 【任务八】 利用本章中所介绍的网页源代码设计的相关知识,设计一个有个性的个人网页。 1.基本要求: (1)使用HTML语言编写网页。 (2)网页中必须设置标题、插入图片、创建表格,以及设置文字格式和网页背景颜色。 (3)网页中必须包含超链接。 (4)标题栏显示相应的欢迎信息。 相关例题请查阅“任务八样例”文件夹中的样例8-1。 2.一般要求: (1)能将本章8.2节介绍的JavaScript脚本代码,插入到网页HTML源代码的适当位置,使网页产生一些特殊的显示效果。 (2)在完成基本要求的基础上,在主页中加入一种由JavaScript脚本代码实现的特效。 (3)一装载网页,即在状态栏中显示网站的名称和制作人的姓名等文字信息。 相关例题请查阅“任务八样例”文件夹中的样例8-2。 3.较高要求: (1)能在网页中加入至少两种由JavaScript脚本代码实现的特效。 (2)网页上有一串欢迎文字信息跟随鼠标移动。 (3)主页中至少包含两个超链接。 鼠标悬停在不同的超链接上时,状态栏中会出现不同的文字提示。 相关例题请查阅“任务八样例”文件夹中的样例8-3。
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 网页 源代码 编辑