《网页制作小能手》教学设计
marquee marquee教学内容
信息技术八年级下册  第6课
课题
网页制作小能手
教学目标
知识与技能
1、了解网站首页中的基本元素
2、学会设置网页背景，插入音频、视频等
3、熟练掌握超级链接的运用
过程与方法
1、学会设置简单网页的背景
2、掌握插入视频、音频以及动态效果的操作
3、熟悉设置超级链接的方法
情感态度和价值观
1、培养学生应用教材的自学能力
2、培养学生的动手实践的能力
3、培养学生正确的使用网络思想意识
重点
1、掌握Dreamweaver CS6设置一些基本元素的方法
2、掌握插入动态效果以及超级链接的方法
难点
1、音频视频的插入与大小位置的调整
2、超级链接内容的确定
教学准备
计算机机房、多媒体课件、Dreamweaver CS6软件、图片、音视频资源
教学过程
教师活动
学生活动
设计意图
情境导入
平时大家经常浏览网页，你们有留意网站上有哪些设计元素吗？现在我们准备建设班级网站，需要大家献计献策。本课，我们将学习如何设计网页中的基本元素，进一步完善班级网站。
浏览知名网站，针对网页设计，学生分组思考与交流。 
通过需要建设班级网站这一需求引出本课的任务，激发学生的学习兴趣。让学生在交流讨论中了解网站首页中的基本元素，为后续学生动手制作提供基础。
知识与技能
（一）设置网页、单元格背景
1、设置网页背景
在Dreamweaver 中打开班级网站首页，执行“修改”→“页面属性”命令，在弹出的“页面属性”对话框中，选择“外观”项，单击“背景图像”后的“浏览”按钮，在“选择图像源文件”对话框中，到合适的图片。单击“确定”按钮回到“页面属性”对话框，依次单击“应用”和“确定”按钮即可完成网页背景设置的操作。
如果我们想让网页背景更加炫酷，还可以使用CSS3来实现，比如将两张图片重叠为背景。我们只需要将两张名为bg_1、gif和bg_2、gif的背景透明图片放到animations文件夹，然后切换到“代码”视图，到<head>------</head>代码，在它们之间插入下列代码就可以了。
<style>
Body
{
Background-image:url(animations/bg_1、gif),url(animations/bg_2、gif);
}
</style>
2、设置单元格背景
选中某个单元格，将视图切换为“拆分”视图，在左边的代码中到光标所在的行，把光标移到前面的<id>内，再按键盘的空格键，在弹出的提示中选齐"background” →“浏览”，在弹出的“选择文件”对话框中选择合适的图片，单击“确定”按钮。我们可以用相同的方法给“导航栏”设置背景。
3、添加和编辑文字
我们如果想给标题文字加一点红阴影特效，只要在代码窗口的<head>------</head>之间加入下列代码，然后在标题文字的代码两边分别加上<yl>、</yl>就可以在实时视图或网页浏览器中查看效果了，其中#FF0000表示红。
<style>
Yl
{
Text-shadow:5px 5px 5px #FF0000;
}
</style>
下面，请同学们将刚刚老师演示的步骤，自己动手做一遍，如果有问题可以查看课本或举手问老师。
【教师巡查，发现并及时解决学生遇到的问题】
学生观看认真老师的演示过程，动手练习相关操作。 
让学生在观察与实践中掌握网页与单元格背景设置的方法。 
（二）插入图片、音视频和添加动态效果
1、插入图片
选中“图片区”单元格，执行“插入”→“图像”命令，在弹出的“选择图像源文件”对话框中到图片，单击“确定”按钮，将图片插入网页中。
2、插入音频和视频
执行“插入”→“媒体”→“插件”命令，在弹出的“选择文件”对话框中，选择音频或视频文件，将其插入到网页中相应的位置。单击选中音频或视频插件图标，就可以在“属性面板”中对该音频或视频的属性进行设置。如果将插件的宽和高设置为0，插件将不会在网页中显示出来。
3、添加动态效果
我们还可以在网页中添加一些特殊的动态效果，选中图片和文字，然后点击左上角的“拆分”按钮，将文档窗口切换为“拆分”视图，将代码窗口的蓝区域两端分别添加运动文本标签<marquee>和</marquee>。
4、检查并保存网页
执行“文件”→“保存”命令保存网页，并通过切换到“实时视图”查看网页效果。
至此，一个充满活力的班级网站首页就初步完成了，大家用同样的方法完成自己的制作任务，每个同学都要操作。
【教师巡查，发现并及时解决学生遇到的问题】
学生认真观看老师的演示过程后自己动手将图片、视频、音频等插入到网页中。 
让学生在实践中掌握如何在网页中插入图片、视频、音频。 
（三）设置超级链接
1、确定链接的对象和内容
在网页中，我们可以在多种对象上设置超级链接。如果访问者通过点击文字进人对应的页面或者下载文件，那么超级链接的对象就是文字，内容就是对应的网页或者文件；如果访问者通过点击图片进人对应的页而或者下载文件，那么超级链接的对象就是图片，内容就是对应的网页或者文件。
2、选择合适的超级链接类型
我们可以根据链接功能和链接对象，选择合适的超级链接类型。如果想要点击图片上不同的地方进入不同的页面、可以通过图片的“热点工具”来设置超级链接；如果要在同一个页向中进行跳转，可以使用“锚记工具”来设置超级链接；如果想在点击链接后收发，可以使用链接。
3、将首页和各个子网网页链接起来
步骤1：在Dreamweaver  CS6中打开班级首页。
步骤2：将首页中的文字或图片与其对应的页面进行链接。选中对应的文字或图片，在“属性面板”中使用“浏览文件”按钮对链接进行设置。
步骤3：通过上面的方法，我们把整个网站的网页都链接起来了。请同学们好好检查一下，看看这些链接能不能打开，并及时保存网页。
结合我刚才的演示，同学们赶紧试试吧， 把自己的网站修改完善后保存退出，在浏览器中查看。
学生认真观看老师的演示过程后自己动手将其他网页与对应的文字相链接。 
让学生在实践中掌握文字与网页之间的链接，并且在浏览器中检查所制作的网页。 
实践与探究
收集同学们对班级网站的意见，运用本课内容，为班级网站设计几个网页，并通过超级链接的方式将各个网页链接起来。
学生动手实践操作
培养自学能力以及运用所学知识的能力。
分享与总结
1、小组评议各自的作品，选出最优作品在班上分享展示。
2、请同学们谈谈在这节课中网页制作的技巧与感想。
交流与讨论
通过评比展示，提高学生的评价能力，培养学生的成就感。让学生总结、回顾本节课的收获，强化学习效果。
教学反思
 

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。