在网页中插入滚动文字公开课教案
- 格式:doc
- 大小:697.50 KB
- 文档页数:4
《字儿舞动有高招》教学设计教学目标:知识目标:掌握添加滚动字幕、设置字幕的方法。
能力目标:通过本课的学习,学生能合理运用动态字幕、设置字幕等来增强网页的表现力。
教学重难点:教学重点:掌握添加滚动字幕、设置字幕的方法。
教学难点:滚动字幕及设置字幕的灵活运用。
教学方法:讲解法、练习法、实践操作法教学过程:(一)导入新课师:前几节课我们己经建起了“陕西美食”的主页,而且主页里放了许多美食图片,大家和老师一起回味一下我们的美食作品吧!(出示“陕西美食”的主页,学生观看。
)师:好那咱们再看一个作品好不好?在看的时候同学们注意观察第二个作品和第一个作品哪些不同?师:那个网页更能吸引你?今天咱们就先来研究如何让文字动起来。
(板书课题:字儿舞动有高招)(二)新课教学:活动一:在网页中插入字幕滚动字幕是在网页中循环连续地移动的文字,适宜于在网页中显示时效性强的新闻或者欢迎等消息。
师:现在我们已经打开了作品,那么文字到底是怎样动起来的?下面就请同学们小组合作,结合课本第10页的内容“一、插入字幕”,看清步骤,自主探索,尝试操作,看谁第一个让文字动起来,开始吧。
(下去巡视指导,了解学生的探索情况)师:你让文字动起来了吗?老师演示一边,引导学生自主完成字幕的添加。
活动二:设置字幕属性学生自主探究完成:设置字幕的字体、字号、颜色、边框、背景等、。
(三)教师和学生一起总结:1、字幕的插入方法。
板书:插入字幕:插入——web组件——字幕2、字体格式的设置与底色边框等的设置方法。
板书:修改字幕:双击滚动字幕或右键单击板书设计:第3课字儿舞动有高招插入字幕:插入——web组件——字幕修改字幕:双击滚动字幕或在滚动字幕上单击右键。
《让字动起来》教学设计第5课《让字动起来》教学设计教学目标:1.知识与技能:能熟练进行滚动文字设置,并能预览和修改字幕。
2.过程与方法:在观察、讨论、探索、实践的过程中学习新知。
3.情感态度与价值观:培养学生大胆动手,开拓创新的能力。
教学重点:能熟练进行设置字幕,预览和修改字幕。
教学难点:制作和修改滚动字幕。
教具:多媒体电脑课型:新授教学过程一、谈话引入:同学们,在之前的学习中,我们认识FrontPage,学会了制作最简单的网页,还学会了用插入图片和线条的方法来装饰它,通过上节课的展示,老师发现大家做的网页都很漂亮!今天我们的课堂上来了一位你们都很熟悉的好朋友——柯南,柯南同学也把他的作品带来了,想和同学们比一比,我们一起来看看吧!(出示带有滚动字幕的网页)二、学习新课(一)制作滚动字幕1、同学们还记得吗?在我们第一节课参观“咪咪豆网屋”时,看到“欢迎光临”四个字也会动,下面我们就分小组来讨论一下,怎么样让“欢迎光临”这几个字动起来?讨论好的小组请派一名代表上台来给我们5、请同学们按照这个步骤动手制作滚动字幕吧!(师巡视)(二)预览网页。
1、质疑:老师看到大家都已经把字幕设置好了,但为什么不像柯南同学设置的那样会动呢?有谁知道?2、明确:可以用两种方法看到滚动效果:①大家可以单击网页左下角的“预览”按钮;②先把作品保存,点击文件—另存为或保存就可以了。
(在这里老师要提醒同学们注意,要选择好自己的保存路径以及文件名,这样我们可以比较方便的找到它。
保存好之后,点击打开此文件,我们就可以在浏览器中欣赏自己的作品了。
)3、同学们赶快动手试试,看看能不能出现神奇的滚动字幕吧!(三)修改字幕。
1、看看我们自己的作品,同学们还有什么问题?2、质疑:我们设置的字幕只能从右向左滚动吗?有谁知道在哪里可以改变它的滚动方向?同学们可以自己动手试试或者同桌相互讨论一下,我们看看谁最先发现!3、明确:①双击/右击字幕打开“字幕属性”对话框;②在“方向”栏中单击“右”;③单击“确定”按钮。
英语教学滚动字幕制作教案教案标题:英语教学滚动字幕制作教案教学目标:1. 学生能够理解滚动字幕的作用和使用方法。
2. 学生能够运用滚动字幕制作工具,制作适合英语教学的滚动字幕。
3. 学生能够运用滚动字幕辅助英语听力、口语和阅读的学习。
教学准备:1. 计算机和投影仪。
2. 滚动字幕制作软件(如Adobe Premiere、Windows Movie Maker等)。
3. 英语教学素材(如英语歌曲、短片等)。
4. 学生英语学习笔记本。
教学步骤:引入:1. 向学生解释滚动字幕的定义和作用,以及在英语学习中的重要性。
2. 展示一些使用滚动字幕的英语学习资源,如英语歌曲视频、英语新闻报道等。
实践:3. 向学生介绍滚动字幕制作软件的基本功能和操作方法。
4. 指导学生安装并打开滚动字幕制作软件。
5. 分发学生英语学习素材,如一首英语歌曲的音频文件。
6. 指导学生导入音频文件到滚动字幕制作软件中。
7. 指导学生根据音频内容,逐句制作滚动字幕,并调整字幕的显示时间和样式。
8. 鼓励学生在制作滚动字幕的过程中,积极思考和记录英语学习中的重点词汇、短语和句子。
巩固:9. 学生展示他们制作的滚动字幕视频,并邀请同学们观看。
10. 学生之间进行互动,分享观看滚动字幕视频的体验和学习收获。
11. 教师对学生的滚动字幕视频进行评价和反馈,鼓励学生改进和进一步创作。
拓展:12. 鼓励学生在其他英语学习活动中运用滚动字幕,如制作英语口语对话视频、英语阅读材料等。
13. 提供更多滚动字幕制作软件和英语学习资源的推荐,让学生继续探索和实践。
评估:14. 观察学生在制作滚动字幕过程中的参与程度和表现。
15. 评估学生展示的滚动字幕视频的质量和内容。
16. 收集学生的英语学习笔记本,检查他们在制作滚动字幕过程中记录的重点词汇、短语和句子。
扩展活动:17. 鼓励学生将滚动字幕视频上传至在线平台,与更多人分享和交流。
18. 组织学生参加英语学习展示活动,展示他们制作的滚动字幕视频。
优化教学模式构建高效课堂添加滚动字幕问题导读------评价单制定:审核班级学生姓名【学习目标】握在Frontpage中如何插入滚动字幕并调整其属性。
【重点难点】滚动字幕的制作【学法指导】1、依据学习目标和自主学习要求,进行快速、高效预习。
2、按照合作探究要求,积极讨论,精彩展示。
【自学提纲】1、插入滚动字幕做一个滚动字幕需要以下几步步骤:步骤一:把光标置于要插入字幕的地方。
步骤二:单击菜单,使用中的命令。
步骤三:在“文本”框中输入文字“欢迎光临!”。
步骤四:选择字幕滚动方向,如:选择为向“左”。
步骤五:单击按钮返回页面。
2、除了可以改变字母的方向外,还可以调整字幕的大小。
要调整字幕的大小,可以在对话框中进行调整,也可以手工调整。
【合作探究】给网页添加天气预报栏目的滚动字幕。
【当堂训练】在“字幕属性”对话框中,还可以改变滚动文字的背景,滚动方向、移动程度、滚动方式等,组合出多种效果来。
同学们可以将滚动字幕设计成自己喜欢的样子(双击已经输入的滚动字幕就会弹出“字幕属性”对话框。
)【课堂小结】略【布置作业】给自己的网页添加“欢迎”字样的字幕,并设置好属性。
【知识拓展】如何在frontpage中设置上下滚动的字幕在FrontPage中,字幕的滚动属性只有向左和向右滚动,如果用户想实现向上和向下滚动必须修改Html源代码才能完成。
具体操作是:在源代码编辑状态下,为滚动标签<maquee〉添加direction即可。
<marquee direction="up"〉滚动的字幕文字〈/marquee〉。
把up改为down即可实现字幕向下滚动的效果。
我的困惑(问题)自我评价:科组长评价:教师评价:先学后导问题评价。
第12课:让网页“动”起来教学目标:1、知识与技能:掌握在网页中插入动态元素的方法;了解评价网站的标准;使学生初步学会如何展开作品评价。
2、过程与方法:能够熟练地在网页中插入背景音乐、滚动字幕、视频等动态元素。
3、情感态度与价值观:通过任务中的素材等对学生进行品德教育和审美教育。
教学重点、难点:1、重点:在网页中插入背景音乐、滚动字幕、视频。
2、难点:滚动字幕的插入。
教学方法:任务驱动、自主探究、讲授、演示、上机指导、小组合作教具准备:多媒体教室、课本、软件frontpage2003、素材教学过程:一、情境导入同学们,上一课大家已经让我们的网站家园变漂亮了,如果我们在漂亮的家园里欣赏着美景,倾听着美妙的音乐,观看着精彩的视频,那该多幸福啊!下面我们就欣赏一下郑晓东同学的网站“我爱我的家乡”吧!教师演示,学生欣赏,教师及时介绍相关信息,并进行品德教育和审美教育。
欣赏完成了,你认为哪一张网页更吸引你,郑晓东同学的网页与我们上节课制作的有什么特别之处?四人一小组讨论一下,发现的便可举手。
(小组讨论,找生回答,师总结,课件出示,并引出知识点及课题)二、探究新知1、出示本课学习目标并共同学习。
2、在学习新知识前,我想请同学们帮个忙,王强同学做了一个“我的母校”网站,但是还没完成,他想使自己的网站动起来,让网站更吸引人,更具感染力,老师相信你们通过学习本节课的知识后,一定能帮王强这个忙,对吗?对。
好我们来学习第一个任务:任务一、背景音乐的插入及带有背景音乐的网页的保存。
学生利用导学案自学操作步骤,并打开桌面上“讲解与练习”文件夹中我的母校文件夹中的“index.htm”网页文件,帮助王强完成第1个任务:1、将此网页的背景音乐设为:小小少年.mid,小组合作,也可根据课本62页文字及图片提示进行自主学习。
注:所需要的音乐文件在“素材”文件夹中。
师巡视指导,鼓励他们动手试一下,尝试在体验中学习。
大部分学生完成后,找同学演示。
第5讲:网页中滚动字幕的制作方法使用标签选择器插入marquee标签并设置参数来实现,具体方法如下:1.在网页表格main的第1行单元格中输入要滚动显示的文本“欢迎光临我的网站!”。
2.选中文本“欢迎光临我的网站!”,在“插入”面板的“常用”选项卡中单击【标签选择器】按钮或按下【Ctrl+T】键,此时Dreamweaver 8将打开标签编辑器对话框,选择【HTML标签】→【页元素】→【marquee】项,然后点击【插入】按钮,再点击【关闭】。
如图1所示。
图1 标签选择器当点击“插入”按钮后,将会自动弹出代码窗口(即打开“拆分”选项卡),在代码窗口会看到被选择的文本添加了标签:“<marquee>欢迎光临我的网站!</marquee>”。
3.设置marquee标签在代码窗口中用鼠标指针选择标签:“ <marquee>”,然后在Dreamweaver 8工作界面的右侧点击标签检查器面板,打开标签<marquee>属性面板,如图3-41所示。
在标签<marquee>属性面板中进行如下设置:(1)点击behavior设置项右边的下拉箭头,选择滚动字幕内容的运动方式,我们在此选择alternate项。
behavior属性各项含义如下:alternate:内容在相反两个方向滚来滚去。
scroll:内容向同一个方向滚动。
slide:内容接触到字幕边框就停止滚动。
(2)direction属性设置字幕内容的滚动方向,我们在此选择left项。
direction属性各项含义如下:down::向下运动。
left::向左运动。
right::向右运动。
up::向上运动。
图2 标签<marquee>属性面板(3)scrollamount属性设置字幕滚动的速度,实例中其值设为1。
scrollamount属性值越大,字幕滚动的速度越快。
(4)scrolldelay属性设置字幕内容滚动时停顿的时间,单位为毫秒。
第11课为网页设置背景音乐与滚动字幕教材分析《网站制作》这册教材,是九年级第一学期学生用书,教材共分5个单元,第1单元“网站建设基础”,介绍网页和网站的基本概念,知道建设网站需要做哪些准备;第2单元“建设自己的网站”,学习创建站点、制作主页并给主页添加内容的方法;第3单元“丰富自己的网站”,学习利用网页模板制作子页、建立超链接;第4单元“美化网页”,学习修饰、美化网页的常用方法;第5单元“检测和发布网站”学习检测和发布网站的一般方法。
通过本册教材的学习,学生将能根据表达需要制定网站建设方案,采集与加工所需素材,初步掌握使用Dreamweaver软件创建站点,制作、美化网页和发布网站的一般方法。
《为网页设置背景音乐与滚动字幕》是本册教材第4单元《美化网页》第2课时的内容。
第4单元《美化网页》主要讲了设置网页背景、设置分割线、添加背景音乐、插入滚动字幕等修饰、美化网页的一般方法,根据课本内容的难易程度及知识点的相关性,将第4单元分为3课时进行学习。
第1课时,学习设置网页背景;第2课时,学习设置网页分割线;第3课时,学习为网页设置背景音乐与滚动字幕。
有了前2课时的学习基础,学生已经对网页中代码的使用有了初步了解,所以在学习本节课时更显得游刃有余。
本节课虽然是学习两个不同的美化网页方法,但它们有一个共同点,都是通过调用网页标签编辑器进行设置,看似分离,实际密不可分。
本节课是第4单元的收尾,所以在设计最后的巩固练习时,要考虑为本单元的知识点进行小结。
学情分析本节课的授课对象是九年级学生,通过前三单元的学习,他们对网页和网站的概念已经有了一定的了解,已初步掌握利用Dreamweaver软件制作网页的方法。
内容丰富、多彩的网页是怎样做出来的?这一问号从学习第4单元时,就萦绕在他们的脑海中,使得学生在学习本单元时求知欲强,表现力强,对于教师布置的任务能够认真对待。
在讲解过程中,教师不要拘泥于教材,要根据学生的学习情况,有的放矢,充分激发学生的学习兴趣,但是学生之间还是存在一定的差异,信息技术认知能力、实际操作能力和知识水平都存在差异。
制作网页文字滚动效果
一、教学内容分析
“制作网页文字滚动效果”是中等职业教育规划新教材《Dreamweaver网页制作》第二章的内容,该知识是学生掌握了在Dreamweaver网页中文本的插入与编辑后的内容。
学习《制作网页文字滚动效果》这一课,目的在于掌握插入滚动文字的方法,设置滚动文字的属性。
二、教学目标设计
【知识目标】
1、认识设置“滚动文字”代码。
2、掌握插入滚动文字的方法并设置滚动文字属。
【技能目标】
通过引导、欣赏、学习、操作使学生掌握插入滚动文字的方法,设置文字滚动属性,从而激发学生的学习兴趣。
并将所学的知识灵活运用,获得制作网页的愉悦。
【教学重点】
掌握滚动文字的插入方法、认识插入滚动文字代码及设置滚动文字属性。
【教学难点】
滚动文字属性的理解与设置方法。
三、教学对象分析:
本节课的教学对象是的中职二年级的学生,他们已具备计算机基本操作能力和office办公软件操作知识,并且掌握了在《Dreamweaver》网页中插入文本的相关知识。
对于“插入滚动文字”这一知识,对于基础好的学生,他能够通过老师讲解和演示后完成具体的操作,理解代码属性;但是一些基础差的学生,还要在老师的引导、讲解、示范、自己动手操作并书写笔记等过程的帮助下才能够理解掌握这部分内容。
四、教学方法设计:
为了落实重难点,我选择了“效果展示、提问、对比、讲解、演示”为主的教学方法,通过观看欣赏、思考、动手操作等方式完成本课学习任务。
为了完成目标,解决教学的重难点,我在教学中设计了以下几个教学环节:欣赏网页、引出任务→演示操作、学习新知识、学生操作、学生思考→巩固新知识→知识拓展、布置作业。
教学过程
【引入】
欣赏网页,分析网页。
(效果展示法)
【新课学习】
一、插入滚动文字
学生看学案,预习插入滚动文字的方法。
明确完成该任务需要用到代码,代码的作用。
教师演示操作在网页中插入滚动文字“大家好”,抽学生表述步骤
归纳方法:
Ⅰ、定位插入点
Ⅱ、执行“插入对象”→“标签”(提示:将自动切换到“折分”视图)
Ⅲ、选择“HTML标签”→选取“marquee”指令代码→插入
强调:“marquee”为滚动文字代码
Ⅳ、关闭对话框,在Dreamweaver窗口代码视图中“<marquee></marquee>”代码插入点处输入文字
提示:1、输入文字后,不按回车键结束,鼠标在设计视图中任意位置单击
2、在网页编辑窗口中无法显示滚动效果,需要按F12键在浏览器中查看。
讨论:文字滚动的方向是从右向左,而同学们平时欣赏的网页文字滚动方向还有其它方
式吗?(提问讨论法)
二、设置滚动文字属性
1、改变滚动文字运动方向
告诉学生,因为我们是初学者,所以我们将学习最方便,最简单的方法。
“direction”属性设置字幕内容的滚动方向。
方法:
Ⅰ、切换到“拆分”视图
Ⅱ、光标定位到“<marquee>”代码右侧,按下“空格”键,打开标签列表框
空格
Ⅲ、双击“direction”,→双击选择方向标签
down:向下滚动
left:向左滚动
right:向右滚动
up:向上滚动
老师演示操作:“大家好”文字向下滚
学生完成操作:更改“index.html”网页中已有滚动文字“温馨之家”滚动方向向上展示网页,比较网页(比较法)
2、改变文字滚动速度
“scrolldelay”属性设置文字滚动速度。
方法同与设置文字滚动方向,参数只需要输入数值
提示:参数值单位为“毫秒”,数值越大,速度越慢,反之越快
操作:将“index.html”网页中滚动文字“温馨之家”参数值分别设置为“50”和“500”,观看其效果。
【课堂小结】
先抽学生总结,后归纳总结
1、掌握在Dreamweaver中掌握插入滚动文字的方法,认识滚动文字代码
2、理解并掌握设置文字滚动方向改变文字滚动速度的方法
【作业布置】
思考:如果我希望设置滚动文字效果为鼠标指向时停止滚动,鼠标移开时继续滚动,将如何设置?
上机完成:1、插入滚动文字“黄许职业学校欢迎您”,设置滚动方向向上,滚动速度为150毫秒。
【板书设计】。