资源简介

活动2 制作网页
一、教材分析
在活动 1 中，学生为主题网页收集了相应素材，并设计出了网页的版面结构。活动 2承接活动 1，学生用 FrontPage2003 工具实现主题网页。在这一活动中，要求学生掌握在FrontPage2003 中创建站点的方法、使用表格进行布局的方法、将网页元素插入网页的方法等。初中学生对 FrontPage2003 比较生疏，因此教材中仅要求学生创建由一个网页所组成的网站，相对来说比较简单。 www.21-cn-jy.com
本活动涉及的技术操作主要有以下一些：（技术操作 教材中的位置 ）
创建一个由一个网页组成的网站 P9
设置网页属性，添加网页标题和背景图片 P13
插入并修饰表格 P16
合并单元格 P17
设置单元格宽度 P17
利用 Photoshop 修改图片文件的大小 P19
插入并修饰水平线 P21
网页的预览 P22

【教学目标】
知识与能力：1、认识 FrontPage2003，熟悉 FrontPage2003 的窗口界面。
2、理解站点的概念。
过程与方法：1、掌握在 FrontPage2003 中建立站点的方法。
2、掌握使用表格进行布局的方法。
3、掌握对表格进行操作的方法。
4、学会将图片、文本等资料插入网页中。
5、了解网站的制作流程。
6、掌握利用表格进行布局的方法。
7、掌握将图片、文本资料插入网页的方法。
情感态度与价值观：1、提高对网页的审美鉴赏能力。
2、形成需求分析的意识。
3、形成良好的文件夹命名习惯。
【教学重点】
1、理解站点的概念和站点文件夹的意义。
2、能够利用表格进行网页的版面布局。
3、掌握将图片、文本资料插入网页的方法。
【教学难点】
1、在 FrontPage2003 中实现设计草图。
2、利用表格进行网页的版面布局。
3、掌握对文本格式的调整、图片的设置等技巧。
二、教学安排
【教学课时】 3课时。
【教学准备】
多媒体网络教室。 FrontPage2003 软件。
【教学过程】
课时设计：
第1课时 （新建个人网页）
第2课时（插入网页布局表格）
第3课时（插入网页元素）
教学阶段
教师活动
学生活动
教学意图
新课导入
导入：活动1中我们设计了网页的主题和版面，
本节课我们来学习用FrontPage2003软件来新建网页。
了解活动2任务。
明确学习任务。
FrontPage2003
基础知识讲解
1．启动FrontPage 2003
单击任务栏上的“开始”，在“程序”菜单中选择Microsoft FrontPage2003单击。
2．FrontPage 2003的界面介绍。
3．介绍FrontPage2003中网页的编辑、保存方法。
4．介绍网页中图片资料的存放路径。
1．了解
FrontPage2003软件的界面、工具、编辑方法等。
2．跟着教师的演示操作进行操作。
熟悉软件，为新建网页打下基础。
自主创建由一个网页组成的网站
请同学们参考课本第9页的“操作坊”进行操作，创建由一个网页组成的网站。
步骤如下：
（1）打开FrontPage2003，选择“文件”菜单中的“新建”命令。
（2）在窗口右边出现的“新建”面板中，选择“新建网站”下的“由一个网页组成的网站”。
（3）在弹出的“网站模板”对话框中，选择“常规”选项卡中的“只有一个网页的网站”，并在右边“指定新网站的位置”文本框中输入新网站的保存位置，如“D:”，然后单击“确定”按钮。
按照操作坊的步骤进行操作，创建由一个网页组成的网站。
学习创建由一个网页组成的网站。
教学阶段
教师活动
学生活动
教学意图
站点文件夹讲解
1.介绍站点文件夹，重点讲解以下内容：
（1）“D:”站点文件夹里的东西不能随意删除。
（2）新建的站点只有一个主页index.htm文件，该主页还是空的，需要对它进行编辑添加内容。同时也可以添加一些网页到该站点中去。
（3）该站点中一般包含两个子文件夹。一个是_private文件夹，一般用来存放一些私人的文件，这些文件不会被别人看到。另一个是images文件夹，是FrontPage专门创建用来存放图像文件的文件夹，因为FrontPage扩展服务器的图像文件的默认目录为images。
2.请同学们将上节课收集的图片存放在images文件夹中。
1.了解站点文件夹的作用。
2.拷贝图片到新建站点的images图片文件夹中。
解决学生第一次接触网站制作可能存在的问题。
2．让学生学会网站文件资料的管理。
自主探究，
设置网页属性、添加标题和背景图片
请大家结合课本P13-P14页自主探究或者相互协作来设置网页属性、添加标题和背景图片。（这个环节特别重要，教师要加强巡视、督促。）
设置网页属性、添加标题和背景图片。
1.增强学生自主学习、协作学习的能力；
2. 让学生学会设置网页属性、添加标题和背景图片。
相互交流，
完善网页
1.请大家组内相互交流自己的作品，为其他同学提供可行性的建议和意见。
2．请学生修改各自的网页。
1.学习他人的经验为我所用。
2.完善自己的网页。
增强学生交流的能力。
保存网页
课堂延伸
小结并提出要求：请大家保存自己的网页。保存好站点文件夹。现在我们现在仅仅是建立了一个空白页面，我们所设计的版面如何实现，请大家课后自学P14-P18的网页布局表格。
1．保存网页。
2．了解课后的任务。
为第二节课进行铺垫。
教学阶段
教师活动
学生活动
教学意图
新课引入
引入：请大家将活动1中所设计的网页版面图拿出来，结合课本第15页张晓明同学的设计范例，完成第15页的学习单。
2．介绍为什么使用表格进行布局：不同的分辨率下（显示器中）保持网页各个元素设计的位置不会改变，表格中可以放置网页上的任何元素。
1．参照课本第15页张晓明同学的设计范例，设计布局表格样式。
2．参考第18页的知识向导，理解表格在网页中的作用。
1．明确网页的布局表格样式。
2．明确表格的重要性。
教学阶段
教师活动
学生活动
教学意图
认识表格
介绍表格的组成：
（1）表格由几个部分组成：
表头：表格的首行，表示表格各列的名称。
行：表格的一行，水平方向。
列：表格的一列，垂直方向。
单元格：在表格中，每个方格称为一个单元格（Cell），可以为每个单元格设置不同的属性。
边框：在表格的四周，可设置有无。
（2）在每个单元格中，除了可以填写文本之外，还可以放置图片、表单等，表格的最大好处是能分类显示数据，同时能利用表格来组织网页的整体布局。
学习表格知识。
认识表格。
插入表格
1．演示使用“表格”菜单命令插入表格的方法：
（1）将光标移到要插入表格的位置，即插入点。
（2）单击“表格”菜单，选择“插入”选项，并在选择项中单击“表格”选项，出现插入表格对话框。
（3）在对话框中，在“行数”中输入需要的行数，在“列数”中输入需要的列数，同时设置好“对齐方式”、“边框粗细”、“单元格边框”、“单元格间距”。
（4）最后单击“确定”按钮，屏幕上就会出现一张空的表格。
2．说明：如果在对话框中“边框粗细”值设置为0，则该表格线在浏览网页时不会被显示出来。
3．组织学生讨论：还有哪些方法可以插入表格？
1．根据教师的演示及参照第16页的操作坊，插入并修饰表
2．讨论插入表格的其他方法。格。
学会插入表格。
表格操作，如插入、删除合并、拆分和设置单元格属性等操作
1．演示合并单元格等的操作。
2．让学生根据先前的版面设计完成对表格的操作。
1．按照自己网页设计版面来确定表格样式。
2．采用插入、删除、合并、拆分等操作对表格进行操作。
1．让学生学会合并、拆分、插入、删除和设置单元格属性等操作。
2．引导学生利用表格实现网页的版面设计。
交流协作
请各个小组内相互交流、相互检查，要求每位同学都要实现自己的版面布局设计。
1.向已完成的同学请教、学习。
2.完成自己的版面设计。
通过交流，掌握对表格的操作方法。
总结拓展
1．根据某一个版面设计和学生一起用表格实现布局。
2．小结：表格在
FrontPage2003中有相当重要的应用，这节课我们用表格实现了版面设计。那么，如何将图片、文本等元素充实到网页中？请大家课后思考。
1.和老师一起用表格实现一个计版面布局。
2.课后探究教师提出的问题。
1．巩固表格知识。
2．为插入网页元素埋下伏笔，引发学生的积极探索。
教学阶段
教师活动
学生活动
教学意图
新课引入
引入：我们已经用表格设计好了版面，今天这节课将实现网页元素的插入。
2．请大家在FrontPage2003中打开自己的站点文件夹中的index.htm。
1．了解任务。
2．用
FrontPage2003打开站点文件夹中的index.htm。
明确学习任务
插入并修饰文本
1．演示插入并修饰文本的操作步骤：
（1）在布局表格的相应单元格中输入文字或粘贴文本。
（2）为文本设置合适的字体、字号、颜色及段落对齐方式、行距等，使文本清晰美观、疏密有度。
2．让学生将文本插入自己的个人网页并做修饰。
按照教师演示的操作步骤及要求将文本输入网页中。
学会在网页中输入文本信息。
图片格式讲解
讲解图片格式：
（1）图片格式是计算机存储图片的格式，常见的存储的格式有BMP、TIF、TGA、RAS、EPS、PCX 以及WMF等。
（2）BMP格式： BMP 不支持压缩，文件非常大，不受Web 浏览器支持。
（3）JPEG文件后辍名为"．jpg"或"．jpeg"，是最常用的图像文件格式， JPEG格式的应用非常广泛，目前各类浏览器均支持JPEG这种图像格式，因为JPEG格式的文件尺寸较小，下载速度快。
（4）GIF图像文件的数据是经过压缩的。在一个GIF文件中可以存多幅彩色图像，如果把存于一个文件中的多幅图像数据逐幅读出并显示到屏幕上，就可构成一种最简单的动画。
1．参考课本第20页学习网页中图片的大小与格式。
2．了解BMP、JPG、GIF格式之间的区别。
了解图片的格式。
利用
Photoshop软件修改图片格式
1．演示利用
Photoshop软件修改图片格式的步骤：
（1）在Photoshop 中打开图片文件，如文件“hai.jpg”，选择“图像”菜单中的“图像大小”命令。
（2）在“图像大小”对话框中，修改“像素大小”栏下的“宽度”值，单击“确定”按钮。
2．让学生利用软件修改自己的图片素材的格式。
1．根据教师提供的图片素材，将BMP格式转换为JPG格式，查看它的大小变化。
2．修改自己的图片素材的格式。
1．学会调节图片大小。
2．学会转换图片格式。
插入图片
1．演示插入图片的步骤：
（1）把光标定位到要插入图片的单元格内。
（2）单击“图片”工具图标，或单击“插入“菜单，选择”图片“菜单项，在子菜单中单击”来自文件“选项，在出现一个”图片“对话框的同时，弹出一个“选择文件”对话框。
（3）在“选择文件”对话框的“搜寻”栏内选定图片的存放位置，然后从文件列表中双击某个图片文件（或选定图片文件），单击“确定”按钮，则图片插入到网页中。
2．让学生完成图片素材的插入。
按照操作步骤，在网页中插入图片。
学会在网页中插入图片。
教学阶段
教师活动
学生活动
教学意图
自主探究相互协作
完善页面
让学生根据所学知识，完善自己的网页。
通过输入文本、插入图片、插入水平线等方法来充实网页。
实现个人网页的内容。
预览网页
介绍两种预览网页的方式：
（1）一种是单击FrontPage 2003主编辑窗口下面的“预览”标签，就打开一个FrontPage编辑器自带的浏览器，看完之后，单击“普通”标签，又切换到编辑状态。
（2）另一种是单击“常规”工具栏的“”图标按钮（或直接按Ctrl+Shift+B键，或单击“文件”菜单并选择“在浏览器中预览”菜单项），将启动浏览器并打开该网页。
1．了解不同的预览方式。
2．了解预览方式的区别。
学会网页的预览、检查。
优秀站点展示
请各个小组推选小组优秀站点进行展示。
推选站点进行展示，其他同学用第25页的评价表进行评价。
学会评价他人的作品。
回顾总结
总结网站制作的流程。
一起回顾。
系统梳理知识。
制作网页的教学反思
活动2 制作网页是理论和实践操作课，在课前的教学设计中就力争能做到：以学生为中心，以教师为引导；知识的展现通过学生自己的探究得到，而不是教师的灌输；在教学过程中，尽量能激发学生求知的热情，学习的兴趣，让学生积极主动地参与到教学活动中来，能在教师的引导下进行有效的探究活动。在实际教学活动中也基本上实现了这种设计，基本体现了新课程的理念，师生之间进行了有效的互动，通过学生的探究活动，基本上完成了教学目标。21世纪教育网版权所有
在教学活动过程中，通过一段时间的回顾和反思，比较成功环节有：
1、每一新知识点的展现前能通过有关的手段让学生去体验这种新技术，继而通过学生的体验，让学生探究总结信息技术的发展变化，学生去记忆这些知识点，不需去强记，只要操作实践到了就能很容易记住这些知识点，通过这种教学方式上信息技术理论和实践操作课，我想学生也会很感兴趣。21教育网
2、师生的交互活动比较融洽。在整个教学过程中能尽最大可能调动学生参与教学活动的热情，学生的热情高了，那学习起来就比较轻松，上课的发言等教学行为也较放松，自然地就参与到了教学活动中来了。21cnjy.com
3、知识的展现不是直接通过教师的讲，而是通过学生的实践、探究、感悟，继而学生自己得出新的知识。这也是和传统的教学模式不同之一。21·cn·jy·com
4、教学素材的准备较充分、贴切。
存在的问题：
1、对有些知识点的讲解不是很到位，有种囫囵吞枣的感觉。如网站的概念阐述一带而过，没有能够更多地引导学生从现实生活中的事例去理解。2·1·c·n·j·y
2、学生的探究活动组织得有点乱，还可以组织得更好些。
3、对全体学生的关注度不够，因教室空间比较大，从讲台到最后排学生距离远，故对后排学生关注不够，有同学有点意见。【来源：21·世纪·教育·网】

展开更多......

收起↑