《网站前端技术》教案第4课HTML与HTML5（三）.docx
课题第4课HTML与HTML5（三）课时2课时(90min)教学目标知识技能目标：掌握HTML的图像标签、超链接标签素质目标：掌握HTML的相关知识，加强学生的理论基础，提升学生的专业技能教学重难点教学重点：HTML图像标签、HTML超链接标签教学难点：HTML图像标签、HTML超链接标签教学方法问答法、讨论法、i并授法、实践练习法教学用具电脑、投影仪、多媒体课件、教材、APP教学设计第1节课：课前任务一考勤（2min）一问题导入（8min）一传授新知（25min）一头脑风暴（IOmin）第2节课：问题导入（3min）一传授新知（32min）一上机操作（5min）一课堂小结（3min）一作业布置（2min）教学过程主要教学内容及步骤设计意图第一节课课前任务【教师】布置课前任务，和学生负责人取得联系，让其提醒同学通过APP或其他学习软件，完成课前任务请大家了解HTML图像标签、HTML超链接标签的相关内容。【学生】完成课前任务通过课前任务，使学生了解本次课程的主要内容，增加学生的学习兴趣考勤(2min)【教师】使用APP进行签到【学生】按照老师要求签到培养学生的组织纪律性，掌握学生的出勤情况问题导入（8min）【教师】提出以下问题HTML图像标签具有什么作用？【学生】思考、举手回答【教师】通过学生的回答引入要讲的知识通过问题导入的方法，引导学生主动思考，激发学生的学习兴趣传授新知（25min）2.6HTML图像标签2.6.1 网页中的图像文件类型÷【多媒体】组织学生扫码播放"HTML图像标签”视频（详见教材），让学生对这部分内容有一个大致地了解【教师】讲解图像文件的基本类型通过教师讲解、课堂互动、知识拓展、演示操作等方式，使学生了解HTML图像标签的语法以及使用，为后边的学习打好基础目前，市场上有很多类型的图像，而且不同的浏览器对不同类型的图像可能有不同的识别能力。但是，几乎任何浏览器都可以识别PNGxJPG.GIF格式的图像(后缀名分别为Png、.jpg、gif).因此，开发者一般将图像处理为这三种类型中的一种。【提示】图像的使用一定要与网页的主题相匹配，图像的色彩要与网页中文字的颜色相协调，这样才能达到深化主题且美观的效果。此外，网页中可以使用图像作为页面的背景。但是，为了保证浏览器载入网页的速度，建议大家尽量避免使用太大的图像作为网页背景图像。【学生】聆听、记录、理解2.6.2网页中的相对地址和绝对地址【教师】讲解网页中的相对地址和绝对地址的定义在网页中，有多种资源引用到网页时需要资源地址，如图像、音乐、网页、视频、FlaSh等。资源地址有两种，即相对地址和绝对地址。1 .相对地址相对地址是指以当前网页文件为起点，通过层级关系描述资源的位置。它的使用方法如下。(1)如果要引用的资源与网页文件在同一目录中，则只需输入要链接资源文件的名称即可，如"imgl.png"。(2)如果要引用的资源位于网页文件的下一级目录中,则需要先输入目录名，再加上,T,最后输入资源文件名即可，如"img/imgl.png"。(3)如果要引用的资源位于网页文件的上一级目录中，则需要先输入iiJn,再输入目录名，最后输入资源文件名即可，如”./img/imgl.png"。【课堂互动】【教师】提问相对地址有什么作用？十【学生】聆听、思考、回答相对地址最适合用于引用网站内部的资源，即只要资源处于站点文件夹之内，相对地址就可以自由地在文件之间构建链接。利用这种地址形式构建链接的两个文件之间的相对关系不受站点文件夹所处服务器位置的影响。所以，当站点文件夹所在服务器地址发生改变时，文件夹的所有内部文件地址者坏会出现问题。2 .绝对地址【课堂互动】十【教师】提问什么是绝对地址?十【学生】聆听、思考、回答（1）带有盘符的完整路径,如"D%xampleimgimagesimgl.ng"表示图像文件imgl.png在本地计算机中的绝对位置，以盘符D:/开头.（2）带有网络协议的完整路径,如："hups:绝对地址适合用于引用网站外部的资源。使用绝对地址定位链接资源文件比较清晰。但是，需要输入的内容较多，而且如果资源文件出现移动，就需要重新设置所有相关的链接。例如，在本地测试网页时，链接全部可用，但是到了网上，链接就不可用了。【学生】聆听、记录、理解2.6.3图像标签<img>【教师】讲解网页中的图像标签<img>的语法格式和使用方式<img>标签用于定义图像，可以指定图像的地址、宽度、高度、边框和替代文本，其可选择的属性有src,用于指定图像的URL；width,用于指定图像的宽度；height,用于指定图像的高度；border,用于指定图像周围的边框；all,用于指定图像的替代文本。<img>标签是行标签，其语法格式如下：<imgsrc="图像文件的地址（相对地址或绝对地址）"Width="宽度值"heighi="高度值”border="边框值"alt="文本”/>【提示】属性Width、height、border的值是一个数值，单位默认为px（像素），可省略不写。【示例2-6-1编辑HTML文档<body>标签的内容，代码如下：<body><imgsrc="imgbeijing.jpg"width="400"height="auto"border="3"alt="这是一张图像，/><body>【教师】组织学生分组上机完成上面的任务，井在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】ppt展示“图像标签及其属性设置效果”以及“找不到图像资源效果”图片（详见教材）,并讲解效果：在页面主体部分显示图像，地址为“imgZbeijing.jpg"，宽度为400PX,高度根据比例缩放，边框为3PX,页面显示效果如图2-6-1所示。当图像地址找不到图像时，则显示为点位符。【提示】在网页中插入图像时，一定要保证所插入图像位于网站文件夹中，否则一旦移动网站文件位置，图像就不能正常显示。【学生】聆听、记录、理解2.6.4 图像对齐方式align【教师】讲解网页中的图像对齐方式align的语法格式和使用方式>»align属性用于定义图像周围文本与图像混排时的对齐规则，其值有top、bottom, right. Ieftx middleo其中，top表示将图像与顶部对齐；bottom表示将图像与底部对齐；right表示 将图像对齐到右边；Ieft表示将图像对齐到左边；middle表示将图像与中央对齐。【示例2-6-2编辑HTML文档<body>标签的内容，代码如下：<body>这是图像<imgsrc=',imgbeijing.jpg"width="400"height="auto"border=',3"一张图像“align="middle',>以及常用属性<body>【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】PPt展示“图像对齐方式属性设置效果”图片（详见教材），并讲解效果：图像的中央与文本的中央对齐。【学生】聆听、记录、理解2.6.5 水平间距hspacc和垂直间距vspace【教师】讲解网页中的水平间距hspace和垂直间距vspace的语法格式和使用方式hspace和VSPaCe属性用于定义图像四周文本与图像之间的距离。其中，hspace属性用于定义左右两侧文字与图像的间距；VSPaCe属性用于定义上下两端文字与图像的间距。它们的语法格式如下：<imgSrC="图像文件的地址"hspace="距离值"vspace="距离值"/>【提示】距离值是一个数值，其单位默认为PX（像素），可以省略不写。【示例2-6-3在【示例2-6-2的基础上，编辑HTML文档<body>标签的内容，即在img标签中添加水平间艮巨属性hspace代码如下：<imgsrc="imgbeijing.jpg"wid（h="400"height="auto"border=?"all="这是一张图像”align="middle"hspace="30">【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】PPt展示“水平间距属性设置效果”图片（详见教材），并讲解效果：图像左侧和右侧的文本与图像间隔30px.【学生】聆听、记录、理解头脑风暴（10 min）通过头脑风暴的 形式，活跃课堂气 氛，引发学生思考，【教师】根据头脑风暴主题，组织学生分组开展讨论根据各队伍的网站主题，讨论如何使用本节课中介绍的HTML图像标签与超链接标签编辑图片与超链接。【学生】思考、讨论第二节课培养学生的创新能力和团队精神问题导入（3min）【教师】提出以下问题大家结合网页超链接的理解，思考HTML超链接标签具有什么功能？【学生】思考、举手回答通过提问引导学生思考本节课内容传授新知（32min）2.7HTML超链接标签【教师】讲解超链接标签的定义超链接全称超文本链接，是IITML的一个强大且有价值的功能。它是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图像，一个电子邮件地址，一个文件,甚至是一个应用程序。在一个网页中用来超链接的对象，可以是一段文本或一个图像。（详见教材）【学生】聆听、记录、理解2.7.1 超链接标签<a>【教师】讲解超链接标签<a>标签的基本语法与示例【多媒体】组织学生扫码播放"HTML超链接标签”视频（详见教材），让学生对这部分内容有一个大致地了解心标签用于定义超链接，可以从一张页面链接到另一张页面，其属性有href,用于指定链接地址，其值是绝对地址或相对地址。该标签是行标签，其语法格式如下：<ahref="链接地址">超链接内容<a>【提示】当把鼠标指针移动到网页中的某个链接上时，鼠标指针通常会变为一只小手。【示例2-7-1编辑HTML文档<body>标签的内容，代码如下：<body><ahref="hiip:/WWW">百度一_F<a><ahref="bigClaSS.html,'>站内一级列表页<a><body>【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】PPt展示“超链接标签默认效果”图片（详见教材），并讲解效果：超链接文本的格式默认为蓝色字体且有下划线。【学生】聆听、记录、理解2.7.2 超链接属性Iarget【教师】讲解超链接属性target的使用与示例通过教师讲解、课堂互动、演示操作等方式，让学生熟悉超链接标签的语法与使用，为后续的学习提供知识基础【课堂互动】+【教师】提问HTML中超链接属性target应有什么设置?【学生】聆听、思考、回答target属性用于定义目标文档在何处显示，可以是当前窗口、新窗口、某浮动窗口等，其取值有_self、_blank、-parent和op。其中，_self表示在当前窗口中打开目标文档；_blank表示在新窗口中打开目标文档;Parenl表示将目标页面载入到当前框架的父框架窗口中，如果没有框架，则等同于_self；_tOP表示将目标页面载入到整个浏览器窗口，并删除所有框架。若超链接标签a没有设置属性target,则默认为_self。【示例2-7-2在【示例2-7-1基础上，编辑HTML文档body标签的内容，即为第一个超链接标签a添加属性target.代码如下：ahref="http:WWW"target="_blank"百度一下aahref="bigClass.himl"站内一级列表页va【教师】组织学生分组上机完成上面的任务,并在各组中挑选T立学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示效果：单击链接“百度一下"，则百度首页会在一个新的浏览器窗口中打开；单击链接"站内一级列表页"，则bigClass.html页面会在当前浏览器窗口中显示.【学生】聆听、记录、理解2.7.3锚点链接【教师】讲解锚点链接的使用与示例【课堂互动】十【教师】提问HTML中锚点链接应有什么设置?+【学生】聆听、思考、回答锚点链接用于实现在一个页面中的不同位置之间或不同页面中的某两个位置之间进行雌.锚点的设置同样使用心标签，不过作为锚点的心标签不需要href属性,而是需要用name或id属性来定义锚点的名称或标记锚点.【提示】锚点又可以理解为书签，只是这个书签不会以任何特殊方式显示，它对浏览者是不可见的。要实现锚点链接，首先需要定义一个锚点，然后以此锚点为链接目标，主要步骤如下。<aid="锚点id值”锚点位置（可以为空）<a>【提示】为了遵行HTML5规范，建议使用id属性。步骤2链接到锚点，其语法格式如下：<ahref="#锚点名称用id值”>链接载体<a>【示例2-7-3编辑HTML文档<body>标签的内容，代码如下：<body><ahref="#ShUqian">注意事项<a><br/><imgsrc="imgbeijing.jpg"alt=""xbr/><aid="shuqian">书签：<a><br/><p>您可以使用name属性创建HTML页面中的书签。书签不会以任何特殊方式显示，它对读者是不可见的。当使用命名锚（namedanchors）时，我们可以创建直接跳至该命名锚（如页面中某个小节）的链接，这样浏览者就无须不停地滚动页面来寻找他们需要的信息了。<p><body>【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】PPt展示“单击锚点链接之前效果”以及“单击锚点链接之后效果”图片（详见教材），并讲解效果："注意事项”链接显示在页面最上方。单击"注意事项"链接后，页面直接助桀到书签位置.【学生】聆听、记录、理解2.7.4图像链接【教师】讲解图像链接的使用与示例在网站中，很多时候将图像作为链接载体，其语法格式如下：<ahref="目标网页地址"><imgSrC="链接载体的图像地址”alt=""/><a>【示例2-7-4编辑HTML文档<body>标签的内容，代码如下：<body><ahref="http"><imgsrc="imglogo.gif,alt=""width="300"height="auto"><a><body>【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示效果：当鼠标浮于图像上时，鼠标指针变为手形。单击图像，网页可跳转至百度首页。【提示】视觉上，图像链接与普通图像没有不同。【学生】聆听、记录、理解2.7.5 图像热区链接【教师】讲解图像热区链接的使用与示例【课堂互动】十【教师】提问什么是图像热区链接？【学生】聆听、思考、回答图像热区链接是指在一张图像上划出若干个区域（称为热区），这些区域可以分别设置超链接，从而链接到不同的目标位置。需要注意的是，设置图像热区链接不再使用<a>标签，而是使用<area>标签定义图像映射中的区域（图像映射是指带有可单击区域的图像），并在Varea>标签的外层增加<map>标签定义一个客户端图像映射。设置图像热区链接的步骤如下。步骤1在图像文件中设置映射图像的名称,即在添加图像的<img>标签中使用usemap属性，添加图像要引用的映射图像的名称，其语法格式如下：<imgSrC="图像地址"usemap="#映射图像名称"/>步骤2定义热区图像和热区连接，其语法格式如下：<mapname="映射图像名称"><areaShape="热区形状"coords="热区坐标"href="连接地址"/><map>【高手点拨】shape属性用于定义区域的形状，其值有circle、reel、poly、default（默认值）其中，circle表示圆形；rect表示矩形；poly表示多边形；default表示整幅图像。coords属性用于定义可单击区域（对鼠标敏感的区域）的坐标。（详见教材）【示例2-7-5编辑HTML文档<body>标签的内容,代码如下：<body><imgsrc="imggooglein.jpg"usemap="#map_name"width="400px"><mapname="map_name"><areaShape="circle"coords="200,200,30"href="h"alt=""><areashape="rect"coords="120,120,185.185"href=""alt=""><areashape="poly"coords="200,260J50,300,250,300"href="htlp:/,'all=""><map><body>【教师】组织学生分组上机完成上面的任务，并在各组中挑选T立学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】PPt展示“图像上的热点区域效果”图片（详见教材），并讲解效果：当单击图像上的相应区域时，会分别显示热区形状，且鼠标指针变为手形。【学生】聆听、记录、理解2.7.6 空链接【教师】讲解空链接的使用与示例所谓空链接就是指鼠标指向链接后，鼠标指针变为手形，但单击链接后，页面仍然停留在当前页面。【课堂互动】+【教师】提问空链接具有什么作用？十【学生】聆听、思考、回答空连接用于设置暂时还未确定链接的目标地址，便于后期更新链接的目标地址。设置空链接的方法有很多，可以将<a>标签的href属性值设置为空,也可以仅使用符号#,还可以使用JavaScript的语句，它们的语法格式如下：<ahref='",xa><ahref="*',><a><ahref="javascriptzvoid(0),><a>【示例2-7-6编辑HTML文档<body>标签的内容，代码如下：<body><imgsrc="imgbeijing.jpg"/><ahref="">这是第一个空链接<a><ahref="#">这是第二个空链接<a><ahref="javascripi:VOid(O)三个空<body>【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示效果：当图像高度超过一屏时，单击第一个和第二个空链接不会有新页面出现，但页面会返回到顶部，但是单击第三个空连接时，页面不会发生任何改变。【学生】聆听、记录、理解2.7.7 E-mail链接【教师】讲解E-mail链接的使用与示例E-mail链接一般用于设置页面中的"联系我们"等条目,以指向一个电子邮件地址，然后浏览器会启动系统默认的邮件程序(如果有的话)0设置E-mail链接的语法格式如下：<ahref="maillo:邮件地址"><a>【示例2-7-7编辑HTML文档<body>标签的内容，代码如下：<body><ahref=',mailto:123456789”>联系站长<a><body>【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师迸行点评【学生】聆听、上机操作、演示【教师】PPt展示“E-mail建接效果”图片(详见教材)，辅助并讲解E-mail链接效果效果：单击"联系站长"，出现需要使用的应用程序.【学生】聆听、记录、理解2.7.8JavaScript链接【教师】讲解JaVaSCriPt建接的使用与示例JavaScript链接用于在浏览器窗口中设置弹窗，从而实现提示或警告。设置JavaScript链接的语法格式如下：<ahref="javascript:alertC弹窗显示内容上"><a>【示例2-7-8编辑HTML文档<body>标签的内容，代码如下：<body><ahref="javascript:alert('Hello,mydarling!'):">来点我吧!<a><body>【教师】组织学生分组上机完成上面的任务，并在各组中挑选T立学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【提示】在语句javascripalert(He110,mydarling!');中除单引号内部涉及的标点符号外,其余标点符号全部为英文格式。【教师】ppt展示"JavaScript链接效果”图片(详见教材)，并讲解效果：单击”来点我吧！"，在浏览器中出现一个弹窗，显示Hen中的信息。【学生】聆听、记录、理解上机操作(5min)【教师】组织学生分组讨论，上机完成以下任务在上节课创建的course.html文件中，使用<img>标签添加课程教材的图片，将图像的中央与介绍文本的中央对齐；使用图像链接，链接到课程教材的页面；使用E-mail链接链接到本组成员的邮箱。【学生】讨论、上机操作通过上机操作巩固所学知识课堂小结(3min)【教师】简要总结本节课的要点本节课主要学习了HTML的图像标签、超链接标签等相关内容，希望通过本节课的学习，大家可以掌握图像标签、超链接标签的编写方法，为网站建设的学习奠定基础，并为后面的学习做好准备。【学生】总结回顾知识点总结知识点，巩固学生对图像标签、超链接标签相关知识的印象作业布置(2min)【教师】布置课后作业个人作业：请根据课堂所学知识,完成课后习题团队作业：围绕第一节课制定的主题项目，使用本节课所学的超链接标签。>、图像链接、图像热区链接、空链接、E-mail链接、JavaScript链接等进行设计，并形成文档上传至APP【学生】完成课后任务通过课后作业复习巩固学到的知识，提高学生的理解能力>»教学反思*本节课发现学生的练习不够、强化不够，教师的检杳不够，教学中应给学生安排充足的练习时间，让学生在 练习中体会、理解，在练习中总结、反思。此外，教师在教学中应采用多样化的教学方法，有意识地提高学生学 习的积极性和主动性。
