资源简介

(共36张PPT)
《编辑网页内容》
河北大学版 初中版第二册
内容总览
学习目标
01
学习任务
02
任务分析
03
操作指南
04
任务小结
05
知识链接
06
目录
07
08
课堂练习
课堂总结
09
10
板书设计
课后作业
教学目标
1.信息意识：具有崇尚科学精神、原创精神、具有将创新理念融入自身学习、生活的意识；
2.计算思维：能够对网页内容学习问题进行分解、用计算的方法提出解决方案；
3.数字化学习与创新：具有创新创造活力，能积极主动运用信息科技高效地解决问题，并进行创新活动。
4.信息社会责任：规范使用网络技术解决问题，形成良好道德准则。
新知导入
同学们一起观察一下两个页面的设计，都运用了生动的图片和鲜明的色彩，并且文字部分也是言简意赅，网页设计的重点内容也就是网页的内容，所以今天我们一起来学习一下怎么编辑好网页的内容。
新知讲解
图片和文字是一个网页中最基本的元素。在页面制作时，根据内容和设计的需要恰当地选择图片，不仅可以突出主题，还可以增加页面的美感。
新知讲解
学习任务
利用搜集整理好的素材，按照设计方案将图片和文字插入到网页的合适位置，并根据实际情况对布局表格进行恰当编辑。本节以制作网站主页为例。
新知讲解
任务分析
1.隐去布局表格的边框线，美化页面
当表格所起的作用仅仅是控制图文布局时，可以将其边框线的粗细设置为“0”，这样在浏览时就看不到边线了。
新知讲解
2.为网页画龙点睛
在读图时代，网站中的图片在吸引读者注意、增强网站表现力方面的作用更为突出。在网站的各类图片中，站标(LOGO)和横幅(Banner)更是网页中必不可少的“点睛之笔”。站标应能包含网站名称的相关信息，体现网站的风格；横幅内容要能吸引网站访问者，而且能体现网站的特色或宗旨。站标和横幅的色彩要与网站搭配合理，大小合适。
新知讲解
Logo的作用：
logo是徽标或者商标的外语缩写， 是logotype的缩写，起到对徽标拥有公司的识别和推广的作用，通过形象的徽标可以让消费者记住公司主体和品牌文化。网络中的徽标主要是各个网站用来与其它网站链接的图形标志，代表一个网站或网站的一个板块。
拓展延伸
新知讲解
3.图文混排
网页中最基本的元素就是图片和文字。根据内容特点及设计需要，网页内容可以有图片、文字或者图文混排几种情况。在网页中插入图片和文字的方法与其他软件[如文字处理软件(Word)、演示文稿(PPT)等]相似，可以借鉴相关操作方法。
4.调整图片大小
由于页面大小有限，网络的速度有限，在选择图片后，要对图片的大小规格进行适当调整。
新知讲解
5.规范图片文件的保存位置
保存文件时，要特别注意所引入的图片文件的存储位置，最好将图片文件保存在本站的images文件夹中。这样，既方便文件管理，又避免因更改网站位置而找不到图片文件。
6.将网页用易于识别的名称命名和保存
浏览网页时，一般会在浏览器标题栏中显示该网页的标题，清晰地表明所浏览页面的内容。在编辑网页内容时，如果没有修改标题，则显示默认的信息。为了清楚表明页面内容，必须修改每一个网页的标题。
新知讲解
操作指南
启动FrontPage，打开网站，打开index.htm主页。
1.插入图片
（1）确定插入图片的位置(以网页上方的横幅图片为例）。
（2）执行“插入”→“图片”→“来自文件”命令，打开“图片”对话框，如图所示。
新知讲解
（3）在“图片”对话框中选择相应的图片，单击“插入”按钮插入图片。
（4）选择图片，可以拖动图片四周的控制点调整图片大小。
（5）设置图片格式。如设置“居中”格式，单击“格式”工具栏中的“居中”按钮，使图片居中。
（6）插入网页中所需的其他图片。
新知讲解
2.输入文字
在网页中可以输入文字，也可以从其他素材中复制文字粘贴到网页中。如果所需文字内容是以独立的文本文件形式保存的，可采用如下方法。
（1）插入文件。
①确定光标位置。
②执行“插入”→“文件”命令，打开“选择文件”对话框。
新知讲解
③在“文件类型”下拉列表中选择“文本文件(*.txt)”类型，选择素材文件，单击“打开”按钮。当出现“转换文本”对话框时，选择“带换行符的普通段落”选项，并单击“确定”按钮，插入文本文件中的文字内容。如图所示。
（2)设置文字的字体、字号、颜色及段落格式。
新知讲解
3.设置表格属性
(1)将光标定位在表格中，单击鼠标右键，在弹出的快捷菜单中选择“表格属性”命令，打开“表格属性”对话框。
(2)在“表格属性”对话框中，设置表格的对齐方式为“居中”，边框粗细为“0”，单击“确定”按钮。如图所示。
新知讲解
说明：
①边框粗细以像素为单位，表示表格边框的尺寸。若边框粗细为“0”，表示没有表格边框显示在当前Web浏览器中。
②选择“指定宽度”选项以指定表格宽度。如果不指定宽度，Web浏览器会重置表格大小以适合表格单元格的内容。
③以像素指定表格宽度时，不管Web浏览器窗口的大小如何，表格都会保持此宽度。
④以百分比指定表格宽度时，即设置了表格宽度占Web浏览器窗口的百分比。例如，选择此选项并输入“50”，表格会横跨Web浏览器窗口50%的界面。
新知讲解
4.添加网页背景
为了修饰整个页面，可以添加背景图片或设置背景颜色。
（1）在网页上单击鼠标右键，在弹出的快捷菜单中选择“网页属性”命令，打开“网页属性”对话框。
（2）在“网页属性”对话框中选择“格式”选项卡，勾选“背景图片”复选框，然后单击“浏览”按钮，打开“选择背景图片”对话框。
新知讲解
（3）在“选择背景图片”对话框中选择适当的网页背景图片，单击“打开”按钮后，再单击“确定”按钮，如图所示。网页背景图片是以平铺的形式呈现在网页上的。
（4）自己尝试修改背景颜色。
新知讲解
5.保存网页文件
（1）单击常用工具栏中的“保存”按钮，由于网页中有图片没有保存过，所以首先打开“保存嵌入式文件”对话框，如图所示。
新知讲解
（2）单击“保存嵌入式文件”对话框中的“更改文件夹”按钮，打开“更改文件夹”对话框，如图所示，选择“images”文件夹，单击“确定”按钮。
（3）返回“保存嵌入式文件”对话框，单击“确定”按钮，保存当前网页，并将网页中的图片保存在网站的“images”文件夹中。
新知讲解
6.预览网页
（1）单击窗口转换栏中的“预览”标签，即切换到“预览”视图；查看网页效果，即网页发布后的大致效果。
（2）执行“文件”→“在浏览器中预览”命令，选择“Microsoft Internet Explorer“命令(版本依据实际安装情况选择），如图所示，预览网页；也可以单击常用工具栏中的“在测览器中预览”按钮，进行预览。
新知讲解
注：应以浏览器中的效果为准，根据预览的效果再对网页进行修改。
完成主页制作后，按网站设计方案继续编辑其他网页，并分别保存、预览。
新知讲解
任务小结
编辑网页最基本的方法：插入文字、编辑文字、设置文字格式、插入图片、设置图片的对齐方式以及表格属性和网页背景的设置。
新知讲解
知识链接
1.视图
FrontPage提供了四种视图模式，即“设计”“拆分”“代码”“预览”视图。“设计”视图用于“所见即所得”式的网页编辑。“代码”视图用于查看或编辑网页文件的HTML代码。“拆分”视图用于同时查看网页编辑状态和HTML代码状态，便于修改。“预览”视图用于查看网页发布后的大致效果(还不是在浏览器中看到的实际效果，实际的效果要通过IE浏览器来查看)。
新知讲解
视图：是某一视角下对于软件架构的一个特定方面的完整展现。它聚焦于此特定方面而忽视这个视角外的方面。
拓展延伸
新知讲解
2.样式
样式是字体和段落设置的组合。使用样式可以快速、统一地设置文本的格式。例如，将“标题1”样式应用到每个标题，使得每一个标题的外观都一样。使用样式还能够节省时间，因为不用逐个更改每个标题的字体和段落设置，而是可以简单地指定一个样式来使用。
3.字体的选择
设置网页中文字的格式时，尽量使用Windows自带的字体，以免造成浏览者在浏览此网页时无法显示某种字体，影响网页整体的效果。
新知讲解
我们一起观看视频再次学习一下，怎么优化网页整体设计。
新知讲解
练习与思考
（1）尝试给首页添加一个网站LOGO。
（2）修改表格属性和单元格属性中的背景颜色设置，观察网页的变化。
（3）在单元格中设置图片做背景和插入图片素材有什么不同
新知讲解
1.首先要先制作一张大小为16x16的图片，将jpg图片转换成标准的ico 图标名为favicon.ico。
2.在网站页面的头部标签中，只有添加。
3.把修改好的主页文件上传到空间，然后用浏览器打开，可以看到网站前面有自己设计的ico 图标。
给网页添加一个logo
课堂练习
请同学们根据练习的内容，自己使用软件设计一个logo图案，并分析你这样设计的原因。看看谁设计得最有创意！
课堂总结
1.学习编辑网页内容；
2.优化、规范网页文字和图片的布局；
3.尝试自己动手设计网页logo。
板书设计
规范、优化网页内容
增加网页元素
制作网页logo
作业布置
请同学们在自己制作的网页上添加自己设计的logo，并且能够向大家介绍logo其含义，下节课一起在课上分享，比比谁做得最有创意！
谢谢
21世纪教育网（www.21cnjy.com)
中小学教育资源网站
兼职招聘：
https://www.21cnjy.com/recruitment/home/admin中小学教育资源及组卷应用平台
信息技术《编辑网页内容》教学设计
课题 《编辑网页内容》 单元 一单元 学科 信息技术 年级 八年级
教材分析 《编辑网页内容》这一课旨在让学生增进对网页制作的深入认识，网页的内容是网页制作一大重要部分。以及学会使用图文编排的方式来丰富网页内容的方法和步骤，教材编排了“学习任务-任务分析-操作指南-任务小结-知识链接-练习与思考”的系列学习活动，引导学生学会制作网页内容来解决网站相关的问题，促进对网页构建的学习和使用，这些学习对于初中学生来说是非常有必要的，不仅可以增加学生知识，同时也能增强学生对信息的感受力、注意力，以及对信息价值的判断力和洞察力，提高学生信息素养。教材编排合理，贴近学生生活实际，符合七年级学生认知特点。
学习目标 1.信息意识：具有崇尚科学精神、原创精神、具有将创新理念融入自身学习、生活的意识；2.计算思维：能够对问题进行分解、用计算的方法提出解决方案；3.数字化学习与创新：具有创新创造活力，能积极主动运用信息科技高效地解决问题，并进行创新活动。4.信息社会责任：规范使用网络技术解决问题，形成良好道德准则。
重点 美化网页布局，图片与文字的合理安排
难点 加入自己的logo设计
教学过程
教学环节 教师活动 学生活动 设计意图
导入新课 导入：师：同学们一起观察一下两个页面的设计，都运用了生动的图片和鲜明的色彩，并且文字部分也是言简意赅，网页设计的重点内容也就是网页的内容，所以今天我们一起来学习一下怎么编辑好网页的内容 学生观察两张图片，说出网页的共同点 由此引出今天的学习内容
讲授新课 图片和文字是一个网页中最基本的元素。在页面制作时，根据内容和设计的需要恰当地选择图片，不仅可以突出主题，还可以增加页面的美感。学习任务利用搜集整理好的素材，按照设计方案将图片和文字插入到网页的合适位置，并根据实际情况对布局表格进行恰当编辑。本节以制作网站主页为例。任务分析1.隐去布局表格的边框线，美化页面当表格所起的作用仅仅是控制图文布局时，可以将其边框线的粗细设置为“0”，这样在浏览时就看不到边线了。2.为网页画龙点睛在读图时代，网站中的图片在吸引读者注意、增强网站表现力方面的作用更为突出。在网站的各类图片中，站标(LOGO)和横幅(Banner)更是网页中必不可少的“点睛之笔”。站标应能包含网站名称的相关信息，体现网站的风格；横幅内容要能吸引网站访问者，而且能体现网站的特色或宗旨。站标和横幅的色彩要与网站搭配合理，大小合适。拓展延伸Logo的作用：logo是徽标或者商标的外语缩写， 是logotype的缩写，起到对徽标拥有公司的识别和推广的作用，通过形象的徽标可以让消费者记住公司主体和品牌文化。网络中的徽标主要是各个网站用来与其它网站链接的图形标志，代表一个网站或网站的一个板块。3.图文混排网页中最基本的元素就是图片和文字。根据内容特点及设计需要，网页内容可以有图片、文字或者图文混排几种情况。在网页中插入图片和文字的方法与其他软件[如文字处理软件(Word)、演示文稿(PPT)等]相似，可以借鉴相关操作方法。4.调整图片大小由于页面大小有限，网络的速度有限，在选择图片后，要对图片的大小规格进行适当调整。5.规范图片文件的保存位置保存文件时，要特别注意所引入的图片文件的存储位置，最好将图片文件保存在本站的images文件夹中。这样，既方便文件管理，又避免因更改网站位置而找不到图片文件。6.将网页用易于识别的名称命名和保存浏览网页时，一般会在浏览器标题栏中显示该网页的标题，清晰地表明所浏览页面的内容。在编辑网页内容时，如果没有修改标题，则显示默认的信息。为了清楚表明页面内容，必须修改每一个网页的标题。操作指南启动FrontPage，打开网站，打开index.htm主页。1.插入图片（1）确定插入图片的位置(以网页上方的横幅图片为例）。（2）执行“插人”→“图片”→“来自文件”命令，打开“图片”对话框，如图所示。（3）在“图片”对话框中选择相应的图片，单击“插入”按钮插入图片。（4）选择图片，可以拖动图片四周的控制点调整图片大小。（5）设置图片格式。如设置“居中”格式，单击“格式”工具栏中的“居中”按钮，使图片居中。（6）插入网页中所需的其他图片。2.输入文字在网页中可以输入文字，也可以从其他素材中复制文字粘贴到网页中。如果所需文字内容是以独立的文本文件形式保存的，可采用如下方法。（1）插入文件。①确定光标位置。②执行“插入”→“文件”命令，打开“选择文件”对话框。③在“文件类型”下拉列表中选择“文本文件(*.txt)”类型，选择素材文件，单击“打开”按钮。当出现“转换文本”对话框时，选择“带换行符的普通段落”选项，并单击“确定”按钮，插入文本文件中的文字内容。如图所示。（2)设置文字的字体、字号、颜色及段落格式。3.设置表格属性(1)将光标定位在表格中，单击鼠标右键，在弹出的快捷菜单中选择“表格属性”命令，打开“表格属性”对话框。(2)在“表格属性”对话框中，设置表格的对齐方式为“居中”，边框粗细为“0”，单击“确定”按钮。如图所示。说明：①边框粗细以像素为单位，表示表格边框的尺寸。若边框粗细为“0”，表示没有表格边框显示在当前Web浏览器中。②选择“指定宽度”选项以指定表格宽度。如果不指定宽度，Web浏览器会重置表格大小以适合表格单元格的内容。③以像素指定表格宽度时，不管Web浏览器窗口的大小如何，表格都会保持此宽度。④以百分比指定表格宽度时，即设置了表格宽度占Web浏览器窗口的百分比。例如，选择此选项并输入“50”，表格会横跨Web浏览器窗口50%的界面。4.添加网页背景为了修饰整个页面，可以添加背景图片或设置背景颜色。（1）在网页上单击鼠标右键，在弹出的快捷菜单中选择“网页属性”命令，打开“网页属性”对话框。（2）在“网页属性”对话框中选择“格式”选项卡，勾选“背景图片”复选框，然后单击“浏览”按钮，打开“选择背景图片”对话框。（3）在“选择背景图片”对话框中选择适当的网页背景图片，单击“打开”按钮后，再单击“确定”按钮，如图所示。网页背景图片是以平铺的形式呈现在网页上的。（4）自己尝试修改背景颜色。5.保存网页文（1）单击常用工具栏中的“保存”按钮，由于网页中有图片没有保存过，所以首先打开“保存嵌入式文件”对话框，如图所示。（2）单击“保存嵌入式文件”对话框中的“更改文件夹”按钮，打开“更改文件夹”对话框，如图所示，选择“images”文件夹，单击“确定”按钮。（3）返回“保存嵌入式文件”对话框，单击“确定”按钮，保存当前网页，并将网页中的图片保存在网站的“images”文件夹中。6.预览网页（1）单击窗口转换栏中的“预览”标签，即切换到“预览”视图；查看网页效果，即网页发布后的大致效果。（2）执行“文件”→“在浏览器中预览”命令，选择“Microsoft Internet Explorer”命令(版本依据实际安装情况选择），如图所示，预览网页；也可以单击常用工具栏中的“在浏览器中预览”按钮，进行预览。注：应以浏览器中的效果为准，根据预览的效果再对网页进行修改。完成主页制作后，按网站设计方案继续编辑其他网页，并分别保存、预览。任务小结编辑网页最基本的方法：插入文字、编辑文字、设置文字格式、插入图片、设置图片的对齐方式以及表格属性和网页背景的设置。知识链接1.视图FrontPage提供了四种视图模式，即“设计”“拆分”“代码”“预览”视图。“设计”视图用于“所见即所得”式的网页编辑。“代码”视图用于查看或编辑网页文件的HTML代码。“拆分”视图用于同时查看网页编辑状态和HTML代码状态，便于修改。“预览”视图用于查看网页发布后的大致效果(还不是在浏览器中看到的实际效果，实际的效果要通过IE浏览器来查看)。拓展延伸视图：是某一视角下对于软件架构的一个特定方面的完整展现。它聚焦于此特定方面而忽视这个视角外的方面。2.样式样式是字体和段落设置的组合。使用样式可以快速、统一地设置文本的格式。例如，将“标题1”样式应用到每个标题，使得每一个标题的外观都一样。使用样式还能够节省时间，因为不用逐个更改每个标题的字体和段落设置，而是可以简单地指定一个样式来使用。3.字体的选择设置网页中文字的格式时，尽量使用Windows自带的字体，以免造成浏览者在浏览此网页时无法显示某种字体，影响网页整体的效果。我们一起观看视频再次学习一下，怎么优化网页整体设计。练习与思考（1）尝试给首页添加一个网站LOGO。（2）修改表格属性和单元格属性中的背景颜色设置，观察网页的变化。（3）在单元格中设置图片做背景和插入图片素材有什么不同 给网页添加一个logo1.首先要先制作一张大小为16x16的图片，将jpg图片转换成标准的ico 图标名为favicon.ico。2.在网站页面的头部标签中，只有添加。3.把修改好的主页文件上传到空间，然后用浏览器打开，可以看到网站前面有自己设计的ico 图标。作业布置请同学们在自己制作的网页上添加自己设计的logo，并且能够向大家介绍logo其含义，下节课一起在课上分享，比比谁做得最有创意！ 学生初步了解网页布局更合理，更吸引读者的方法和步骤学生了解logo的在网页设计中的作用学生掌握插入图片、输入文字，以及文件的插入、表格属性的设计的方法和步骤学生了解设置表格属性的一些注意事项制作完成后要保存，最后再进行预览检查学生掌握“任务小结”以及“知识链接”的知识内容学生观看视频学生完成课堂练习和课后作业 铺垫后续的学习拓展延伸学生知识增加学生知识技能的同时，提高学生动手实践能力表格的设计是网页制作的重要一部分检查网页制作，保证不出现小错误，提高制作正确率本节课的知识总结，增加学生知识技能观看视频再次学习，巩固本节课所学知识
课堂练习 请同学们根据练习的内容，自己使用软件设计一个logo图案，并分析你这样设计的原因。看看谁设计得最有创意！ 学生完成课堂练习 巩固所学知识
课堂小结 学习编辑网页内容；优化、规范网页文字和图片的布局；尝试自己动手设计网页logo。 学生总结本节课的学习内容 总结概括本节课得学习内容
板书 规范、优化网页内容增加网页元素制作网页logo
21世纪教育网 www.21cnjy.com 精品试卷·第 2 页 （共 2 页）
HYPERLINK "http://www.21cnjy.com/" 21世纪教育网(www.21cnjy.com)

展开更多......

收起↑