苏科版（2018）八年级全册信息技术教案：创建站点并制作首页

创建站点并制作首页

【教学目标】

1.知识与技能

(1)理解站点的功能与作用，能熟练地将指定文件夹设置成站点.

(2)了解首页中包含的常见元素，自己设计首页结构图。

(3)学会插入图片、音频、文字以及设置网页背景的方法，并根据需要修改属性。

(4)初步完成首页的制作并保存、预览网页效果。

2.过程与方法

(1)通过亲历在Dreamweaver中设置站点，加深站点用途的理解。

(2)通过自己设计首页结构图，熟悉首页中的常见元素。

(3)制作首页的过程中，通过对插入图片、文字、音频、水平线及其属性的操作，在

不断尝试中理解和学习基本知识。

3.情感态度与价值观

(1)引导学生在学习新软件时与已有知识经验相类比，养成勤于总结的习惯，体会学

习要讲究方法。

(2)通过制作主题网站，在创建站点和制作首页的过程中，树立人与动物和谐相处，

珍爱、善待和保护动物的观念，同时在不断完成任务的过程中体验成功的喜悦。

(3)学会科学运用各种元素并进行合理布局，个性化地表达思想和情感。

【课时安排】

1课时

【教学重难点】

1.教学重点

①站点的功能与作用，熟练地将指定文件夹设置成站点。

②了解首页常见构成元素，设计出自己首页结构图。

③学会插入图片、文本、声音、水平线以及设置网页背景的方法。

2.教学难点

①站点的作用以及设置站点的方法。

②了解首页常见构成元素，设计出自己首页结构图.

③图片、文本、声音、水平线以及网页背景的设置方法。

【教学方法】

自主学习、合作探究、讲授法。

【课前准备】

苏亚星多媒体广播软件、教学课件、学件、“xinshang”网站、素材资源、微视频。

【教学过程】

创设情境，导入新课（3分钟）

课前准备：将名为“xinshang”的网站和名为“baohu”的站点文件夹发送

到学生机的桌面上，为上课做好准备。

教师：同学们可以打开桌面上xinshang文件夹下的index.html首页文件，

给同学们2分钟浏览此网站并观察首页，同时思考首页中有哪些元素？

网站欣赏：学生浏览网页，观察首页，思考首页组成元素。

教师：首页中包含哪些元素？这些元素又是如何插入到首页中的呢？本节课

我们来解决这些问题。通过上节课的学习我们知道，要制作网站首先需要为

这个网站设置站点。所以我们这节课的课题是：设置站点制作首页。（引出主题）

PPT："设置站点制作首页”主题文字

板书：设置站点制作首页

（设计意图：通过让学生浏览名为“xinshang”的网站并观察首页，主要是

引出本课主题，让学生尽快进入学习状态，明确本节课的学习内容，同时也为后

面归纳首页元素做铺垫。）

一、首页常见元素（2分钟）

教师：首页中都有哪些元素呢？下面我们一起看看首页图片。

PPT：呈现网站首页图片

学生：观察图片，思考、回答并小结首页元素。（引导学生归纳、总结常有

元素，可以适当提示）

板书：一、首页常见元素

1.logo图标2.横幅图片3.导航栏4.水平线

5.文字内容6.内容图片7.版权信息

二、设计首页结构图（3分钟）

教师：你们想不想自己设计首页呢？从这些元素中挑选一些放在你的首页

中，并标出各元素的位置，设计出首页结构图，给出示例图。

【任务一】自主设计首页结构图

任务要求：1.你设计的首页包含哪些元素？

2.在学案任务一的方框中画出首页结构图。

学生练习：设计首页机构图。

上台展示：让学生到黑板上画出首页的结构图，并作简单介绍。

（设计意图：通过呈现网站首页图片，让学生了解首页中的常见元素，并引

导学生设计出首页结构图。）

三、插入元素，制作首页（30分钟）

1.设置站点（3分钟）

教师：首页结构图设计好后，我们开始制作首页。上节课的学习我们知道：

在制作网站之前需要为网站设置一个站点。下面哪位同学上台给大家演示如何将

桌面上的baohu文件夹设置成网站的站点？

学生演示：1人（演示设置站点）（提醒：演示的学生一边操作一边讲

解步骤，加深学生的理解和记忆。）

教师：非常好！感谢你的演示。请回！（提醒学生掌声鼓励）

教师：下面请同学们将桌面上名为“baohu”的文件夹设置成站点。

学生练习：将指定文件夹设置成站点。

Dreamweaver：呈现正确设置站点的效果。

教师：请同学们对照正确设置站点的效果，检验自己网页站点的设置是否正

确？（正确的举手）

学生：检测站点设置是否正确，正确的举手。

（设计意图：要让学生理解为什么在制作网页之前先设置站点即站点的功能

与意义，通过学生演示+操作的方式让学生熟练站点的设置。）

2.制作首页（14分钟）

PPT：首页图片

我们开始往首页中插入各元素。请同学们观察，首页中像logo、横幅、导

航都是以什么形式呈现在首页中的？

学生：图片的形式

教师：也就是说要想在首页中添加以上元素，我们需要插入对应元素的图片。

【任务二】添加元素制作首页

①插入图片

任务要求：根据首页结构图，插入相应的图片。

图片位置：在“桌面一baohu-images”文件夹下

教师引导：那网页中如何插入图片呢？同学们可以回想ppt中插入图片的方

法。现在有个展示自己的机会，谁来？

（设计意图：通过让学生观察首页中各元素的呈现方式，达到让他们理解为

什么插入图片，插入什么图片以及接下来怎么插入图片的目的。）

学生演示：插入图片的操作

学生：认真观看插入图片的操作，并记住主要步骤。

教师：下面请同学们根据自己设计首页结构，插入首页中的图片。

学生：根据结构图，插入合适的图片。（如果学生遇到困难，提醒她们参考

课本P65中的step4）

（设计意图：让学生上台演示插入图片的操作，将WPS文字中插入图片的知

识操作迁移到网页中。每个人根据自己设计的首页结构插入所需要的图片。确保

页面具有个性化，不会千篇一律。）

②添加文字

任务要求：根据需要，自主学习学案中“添加文字”，为首页添加文字。

文字位置：在“桌面一baohu—网页文字”文档中

教师引导：可以回顾wps中添加文字的知识。

学生：自主学习学件中“添加文字”部分,根据自己设计的首页，添加合适

的文字内容。

（设计意图：首页应该是图文并茂的，所以在插入图片以后，让学生自主学

习学件上的知识，为首页添加适当的文字内容。）

③插入水平线

任务要求：根据需要，自主学习“插入水平线”知识，为首页添加水平线。

学生：自主学习学件中“插入水平线”部分，在合适位置添加一条水平线。

（设计意图：插入水平线的知识点比较简单，可以让学生自主学习。加之，

首页中很少插有水平线，所以此任务设置为可选任务。如果学生遇到困难，提醒

她们参考课本P65中的step4）

【作品展示】1-2个作品

展示1个元素齐全、布局合理的“成功”作品。让其他学生对作品进行打分

并给出理由；

展示1个“反面”作品，不仅要给作品打分，更要给出合理的修改建议。学

生再根据修改建议继续完善作品。

（设计意图：首页中常见的功能元素都已添加，通过“正反”作品的展示、

对比，让学生明确首页中不仅仅要有功能元素，各元素之间的合理布局才是最重

要的。）

3.合作探究，美化首页（13分钟）

教师：添加首页元素后，我们可以根据自己的喜好设置个性化的网页，你想

为你的首页设置一个背景效果吗？赶紧行动起来吧！坐在一起是一个小组，挑选

小组中最好的作品合作探究完成本任务，最终展示小组作品。

【任务五】合作探究美化首页

①网页背景

任务要求：小组合作，一起探究设置网页背景的方法（颜色或图片）。

图片位置：在“桌面一baohu—images”文件夹中“BG”图片。（选择图片

作为背景）

②插入音乐

任务要求：小组合作，探究插入背景音乐的方法。

音乐位置：在“桌面-baohu-天鹅湖序曲”mp3文件。

学生：以小组为单位，合作探究如何设置背景音乐。

（以小组为单位，让学生合作探索设置网页背景、插入音乐的方法。引导学

生将ppt中插入音乐的方法迁移到网页中；如果学生仍然探究不出，教师则直接

告知学生在“插入一媒体一插件”中设置。）

【作品展示】1-2人作品（根据时间）

（设计意图：给学生一个平台，主动展示自己的最终作品。先请作

者简单介绍自己的首页，总结在制作过程中遇到的问题；然后其他学生再对他的

作品点评，指出比自己做的好的方面，同时给出完善作品的修改建议。）

教师：在制作过程中，其他学生可能也会遇到各种问题，例如：图片无法任

意移动、竖着的导航栏无法实现，文