Html语言-多媒体课件

Html语言——多媒体Html语言——多媒体Html语言——多媒体网页设计教程2021/4/16SchoolofAppliedTechnologySoochowUniversity3Html语言——多媒体Web图像<img>标记添加图像图像格式控制建立可单击的图像映射设置音频和视频很多学生觉得数学只有枯燥乏味的计算和证明，觉得很多问题离自己的生活实践很远，因而认为数学很难，从而产生怕数学厌数学的心理.因此数学教学中要设法把问题进行情境创设，与实际联系起来，将数学问题生活化、简单化.让学生在现实情境中体验和理解数学，感受数学来源于生活，应用于生活，从而对数学产生浓厚的兴趣并且喜欢上数学.如何在数学教学中进行情境创设，激发学生的数学兴趣呢？下面浅谈自己的几点做法，以飨读者.一、新课引入中创设情境新课的引入是教学过程的一个重要环节，教师若不注意将问题进行情境创设而照本宣科，本来很简单的内容反而让学生觉得难懂乏味，师生便不易进入“角色”，教师的导学过程和导学效应便不能得到充分体现，从而导致课堂气氛沉闷.若能把呆板的数学问题转化为学生通俗易懂的生活例子，让问题活灵活现，学生的思维也会活跃起来.如在上“有理数的加法运算”时，学生对和的符号和绝对值的确定常常是感到束手无策，对法则更是难以理解.对算式“－１０＋５＝？”我向学生用这样的例子来解释－１０表示向别人借１０块，＋５表示向别人还５块，结果还借５块，答案是５.在上这节课时笔者引入提问学生：“向别人借钱后应该怎样？”学生肯定会大声答：“要还！”再问：“向别人借１０块，再跟他借５块，共跟他借了多少块？我们可以把向别人借钱用负数来表示，还钱用正数来表示，用算式来表示出来.”经这样提问，学生立刻活跃起来.在做加法练习时很容易就得到和的结果，对法则的理解就豁然开朗.如在教学相似三角形的引入时，提问学生：不过河，如何测河对岸的树高？再如，在教学“两点确定一条直线”的引入时，问学生：知道为什么骑自行车时不会倒而不动时就会倒？善于运用生活例子，这样很容易激发学生的好奇心和学习意向.由此可见，在新课进行中生活化情境的创设尤为重要.新课中创设生活化情境可采用以下方法：创造“愤”、“徘”意境.“愤徘意境”，即所谓“欲知未知，半生不熟”的情境.“惯”是欲求明后而不得，“悱”是想说又说不出来.在这种情境下学生跃跃欲试，学习积极性最高.创设生活化情境，让学生体验数学知识源于生活，用于生活.在课堂教学中，要把教材内容与生活情境有机结合起来，使数学知识成为学生看得见，摸得着，听得到的现实，我们要善于挖掘教学内容中的生活情境，让数学贴近生活，学生就会真正体会到生活中充满了数学，感受到数学的价值，此外，在新课引入时还可通过以旧引新――复习与新课有联系的旧知识，引入新知识；故事激趣――与新课有关的数学和数学家的趣味故事等创设情境.如在学习乘方时引入一个小故事：传说有一位自作聪明的亿万富翁同意跟一个他认为很笨的家伙做一笔交易，即是在一个月的每一天，富翁第一天给他１元，第二天给他２元，第三天给他４元，以后每天只要给他的钱数是前一天钱数的２倍就可以了，而他每天必须给亿万富翁１０００万元，大家认为亿万富翁真的占便宜了吗？通过创设故事化情境，巧妙地与新授内容联系上，让学生在情境中产生兴趣，并自觉地参与到教学活动中，从而达到较好的学习效果.二、新课进行过程中创设情境课堂上如何吸引学生的注意力？我认为主要通过联系、挑战、变化、比喻的方式.所谓联系是在教学设计中要联系学生的客观现实和数学现实，使教学内容不是空洞无物而是有意义的，是与其已有经验和知识有联系的.挑战自然是制定教学任务，对学生具有挑战性，平庸拖沓的教学安排不可能吸引学生，教师应该尽可能地提高教学效率，让学生感到学习充实，收获大.一个问题解答完毕，谁还有其他创新的解法？类似具有挑战性的问题都能吸引学生.变化是教师在学生注意力涣散或情绪低落时，改变教学的形式，如讲授法、讨论法、“答记者问”、辩论会等，组织学生积极参与教学活动，在课堂上充分利用现代教学手段，如投影机、电视机、电脑等多媒体，发挥学生在教学过程中的主体作用.使学生的多个感观器官都受到适当的刺激，让学生在整堂课中都能处于一种兴奋状态.比喻是把知识点之间的因果关系，先后关系用有趣的例子来形容，如在讲两直线相交与对顶角的关系时，学生常对两者的关系分不清先后，认为对顶角的存在不需要两直线相交，导致不是两直线相交产生的角也是对顶角的错误.我跟学生强调，没有两直线相交就没有对顶角，就好像没有父亲就没有儿子，两直线相交是父亲，对顶角是儿子，内错角、同位角、同旁内角是它的兄弟姐妹，跟它是并列关系.学生对这样的比喻较容易接受，一下子就从混乱的思维中理清了思路，也加强了记忆，扎实了基础知识.三、练习中创设情境课堂练习是学生在一节课内对新知识的同化和顺应情况的一种检测，是学生对自己的认知活动的自我意识和自我体验，从中反馈出的信念可以得到及时评价和调整，同时课堂练习也是学生所掌握的基础知识和基本技能的内化过程.创设练习情境，能大大强化这个过程.可以创设游戏情境，比赛情境.如一些证明和计算题以小组为单位，每组派一名同学上黑板板演，规定时间内完成，学生立刻紧张兴奋起来，非常关心本组的结果是否正确，就把学生的注意力集中在黑板，既使课堂气氛活跃又培养了学生的集体荣誉感.或是按顺序答出答案，答不对的就要唱歌，这样学生就会认真听讲，认真做题.创设这样的情境，学生肯定会喜欢，不会觉得数学课是沉闷而漫长的.只要我们充分地认识到学生的主体地位，把学生真正当成学习的主人，充分发挥教师的主导作用，善于及时引导，点播，善于创设良好的情境氛围，我们的数学课堂就能够达到事半功倍的效果！德国教育家第斯多惠曾指出：“教学的艺术，不在于教授的本领，而在于激励、唤醒、鼓舞.”课堂教学中创设恰当情境，能唤醒学生强烈的求知欲望，促使他们保持持久的学习热情.因此，作为数学教师在课堂教学过程中创设良好的教学情境显得十分重要.数学课堂被人认为是比较枯燥无味和缺乏激情的，因此努力创建既宽松又富有人情味的且便于学生善于思考，乐于探究的课堂环境显得尤为重要.只有当学生体会到数学的乐趣学生才会主动学习和体验数学，才会觉得数学是能够创造美好生活的必要条件，数学成绩自然有所提高.一、布置作业的原则课堂作业和课外作业的布置，要以加深理解和巩固新知识为中心。作业要根据教材精心选择，难易适当。个别尖子学生，可另加少量难度稍大的选做题。作业在内容上要突出开放性和探究性，在容量上考虑量力性和差异性，在形式上体现新颖性和多样性，但在数量上要严格控制作业总量，坚决避免无效的重复的作业。我认为作业要遵循以下原则：（1）内容上突出开放性和探究性，除了部分传统型作业外，大部分作业的内容应突出灵活性和探究性。也就是学生解答问题时要有一定的思考性、动脑又动手，作业的答案不一定只有一个固定的答案，两个或者两个以上，要锻炼学生的发散思维和提高学生的想象力。（2）容量上考虑量力性和差异性，就是要求老师布置作业既不加重学生学习负担，又尽可能发挥学生的潜能。对学有余力或有特别兴趣的学生可以设计不同形式的作业，但要考虑学生的接受能力和和完成作业的时间，时间不宜过长。一般情况下，我认为根据学生年龄的不同，小学一年级不得布置家庭作业，二、三年级的家庭作业不超过30分钟，四年级不超过45分钟，五、六年级不超过一小时；初中不超过一个半小时。而小学生中午拿回家必须写完的作业应该取消，把中午休息的时间还给学生。（3）形式上体现新颖性和多样性，就是要改变单一的文字式作业形式，可以布置一些操作、实验、口头完成的作业；可以在课堂内完成，也可以在课外完成；可以由个人独立完成，也可以小组合作完成。二、当前中小学生家庭作业设置上存在的问题当前，许多教师反映中小学生家庭作业没有效率，尤其农村学生。教师疏于对家庭作业的有效设置，家长忙于家务、农活，没有起到监督作用。问题主要表现以下几点：（1）作业量大，重复性作业较多。教师总觉得"做得多总比少好"，"面面俱到，多多益善"，所以在布置作业时忽略了对作业的精心设计，作业只不过是一种简单的机械重复，实际上也增加了教师的工作量，而学生在做作业时也失去了做作业的热情，只讲究速度和数量，真正需要掌握的知识并没有掌握。作业写了很多，有的学生竟然不知道写的内容。记得我在检查孩子语文作业，发现孩子的语文老师在教完《詹天佑》一文后，竟布置了如此多的课外作业：①抄写课文中的精彩段落以及熟记整篇文章的生字及短语并听写；②背诵课文；③写一篇约500字的《读后感》。结果呢？第二天检查，记会并默写生字的占五分之三；书写整齐的占五分之二；背诵的人数不多；至于写读后感的却寥寥无几。暗自思量，这是没设身处地替学生想一想的结果。小学六年级学生要学习三门学科，就语文作业一项作业就占学生两小时时间，课外作业何其多矣！自然，学生厌烦甚至消极对待不可避免。这不但加重了学生的负担，而且对学生语文素养的整体提升毫无实效。所以，教师在布置作业时，要注意量的把握，同时作业要新颖，要能激发学生做作业的兴趣和对作业的期待。（2）作业没有针对性。每位学生基础不同，学习能力也不同，表现也存在差异。如果在布置作业时不区别对待，不分层布置作业就不利于调动全体学生的学习积极性，不能使各个层次的学生在各自的起点上都有所收获。因此，教师在布置作业时，要具体学生具体对待，不能千篇一律，一概而论。（3）作业知识点单一。学生今天学什么，布置的作业全部是今天所学知识点的相关内容，与以前的知识相脱节，不利于学生对知识的系统掌握。有的教师布置作业就是反复抄写，抄写生词，抄写课文，抄写试卷，缺乏创新。作业布置要多样性。如：绘画型作业，收集型作业，综合实践型作业。作业的设计要增加选择性、层次感，把作业的主动权真正还给学生。针对不同层次的学生设计出难易程度及数量各不相同的题目，一般可分为必做题（A类学生完成）、选做题（B类学生完成）、挑战题（C类学生完成）。三、作为教师，我们改如何有效设置作业，关注学生身心健康成长首先，我觉得各学科教师要注意对作业及时批改，及时反馈。作业一律用红笔批改和评定等级。作业批改要认真仔细，评语书写要工整，符号要统一，评价要恰当。格式、书写要规范。作业批改既是对学生学习的指导，又是收集教学效果反馈信息的重要手段。教师对批改的作业应作出评价或计分评等，或写出评语。（1）有布置，有批改，注意量的控制。批改的形式不限，以老师批改为主，辅以学生互相批改，老师督促指导。作业不宜重复布置，注意时间的控制，提高作业的时效性。对于问题较严重的学生当面直接辅导，加深其解，让其重新思考按要求重写，直到其理解。（2）符号评价和文字相结合：符号上尽量少用“×”，将错处用划线的形式指出；作业质量特别好的，用画特殊符号给予奖励；理解性错误画个大“？”意为“多多思考，多多益善”……在实际使用中这些方法一方面加深了订正的印象，另一方面又让复习多了那么点点乐趣，让学习不再那么枯燥，提高了学业效果。其次，中小学生家庭作业应注重培养学生的实践能力。据了解美国所有中小学都不会给孩子留暑假作业.但通常，他们会给孩子们布置一项调查任务。有个学校的某个班级在暑假任务是，制作一本名为“我的祖国”的介绍手册。原来，在这个班级里，30多位同学来自美国、中国、墨西哥，牙马加、澳大利亚、越南等10个国家。老师布置的这个暑假任务，为的是让孩子们进一步了解、热爱自己的祖国，通过互相交流增进彼此的了解。既是学习世界地理的好机会，也锻炼了孩子们的研究能力，真可谓一举多得。所以教育的最终目的是提高学生的自身能力，为以后发展打好基础。最后，作业要注重反思。孔子说：“学而不思则惘，思而不学则怠”。反思的方法很多：如学生自己对作业进行检查，反思作业的得失；同桌互相探讨对不同习题采用不同的思考方法、解题方法，总结一下作业中成功的做法；还可以师生间采用聊天的形式谈谈作业过程中的感受。反思是一种交流，在交流中总结所学知识的点滴，在交流中加深对知识的理解，在交流中取得进步。总之，学生做作业的过程是一个再学习的过程。作业可以体现一个学生的对所学内容的掌握情况。因此，教师在布置作业的时候要从习题的选择、布置的形式、作业的批改、反馈的策略等方面全面考虑，每一个环节都值得我们去研究、推敲，只有尽可能地优化每一个环节，才能提高作业的有效性。作为教师，是教书育人为准则，学生的进步和发展才是对我们工作的最大的肯定。因此，作为教师，在上好课的同时，对于学生的作业这一重要方面我们不能忽视。只要我们用心去做，一定会有好的结果。Web图像(3)PNG格式（PortableNetworksGraphics，可移植网络图形格式）是近年来新出现的一种图像格式，它适于任何类型，任何颜色深度的图片。该格式采用无损压缩来减小图片文件的大小。PNG格式具有以下特点：无损压缩没有颜色限制支持透明色，且透明度可调（0%-100%）2023/7/166SchoolofAppliedTechnologySoochowUniversityWeb图像使用网页图像的要点

在网页上使用图片，通常应注意以下三点：图像文件的大小网页中图片的数量和质量合理的使用动画2023/7/167SchoolofAppliedTechnologySoochowUniversity设置图像标记<img>格式：<imgalign=absbottom|absmiddle|baselin|bottom|left|middle|right|texttop|top<!--图像在页面中的对齐/布局方式，或图像与文字的对齐方式-->alt=text<!–提示信息-->border=n<!–图像边框宽度-->class=classname<!--引用的样式类型-->datafld=colname<!--数据应用-->datasrc=#ID<!–数据应用的指定标号-->dynsrc=url<!–动态显示的地址和路径-->height=n<!–图像高度-->hspace=n<!--距离边框的水平距离-->id=value<!--指定的唯一标号或者引用的样式类型标号-->2023/7/168SchoolofAppliedTechnologySoochowUniversity设置图像标记<img>ismap<!--说明是否映射-->lang=languege<!--使用的语种类型-->language=Javascript|jscript|vbscript|vbs<!--应用的脚本语言类型-->loop=n <!--循环次数-->lowsrc=url<!--低分辨率的图像地址或带有完整路径的文件-->name=name<!--图像名称-->src=url<!--图像地址或带有完整路径的图像文件-->style=css1-properties<!--应用样式表定义的样式-->title=text<!--标题文字-->usemap=url<!--引用的映射图像名称或地址-->vspace=n<!--距离边框的垂直距离-->width=n<!--图像宽度-->event=script<!--一定条件下触发的事件-->2023/7/169SchoolofAppliedTechnologySoochowUniversity利用<img>标记添加图像添加图像格式<imgsrc=url>例如：<html><head><!--显示标题文字--><title>文档中图像的使用</title></head><body>文档中添加了一幅图像<br> <!--使用<img>标记的src属性在文档中加入图片--> <imgsrc=image/flower1.gif> <br> <imgsrc=image/camp1.jpg> </body></html>2023/7/1610SchoolofAppliedTechnologySoochowUniversity利用<img>标记添加图像效果2023/7/1611SchoolofAppliedTechnologySoochowUniversity利用<input>标记添加图像格式：<inputtype=imagesrc=url>例如<html><head><!--显示标题文字--><title>文档中图像的使用</title></head><body>文档中添加了一幅图像<br> <!--使用<img>标记的src属性在文档中加入图片--> <inputtype=imagesrc=image/camp10.png><br> <inputtype=imagesrc=image/camp16.jpg> </body></html>2023/7/1612SchoolofAppliedTechnologySoochowUniversity利用<input>标记添加图像2023/7/1613SchoolofAppliedTechnologySoochowUniversity图像格式控制——图像大小图像大小控制格式：<imgsrc=urlwidth=nheight=n>说明用于控制图像与文本之间的布局关系建立一个图像的缩略图，如在页面上放置很多的小图片作为大图片的缩略图，然后把小图片链接到大图片上。2023/7/1614SchoolofAppliedTechnologySoochowUniversity图像格式控制——图像边框图像边框的设置格式<imgsrc=urlborder=n>说明：n为整数，默认值为0。2023/7/1615SchoolofAppliedTechnologySoochowUniversity图像格式控制——边框设置实例<html> <head><!--显示标题文字--> <title>文档中图像的使用</title> </head> <body> <!--使文档中所有元素中间对齐--> <center>

文档中添加了一幅图像

<br> <!--使用<img>标记的src属性在文档中加入图片--> <imgsrc=image/camp10.pngwidth=64height=64align=middle> <br><br><br> <imgborder=6src=image/camp16.jpgalign=middle> </center> </body></html>2023/7/1616SchoolofAppliedTechnologySoochowUniversity边框设置实例效果2023/7/1617SchoolofAppliedTechnologySoochowUniversity图像格式控制——对齐方式图像对齐方式格式<imgsrc=urlalign=absbottom|absmiddle|baselin|bottom|left|middle|right|texttop|top><!--图像的对齐方式-->实现居中的方法有两种：一是使用<center>标记；二是使用<p>标记的align属性。2023/7/1618SchoolofAppliedTechnologySoochowUniversity图像格式控制——对齐方式实现居中方法的格式：<center>标记<center><imgsrc=”图像文件名”></center><p>标记<palign=center><img>src=”图像文件名”</p>使用<p>标记的align属性可实现图像的居左和居右。2023/7/1619SchoolofAppliedTechnologySoochowUniversity图像格式控制——对齐方式实例<html> <head><!--显示标题文字--> <title>文档中图像的使用</title> </head> <body> <!--使文档中所有元素中间对齐--> <center>

文档中添加了一幅图像

<br> <!--使用<img>标记的src属性在文档中加入图片--> <imgsrc=image/camp10.pngwidth=64height=64align=texttop> <br><br><br> <imgborder=6src=image/camp16.jpgalign=middle> </center> </body></html>2023/7/1620SchoolofAppliedTechnologySoochowUniversity图像格式控制——对齐方式效果2023/7/1621SchoolofAppliedTechnologySoochowUniversity图像格式控制—边距设置和加载低分辨率图像图像边距设置格式<imgsrc=urlhspace=n<!--水平距离-->vspace=n><!--垂直距离-->加载低分辨率图像格式<imglowsrc=urlsrc=url>作用在加载大图片时，先加载低分辨率的图像，然后逐渐变清晰。2023/7/1622SchoolofAppliedTechnologySoochowUniversity建立可单击的图像映射可单击的图像映射——超链接格式<ahref=url><imgsrc=url></a>例如<ahref=go.163><imgsrc=i.gifalt=“链接到音乐网站go.163”></a>2023/7/1623SchoolofAppliedTechnologySoochowUniversity建立可单击的图像映射图像部分的单击图像映射——超链接功能：一幅图像上，单击不同区域就会链接到不同的网页方法(1)标出图像每一部分的坐标为每一部分建立超链接，并保存为一个文件再使用锚标记描述该坐标文件和图像传送到服务器注意：引用图像时要加上ismap属性2023/7/1624SchoolofAppliedTechnologySoochowUniversity建立可单击的图像映射图像部分的单击图像映射——超链接格式<ahref=服务器/映射文件><imgsrc=映射图像ismap></a>缺点步骤繁杂需要编写应用程序来解析这个映射2023/7/1625SchoolofAppliedTechnologySoochowUniversity建立可单击的图像映射<map>标记建立图像部分映射(2)格式<mapclass=classname<!--类名称-->id=value <!--唯一标志-->lang=language<!--应用的脚本类型-->name=name<!--指定的名称-->style=css1-properties<!--应用的样式表-->title=text<!--标题-->event=script<!--一定条件下产生的事件-->>2023/7/1626SchoolofAppliedTechnologySoochowUniversity建立可单击的图像映射<map>标记建立图像部分映射(2) 例如：建立映射名称——唯一标识<mapname=firstmap></map>然后就可以使用<area>标记实现图像的部分超链接<area>标记格式<areaalt=text<!--提示信息-->Class=classname<!--类名称-->Coords=coordinates<!--联合的元素-->2023/7/1627SchoolofAppliedTechnologySoochowUniversity建立可单击的图像映射<area>标记格式：href=url<!--指定目地地址或完全路径的文件

-->id=value<!--唯一标志-->lang=language<!--应用的语种类型-->language=javascript|jscript|vbscript|vbs<!--应用的脚本类型-->nohref<!--不带地址或文件-->shape=circ|circle|poly|polygon|rect|rectangle<!--指定范围的形状-->style=css1-properties<!--应用的样式表-->tabindex=n<!--几个区域之间的次序-->target=window_name|_blank|_parent|_self|_toptitle=text<!--标题-->event=script<!--一定条件下产生的事件-->>2023/7/1628SchoolofAppliedTechnologySoochowUniversity建立可单击的图像映射<area>标记说明：主要应用alt属性为每一块映射添加文字提示，应用coords属性建立图像相应部分的坐标，应用shape属性指定映射的形状图像映射格式<mapname=mapname><areashape=circ|circle|poly|polygon|rect|rectanglecoords=坐标1href=url>…..<areashape=circ|circle|poly|polygon|rect|rectanglecoords=坐标2href=url></map>2023/7/1629SchoolofAppliedTechnologySoochowUniversity建立可单击的图像映射——实例<html> <head><!--显示标题文字--> <title>区域映射的应用</title> </head> <body> <mapname="mymap"> <!--设置映射的名称以便于引用--> <!--设定四个不同位置的区域以及他们的超链接目的文件--> <areashape=rectcoords=1,1,60,60alt=第一个矩形范围href="h1.htm"> <areashape=rectcoords=60,60,126,127alt=第二个矩形范围href="h2.htm"> <areashape=circlecoords=30,90,30alt=第一个圆形范围href="h3.htm"> <areashape=circlecoords=93,30,30alt=第二个圆形范围href="h4.htm"> </map> <imgalt="图形映射"src="big.gif"usemap="#mymap"> </body></html>2023/7/1630SchoolofAppliedTechnologySoochowUniversity设置网页的背景1．

设置背景色格式为：

<bodybgcolor=”颜色值”>“颜色值”可以为颜色的英文名或相应十六进制值。2023/7/1631SchoolofAppliedTechnologySoochowUniversity2．用图像作为背景其格式为<bodybackground=”图像文件名”>“图像文件名”中包括图像文件的路径可以是相对路经也可以是绝对路径。图像文件可为GIF格式或JPEG格式的文件。图像文件要做得很小，以便加快下载速度。

设置网页的背景2023/7/1632SchoolofAppliedTechnologySoochowUniversity图像作背景实例<html> <head> <title>姚望舒个人主页内容介绍</title> </head> <bodybackground="images/bg0038.jpg"> <h1align=centerstyle="color:blue">姚望舒个人主页</h1> <hrsize=6color=red> <hrsize=3color=blue> </body></html>设置网页的背景实例2023/7/1633SchoolofAppliedTechnologySoochowUniversity图像作背景实例效果2023/7/1634SchoolofAppliedTechnologySoochowUniversity设置音频和视频1.加入背景声音用<bgsound>标记能在网页中加入背景声音，格式为：

<bgsoundsrc=”声音文件名”

loop=”播放次数”>

加入的背景声音文件的格式为.wav、.au、.mid。播放次数取-1或I