河大版八年级全册第2节 网页的基本操作教案

这是一份河大版八年级全册第2节 网页的基本操作教案，共7页。教案主要包含了合作学习，拓展思维等内容，欢迎下载使用。

课题名
《网页的基本操作》
教学目标
1.知识与技能
(1)进一步然悉 FrntPage2003 操作界面及功能。；
(2)了解扩展名HTML，txt，dc、jpg等文件类型。；
(3)掌握网页插入文件、插入图片并且保存的方法步骤，并能进行简单的排版设置。
2.过程与方法
(1)通过教师演示让学生更直观掌握FrntPage插入文字、图片的方法；
(2)学生以小组为单位，自主学习，合作探究，编辑网页。
3.情感态度价值观
(1)培养学生认真观察，敢于尝试，独立思考的学习品质。
(2)培养学生小组合作能力。
教学重点
FrntPage网页插入文件和图片的方法。
教学难点
对插入的图片的设置排版。
教学准备
教师准备：ppt，FrntPage 2003软件。茶文化相关素材资料。
学生准备：搜集到的茶文化相关素材资料，包括文字、图片、音乐等。
教学过程
新课导入
通过上节课对FrntPage2003的接触，同学们已经知道了网站可以一个网页，也可以是由多个网页组成的，而每个网页里面可以添加文本、图形和表格等网页元素。
上节课我们创建了以“中国茶文化”为主题的网站，建立了四个网页：主页、茶的起源、茶的分类、茶圣陆羽 ，这节课我们就来学习在网页中插入文字和图片的方法。
二、合作学习、自主探究
学习任务：
编辑“chaweb”网站中的主页及“茶的起源”、“茶的分类”、“茶圣——陆羽”网页。
PPT展示网页样式。
任务分析：
上面四张网页主要包含有文字、图片。在主页中设置了背景图片。在“茶的起源”和“茶的分类”、“茶圣”网页中,设置了背景色。“茶圣——陆羽”网页，插人了水平线，将图片设置在文字的两边。这些都是编辑网页最基本的操作。
插入文字、图片的操作方法与Wrd的操作方法一样，文字格式、段落格式的设置也相同。
操作指南：
1.打开“chaweb”网站
(1)启动FrntPage2003软件。
(2)执行“文件”→“打开网站”命令，弹出“打开网站”对话框。
(3)在“查找范围”文本框中,选中“d:\chaweb”文件夹,单击“打开”按钮。
2.编辑主页
(1)双击文件夹列表中的“index.htm”主页,文件名“index.htm”显示在网页编辑窗口的标题栏的左边,表示“index.htm”主页正处于编辑状态。
(2)输入标题“茶与茶的来源”。
(3)输人正文。可以输入文字,复制文字,粘贴到网页中。
此处,再介绍一种插入文件的方法。
①确定光标位置。
②执行“插入”“文件”命令,打开“选择文件”对话框。
③在“文件类型”中，选择“文本文件(*.txt)”类型,选择素材中的“导言”文件。当出现对话框时,选择“带换行符的普通段落”选项。
(4)设置文字格式。
①将标题设置为“标题1”样式。
选定标题文字,单击格式工具栏中“样式”下拉按钮.选择“标题1”样式。
②按图中的样式,设置文字的字体、字号、颜色及段落格式。
(5)插入图片。
①确定插人图片的位置。
②执行“插入”→“图片”→“来自文件”命令,打开“图片”对话框。
③在“图片”对话框中，选择教学配套光盘中的图片,单击“确定”按钮。
(6)改变图片大小。
①单击图片。
②鼠标指针指向图片的控制点，拖动鼠标。
(7)设置图片格式(如“居中”格式)。单击格式工具栏中的“居中”按钮，使图片居中。
(8)设置背景图片。
在网页编辑窗口上,单击鼠标右键,在弹出的快捷菜单中选择“网页属性”,打开“网页属性”对话框，选择“格式”选项卡，选择“背景图片”复选框，单击“浏览"按钮，在“选择背景图片”对话框中选择“茶字背景图”,返回“网页属性“对话框，单击”确定“按钮。
(9)保存网页文件。
①单击常用工具栏中的“保存”按钮,由于网页中有图片没有保存过,所以首先打开“保存嵌人式文件”对话框。
②单击对话框中的“更改文件夹”按钮，打开“更改文件夹”对话框,选择“images”文件夹，然后单击“确定”按钮。
③返回“保存嵌人式文件”对话框,单击“确定”按钮。
通过步骤①～③的操作,保存当前网页的编辑，同时,将网页中的图片保存在网站的“images”文件夹中。
(10)预览网页。
①单击窗口转换栏中的“预览”标签,即切换到预览视图,查看网页效果,即网页发布后的大致效果，但这还不是在浏览器中看到的实际效果。
②执行“文件”→“在浏览器中预览”命令,选择“Micrsft Internet Explrer 6.0”命令，也可以单击常用工具栏中的“预览”按钮，进行预览。
注:应以测览器中的效果为准，根据预览的效果，对网页进行修改。
3.编辑“茶圣--陆羽”网页
(1)双击“chasheng”网页 ，使其处于编辑状态。
(2)插入标题及正文,设置格式。
(3)插入水平线。
①确定水平线插入位置(通过在段前或段后按回车键,插人空行)。
②执行“插入”→“水平线”命令,则在光标位置处插入一条水平线。
③改变水平线属性。双击水平线，在打开的“水平线属性”对话框中,进行修改。
(4)插入图片。
①插入资料中的“陆羽”图片。
②改变图片大小并调整到合适位置。
③设置图片的对齐位置。
用鼠标右键单击图片,选择快捷菜单中的“图片属性”,单击“图片属性”对话框中“外观”选项卡，在“对齐方式”下拉列表中选择“左对齐”。
④移动图片到正文文字的左边。
试一试：插入“陆羽”图片并将此图片设置为右对齐方式。
(5)保存网页，并将图片保存在“images”文件夹中。
(6)预览网页。
4.继续编辑其他网页
说明:
①“起源”和“分类”文本文件分别是“茶的起源”、“茶的分类”网页中的正文文本。
②设置网页的背景色的方法：打开“网页属性”对话框，选择“格式”选项卡，单击“颜色”栏下“背景”的下拉按钮，选择背景色，单击“确定”按钮。
5.关闭站点
执行“文件”→“关闭站点”命令，关闭当前站点。
任务小结：
FrntPage2003提供了四种视图方式，即“设计”、“拆分”、“代码”、“预览”视图。
通过本任务的完成，掌握了编辑网页最基本的方法：插人文字、编辑文字、设置文字格式、设置颜色、插人图片、设置图片的对齐方式以及背景图片和背景色的设置。
在网页中添加水平线，可以起到分隔区域的作用。水平线的添加也可以直接插人“水平线”图片来实现。
学生在老师操作演示的基础上自主练习，熟练掌握网页中插入文字、图片的方法，同时做好排版设置，是网站更美观漂亮。
教师巡堂指导，小组同学间互助，不明白的问题讨论交流。
各组推举代表展示交流。
三、拓展思维、巩固认知
1.样式
样式是字体和段落设置的组合。使用样式可以快速、统一地设置文本的格式。例如，将“标题1”样式应用到每个标题，使得每一标题的外观都一样。使用样式也能够节省时间，因为不用逐个更改每一个标题的字体和段落设置，而是可以简单地指定一个样式来使用。
2.字体的选择
设置网页中文字的格式时，字体尽量使用Windws自带的字体，以免造成浏览者在浏览此网页时无法显示这种字体，影响网页整体的效果。
3.设置行和段落的缩进
可以指定所需的段落缩进方式。例如，可以缩进段落的右边或左边，或只缩进第一行。
(1)在网页视图模式下，选择一个或多个段落，单击鼠标右键，然后再单击快捷菜单中的“段落”。
(2)在“缩进”下，做下列一个或多个操作:
①要缩进段落的左边，可在“文本之前”框中输人磅数。
②要缩进段落的右边，可在“文本之后”框中输人磅数。
③要缩进段落中文本的第一行,可在“首行缩进”框中输人磅数。
4.插入时间戳
在网页中添加日戳来显示网页上次更改的时间。例如，日戳可让站点访问者知道，在他们上次访问之后网站上的信息是否有所更改。
(1)在网页视图模式下,将光标移至想要放置日戳的地方。
(2)执行“插人”→“日期和时间”命令，打开“日期和时间”对话框。
(3)指定要显示的日戳的类型。
(4)指定日期和时间的格式。
5.HTML 语言
HTML(Hyper Text Markup Language，超文本标记语言)是一种用来制作超文本文档的简单标记语言，通过利用各种标记(Tags)来标识文档的结构以及标识超链接(Hyperlink)的信息。在网上看到的一个个网页其实都是基于HTML 语言的，因此也将网页称为HTML页面。
布置作业
(1)在“茶的分类”网页中，对应不同类别的茶，插人教学配套光盘中相应的图片,如在“绿茶”的文字左边插人图片“茶”。
(2)编辑个人网站中的主页。
板书设计
网页的基本操作
学习任务：网页插入文字、图片
任务分析：网页设置背景图片和背景色，“茶圣——陆羽”网页,插人了水平线。
认识文件类型：网页htm、文本txt、图片jpg
教学反思
本节教学，主要是网页里插入文字和图片，学生有了前面文字编辑的学习基础，操作起来更快捷了些。教师教学中简单讲解操作方法，主要以学生自己动手操作为主。通过任务驱动，学生的自主学习能力有所提高，在学习的过程中获得知识，同时分组操作，锻炼了学生间团结互助的能力，同时文字和图片的设置排版操作，锻炼了学生的审美能力。知识拓展环节，也拓宽了学生的知识面，增加了继续深入学习网页设计的兴趣。