制作网站页和框架.doc

[组图]（参考教案）第十二课《制作网站首页和框架》 【字体：小 大】 作者：任远明 文章来源：本站原创 点击数： 5892 更新时间：2007-1-19 12:59:05 ?? 【课时安排】 1课时 【教学目标】： 1、知识与技能：理解个人网站首页的基本构成；了解制作网页的软件，掌握FrontPage2000网页文本编辑和图片插入方法，以及网页背景的设置方法。 2、过程与方法：先让学生观摩一些漂亮、有个性特色的首页，然后任务驱动，让学生参考教材，互助学习，自主学会知识与技能，实现首页的制作。 3、情感、态度、价值观：培养学生的审美能力和创造能力，在小组协作学习中，培养学生的团队精神。 【教学重点】： 1、理解个人网站的基本组成和网页框架布局； 2、学习FrontPage2000制作网页的一般方法（重点是文本格式、图片、背景）； 【教学难点】： 1、首页的艺术性与个性布局，色彩的搭配； 2、图片的插入和背景的设置。 【教学准备】： 大屏幕投影、多媒体网络教室、相关图片及文档素材 【教学过程】： 一、创设情景，引入课题： 师：老师今天给大家带来了一个礼物，它是一个漂亮的网站，它就是“刘翔个人官方网站”，请同学们欣赏。 刘翔全球个人官方网站（/） 上节课我们已经规划了自己的网站，并且搜集了素材，这节课咱们来动手制作网站的首页。你知道有哪些软件可以用来制作网页吗？ 教师引入：其实好多字处理软件都可以设计网页，如word中，利用“另存为web页”就可以将文档保存为网页，有些图像处理软件如PhotoShop也可以制作网页，windows“记事本”也可以制作网页……不过FrontPage和Dreamweaver却是最方便的网页制作软件，因为它们不仅可以制作网页，而且能方便地设计和管理网站，很适合入门学习。 我们先学习用FrontPage2000制作网站的首页。 二、新课教学 任务一：认识FrontPage2000 1、学生探究：用以前学过的打开软件的方法，在“程序”中找到并打开“FrontPage”。 2、师引入：FrontPage与Word的操作非常相似，请同学们用鼠标试探FrontPage网页编辑窗口界面上各部分的名称，了解各按钮的作用，小组内进行交流，说说与Word窗口有哪些异同。 3、抽2~3个小组代表交流讨论结果，教师适时展示FrontPage界面并辅助说明。重点指出新建、保存、插入、预览等菜单或按钮的位置和功能。 4、学生练习：打开一个已经做好的网页，试探一下三种编辑视图模式按钮的效果。（教师事先下载一个简单的网站首页发送给学生，让学生自主操作） 任务二：制作网站首页 1、师引入：在我们动手制作网页前，我们应当考虑好网页的布局和内容，个人网页的布局就像办小报一样，没有固定的格式，完全可以由我们自己大胆地进行设计。（教师利用广播展示几个风格不同的个人主页，让学生注意观察主页的内容版块布局） 抽生回答：你觉得网站首页应当包含哪些图、文内容？你能形象地描述以上网站的布局样式吗？ ? 优秀个人主页在线??????????????????????????????????当当网 ? 黄河网??????????????????????????????? 刘翔个人网站 ? 崔宏远个人网站??????????????????????????? 感觉影像杂志之云南之行 根据学生的回答，适时板书“网站首页的一般内容：网站标题、网站图标、导航栏、水平线、网站主题介绍、作者及电子邮箱……” 常见的网页布局有：“国”字型；“匡”字型；“三”字型；“川”字型；封面型；Flash动画型；标题与文本型；框架型……你能指出老师展示的这些网站属于哪种布局吗？你准备选择哪一种布局方式来设计自己的首页？ ? 2、练一练：新建一个网页，根据上节课自己拟订的网站设计方案，在空白位置输入网站名称、栏目名称、主题介绍、作者姓名等内容。 3、仿照word的操作，利用格式栏中的工具按钮，设置改变文字效果，师鼓励学生在设计时要展示出自己的个性。 小组内交流：我是怎样使文字格式更美的。 4、保存主页文件 教师指导学生保存时，首页应保存为index.htm或default.htm，保存的位置是上节课所规划的网站文件夹。 ? 任务三：美化网页 师：（通过广播展示一些学校或公司网站、以及学生网站4幅截图）请同学们观察这四个网站的首页，色彩和风格上有什么不同？（抽生回答） 要使我们的首页更美，我们可以用色彩或图案来美化它，你还希望你的网页背景是什么色彩或图案？你觉得可以插入什么图片来突出网站的主题呢？ 1、试一试：改变网页的背景和插入图片 学生阅读课本89页，独立试探完成背景颜色效果的设置。 投影展示：“格式——背景