网页制作教案.docxVIP

第 1 课 制作一个简单的网页 学习目标： 1、知识目标：了解网站规划方法；认识 Frontpage2003 的工作界面； 理解站点、网页、主页的概念。 2、技能目标：学会规划和设计网站；能够搜集网站相关素材；学会新 建和打开站点。 3、情感、态度与价值观目标：感受网站规划的重要性，养成做事有计 划、勤思考的习惯。 教学方法：自学法、演示法、观察法、实践法、小组合作。 教学重点：网站规划的一般步骤； Frongpage2003 的站点管理。 教学难点：网站规划的一般步骤。 学习时间： 1 课时。 学习过程： 引入课题： 许多同学都有上网的经历，那么什么是网站呢？ 网站：网站是在因特网上一个相对独立的信息的集合，这些信息以网页的形式向全世界发布。因此，网站就是相关网页的集合。网页就是把用文字、图形、声音、影视等多种媒体形式表达的信息，以及分布在因特网上的相关信息， 相互链接起来而构成的一种信息表达方式。 学习与探究： 一、他山之石，可以攻玉 通过对“中国少年雏鹰网”与“网易”首页的比较，谈谈自己的感受，并说出它们之间有什么差异？ 二、网站规划的一般步骤 小组合作：阅读本部分内容，总结网站规划的一般步骤？常见的网页版面布局形式有哪些？ 步骤： 1、确定网站的主题和风格； 1 、设计规划网站的结构和内容； 、设计网站的版面布局； （“T”型、“口”型、时尚型、 “三” 型布局） 、搜集整理网站素材； 、选择网站制作工具 (frontpage2003) 。三、 Frontpage2003 的站点管理 1、 初识 Frontpage 根据打开程序的一般方法， 自己试着打开 Frontpage 。并思考有没有其它的打开方法。 2、 新建站点 教师演示：“文件” “新建” “站点”，打开“新建”对话框。 学生操作： 1）指定新站点的位臵为“ F： 诗文荟萃”，并选择站点类型为“只有一个网页的站点”。 2）观察界面发生了什么变化？在“文件夹列表”中自动生成了哪几个文件或文件夹？它们有什么作用？ 3、 打开站点 “文件” “打开站点”。 四、实践与创新： 1、 访问以下网站，描述它们各自的主题和风格，并画出网站的结构 图和主页的布局图。 ./01/indes.html 2、 搜集整理关于赞美父母的诗句、文章、图片或歌曲，分组合作设 计“我的父母”网页。（包括页面结构、内容、版面布局、网页的风格和内容，通过表格的形式记录下来） 五、小结：网站规划的一般步骤、 Frontpage 的站点管理 六、教学反思： 2 第 2 课 设计网站首页 学习目标： 1、知识目标：认识网页的工作原理；了解网页编辑的一般过程。 2、技能目标：学会在网页中输入文字、 插入图片和水平线； 学会新建、 预览和保存网页。 3、情感、态度与价值观目标：善于从身边的广告、书刊中学习版面设 计知识，并学以致用。 教学方法：自学法、演示法、观察法、实践法、小组合作。 教学重点：在网页中插入文字、图片、水平线及网页的保存、预览。 教学难点：在网页中插入文字、图片和水平线。 学习时间： 1 课时。 学习过程： 引入课题：展示一个包含有文字、图片和水平线的网页，并通过对这三部分的介绍激发学生的学习欲望。 学习与探究： 一、在网页中输入文字 小组合作并操作：根据前面所学知识，即在 WORD中输入文字的操作，在“ F： 诗文荟萃”站点中，双击打开主页文件“ index.htm ”，对照小宇在上节课中设计的首页效果图，在编辑窗口输入相应文字，并按照图例对 这些文字进行修改字体、字号、颜色、对齐方式等操作。 二、在网页中插入图片 教师演示：“插入” “图片” “来自文件” 学生操作：在“ Banner 位臵”处插入存放在“ F： 素材”中的 Banner 图片，并对所插入的图片进行大小调整。 注：为便于上传，网页中图片一般采用容量较小的格式， 如 JPEG、GIF、 PNG等。 三、在网页中插入水平线 3 学生阅读相关内容，试着自己在网页中的标题与正文之间插入一条水 平线，并设臵“水平线属性” 。（教师巡回指导） 四、保存网页 WORD操作相似，并尝试用不同的方法保存 index.htm ，考虑哪种方式更方便？ 试一试：将刚刚插入到网页中的图片指定保存位臵为：本站点的“images”文件夹。 五、预览网页 方法一：利用 FrontPage 自带的预览功能 ; 方法二：通过浏览器预览。 练一练：按照上面介绍的两种方法预览自己的网页，分析它们各有什 么优缺点？ 六、添加新网页 “文件” “新建” “网页” 七、实践与创新： 1、根据第 1 课的规划，参照小宇设计的“我的父母”所示的界面，设 计制作网页 “我的父母”，其文件名为： Parents.htm ，标题为“我的父母”。