网页的设计与制作——网站和网页.doc

网页的设计与制作网站和网页浙江省台州中学 张雄【教材分析】在学习网页的设计与制作单元之前，学生已初步掌握了网络信息的搜索、浏览和下载，以及电子邮件的使用等内容。因此，学生已经具备了获取信息的能力，但多数学生对网站网页的了解也仅仅只停留在这种简单的操作层面上。本节教学中通过网页、网站基本概念的了解，让学生理解网页的基本元素构成和经常使用的构件，了解超文本标记语言HTML，通过对网页制作工具的比较学习，了解不同常用网页制作工具的特点，为下一节的学习打下基础。【学情分析】在学习本单元之前，学生已初步具备获取信息的能力，他们学习了网络基础知识，掌握了网络信息的浏览、搜索和下载以及电子邮件的收发、文件传输等技能。学生希望自己能制作网页，并将网页发布在Internet上。因此学生对本单元学习的兴趣很大。学生在学习本单元前已经学过Word应用软件的使用方法，并掌握一定的文字输入、图片的编辑、表格的插入等技巧，这对于本单元的学习非常有利。【教学目标】1知识与技能（1）了解网页、网站的基本概念，理解网页的基本元素。（2）了解基本的网页制作软件的界面和特点。 （3）了解网站的地址标识URL,超文本标记语言HTML, 了解超文本传输协议HTTP。2过程与方法（1）通过对一个网站网页的分析，了解网页、网站的基本概念，理解网页的基本元素。（2）通过教师的演示和讲授，初步了解基本的网页制作工具软件的界面和特点。3情感态度与价值观（1）培养学生严谨求实的学习态度。（2）培养学生学习中勇于探索、崇尚科学的意志和品德。【重点难点】重点：网页的基本元素难点：网页的基本元素，构件【设计思想】同学们喜欢上网，但是有一部分学生不能区分网站和网页，在设计时，我首先与语文学科整合，结合高一教材内容，播放再别康桥flash动画朗读版，以此来创设快乐课堂学习情境，进而引入徐志摩文学网，让学生思考网站和网页有什么联系？引出本节课的主题，以提高学生的学习兴趣和求知欲望。当学生对网站与网页有了一定的认识之后，引导同学们自主去探究发现构成网页的基本元素有哪些？有什么作用？接着组织学生继续讨论、交流网页中除了三种基本元素外，还有哪些经常使用的构件？然后引导学生查看网页的源文件，通过HTML制作网页与Frontpage制作网页相比较，从而顺利引导到FrontPage网页制作软件的特点上，为本章后面的知识学习作铺垫。【教学流程】教学环节教师活动设计学生活动设计创设情境，激发学生的学习兴趣。引入课题幻灯显示再别康桥flash动画朗读版，指出诗很美，作者笔下的康桥更是让人向往，激发学生的求知欲。引导学生进入徐志摩文学网 ，对URL、http作一定的解释。现在大家看到的是什么？（进入到徐志摩文学网页面让学生回答）引出本节课的主题“网站和网页”，让大家思考网站与网页有什么联系？ 1、从美学角度出发，创设快乐课堂学习情境2、与语文学科整合，结合高一教材再别康桥，引入徐志摩文学网3、学生明确本节课的学习主题内容自主合作探究网页的基本元素 教师提问：在徐志摩文学网中，各位同学是否发现了神往已久的康桥，除此之外，还发现了什么？学生活动：用发现法去找出有关康桥风景欣赏中的任一张图片，再别康桥的诗和徐志摩简介网页（基本要求）网站与网页有什么联系？学生讨论之后，教师总结：网站包含多个网页，通过超链接把不同的页面链接起来。构成网页的基本元素有文字、图形图象和超链接。网页中常见的图象有jpg和Gif。网站的首页即为主页。 学生活动在桌面上新建一个以自己号次命名的文件夹，进入徐志摩文学网完成以下任务课堂任务一，触摸网页的基本三要素：1、 要求下载康桥风景欣赏中的任一张图片，文件名改为kq2、保存再别康桥这首诗，复制，粘贴到word文档中，文件名改为zbkq3、要求下载徐志摩简介网页网页的构件教师提问：在徐志摩文学网中，各位同学除了发现组成网页的三要素文字、图形图象和超链接，还发现了哪些经常使用的构件，它们的作用是什么？学生活动：相邻同学一起去发现，探讨。在学生没有完全讨论出来时，引导学生打开自己桌面上的“上课网站”页面，点击进入课堂在线网站，让学生接着去发现。教师总结：除了组成网页的基本三元素文字、图形图象和超链接。一个丰富多彩的网页还包括一些构件。如：音乐，表单，表格，和一些java小应用程序。课堂任务二：4、探讨主页的布局规化5、在线欣赏再别康桥朗读版网页揭秘刚才我们了解了网页的基本元素、构件，这些不但美化了网页，还丰富了网页内容，增强了网页功能。下面让我们来看一看网页究竟是怎样组织的。以课堂在线网站为例，选择滚动字幕，点击“查看”菜单中的“源文件”命令。 教师总结：网页中包含的文字、图像、超链接和表格等基本元素及构件是由超文本标记语言（HyperText Markup Language，简称HTML）进行描述的。HTML是一种超文本标记语言，由网络浏览器解释执行，最后将解释结果显示出来。 几乎所有的网页都是用超文本标记语言编写的，下面就让我们利用记事本来体验一下。网页制作工具比较1、用HTML语言制作网页让学生对照老师的任务提示，观察一下一个简单的HTML网页文件的浏览结果变化。 （提示学生选择“查看”菜单中的“源文件”命令进行修改。）教师个人主页欢迎大家光临！ 2、用网页制作工具软件制作网页 在“文件”菜单中用使用Frontpage编辑上述网页，比较两者特点。 教师总结：除了Frontpage之外，还有比较专业的网页制作工具Dreamweaver，由于Frontpage与Word相类似，很适合初学者，所以我们后面的学习都用Frontpage来完成网页制作。1、学生听、看老师讲解和演示，并思考。2、学生操作实践学生任务：将size=3改为size=6，color=#FF0000改为color=#000000，观察其变化。学生练习本节课涉及到的基本概念较多，考虑到前面已经作过文字小结，因此，这里改用选择题的形式来帮助学生整理和巩固。学生完成“课堂在线网站和网页”中的“课堂练习”。 教师巡回检查，个别辅导有困难的学生。学生操作练习，完成课堂练习。“在线批改”可以让学生及时纠错，并据此判断学生是否掌握本节课的内容。交流与评价每位同学学习完本课，并完成实践过程之后对自己的学习情况进行自我评价，完成“课堂在线网站和网页”中的“交流评价”。指导学生进行自我评价，并根据反馈的结果适当点评。学生自评，通过大屏幕实时显示评价结果，教师可以及时地点评学生的学习情况。 本课小结本节课主要讲了网站和网页的基本内容，网页的基本元素、构件及网页制作工具等。学生对本节课的内容知识进行回忆小结实践探究根据本节课的学习内容，要求学生设计一幅个人网站的主页。思考、设计，为下面的课做准备。学习拓展拓展网页构件的使用，