制作网站首页和框架

《制作网站首页和框架》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、[组图]（参考教案）第十二课《制作网站首页和框架》【字体：小大】作者：任远明文章来源：本站原创点击数：5892更新时间：2007-1-1912:59:05  【课时安排】1课时【教学目标】：1、知识与技能：理解个人网站首页的基本构成；了解制作网页的软件，掌握FrontPage2000网页文本编辑和图片插入方法，以及网页背景的设置方法。2、过程与方法：先让学生观摩一些漂亮、有个性特色的首页，然后任务驱动，让学生参考教材，互助学习，自主学会知识与技能，实现首页的制作。3、情感、态度、价值观：培养学生的审美能力

2、和创造能力，在小组协作学习中，培养学生的团队精神。【教学重点】：1、理解个人网站的基本组成和网页框架布局；2、学习FrontPage2000制作网页的一般方法（重点是文本格式、图片、背景）；【教学难点】：1、首页的艺术性与个性布局，色彩的搭配；2、图片的插入和背景的设置。【教学准备】：大屏幕投影、多媒体网络教室、相关图片及文档素材【教学过程】：一、创设情景，引入课题：师：老师今天给大家带来了一个礼物，它是一个漂亮的网站，它就是“刘翔个人官方网站”，请同学们欣赏。刘翔全球个人官方网站（http://liux

3、iang.sports.cn/）上节课我们已经规划了自己的网站，并且搜集了素材，这节课咱们来动手制作网站的首页。你知道有哪些软件可以用来制作网页吗？教师引入：其实好多字处理软件都可以设计网页，如word中，利用“另存为web页”就可以将文档保存为网页，有些图像处理软件如PhotoShop也可以制作网页，windows“记事本”也可以制作网页……不过FrontPage和Dreamweaver却是最方便的网页制作软件，因为它们不仅可以制作网页，而且能方便地设计和管理网站，很适合入门学习。我们先学习用Front

4、Page2000制作网站的首页。二、新课教学任务一：认识FrontPage20001、学生探究：用以前学过的打开软件的方法，在“程序”中找到并打开“FrontPage”。2、师引入：FrontPage与Word的操作非常相似，请同学们用鼠标试探FrontPage网页编辑窗口界面上各部分的名称，了解各按钮的作用，小组内进行交流，说说与Word窗口有哪些异同。3、抽2~3个小组代表交流讨论结果，教师适时展示FrontPage界面并辅助说明。重点指出新建、保存、插入、预览等菜单或按钮的位置和功能。4、学生练习：

5、打开一个已经做好的网页，试探一下三种编辑视图模式按钮的效果。（教师事先下载一个简单的网站首页发送给学生，让学生自主操作）任务二：制作网站首页1、师引入：在我们动手制作网页前，我们应当考虑好网页的布局和内容，个人网页的布局就像办小报一样，没有固定的格式，完全可以由我们自己大胆地进行设计。（教师利用广播展示几个风格不同的个人主页，让学生注意观察主页的内容版块布局）抽生回答：你觉得网站首页应当包含哪些图、文内容？你能形象地描述以上网站的布局样式吗？ 优秀个人主页在线                       

6、           当当网 黄河网                               刘翔个人网站 崔宏远个人网站                           感觉影像杂志之云南之行根据学生的回答，适时板书“网站首页的一般内容：网站标题、网站图标、导航栏、水平线、网站主题介绍、作者及电子邮箱……”常见的网页布局有：“国”字型；“匡”字型；“三”字型；“川”字型；封面型；Flash动画型；标题与文本型；框架型……你能指出老师展示的这些网站属于哪种布局吗？你准备选择哪一种布局方式来设计自己

7、的首页？ 2、练一练：新建一个网页，根据上节课自己拟订的网站设计方案，在空白位置输入网站名称、栏目名称、主题介绍、作者姓名等内容。3、仿照word的操作，利用格式栏中的工具按钮，设置改变文字效果，师鼓励学生在设计时要展示出自己的个性。小组内交流：我是怎样使文字格式更美的。4、保存主页文件教师指导学生保存时，首页应保存为index.htm或default.htm，保存的位置是上节课所规划的网站文件夹。 任务三：美化网页师：（通过广播展示一些学校或公司网站、以及学生网站4幅截图）请同学们观察这四个网站的首页，

8、色彩和风格上有什么不同？（抽生回答）要使我们的首页更美，我们可以用色彩或图案来美化它，你还希望你的网页背景是什么色彩或图案？你觉得可以插入什么图片来突出网站的主题呢？1、试一试：改变网页的背景和插入图片学生阅读课本89页，独立试探完成背景颜色效果的设置。投影展示：“格式——背景”的关键步骤画面设置网页背景进一步尝试和交流：除了使用色彩作为背景，还可以怎样美化背景？能用图片作为背景吗？试试看，怎样才能办到？Frontpage能像