浙教版信息技术八年级上第十七课编辑网页代码教学设计
课题
编辑网页代码
单元
第三单元
学科
信息技术
年级
八年级
学习
目标
知识目标：了解HTML语言的概念、结构及其在网页制作中的作用
技能目标：初步掌握网页特效的添加方法。
情感目标：树立正确的版权保护意识；提高审美意识。
重点
了解HTML语言，添加网页特效代码。
难点
了解HTML语言，添加网页特效代码。
教学过程
教学环节
教师活动
学生活动
设计意图
导入新课
同学们浏览网页时是不是经常能看到一些特殊的效果，如跟随鼠标的文字、自动更新的日期等等，那这些是怎么实现的呢？今天我们就来学习一下如何来实现这些效果——给网页添加特效代码。
思考
激发学生学习兴趣并快速进入学习状态
讲授新课
知识链接
网页特效指网页上的特殊效果，主要是通过将 Javascript程序代码加入到网页中，使网页页面更加生动、活波。
一、认识HTML代码
超文本标记语言，是用于描述网页文档的一种标记语言，它是万维网上的通用语言。
在 Sharepoint Designer中，选择“代码”视图，就可以编辑HTML和各种脚本语言代码，如图所示即为“网络世界”主页的代码。
交流
通过观察这段源代码，你发现了什么？

网络是个怎样的世界

在源代码中，我们看到有一些由“<>”括起来的字符串，如、、等，这些就是HTML标记。每个HTML标记代表着一些特定的含义。
HTML标记分单标记和双标记两种。双标记是以开始标签开始，以结束标签结束，结束标签比开始标签多一个斜杠“/”。单标记只有开始标记，没有结束标记。
交流
仔细观察“插入图像”源代码有什么发现？

在源代码中可以看到，网页标题放在标记之间
网页显示的内容放在和之间
在HTML文档中插入图像是通过标记来实现的
是单标记，img后面是页面显示的图像属性。
仔细观察“插入表格”源代码有什么发现？

班级相册	width=“50%”才艺展示

通过源代码可以看到：
页面标题放在标记之间表格标记，和之间定义了一个表格
表格属性为：表格边框（border）宽度为1个像素，表格的宽度（width）为浏览器窗口宽度（width=“148%”）
和是行标记，表示某一行；和是列标记，表示某一列，标记内的属性意为单元格宽度（width）为浏览器窗口宽度50%（width=“50%”) 。
HTML文件结构如下
＜ html:＞标记网页的开始
＜head＞标记头部的开始
＜title＞显示在浏览器左上方的标题＜/ title>
＜/head＞标记头部的结束
＜ body＞标记页面正文开始
＜/body＞标记页面正文结束
＜/html＞标记网页的结束
HTML标签是由尖括号包围的关键词，通常成对出现。
亲身体验
选择“拆分”视图编辑主页对照网页的两种表达形式，初步认识网页的代码结构。
二、添加特效代码
因特网上有很多专门提供特效代码的网站，通过复制特效代码加入到自己的网页中可以实现网页特效
以“网络世界”网站主页加入鼠标特效为例，操作方法如下
1.打开“网络世界”网站，选择主页为当前编辑窗口。
2.打开E浏览器，搜索“网页特效”网站，找一个喜欢的特效，并复制该特效代码
如进入“网页特效集锦http://www. helpor. net/＂网站，复制“飘动的字符跟随鼠标”代码(如图)。
3.切换到 Sharepoint Designer界面
选择“代码”视图，将光标定位到＜body＞＜body＞之间
粘贴已复制的代码，并修改文字内容为“网络世界欢迎你的光临!”，如图所示，鼠标特效设置完成。
温馨提示
一个页面添加的特效不宜过多，否则会影响整个页面的视觉美感。
亲身体验
尝试添加一种鼠标特效
阅读材料
HTML文档的常用标签功能介绍
基本标签
创建一个HTML文档

设置文档头部

设置文档的可见部分

标题标签
设置标题

文档整体属性
设置背景颜色

设置文本文字颜色

设置链接颜色

图形元素
添加一幅图像
文本标签
创建预格式化文本

创建最大的标题

创建最小的标题

创建黑体字

创建斜体字

设置字体大小，从1到7

设置字体的颜色

格式排版
创建一个新的行

插入一个回车换行符



表格
创建一个表格

开始表格中的每一行

开始一行中的每一格

课堂练习
1.给网页添加特效。特效代码的例子很多，尝试选择多个特效代码，如“自动更新的日期”，将它加入到网页中。
通过教师的讲解，以小组合作的方式，开展探讨交流，完成任务。
学生动手实践操作，学生小组间讨论，共同完成任务。
通过教师的讲解，以小组合作的方式，开展探讨交流，完成任务。
学生动手实践操作，学生小组间讨论，共同完成任务。
学生小组间讨论，共同完成任务，并分组汇报。
通过小组合作，加强学生组内团结、共同完成任务，
培养学生动手操作能力，并且锻炼学生的语言组织能力和表达的能力。
培养学生组间合作能力，并且炼动手能力
培养学生动手操作能力，并且锻炼学生的语言组织能力和表达的能力。
培养学生独立完成练习的能力。
课堂小结
分小组总结归纳，教师补充。
各组汇报总结，其他小组成员做补充。
锻炼学生的总结能力，逻辑思维、语言表达能力。
布置作业
1.尝试运用HTML更改网页内容，观察其变化。
板书
一、认识HTML代码
二、添加特效代码
课件25张PPT。信息技术浙教版 八年级上第十七课 编辑网页代码新知导入 同学们浏览网页时是不是经常能看到一些特殊的效果，如跟随鼠标的文字、自动更新的日期等等，那这些是怎么实现的呢？今天我们就来学习一下如何来实现这些效果——给网页添加特效代码。新知讲解 知识链接新知讲解 一、认识HTML代码 超文本标记语言，是用于描述网页文档的一种标记语言，它是万维网上的通用语言。 在 Sharepoint Designer中，选择“代码”视图，就可以编辑HTML和各种脚本语言代码，如图所示即为“网络世界”主页的代码。新知讲解通过观察这段源代码，你发现了什么？

网络是个怎样的世界

新知讲解 在源代码中，我们看到有一些由“<>”括起来的字符串，如、、等，这些就是HTML标记。每个HTML标记代表着一些特定的含义。 HTML标记分单标记和双标记两种。双标记是以开始标签开始，以结束标签结束，结束标签比开始标签多一个斜杠“/”。单标记只有开始标记，没有结束标记。新知讲解

仔细观察“插入图像”源代码有什么发现？新知讲解 在源代码中可以看到，网页标题放在标记之间在源代码中可以看到，网页标题放在标记之间新知讲解

班级相册	width=“50%”才艺展示

网页标题，放在之间标记用来定义表格标记用来定义表格的行和是行标记，表示某一行；是列标记，表示某一列，开始一行中的每一格课堂练习课堂小结总结本节课所学内容板书设计一、认识HTML代码
二、添加特效代码 1.尝试运用HTML更改网页内容，观察其变化。作业布置谢谢21世纪教育网（www.21cnjy.com) 中小学教育资源网站 有大把高质量资料？一线教师？一线教研员？
欢迎加入21世纪教育网教师合作团队！！月薪过万不是梦！！
详情请看：
https://www.21cnjy.com/help/help_extract.php

点击下载

同课章节目录

• 第一单元 走进网络
• 第一课 认识网络
• 第二课 因特网的发展
• 第三课 接入因特网
• 第四课 网络安全
• 第二单元 网络与生活
• 第五课 网络交流
• 第六课 网络学习
• 第七课 电子商务
• 第八课 网络旅行
• 第三单元 网站制作
• 第九课 走进网站
• 第十课 制订建站计划
• 第十一课 建立网站站点
• 第十二课 用表格为网页布局
• 第十三课 充实主页
• 第十四课 建立分页面
• 第十五课 设置超链接
• 第十六课 让网站有声有色
• 第十七课 编辑网页代码
• 第十八课 网站展示与评价

© 21世纪教育网

标记用来定义表格的列仔细观察“插入表格”源代码有什么发现？新知讲解通过源代码可以看到：
和	标记内的属性意为单元格宽度（width）为浏览器窗口宽度50%（width=“50%”) 。表格属性为：表格边框（border）宽度为1个像素，表格的宽度（width）为浏览器窗口宽度（width=“148%”）新知讲解 HTML文件结构如下＜ html:＞标记网页的开始＜head＞标记头部的开始＜title＞显示在浏览器左上方的标题＜/ title>＜/head＞标记头部的结束＜ body＞标记页面正文开始＜/body＞标记页面正文结束＜/html＞标记网页的结束 HTML标签是由尖括号包围的关键词，通常成对出现。新知讲解 亲身体验新知讲解 二、添加特效代码 因特网上有很多专门提供特效代码的网站，通过复制特效代码加入到自己的网页中可以实现网页特效。 以“网络世界”网站主页加入鼠标特效为例，操作方法如下新知讲解1.打开“网络世界”网站，选择主页为当前编辑窗口。2.打开IE浏览器，搜索“网页特效”网站，找一个喜欢的特效，并复制该特效代码如进入“网页特效集锦http://www. helpor. net/＂网站，复制“飘动的字符跟随鼠标”代码(如图)。新知讲解选择“代码”视图，将光标定位到＜body＞＜body＞之间粘贴已复制的代码，并修改文字内容为“网络世界欢迎你的光临!”，如图所示，鼠标特效设置完成。3.切换到 Sharepoint Designer界面新知讲解温馨提示新知讲解 亲身体验新知讲解阅读材料HTML文档的常用标签功能介绍基本标签创建一个HTML文档 设置文档头部设置文档的可见部分标题标签设置标题文档整体属性设置背景颜色设置文本文字颜色设置链接颜色图形元素添加一幅图像创建最大的标题 创建最小的标题 创建黑体字创建斜体字设置字体大小，从1到7设置字体的颜色创建一个新的行 插入一个回车换行符 创建一个表格开始表格中的每一行