资源简介 浙教版信息技术八年级上第十七课编辑网页代码教学设计课题 编辑网页代码单元第三单元学科信息技术年级八年级学习目标知识目标：了解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%”才艺展示网页标题，放在和之间标记用来定义表格标记用来定义表格的行标记用来定义表格的列仔细观察“插入表格”源代码有什么发现？新知讲解通过源代码可以看到：和是行标记，表示某一行；和是列标记，表示某一列，标记内的属性意为单元格宽度（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设置字体的颜色创建一个新的行插入一个回车换行符创建一个表格开始表格中的每一行开始一行中的每一格课堂练习课堂小结总结本节课所学内容板书设计一、认识HTML代码二、添加特效代码 1.尝试运用HTML更改网页内容，观察其变化。作业布置谢谢21世纪教育网（www.21cnjy.com) 中小学教育资源网站 有大把高质量资料？一线教师？一线教研员？欢迎加入21世纪教育网教师合作团队！！月薪过万不是梦！！详情请看：https://www.21cnjy.com/help/help_extract.php 展开更多...... 收起↑ 资源列表 第十七课 编辑网页代码.doc 第十七课 编辑网页代码.pptx