第十七课 编辑网页代码 课件+教案

浙教版信息技术八年级上第十七课编辑网页代码教学设计 课题 编辑网页代码 单元 第三单元 学科 信息技术 年级 八年级 学习 目标 知识目标：了解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/＂网站，复制“飘动的字符跟随鼠标”代码 ... ...