八年级信息技术上册学案设计

第一单元网站设计与制作学案

第1课创建站点

本课学习目标：1、知识目标：了解网站规划方法；认识Frontpage2000的工作界面；理解站点、网页、主页的概念。

2、技能目标：学会规划和设计网站；能够搜集网站相关素材；学会新建和打开站点。

3、情感、态度与价值观目标：感受网站规划的重要性，养成做事有计划、勤思考的习惯。

教学方法：自学法、演示法、观察法、实践法、小组合作。

教学重点：网站规划的一般步骤；Frongpage2000的站点管理。

教学难点：网站规划的一般步骤。

学习时间：1课时。

学习过程：

引入课题：许多同学都有上网的经历，那么什么是网站呢？

网站：网站是在因特网上一个相对独立的信息的集合，这些信息以网页的形式向全世界发布。因此，网站就是相关网页的集合。

学习与探究：

一、他山之石，可以攻玉

通过对“中国少年雏鹰网”与“联想公司网站”首页的比较，谈谈自己的感受，并说出它们之间有什么差异？

二、网站规划的一般步骤

小组合作：阅读本部分内容，总结网站规划的一般步骤？常见的网页版面布局形式有哪些？

步骤：1、确定网站的主题和风格；

2、设计规划网站的结构和内容；

3、设计网站的版面布局；（“T”型、“口”型、时尚型、“三”型布局）

4、搜集整理网站素材；

5、选择网站制作工具(frontpage2000)。

三、Frontpage2000的站点管理

1、初识Frontpage

根据打开程序的一般方法，自己试着打开Frontpage。并思考有没有其它的打开方法。

2、新建站点

教师演示：“文件”---“新建”---“站点”，打开“新建”对话框。

学生操作：（1）指定新站点的位置为“D：\情感小屋”，并选择站点类型为“只有一个网页的站点”。

（2）观察界面发生了什么变化？在“文件夹列表”中自动生成了哪几个文件或文件夹？它们有什么作用？

3、打开站点

“文件”---“打开站点”。

四、实践与创新的：

1、访问以下网站，描述它们各自的主题和风格，并画出网站的结构图和主页的布局图。

./01/indes.html

2、搜集整理关于赞美父母的诗句、文章、图片或歌曲，分组合作设计“我的父母”网页。（包括页面结构、内容、版面布局、网页的风格和内容，通过表格的形式记录下来）

五、小结：网站规划的一般步骤、Frontpage的站点管理

六、教学反思：

第2课设计网站首页

本课学习目标：1、知识目标：认识网页的工作原理；了解网页编辑的一般过程。

2、技能目标：学会在网页中输入文字、插入图片和水平线；学会新建、预览和保存网页。

3、情感、态度与价值观目标：善于从身边的广告、书刊中学习版面设计知识，并学以致用。

教学方法：自学法、演示法、观察法、实践法、小组合作。

教学重点：在网页中插入文字、图片、水平线及网页的保存、预览。

教学难点：在网页中插入文字、图片和水平线。

学习时间：1课时。

学习过程：

引入课题：展示一个包含有文字、图片和水平线的网页，并通过对这三部分的介绍激发学生的学习欲望。

学习与探究：

一、在网页中输入文字

小组合作并操作：根据前面所学知识，即在WORD中输入文字的操作，在“D：\情感小屋”站点中，双击打开主页文件“index.htm”，对照小宇在上节课中设计的首页效果图，在编辑窗口输入相应文字，并按照图例对这些文字进行修改字体、字号、颜色、对齐方式等操作。

二、在网页中插入图片

教师演示：“插入”---“图片”---“来自文件”

学生操作：在“Banner位置”处插入存放在“D：\素材”中的Banner图片，并对所插入的图片进行大小调整。

注：为便于上传，网页中图片一般采用容量较小的格式，如JPEG、GIF、PNG等。

三、在网页中插入水平线

学生阅读相关内容，试着自己在网页中的标题与正文之间插入一条水平线，并设置“水平线属性”。（教师巡回指导）

四、保存网页

同WORD操作相似，并尝试用不同的方法保存index.htm，考虑哪种方式更方便？

试一试：将刚刚插入到网页中的图片指定保存位置为：本站点的“images”文件夹。

五、预览网页

方法一：利用FrontPage自带的预览功能;方法二：通过浏览器预览。

练一练：按照上面介绍的两种方法预览自己的网页，分析它们各有什么优缺点？

六、添加新网页

“文件”---“新建”---“网页”

七、实践与创新：

1、根据第1课的规划，参照小宇设计的“我的父母”所示的界面，设计制作网页“我的父母”，其文件名为：Parents.htm，标题为“我的父母”。

2、对新建的网页进行预览，并改变预览窗口的大小，你会发现什么现象？有什么办法可以解决这个问题？

八、小结：

在网页中插入文字、图片、水平线及网页的保存、预览，添加新网页。

九、课后反思：

第3课网页中的表格

本课学习目标：1、知识目标：理解表格在网页设计中的重要作用。

2、技能目标：学会使用表格布局网页；灵活掌握表格调整的方法。

3、情感、态度与价值观目标：了解学校概貌，发现校园之美；养成良好的生活和学习习惯。

教学方法：自学法、演示法、观察法、实践法、小组合作。

教学重点：在网页中插入表格及表格的调整。

教学难点：在网页中插入表格及表格的调整。

学习时间：1课时。

学习过程：

引入课题：通过对“某校园鸟瞰图”与下载的“中学生作文网”的首页作比较，引导学生发现网页中表格的运用。

学习与探究：

一、表格的作用

阅读本部分内容，思考：在网页中使用表格有何作用？

表格可使网页中的文字、图片、动画等素材排列整齐有序，并且不会因浏览窗口大小的改变而改变排列方式。

二、在网页中插入表格

试一试：阅读相关内容，试着在站点“情感小屋”中打开首页文件Index.htm，分别插入四个表格，依次为：2*3、2*2、1*4和2*1，宽度都为780像素，水平居中。（教师巡回指导）

三、表格的调整

1、行高和列宽的调整

方法一：手动操作方法二：通过单元格属性或表格属性调整

2、单元格的合并和拆分

教师演示：（1）选中想要合并或拆分的单元格；

（2）单击鼠标右键，在快捷菜单中选择“合并单元格”或“拆分单元格”。

3、插入或删除表格中的行或列

（1）选择相应的行或列；

（2）单击鼠标右键，在快捷菜单中进行相应选择。

4、平均分布行和列