网页制作教案.docx
《网页制作教案.docx》由会员分享，可在线阅读，更多相关《网页制作教案.docx（10页珍藏版）》请在冰豆网上搜索。
网页制作教案
第1课制作一个简单的网页
学习目标：
1、知识目标：
了解网站规划方法；认识Frontpage2003的工作界面；理解站点、网页、主页的概念。
2、技能目标：
学会规划和设计网站；能够搜集网站相关素材；学会新建和打开站点。
3、情感、态度与价值观目标：
感受网站规划的重要性，养成做事有计划、勤思考的习惯。
教学方法：
自学法、演示法、观察法、实践法、小组合作。
教学重点：
网站规划的一般步骤；Frongpage2003的站点管理。
教学难点：
网站规划的一般步骤。
学习时间：
1课时。
学习过程：
引入课题：
许多同学都有上网的经历，那么什么是网站呢？
网站：
网站是在因特网上一个相对独立的信息的集合，这些信息以网页的形式向全世界发布。
因此，网站就是相关网页的集合。
网页就是把用文字、图形、声音、影视等多种媒体形式表达的信息，以及分布在因特网上的相关信息，相互链接起来而构成的一种信息表达方式。
学习与探究：
一、他山之石，可以攻玉
通过对“中国少年雏鹰网”与“网易”首页的比较，谈谈自己的感受，并说出它们之间有什么差异？
二、网站规划的一般步骤
小组合作：
阅读本部分内容，总结网站规划的一般步骤？
常见的网页版面布局形式有哪些？
步骤：
1、确定网站的主题和风格；
2、设计规划网站的结构和内容；
3、设计网站的版面布局；（“T”型、“口”型、时尚型、“三”型布局）
4、搜集整理网站素材；
5、选择网站制作工具（frontpage2003）。
三、Frontpage2003的站点管理
1、?
初识Frontpage
根据打开程序的一般方法，自己试着打开Frontpage。
并思考有没有其它的打开方法。
2、?
新建站点
教师演示：
“文件”---“新建”---“站点”，打开“新建”对话框。
学生操作：
（1）指定新站点的位置为“F：
\诗文荟萃”，并选择站点类型为“只有一个网页的站点”。
（2）观察界面发生了什么变化？
在“文件夹列表”中自动生成了哪几个文件或文件夹？
它们有什么作用？
3、?
打开站点
“文件”---“打开站点”。
四、实践与创新：
1、?
访问以下网站，描述它们各自的主题和风格，并画出网站的结构图和主页的布局图。
2、?
搜集整理关于赞美父母的诗句、文章、图片或歌曲，分组合作设计“我的父母”网页。
（包括页面结构、内容、版面布局、网页的风格和内容，通过表格的形式记录下来）
五、小结：
网站规划的一般步骤、Frontpage的站点管理
六、教学反思：
第2课设计网站首页
学习目标：
1、知识目标：
认识网页的工作原理；了解网页编辑的一般过程。
2、技能目标：
学会在网页中输入文字、插入图片和水平线；学会新建、预览和保存网页。
3、情感、态度与价值观目标：
善于从身边的广告、书刊中学习版面设计知识，并学以致用。
教学方法：
自学法、演示法、观察法、实践法、小组合作。
教学重点：
在网页中插入文字、图片、水平线及网页的保存、预览。
教学难点：
在网页中插入文字、图片和水平线。
学习时间：
1课时。
学习过程：
引入课题：
展示一个包含有文字、图片和水平线的网页，并通过对这三部分的介绍激发学生的学习欲望。
学习与探究：
一、在网页中输入文字
小组合作并操作：
根据前面所学知识，即在WORD中输入文字的操作，在“F：
\诗文荟萃”站点中，双击打开主页文件“”，对照小宇在上节课中设计的首页效果图，在编辑窗口输入相应文字，并按照图例对这些文字进行修改字体、字号、颜色、对齐方式等操作。
二、在网页中插入图片
教师演示：
“插入”---“图片”---“来自文件”
学生操作：
在“Banner位置”处插入存放在“F：
\素材”中的Banner图片，并对所插入的图片进行大小调整。
注：
为便于上传，网页中图片一般采用容量较小的格式，如JPEG、GIF、PNG等。
三、在网页中插入水平线
学生阅读相关内容，试着自己在网页中的标题与正文之间插入一条水平线，并设置“水平线属性”。
（教师巡回指导）
四、保存网页
同WORD操作相似，并尝试用不同的方法保存，考虑哪种方式更方便？
试一试：
将刚刚插入到网页中的图片指定保存位置为：
本站点的“images”文件夹。
五、预览网页
方法一：
利用FrontPage自带的预览功能;方法二：
通过浏览器预览。
练一练：
按照上面介绍的两种方法预览自己的网页，分析它们各有什么优缺点？
六、添加新网页
“文件”---“新建”---“网页”
七、实践与创新：
1、根据第1课的规划，参照小宇设计的“我的父母”所示的界面，设计制作网页“我的父母”，其文件名为：
，标题为“我的父母”。
2、对新建的网页进行预览，并改变预览窗口的大小，你会发现什么现象？
有什么办法可以解决这个问题？
八、小结：
在网页中插入文字、图片、水平线及网页的保存、预览，添加新网页。
九、课后反思：
第3课网页中的表格
学习目标：
1、知识目标：
理解表格在网页设计中的重要作用。
2、技能目标：
学会使用表格布局网页；灵活掌握表格调整的方法。
3、情感、态度与价值观目标：
了解学校概貌，发现校园之美；养成良好的生活和学习习惯。
教学方法：
自学法、演示法、观察法、实践法、小组合作。
教学重点：
在网页中插入表格及表格的调整。
教学难点：
在网页中插入表格及表格的调整。
学习时间：
1课时。
学习过程：
引入课题：
通过对“某校园鸟瞰图”与下载的“中学生作文网”的首页作比较，引导学生发现网页中表格的运用。
学习与探究：
一、表格的作用
阅读本部分内容，思考：
在网页中使用表格有何作用？
表格可使网页中的文字、图片、动画等素材排列整齐有序，并且不会因浏览窗口大小的改变而改变排列方式。
二、在网页中插入表格
试一试：
阅读相关内容，试着在站点“诗文荟萃”中打开首页文件，分别插入四个表格，依次为：
2*3、2*2、1*4和2*1，宽度都为780像素，水平居中。
（教师巡回指导）
三、表格的调整
1、?
行高和列宽的调整
方法一：
手动操作方法二：
通过单元格属性或表格属性调整
2、?
单元格的合并和拆分
教师演示：
（1）选中想要合并或拆分的单元格；
（2）单击鼠标右键，在快捷菜单中选择“合并单元格”或“拆分单元格”。
3、?
插入或删除表格中的行或列
（1）选择相应的行或列；
（2）单击鼠标右键，在快捷菜单中进行相应选择。
4、?
平均分布行和列
（1）选择需要平均分布的行或列；
（2）单击鼠标右键，在快捷菜单中进行相应选择。
练一练：
参照“诗文荟萃”网站首页布局的内容，调整前面插入的表格，并将在第1课中输入的内容移到表格内。
预览网页，测试调整效果。
四、设计网页模板
教师操作：
“文件”---“另存为”---选择“Frontpage模板（*.tem）”，并命名模板文件名（如：
“诗文荟萃”）
练一练：
将网站首页文件存储为网页模板，命名为“我的模板”，然后以利用模板的方式新建一个网页。
五、实践与创新：
运用表格重新设计的网页布局，预览时改变浏览器窗口的大小，观察网页的布局是否会发生变化？
这说明表格对于网页内容还能起到什么作用？
六、小结：
在网页中插入表格、表格的调整和网页模板的设计。
七、课后反思：
第4课网页的美化
学习目标：
1、知识目标：
了解美化网页的常用方法，理解美化网页对提高网站质量的作用。
2、技能目标：
学会在网页中设置背景、音乐、FLASH动画和滚动字幕。
3、情感、态度与价值观目标：
提高审美意识，善于发现美，美化生活从自身做起。
教学方法：
自学法、演示法、观察法、实践法、小组合作。
教学重点：
在网页中设置背景、音乐、FLASH动画和滚动字幕。
教学难点：
在网页中设置背景、音乐、FLASH动画和滚动字幕。
学习时间：
1课时。
学习过程：
引入课题：
前面我们学习了网页制作中最基本的文字、图片、水平线的插入，并且还知道了怎样使用表格使网页中的内容排列的更整齐，层次更分明。
这里同学们再考虑你更喜欢什么样的网页？
学习与探究：
一、设置网页的背景
学生活动：
阅读课文第一部分，并利用前面所学内容，给自己的网页加上一个背景，使页面更加美观，更能衬托网页的主题。
（教师巡回指导）
练一练：
打开“诗文荟萃”站点，并打开主页文件，在“网页属性”对话框“颜色”栏中设置文本和背景的颜色，并进行预览。
二、设置表格的背景
比较：
观察两幅电视背景墙效果图，比较多色彩背景墙和单色背景墙哪种让客厅更加充满活力？
通过比较，同学们知道了多色彩背景墙可以让房间显得更加生动活泼，在网页中我们也可以通过设置表格或单元格的背景来达到局部色彩的变化，使网页变得生动有活力。
方法：
将光标定位在某一单元格内，单击鼠标右键，在快捷菜单中选择“表格属性”或“单元格属性”分别进行设置。
练一练：
在你的网页表格中，先后设置不同的背景颜色和背景图片，体验背景对网页的美化作用。
三、插入背景音乐
学生活动：
通过阅读课文，小组合作，在“诗文荟萃”站点中插入一个背景音乐。
教师总结：
在网页中单击右键，选择“网页属性”命令，在对话框中进行设置。
四、插入Flash动画
步骤：
“插入”----“高级”----“插件”，在“插件属性”对话框中进行设置。
练一练：
将光标定位在网页的适当位置，选择插入一个Flash动画文件。
反复修改对话框中各参数的值，体会不同参数值的不同效果。
五、插入滚动字幕
小组合作思考操作：
怎样可以让你网页中的文字或图片动起来，使它们更加醒目呢？
教师总结：
“插入”----“web组件”----“字幕”，在“字幕属性”对话框中进行设置。
练一练：
将光标定位在输入标题的单元格内，按照上述步骤进行插入字幕的操作。
六、实践与创新：
运用本课所学知识，分别对以下三个网页进行美化。
文件名
要求
参考样图
设置网页和表格背景
第1课“网页版面布局示意图c”
添加滚动字幕“海内存知己，天涯若比邻”；插入一个Flash动画；设置纯文字单元格的背景色。
第1课“网页版面布局示意图d”
设置单元格背景；设置背景音乐
第1课“网页版面布局示意图e”
一、本课小结：
设置网页背景、表格背景、插入背景音乐、Flash动画及滚动字幕。
课后反思：
第5课建立超链接
学习目标：
1、知识目标：
理解超链接的概念，理解导航栏在网页设计中的重要性。
2、技能目标：
学会在网页中插入超链接和导航栏；掌握将链接指向站点内、站点外和电子邮箱的方法。
3、情感、态度与价值观目标：
体会万物皆有联系，互相影响，或此消彼长，或相互促进。
。
教学方法：
自学法、演示法、观察法、实践法、小组合作。
教学重点：
设置超链接和网站导航栏。
教学难点：
设置超链接和网站导航栏。
学习时间：
1课时。
学习过程：
引入课题：
任何事物都不是独立存在的，考虑你的周围有哪些事物存在着一定的联系？
如：
我与同桌是同学，我有老师，有父母……
学习与探究：
一、设置超链接
学生活动：
阅读课文第一部分，小组讨论，完成以下问题：
1、?
设置超链接的目的是什么？
2、?
什么是超链接？
3、?
超链接有哪几种类型？
教师总结：
目的：
使网页之间形成一个紧密的整体，能够很容易地从一个网页到达另一个网页。
定义：
超链接是指从一个网页指向一个目标的连接关系。
类型：
站点内的链接、到其他网站的链接、到邮箱的链接、书签链接。
步骤：
“插入”------“超链接”。
大显身手：
根据所阅读内容，在“诗文荟萃”站点中，建立不同类型的链接。
二、设置网站导航栏
学生活动：
阅读课文第二部分，考虑
1、为什么要设置网站导航栏？
2、什么是导航栏？
3、建立导航栏的方法有哪些？
三、实践与创新：
1、在你的成长过程中，有多少人为你付出了艰辛的努力？
回忆对你帮助较大的1-3人，然后通过书信、电子邮件、电话、QQ等通讯工具表达你的感激之情。
2、?
网页中的文字建立超链接后，会有什么变化？
你能改变超链接文字的默认颜色吗？
四、展示学生作品，查看链接是否正确。
五、小结
设置超链接、设置网站导航栏
六、课后反思：
第6课网站的发布与维护
学习目标：
1、知识目标：
理解网站空间的概念；了解网站上传的原理。
2、技能目标：
掌握网站检查和宣传的方法；学会申请免费的主页空间；熟练使用网站上伟的工具。
3、情感、态度与价值观目标：
正确认识自己，诚实地与他人交流，学会展示自己真实的一面。
教学方法：
自学法、演示法、观察法、实践法、小组合作交流法。
教学重点：
申请网站空间与上传网站。
教学难点：
申请网站空间与上传网站。
学习时间：
1课时。
学习过程：
引入课题：
如何让更多的人走进自己的“诗文荟萃”了解自己呢？
怎样才能使自己的网站发布出去？
学习与探究：
一、网站发布前的检查
学生活动：
阅读课文第一部分，考虑：
网站发布前要做哪几项检查？
教师总结：
1、检查语法；
2.检查网站的整体情况；
3.?
检查超链接；
4.?
检查网页中嵌入式文件的存放路径。
练一练：
打开自己的“诗文荟萃”网站，按照上述项目检查自己的网站是否完善。
二、申请网站空间
学生活动：
阅读课文第二部分，小组讨论，完成以下问题：
1、为什么要申请网站空间？
2、怎样申请一个免费的网站空间？
3、你知道的可以提供免费空间的网站有哪些？
教师总结：
原因：
要想把自己制作的网站发布到Internet上，就必须申请一个特定的地点和空间，用来存放整个网站的信息，这个空间我们通常称为网站空间或主页空间。
申请方法：
登录网站---单击申请免费空间的链接---阅读协议并接受协议内容---按要求填写表格后提交—网站发送注册信息到你的邮箱内。
常用免费提供空间的网站：
中联网、中华网个人主页、方舟网、中通互联、天禧网等。
大显身手：
登录一个可以提供免费空间的网站，申请自己的主页空间。
三、上传网站
学生活动：
阅读课文第三部分，小组合作交流：
1、要想将制作好的网站上传到已经申请的免费空间，常用的方式有哪几种？
2、开动脑筋：
根据你所学到的知识，把你的的网站上传至你申请的免费空间吧！
3、在浏览器中输入自己网站的网址，访问自己的主页。
四、网站的宣传
学生活动：
思考：
怎样才能让更多人来访问我们的网站？
自己尝试对我们的网站进行宣传？
1、网站登录
2、交换链接
3、论坛发帖
五、课堂小结：
网站发布前的检查—申请网站空间—上传网站—宣传网站
六、课后反思：
升级会员 