第六章网页制作基础.docx
- 文档编号:5833388
- 上传时间:2023-01-01
- 格式:DOCX
- 页数:15
- 大小:23.03KB
第六章网页制作基础.docx
《第六章网页制作基础.docx》由会员分享,可在线阅读,更多相关《第六章网页制作基础.docx(15页珍藏版)》请在冰豆网上搜索。
第六章网页制作基础
第六章网页制作基础
网页是网站的基本组成,要想制作网站,必须学会制作网页。
有关网页制作的内容很多,不可能在短短的几课时内介绍完全,本章主要介绍网页制作的基本操作,包括网页中文字和图片等基本元素的编辑、网页的版式与布局技巧、网页中的超链接等,为下章的网站设计与制作奠定基础。
本章的学情分析可从以下几方面考虑:
1.对于小学阶段能正常开设信息技术课的学生而言,此部分内容比较简单,教师可以依照教材的顺序进行教学。
2.对于网页制作是零起点的学生来说,要在规定课时内完成本章内容,会存在一定的难度。
教师需要结合补缺内容和学案进行相应的指导。
3.对于所有学生而言,进入初中后已经学习了文字编辑、图片处理、文件操作、资源管理、网络的基本知识、演示文稿中的超链接等内容,很多知识都可以迁移到本章来。
本章内容共分三节,每节都以一个小主题展开,然后围绕该主题制作一个相关的网页。
三节的内容既独立又有一定递进关系。
本章的最后设置的综合实践的板块,是对本章所学内容的综合练习,各学校可以根据自己的实际进行选择性教学。
本章的重点是网页的版式与布局技巧、书签类型的超链接。
本章的难点是网页的布局、书签超链接。
本章参考课时:
3~6课时。
第3节可以根据各地实际教学情况,适当增加1课时。
综合实践2课时。
第1节网页的创建
1.教学目标
知识与技能
★了解网页模板的作用。
★能根据需要选择合适的模板快速创建网页。
★会对网页的内容进行编辑。
过程与方法
通过创设情景,激发学生的学习兴趣。
通过制作一个简单的网页,掌握网页制作的一般过程。
情感态度与价值观
★体验网页模板在制作网页时的快捷。
★体验使用网页进行信息交流的乐趣。
2.重点和难点。
重点是使用FrontPage2000自带的模板创建网页,并对网页进行编辑;难点是网页中图片的插入与编辑。
二、教法设计
本节是网页制作的第一课,虽然有的学生在小学已经接触过,但掌握得并不熟练。
因此教师不能太放手,而要加强指导,尤其是学法指导。
教师引导学生使用网页模板来创建网页后,指导学生按照网页制作的过程,完成本节课的学习任务。
最后要引导学生总结使用模板快速创建网页的特点及基本步骤。
三、教学建议
1.导入新课(情景创设)
如果绝大部分学生在网页制作方面是零起点,引入时可以演示一睦学生自己制作的网页(本校学生制作的,更有影响力;也可以采用全国中学生电脑作品大赛的获奖作品),引起学生的兴趣,然后切入本节的内容;也可以通过对比的方式,突出网页模板的作用,然后让学生尝试用网页模板创建网网页。
2.补缺
如果学生从未制作过网页或者不熟悉FrongPage2000界面,需要先为学生补充介绍,为后面的学习扫清障碍。
3.实践导引
在实践中,要允许学生自主选择网页模板和主题,但教师要适时引导学生对网页美观的认识。
(1)用模板快速创建网页
此处要强调“使用模板创建网页”的操作方法:
执行“文件/新建/网页”菜单选项。
指出使用常用工具栏上的“新建网页”按钮创建的网页其实是使用了“普通网页”模板。
(2)编辑网页内容
本环节主要包括以下内容:
,
★网页中文字的编辑。
此部分内容比较简单,教师可以不用特别强调,学生可以迁移word中所学的知识来完成,对于个别基础差的学生则进行个别指导。
★网页中图片的编辑。
首先要向网页中添加图片。
添加“来自文件”的图片时,其操作方法和Word中添加图片的方法有所不同。
教师可以引导学生在下面的“图片”对话中查找相应的按钮。
其次是图片属性的设置。
网页中的图片属性设置项目较少,主要有图片的大小、对齐方式、边框粗细等,至于如何控制图片的位置,如果有学生提及,也不用讲解,从而为下节“网页的布局”埋下伏笔。
此处要注意教给学生“设置对象属性”的常规方法,即:
右击对象,在快捷菜单中选择相应的命令。
(3)预览并保存网页
预览网页有两种方法:
使用“预览”按钮和“在浏览器中预览”按钮,注意从按钮的位置、预览效果等方面进行比较,如果网页内容发生了改变,使用第二种方法会提示是否保存网页。
并对图片进行嵌入式保存。
4.评价建议.
建议从以下几个方面进行评价,而且宜粗不宜细。
(1)是否完成了一个网页?
(2)网页中的文字和图片是否与主题相关?
(3)网页是否美观?
5.助力
通过阅读“常见的网页制作工具”,可以开拓学生的视野;为了将来网页发布后能获得比较好的视觉效果,让学生一开始就了解文字的编排技巧,并应用于网页制作中。
6.加油
图片很大时,放在网页上会影响网页的美观,发布网站后也会影响到网页的打开速度,因此要使用缩略图。
如果教学时问允许,此部分内容也可以放在教材正文中讲解。
练习参考:
1.A2.A,B,C3.D4·启动搜索引擎(如WWW.baidu.com,www.google.com等),使用“网页模板,为关键字进行搜索并下载。
网页的创建(学案)
学习者姓名
第一环节
准备工作
1.在教师指定的位置新建一个文件夹,以保存网页和网页中的图片等元素。
你新建的文件夹名称是:
。
(写出完整路径)
2.启动FrontPage2000,熟悉操作环境。
FrongPage2000编辑环境提供了6种试图,分别是:
——、——、——、——、——和——。
编辑网页应该在视图下进行。
在网页视图方式下,单击——标签可直观地进行网页的编辑,单击——标签可直接编辑HTMI。
代码,单击——标签可观察网页在浏览器中的效果。
第二环节
用模板创建网页
1.用模板创建网页使用的菜单项是:
。
2.你使用的是——模板。
3.你的网页内容的主题是。
第三环节
编辑网页内容
1.必学:
(1)将网页中的文字换成与主题相关的内容。
(2)设置文字的字体、字号和颜色。
(3)至少插入一幅“来自文件”的图片。
体会与word中插入图片的不同之处。
(4)设置图片的属性
右击图片,选择“图片属性”命令,在“外观”选项卡中设置图片的对齐方式和边框粗细。
2.拓展
制作缩略图。
使用的菜单项是___________。
3.探究
能不能设置图片与周围文字的环绕方式?
你得到的结论是:
_________________
第四环节
预览并保存网页
1.预览网页。
通常可以采用下列两种方式预览网页。
(1)在“网页视图模式”下,单击___________标签。
(2)使用常用工具栏的___________按钮。
2.保存网页
保存网页时,如果网页中有新增的图片,则会出现______对话框。
图片一般保存在文件夹中。
你保存的网页文件名是,网页文件的扩展名是_________________
第五环节
体会
你觉得使用模板创建网页的优点和局限各是什么?
第二节网页布局
1.教学目标
知识与技能
★了解常见的网页版式。
★知道表格在网页中的作用。
★会用表格规划布局网页。
过程与方法
通过欣赏、解剖典型的网页版式,知道表格是布局网页的主要手段。
通过设计制作一个网页,掌握用表格布局网页的方法。
3.重点和难点。
重点是网页版式的设计和表格的建立。
难点是正确设置表格的属性。
本节包括两部分内容:
网页的版式和用表格布局网页。
前者是新知识,后者可以迁移文字处理中的表格的相关知识。
为了避免分散学生的注意力,提高课堂效率,教师课前最好下载一些典型版式的网页(分栏效果明显的、封面型的),让学生自由浏览,然后归纳总结;教师也可以直接演示,引导学生总结。
接下来,可以让学生自己尝试用表格布局指定的网页版式(如教材中的样例),如果时间允许,还可以填充网页的内容。
三、教学建议
1.导入新课
可以从使用网页模板创建网页的局限性人手,引入如何从零开始自行规划设计网.页;或者从“如何定位图片在网页中的位置”人手,引人表格在网页规划中的作用;或者展示两个网页(其中,一个是用表格布局的,另一个是没有使用表格布局、页面很杂乱的),让学生对比,指出哪个网页好,然后教师指出网页整齐的原因是使用了表格布局网页。
2.实践导引
(1)欣赏常见的网页版式
网页的布局离不开网页的版式。
很多与网页制作相关的书上都把网页的版式归纳为以下几种:
同字型、国字型、拐角型、标题正文型、左右框架型、上下框架型、综合框架型、封面型、Flash型、变化型等,但是,这些表述很不直观,学生理解起来难度很大。
因此,教材在网页的版式上做了一些处理,分为分栏式和封面型两大类,分栏式又可以细分为一栏式、两分栏式、三分栏式等。
这样处理,对于“网页的版式”是零起点的初中学生来说,就容易接受得多。
对于初学者而言,网页的版式分类宜粗不宜细。
对于那些变化型的很艺术的网页版式,教师可以提及,也可以鼓励学有余力的学生去做,但不是教学的重点。
此部分内容建议以浏览的方式进行归纳总结。
(2)使用表格布局网页
在引导学生归纳出网页的常见版式后,让学生启动Frontpage,打开这些网页,带着以下问题对网页进行“解剖”。
★为什么网页中的内容很整齐?
★为什么网页中的图片可以在网页的任意位置
★为什么在浏览网页时看不见表格的边框?
让学生用表格布局网页时,注意从以下几方面进行指导:
★为便于排版,一个网页从上到下可以用多个表格进行布局。
比如水平式的导航栏可以使用一行多列的表格。
★单元格的拆分与合并。
★区分表格和单元格的属性设置,例如表格和单元格的对齐方式、背景颜色等。
★鼓励并指导学有余力的学生使用表格的嵌套,但层数不能太多。
4.评价建议
本节建议从以下几方面进行评价。
★是否使用了表格布局网页?
★表格的边框是否设置为隐藏?
★是否会拆分、合并单元格?
★是否会正确设置表格和单元格的常用属性,如对齐方式、背景颜色等。
5.助力
学生只有了解了一个网页的栏目组成后,才能有目的地布局网页。
在学生知道了网页的常见版式后,可以进一步让学生了解这部分内容,方式可以是学生自学,也可以教师演示。
6.加油
目前有不少网页是采用了框架结构,尤其是一些教程。
学有余力的学生可以进行尝试,体会框架的特点。
四、练习参考
1.首页、公司简介、
2.网页版式的类型:
拐角型、标题正文型、左右框架型、上下框架型、综合框架型、封面型、Flash型、变化型等。
各种版式与分栏式的转换:
略。
第二节网页布局
学习者姓名
第一环节
欣赏常见的网页版式
常见的网页版式有_________、_________等
第二环节
用表格布局网页
一个网页通常岉_____________、______________、____________、_________、______________等栏目
执行_______________菜单命令,可以插入一个表格
需要隐藏表格的边框线时,应将表格的边框线粗细设置为_______________。
第三节关联信息—超链接
1.教学目标
知识与技能
知道超链接的作用及组成要素
了解超链接的种类
会根据需要设置书签超链接
过程与方法
通过观察网页中的超链接类型,了解超链接的组成要素;通过亲手制作书签超链接,掌握创建超链接的一般方法。
情感态度与价值观
培养学生观察现象、归纳总结问题实质的能力
2.重点和难点
重点是超链接的组成要素及创建超链接的一般方法。
难点是书签超链接的设计与创建。
二、教法设计
超链接是网络中信息关联的纽带。
有关超链接的作用,在初中第一册已经介绍过,本节主要剖析超链接的组成要素,并让学生学会创建超链接的一般方法:
选定链接源,指定链接目标。
为了让学生更加全面地了解超链接的种类,教师课前要搜集包含各种超链接的网页,让学生浏览并总结,也可以通过教师演示、引导学生总结出超链接的组成要素:
链接源和链接目标,然后根据链接源和链接目标来划分超链接的总类,归纳出书签超链接的作用。
接下来,指导学生创建书签超链接。
三、教学建议
1.导入新课
课前,教师以学校或国内最近发生的重要事件(如学校“最受学生欢迎的教师评选”揭晓、“感动中国,,评选揭晓、体育赛事等)为素材制作两个简单的网页,使用图片超链接链接起来。
课堂上,演示该网页,指出超链接的作用:
关联相关信息,进而引出本节课的内容:
如何创建书签超链接。
在创建的过程中,鼓励学生多尝试、多观察、多总结。
为了提高课堂效率,建议提供半成品供学生操作。
2.实践导引
(2)使用书签超链接提供阅读检索为学生提供半成品(可以是课本上的样例,也可以教师自己准备)。
注意进行以下几方面的指导:
★什么是书签?
★书签超链接的适用情形:
一个网页的内容太多,长鹰超过一屏。
★创建书签超链接的步骤
3.评价建议
(1)老师对学生进行过程评价:
是否以积极的态度尝试本节课的内容并进行总结。
(2)作品评价。
建议从以下几个方面进行:
是否使用了书签超链接:
书签的设置是否便于浏览?
是否提供了浏览检索导航栏?
其位置是否合理?
4.助力
此部分内容是创建超链接的基础,建议在引入本课后,引导学生归纳、总结如下知识。
(1)超链接的组成要素:
链接源和链接目标
(2)链接源有哪些
(3)链接目标有哪些?
(4)按链接源分,超链接可以分为哪几种?
(5)按链接目标分,超链接又可分为哪几种?
关于URL:
可以放在创建超链接的过程中介绍。
5.加油
热区超链接普遍应用于电子地图中,创建过程比较简单。
可以根据学生的情况,选择性学习。
四、练习参考
1.A 2.D 3.本题没有统一答案,只要学生能说出理由即可。
建立超链接的部分侧重与文中专业术语的解释。
五、参考学案
第三节关联信息—超链接
学习者姓名
第一环节
知识准备
1.你认为超链接的作用有哪些?
___________
2.超链接的两大组成要素是______________、________。
3.按链接源分,超链接有__________、____________两种。
4.按链目标分,超链接有___________、_________、___________、______________ 等。
第二环节
超链接提供阅读检索
1.书签是指________________。
2.书签超链接适合用在_____________的网页中。
3.书签的标志是_____________。
4.创建书签超链接的步骤有哪些?
第三环节
归纳总结
创建超链接的一般方法是_________________________。
1.教学目标
知识与技能
★了解网页模板的作用。
★能根据需要选择合适的模板快速创建网页。
★会对网页的内容进行编辑。
过程与方法
通过创设情景,激发学生的学习兴趣。
通过制作一个简单的网页,掌握网页制作的
一般过程。
情感态度与价值观
★体验网页模板在制作网页时的快捷。
★体验使用网页进行信息交流的乐趣。
2.重点和难点
重点是使用FrontPage2000自带的模板创建网页,并对网页进行编辑;难点是网页
中图片的插入与编辑。
3.教学方法
本节是网页制作的第一课,虽然有的学生在小学已经接触过,但掌握得并不熟练。
因此教师不能太放手,而要加强指导,尤其是学法指导。
教师引导学生使用网页模板来创建网页后,指导学生按照网页制作的过程,完成本节课的学习任务。
4.学情分析
初二的学生已经具备了基本的文字处理能力和网络浏览能力,对网页并不陌生,但只有少数学生真正系统地学习过网页制作知识。
5.教学准备
提前调查学生阅读过哪些名著?
最喜欢哪部?
搜集这些名著的图片、简介、精彩片段,共享于教师的机器上。
6.教学过程
教学过程
教师活动及问题设计
学生活动
设计目的及时间安排
书是人类的精神食粮。
同学们阅读过哪些名著?
给你印象最深刻的是哪部?
听了同学们的介绍,老师都想看这些书了。
最近,学校准备开展一个读书月活动,号召大家多读书,读好书。
为了让更多的导入人更直观地了解一些好书,这节课咱们制作一个网页,向全校师生介绍一些中外名著。
指导学生进行制作前的准备工作
一个网页中可以包含图片、声音等元素,因此,有必要为网页建立一个文件夹。
生A:
安徒生童话.
生B:
水浒传
生C:
三国
D:
\建立一个文件夹mztj(mztj是“名著推荐”的汉语拼音缩写)
从学生最熟悉的书入手,引入网页的
宣传作用
3’
利用模板快速创建网页
问题:
你制作过网页吗?
用的工具是什么?
简单介绍FP和I)w的特点。
指导学生启动FP。
指导学生认识FP的环境,
着重介绍网页视图的作用。
说明网页模板的作用。
指导学生利用模板新建网页。
指导学生认识网页视网中
三个标签的作用,简单介绍HTMI语言。
生A:
FrongPage
生B:
DreamWavel
观察FP的图标,启动FP。
观察FP的环境。
尝试各种视网效果。
选择网页模板新建网页。
用“预览”标签预览网页内容。
用“HTMI。
”标签查看网页内容。
设计目的及时间安排在应用中熟悉.FP的环境。
编辑网页内容
利用模板生成的网页,其内容都不符合我们的要求。
但基本的框架已经有了,我们只需要将文字和图片换成自己的内容就可以了。
指导学生任何将已经保存在word文档中的文字复制到网页中。
(资源:
网上邻居\教师机\中外名著)
指导学生对图片的属性进行设置。
1.输入网页标题。
2.打开“网上邻居\教师机\中外名著”
的名著,将其中的文字内容复制到网页中相应的位置。
3.从教师机的“中外名著”文件夹中选择相应的图片插,
拓展:
缩略图的制作。
提供相关资源,可以提高课堂效率。
25‘
预览并保存网页
指导学生保存网页,尤其是图片的保存。
指导学生预览网页。
1.保存网页。
2.使用“预览”标签观看网页效果。
3.使用工具栏上的“在浏览器
中预览”按钮,观看网页效果。
4.体会两种预览方式的区别。
5‘
总结
1.利用模板创建网页,有什么优点和缺点?
讨论。
2.用模板创建网页的一般步骤是什么?
总结。
2‘
●课后反思
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 第六 网页 制作 基础
![提示](https://static.bdocx.com/images/bang_tan.gif)