八年级下学期网页制作教学设计.docx
- 文档编号:28636159
- 上传时间:2023-07-19
- 格式:DOCX
- 页数:18
- 大小:24.61KB
八年级下学期网页制作教学设计.docx
《八年级下学期网页制作教学设计.docx》由会员分享,可在线阅读,更多相关《八年级下学期网页制作教学设计.docx(18页珍藏版)》请在冰豆网上搜索。
八年级下学期网页制作教学设计
信息技术教学设计
授课时间
2.23——2.28
课题
网页入门
课型
新授
教学方法
讲练
教具
教学目的:
1、认识网页的基本工作界面。
2、学会如何创建站点,网页及如何保存网页。
教学重点、难点:
学会如何创建站点,网页及如何保存网页。
教学步骤
一、导入
上过网的同学们一定浏览过许多站点,那些图文并茂的网页一定让你流连忘返。
你知道那些网页是怎么制作出来的吗?
你也想学会制作网页吗?
那就让我们从制作一个简单的“悉尼奥运”网页开始吧。
制作网页的工具很多,这里咱们介绍FrontPage2000。
二、新授
1、启动FrontPage2000.
开始\程序\MicrosoftFrontPage2000.
2、工作界面介绍
菜单栏工具栏编辑区视图栏网页察看方式状态栏
重点讲解:
文件夹列表的功能。
3、个人站点的创建
A、看教学光盘
B、生练习
C、巩固练习(师要求学生按要求做:
新建一个“个人站点”)
D、学生探讨:
如何新建网页?
(1、在文件“菜单”中新建2、在工具栏中的新建按钮。
)
E、谈话:
如何保存网页呢?
讲解:
“文件”\“保存”在出现的对话框按要求进行设置即可。
三、练习
四、小结
教学回顾:
这节课对于学生来说,相对比较简单,但也比较重要,因为是入门,通过这节课的观察,学生的效果还是不错的。
信息技术教学设计
授课时间
3.2——3.6
课题
网页入门详解
课型
新授
教学方法
讲练
教具
教学目的:
1、掌握FrontPage2000软件的启动和退出方法;
2、了解什么是网页以及它所包含的主要元素;
3、了解FrontPage2000中的几种视图方式及其功能。
教学重点、难点:
掌握FrontPage2000软件的启动和退出方法;
教学步骤
〈导入新课〉
在上面的课程中我们已经学会了通过浏览网页方便地获取信息。
然而,有的同学会问,我们自己能不能设计、制作出自己的网页,并在网上发布呢?
当然可以了,接下来我们就来学习如何制作网页。
我们这里主要介绍采用FrontPage这一网页制作软件来进行网页制作。
首先我们来了解以下有关网页制作的基础知识。
一、网页及其组成
[提问]
首先,同学们,你们认为什么叫网页呢?
(教师先提出一些与教学内容有关的实际问题,让学生想想如何解决,以任务激发学知识的主动性。
)
[学生回答]
在网上看到的一些画面。
[总结]
对了,我们把通过浏览器在WWW上看到的每一幅画面都称为网页(Webpage)。
网页是全球广域网上的基本文档,用HTML语言编写。
我们也看到了,有的网页上只有文字,有的有图片,有的还有动画。
那么,我们要做的网页上包含的元素主要就有:
文字、图片、声音、动画、影像以及链接等。
通过这些的有机组合,就形成了包含各种信息的网页。
最初,人们用HTML语言在文本编辑中制作网页。
二、常用的网页制作工具
HTML语言是超文本标记语言(HypertextMarkupLanguage)的英文缩写,只有熟练掌握HTLM语言的专业人员才能用它制作网
页。
FrontPage系列软件的问世,将人们从HTML代码中解放出来,
用它来制作网页就像在文字处理软件中编排多媒体文档一样,非常直观。
目前使用较多的网页制作软件除了FrontPage外,还有Flash、Dreamweaver等。
接下来我们来看看如何进入FrontPage2000。
⒈FrontPage2000的启动
[演示]
单击“开始”按钮,将指针依次指向“程序”/“MicrosoftFrontPage”单击即可。
[提问]请同学们观察一下它的窗口,看看和我们刚学过的Word窗口比较一下。
(上课时,教师先提出一些与教学内容有关的实际问题,让学生想想如何解决,以任务激发
学知识的主动性。
带着这一问题听讲更能激起他们的学习热情。
通过设置一些悬念,再让学生用计算机去解决,他们会觉得学习计算机确实管用,能够解决实际中的问题,从而也提高了学习的积极性。
)
[学生回答]窗口的左边多了几种视图方式。
[讲解]对了,FrontPage2000的窗口和我们学过的Word窗口基本相似,都是由菜单栏、
工具栏、状态栏和编辑区组成的,只是,在FrontPage2000窗口的左边出现了几种视图方式。
他们分别是:
网页、文件夹、报表、导航、超链接和任务这六种。
接下来我们来分别介绍这六种视图方式和他们的功能。
2.FrontPage2000的视图方式
(1)网页
[讲解]它是我们制作网页时最常使用的视图方式,可以用来创建、编辑和预览网页,既有所见即所得的特性。
(2)文件夹
[讲解]它是显示站点内容的组织方式,用于管理站点中的文件和文件夹。
跟Windows资源管理器相似,在“文件夹”视图中可以创建、删除与移动文件和文件夹。
“文件夹”视图将工作区分为左右两部分,左侧显示网站中所有文件夹,单击任一文件夹,右侧的工作区将显示该文件夹下的内容。
(3)报表
[讲解]用来分析站点内容。
如计算站点中的所有文件大小、显示出哪个文件没有链接到其它任一文件、指出慢速或过期的网页、以工作或是它们被分配的人和其他等方式来把文件分组。
(4)导航
[讲解]用来创建、显示、打印和更改网站导航结构的视图。
在这个视图中可以清晰地看到整个网站的组织结构和文件组成,拖曳水平分割线可以改变上下窗口的相对大小。
(5)超链接
[讲解]显示来自站点的每一个超链接。
该视图方式以图形的方式显示网站中个文件之间的链接情况,网页之间的链接通过箭头来标志。
(6)任务
[讲解]任务视图列出了站点中要完成的任务。
〈总结〉
本节只是简单介绍一下个视图方式的作用和功能,它们的具体作用我们在以后的网页制作过程中再加以介绍。
至于退出FrontPage2000,和我们关闭其它应用程序的窗口一样,只要单击“关闭”按钮就可以了。
⒊FrontPage2000的退出
作业:
熟悉FrontPage2000网页制作工具环境。
(计算机是一门实践性很强的学科,只有通过上机实践,才能发现问题,才能更准确地理解计算机、更灵活地应用计算机。
同时,在实践的过程中,老师可以了解学生的掌握程度,发现学生中普遍存在的问题,合理布置学习任务。
实践中,特别是对于一些动手能力差的学生,要鼓励他们不怕犯错误。
)
教学回顾:
学生能基本掌握所学知识!
信息技术教学设计
授课时间
3.9——3.13
课题
网页制作
课型
新授
教学方法
合作、探讨
教具
教学目的:
1、通过学生相互间的合作来获取新知。
如:
设置网页背景,超链接等2、培养学生间的相互合作关系。
教学重点、难点:
培养学生间的相互合作关系
教学步骤
一、生互相探讨
1、启动FrontPage
2、创建空白网页
单击菜单栏“文件”|“新建”|“站点”,选择“新建”模板中的“空站点”。
3、插入文本文件
单击菜单栏“插入”|“文件”,利用打开的“选择文件”对话框选择教学光盘实例库第五章中“悉尼奥运”文件插入。
4、修饰文字
设定字体、字号、颜色,页末输入“华夏风流”。
5、设定背景颜色
在编辑区单击鼠标右键,打开“网页属性”|“背景”选项卡,单击颜色列表框的箭头,设定背景颜色。
6、预览
单击“预览”,进行预览;若不满意,可再单击“普通”进行修饰。
7、保存
单击“文件”|“另存为”命令,在打开的“另存为”对话框中输入文件名,保存类型为“Web”页,单击“更改”按钮,在打开的“设置网页标题”对话框中输入“27届奥运”,单击“确定”。
试一试:
创建第二个网页“华夏风流”,方法同上。
8、创建超链接。
要求:
把第一个网页链接到第二个网页,第二个网页又能链回到第一个网页。
9、预览
单击“预览”,观察用鼠标单击“华夏风流”时,能否跳到该网页;单击“返回上页”时能否返回“27届奥运”网页。
试一试:
新建两个空白网页,文件名分别为“page_3”和“page_4”,网页标题分别为“历史见证”和“奥运历史”。
并把其相应的文件插入其中,然后建立网页间的超链接。
二、小结
你学到了什么?
(生自己说)
教学回顾:
这节课完全是放给学生来做的,目的是想让他们通过自己的学习来发现新知,一节课下来,发现学生的自学能力不是太强。
信息技术教学设计
授课时间
3.16——3.20
课题
插入图片及修饰图片
课型
新授
教学方法
讲练
教具
教学目的:
1、学会在网页插入图片。
2、学会设置图片属性,图片边框等操作。
3、学会制作与设置图片缩约图。
教学重点、难点:
制作与设置图片缩约图
教学步骤
一、复习回顾
二、新课
1、插入图片
A、讲解:
其实在FrontPage中插入图片与在Word中插入图片一样,(操作)“插入\图片\来自文件”。
B、生练习操作。
2、设置图片属性
A、讲解:
在所插入图片上右击键选择图片属性,会出现设置图片属性窗口,在其出现的窗口中有三个选项卡:
常规、视频、外观。
可根据不同的需要的来设置。
B、生自己试着来做
C、生按师要求来设置图片
要求:
1、边框粗细为2。
2、转化为GIF格式。
3、图片工具栏的使用
A、重点讲解:
文本工具、绝对定位工具、自动缩约图工具
B、了解热点工具。
C、学生自己做
D、学生按教师的要求来做
要求:
1、把图片制作成自动缩略图。
2、把图片绝对定位拖到最右边。
三、巩固练习
四、小结
本节主要讲解了图片的设置,在这节里你应该重点学会设置图片属性,图片边框等操作;学会制作与设置图片缩略图。
教学回顾:
这节课大部分时间是通过教师讲解的,但一节课下来,效果不是太明显的,可能是由于速度太快了吧。
信息技术教学设计
授课时间
3.23——3.27
课题
创建超链接
课型
新授
教学方法
讲练
教具
教学目的:
学会怎样进行超链接(1、学会怎样链接到网页2、学会怎样链接到计算机中的某一个文件)
教学重点、难点:
超链接的方法
教学步骤
一、复习回顾
1、新建站点
2、保存网页(并更改标题)
3、对图片的修饰及设置(要求:
插入一副图片,并将其边框粗细设置为2,将其绝对定位,并在其上添加文字)
二、新课
1、生自己做
(要求:
新建一个空站点,并在其站点下新建至少两个网页,在新网页中插入文字和图片。
)
2、谈话:
在前面咱们所学的Word、Excel中都学过超级链接,大家都还记得吗?
其实在FrontPage中也有超链接,方法跟咱们以前学过的一样。
来看一下。
3、师讲解:
A、首先选中文字或图片。
B、单击工具栏中的超链接按钮或“插入”菜单中的“超链接”。
C、在名称里单击所要链接的网页,如果要链接到某一个文件,单击“右下角的第三个按钮”,从计算机中选择一个文件。
4、生自己练习。
三、生巩固练习
四、师小结
这节课我们主要学习了超链接,其实对于这个咱们已经很熟悉了,关键是根据来链接,到底选择什么。
教学回顾:
学生对超链接已经并不陌生了,通过这节课的学习,学生大部分掌握了超链接。
信息技术教学设计
授课时间
3.30——4.3
课题
设置网页背景和背景音乐
课型
新授
教学方法
讲练
教具
教学目的:
1、学会怎样添加背景音乐。
2、学会设置网页背景。
教学重点、难点:
学会怎样添加背景音乐及设置网页背景。
教学步骤
一、复习回顾
实际操作:
超链接
二、新课
1、添加背景音乐
A、谈话:
当你打开某个网页时,可能会听到动听音乐声,这是怎么做出来的呢?
这节课咱们就来揭开它的奥秘。
B、讲解:
在网页的编辑区击右键,在弹出的快捷菜单中选择“网页属性”,之后会打开网页属性的窗口,在“常规”选项卡中有一项“背景音乐”,单击其后面的“浏览”按钮,选择一个背景音乐。
C、在“循环次数”里可以设置循环的次数。
2、生练习
3、设置网页背景
A、谈话:
为了使网页更加美观,通常都需要设置网页的背景,怎么来设置呢?
B、讲解:
在网页的编辑区击右键,在弹出的快捷菜单中选择“网页属性”,之后会打开网页属性的窗口,在“背景”选项卡根据需要来设置,可以用图片来作为背景,也可以用颜色来作为背景。
C、生练习
三、师检查练习结果
叫生上台演示
四、小结
教学回顾:
信息技术教学设计
授课时间
4.6——4.10
课题
框架网页
课型
新授
教学方法
讲练
教具
教学目的:
1、学会怎样新建框架网页。
2、学会保存框架网页。
教学重点、难点:
学会如何来保存框架网页。
教学步骤
一、巩固练习
叫生上台演示操作上节课的内容,具体为:
1、新建一个空站点。
2、保存当前的网页。
3、新建一个空白网页并保存。
4、给第一页设置背景。
5、给第二页设置背景音乐。
二、新课
1、导入
谈话:
制作网页时,在很多时候要用到框架网页,如:
书上的例子(出示成果),但具体何为框架网页?
看书P105页。
2、识记框架网页并检查效果。
3、讲授框架网页。
A、新建框架网页
(1)方法:
单击“文件|新建|网页”,然后在出现的窗口中选择第二个选项卡——框架网页,根据需要来选择类型。
(2)生自己练习
B、保存框架网页
(1)谈话:
框架网页与普通网页的保存方法不同,具体应为:
(2)讲解:
当你单击保存后,在出现的对话框中看右下角的预览里的提示,其实框架网页是由好几个网页组成的,看清预览里的提示是保存哪个网页的,然后根据要求来选择保存位置与文件名。
(3)生自己练习。
三、巩固练习
叫生登台演示
四、小结
教学回顾:
这节课内容不多,80%的学生掌握较好!
信息技术教学设计
授课时间
4.13——4.17
课题
练习
课型
复习
教学方法
讲练
教具
教学目的:
通过本节课的综合练习,使学生进一步熟练掌握以前学过的操作。
教学重点、难点:
熟练以前的操作
教学步骤
具体要求:
把“网上邻居|USER|新建文件夹”中“C试题”文件夹拷贝到“D盘”下,并将其改成自己的名字,然后再进行操作。
1、在FrontPatg中新建一个“横幅和目录”的框架网页。
2、在横框中新建一个“欢迎光临我的网站”的字幕。
3、将字模方向设置为左,表现方式为滚动条,背景颜色为蓝绿色。
4、将字模的字体设置为隶书,加粗,36磅。
5、在左框中输入目录文字:
“珍珠港事件”、“中途岛大海战”、“英吉利海峡的空中战”、“西线的静坐战”。
6、在右框架把C试题文件夹中的文件test.txt按“以HTML方式处理”形式插入。
7、将C试题文件夹下的图片London.gif插入文字的右下方,并将其绝对定位。
8、在右框架网页中将C试题文件夹下的Circusl.wav作为其背景音乐。
9、将C试题文件夹下的图片Cat-0096.jpg设置为左框架网页的背景。
10、将整个框架网页保存到姓名文件夹下,其中整个框架保存为ddd.htm横幅保存为h.htm,左框架保存为z.htm,右框架保存为y.htm。
教学回顾:
题完成的不是太好,可能与上课时练习较少有较大的关系吧。
信息技术教学设计
授课时间
4.20——4.24
课题
插入表格
课型
新授
教学方法
讲练
教具
教学目的:
1、网页中用表格定位方法,输入文字。
2、对表格的行列的编辑及修饰。
教学重点、难点:
表格行列的编辑及修饰。
教学步骤
一、复习回顾
二、引入
我们在Word、Excel中都学过插入表格,在FrontPage中也可以插入表格,并且还可以用表格来定位。
三、新课
1、插入表格
A、讲解:
依次单击菜单栏的“表格|插入表格”,之后会打开插入表格的对话框,在出现的对话框中设置所需表格的行列即可。
B、生练习
2、行列的编辑
A、讲解:
同在Word、Excel中一样,也可以对行列进行编辑,如插入行(列),删除行(列),合并单元格,拆分单元格等操作,方法也同其一样。
B、师示范
C、生练习
3、行列的修饰
A、讲解:
在表格内右击,在出现的快捷菜单中选择“表格属性”,在其出现的对话框中可以进行设置,具体可根据实际情况来确定,其中在出现的快捷菜单选择“单元格属性”,可以设置单元格的一些属性。
B、生练习
四、师小结
教学回顾:
能基本掌握所学知识。
信息技术教学设计
授课时间
4.27——4.30
课题
表单和文本框
课型
新授
教学方法
讲练
教具
教学目的:
1、学会如何插入表单和文本框。
2、会对表单和文本框进行其属性设置。
教学重点、难点:
表单和文本框的属性设置。
教学步骤
一、复习回顾
二、新课
1、插入表单
方法:
单击“插入|表单|表单”。
2、插入文本框
A、单行文本框
方法:
单击“插入|表单|单行文本框”。
属性设置:
在其上双击(或击右键在右键菜单中选择“表单域属性”),在名称里输入此文本框的内部名称,在“初始值”里输入此文本框默认的选项,在宽度里输入此文本框的宽度,在TAB顺序里输入1至999的数值,表示按下TAB的顺序,在密码域里可以选择“是与否”,单击“验证有效性”可以设置此单行文本框的有效性。
B、滚动文本框
方法:
单击“插入|表单|滚动文本框”。
属性设置:
在其上双击(或击右键在右键菜单中选择“表单域属性”),在名称里输入此文本框的内部名称,在“初始值”里输入此文本框默认的选项,在宽度里输入此文本框的宽度,在TAB顺序里输入1至999的数值,表示按下TAB的顺序,在行数里输入滚动的行数,单击“验证有效性”可以设置此单行文本框的有效性。
3、生练习
三、巩固练习
四、师小结
教学回顾:
学习情况较好。
信息技术教学设计
授课时间
5.4——5.8
课题
发布站点
课型
新授
教学方法
讲练
教具
教学目的:
了解并知道怎么发布站点。
教学重点、难点:
了解并知道怎么发布站点。
教学步骤
一、引入
主页做完后,需将它发布到Internet上,才能让别人浏览到。
下面我们来学习如何发布站点。
二、预备知识
发布站点,就是将我们在自己计算机制作的站点,上传给Internet上的某个网站的WWW服务器。
在发布站点之前,首先要向选定的网站申请主页空间。
申请后,我们会得到一个主页地址、账号、口令。
在Internet上申请主页空间一般需要缴纳一定数量的租金,但也有许多站点可提供免费主页空间。
三、发布站点
步骤:
1、打开“发布站点”对话框
在“网页”视图中打开“悉尼奥运”站点,从“文件”菜单中选择“发布站点”,打开“发布站点”对话框。
2、输入Web服务器网址
在“指定发布站点的位置”文本框中,输入Web服务器分配给的地址,单击发布。
3、输入账号、口令
当站点发布向导询问账号、口令时,输入在申请主页空间时得到的账号、口令,单击“完成”。
4、完成发布。
四、生自己练习
教学回顾:
教学效果较好。
信息技术教学设计
授课时间
5.11——5.15
课题
复习
课型
复习
教学方法
讲练
教具
教学目的:
进一步熟悉Frontpage,掌握它的点滴知识。
教学重点、难点:
表格行列的编辑及修饰。
Frontpage复习题
一、选择题:
1、浏览器是浏览网页的软件,目前常用的浏览器是:
()
A.OutlookExpressB.InternetExplorerC.MicrosoftFrontPageD.Foxmail
2、下列软件中,不是网页制作工具的是:
()
A:
AccessB:
DreamweaverC:
FrontPageD:
记事本
3、下面哪一个不是网页的扩展名:
()
A:
.htmB:
.htmlC:
.phpD:
.xls
4、文字建立链接后,通常在文字的下方会产生()
A:
波浪线B:
下划线C:
着重号D:
以上都不对
5、FrontPage保存的默认文件名为:
()
A:
文档1.xlsB:
book1.xlsC:
newpage1.htmD:
无标题.xls
6、表格边框线的粗细设置为(),在预览方式下表格线不可见。
A:
1B:
2C:
3D:
0
7、新建网站默认路径是( )
A:
C:
\MyDocuments\MyWebs\Myweb B:
D:
\MyDocuments\MyWebs\Myweb
C:
C:
\MyWebs\Myweb D:
C:
\MyWeb
8、网站与文件夹的区别,下面的说法正确的是:
( )
A:
没有太大的区别B:
网站下会有网页,文件夹则不能有网页。
C:
网站目录下将自动建立-private和images两个子目录。
9、在组件----插入字幕时,字幕没有哪种表现方式()
A:
滚动条B:
幻灯片C:
交替D:
淡化
二、判断题
1、网页一般由文字与图片组成,还可以包括声音、影像和动画等。
()
2、利用Frontpage2000的组件可以非常方便地制作留言板。
()
3、网页文件的扩展名是“.html”或“.htm”,还有“.asp”、“.php”等。
()
4、web服务器必须有固定的IP地址,因此一般拨号上网的计算机不能作为WEB服务器.()
5、记事本可以制作一个简单的网页。
()
6、HTML就是制作网页的超文本标识语言。
( )
7、网页中可以插入flash动画、gif图片。
( )
8、在预览状态网页是不可以修改的。
( )
9、在网页制作过程中,可直接用HTML语言编辑网页。
()
教学回顾:
有一半多学生做到会80%对。
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 年级 下学 网页 制作 教学 设计