《网站前端技术》（梁玲）621-7 教案 第4课 HTML与HTML5（三）_第1页
《网站前端技术》（梁玲）621-7 教案 第4课 HTML与HTML5（三）_第2页
《网站前端技术》（梁玲）621-7 教案 第4课 HTML与HTML5（三）_第3页
《网站前端技术》（梁玲）621-7 教案 第4课 HTML与HTML5（三）_第4页
《网站前端技术》（梁玲）621-7 教案 第4课 HTML与HTML5（三）_第5页
已阅读5页，还剩6页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

PAGE4PAGE4PAGE3PAGE3PAGE3PAGE3

课题第4课HTML与HTML5（三）课时2课时（90min）教学目标知识技能目标：掌握HTML的图像标签、超链接标签素质目标：掌握HTML的相关知识，加强学生的理论基础，提升学生的专业技能教学重难点教学重点：HTML图像标签、HTML超链接标签教学难点：HTML图像标签、HTML超链接标签教学方法问答法、讨论法、讲授法、实践练习法教学用具电脑、投影仪、多媒体课件、教材、文旌课堂APP教学设计第1节课：→→→传授新知（25min）→头脑风暴（10min）第2节课：→传授新知（32min）→上机操作（5min）→课堂小结（3min）→作业布置（2min）教学过程主要教学内容及步骤设计意图第一节课课前任务【教师】布置课前任务，和学生负责人取得联系，让其提醒同学通过文旌课堂APP或其他学习软件，完成课前任务请大家了解HTML图像标签、HTML超链接标签的相关内容。【学生】完成课前任务通过课前任务，使学生了解本次课程的主要内容，增加学生的学习兴趣考勤

（2min）【教师】使用文旌课堂APP进行签到【学生】按照老师要求签到培养学生的组织纪律性，掌握学生的出勤情况问题导入（8min）【教师】提出以下问题HTML图像标签具有什么作用？【学生】思考、举手回答【教师】通过学生的回答引入要讲的知识通过问题导入的方法，引导学生主动思考，激发学生的学习兴趣传授新知

（25min）2.6HTML图像标签2.6.1网页中的图像文件类型✈【多媒体】组织学生扫码播放“HTML图像标签”视频（详见教材），让学生对这部分内容有一个大致地了解【教师】讲解图像文件的基本类型目前，市场上有很多类型的图像，而且不同的浏览器对不同类型的图像可能有不同的识别能力。但是，几乎任何浏览器都可以识别PNG、JPG、GIF格式的图像（后缀名分别为.png、.jpg、.gif）。因此，开发者一般将图像处理为这三种类型中的一种。【提示】图像的使用一定要与网页的主题相匹配，图像的色彩要与网页中文字的颜色相协调，这样才能达到深化主题且美观的效果。此外，网页中可以使用图像作为页面的背景。但是，为了保证浏览器载入网页的速度，建议大家尽量避免使用太大的图像作为网页背景图像。【学生】聆听、记录、理解2.6.2网页中的相对地址和绝对地址【教师】讲解网页中的相对地址和绝对地址的定义在网页中，有多种资源引用到网页时需要资源地址，如图像、音乐、网页、视频、Flash等。资源地址有两种，即相对地址和绝对地址。1.相对地址相对地址是指以当前网页文件为起点，通过层级关系描述资源的位置。它的使用方法如下。（1）如果要引用的资源与网页文件在同一目录中，则只需输入要链接资源文件的名称即可，如“img1.png”。（2）如果要引用的资源位于网页文件的下一级目录中，则需要先输入目录名，再加上“/”，最后输入资源文件名即可，如“img/img1.png”。（3）如果要引用的资源位于网页文件的上一级目录中，则需要先输入“../”，再输入目录名，最后输入资源文件名即可，如“../img/img1.png”。【课堂互动】✈【教师】提问相对地址有什么作用？✈【学生】聆听、思考、回答相对地址最适合用于引用网站内部的资源，即只要资源处于站点文件夹之内，相对地址就可以自由地在文件之间构建链接。利用这种地址形式构建链接的两个文件之间的相对关系不受站点文件夹所处服务器位置的影响。所以，当站点文件夹所在服务器地址发生改变时，文件夹的所有内部文件地址都不会出现问题。2.绝对地址【课堂互动】✈【教师】提问什么是绝对地址？✈【学生】聆听、思考、回答绝对地址是指带有盘符或网络协议的完整路径，使用方法如下。（1）带有盘符的完整路径，如“D:/example/img/images/img1.png”表示图像文件img1.png在本地计算机中的绝对位置，以盘符D:/开头。（2）带有网络协议的完整路径，如：“/i/eg_mouse.jpg”表示图像文件eg_mouse.jpg在网络中的绝对位置，以https://协议开头。绝对地址适合用于引用网站外部的资源。使用绝对地址定位链接资源文件比较清晰。但是，需要输入的内容较多，而且如果资源文件出现移动，就需要重新设置所有相关的链接。例如，在本地测试网页时，链接全部可用，但是到了网上，链接就不可用了。【学生】聆听、记录、理解2.6.3图像标签<img>【教师】讲解网页中的图像标签<img>的语法格式和使用方式<img>标签用于定义图像，可以指定图像的地址、宽度、高度、边框和替代文本，其可选择的属性有src，用于指定图像的URL；width，用于指定图像的宽度；height，用于指定图像的高度；border，用于指定图像周围的边框；alt，用于指定图像的替代文本。<img>标签是行标签，其语法格式如下：<imgsrc="图像文件的地址（相对地址或绝对地址）"width="宽度值"height="高度值"border="边框值"alt="文本"/>【提示】属性width、height、border的值是一个数值，单位默认为px（像素），可省略不写。【示例2-6-1】编辑HTML文档<body>标签的内容，代码如下：<body> <imgsrc="img/beijing.jpg"width="400"height="auto"border="3"alt="这是一张图像"/></body>【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】ppt展示“图像标签及其属性设置效果”以及“找不到图像资源效果”图片（详见教材），并讲解效果：在页面主体部分显示图像，地址为"img/beijing.jpg"，宽度为400px，高度根据比例缩放，边框为3px，页面显示效果如图2-6-1所示。当图像地址找不到图像时，则显示为点位符。【提示】在网页中插入图像时，一定要保证所插入图像位于网站文件夹中，否则一旦移动网站文件位置，图像就不能正常显示。【学生】聆听、记录、理解2.6.4图像对齐方式align【教师】讲解网页中的图像对齐方式align的语法格式和使用方式align属性用于定义图像周围文本与图像混排时的对齐规则，其值有top、bottom、right、left、middle。其中，top表示将图像与顶部对齐；bottom表示将图像与底部对齐；right表示将图像对齐到右边；left表示将图像对齐到左边；middle表示将图像与中央对齐。【示例2-6-2】编辑HTML文档<body>标签的内容，代码如下：<body>这是图像<imgsrc="img/beijing.jpg"width="400"height="auto"border="3"alt="这是一张图像"align="middle">以及常用属性</body>【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】ppt展示“图像对齐方式属性设置效果”图片（详见教材），并讲解效果：图像的中央与文本的中央对齐。【学生】聆听、记录、理解2.6.5水平间距hspace和垂直间距vspace【教师】讲解网页中的水平间距hspace和垂直间距vspace的语法格式和使用方式hspace和vspace属性用于定义图像四周文本与图像之间的距离。其中，hspace属性用于定义左右两侧文字与图像的间距；vspace属性用于定义上下两端文字与图像的间距。它们的语法格式如下：<imgsrc="图像文件的地址"hspace="距离值"vspace="距离值"/>【提示】距离值是一个数值，其单位默认为px（像素），可以省略不写。【示例2-6-3】在【示例2-6-2】的基础上，编辑HTML文档<body>标签的内容，即在img标签中添加水平间距属性hspace。代码如下：<imgsrc="img/beijing.jpg"width="400"height="auto"border="3"alt="这是一张图像"align="middle"hspace="30">【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】ppt展示“水平间距属性设置效果”图片（详见教材），并讲解效果：图像左侧和右侧的文本与图像间隔30px。【学生】聆听、记录、理解通过教师讲解、课堂互动、知识拓展、演示操作等方式，使学生了解HTML图像标签的语法以及使用，为后边的学习打好基础头脑风暴（10min）【教师】根据头脑风暴主题，组织学生分组开展讨论根据各队伍的网站主题，讨论如何使用本节课中介绍的HTML图像标签与超链接标签编辑图片与超链接。【学生】思考、讨论通过头脑风暴的形式，活跃课堂气氛，引发学生思考，培养学生的创新能力和团队精神第二节课问题导入（3min）【教师】提出以下问题大家结合网页超链接的理解，思考HTML超链接标签具有什么功能？【学生】思考、举手回答通过提问引导学生思考本节课内容传授新知

（32min）2.7HTML超链接标签【教师】讲解超链接标签的定义超链接全称超文本链接，是HTML的一个强大且有价值的功能。它是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图像，一个电子邮件地址，一个文件，甚至是一个应用程序。在一个网页中用来超链接的对象，可以是一段文本或一个图像。……（详见教材）【学生】聆听、记录、理解2.7.1超链接标签<a>【教师】讲解超链接标签<a>标签的基本语法与示例✈【多媒体】组织学生扫码播放“HTML超链接标签”视频（详见教材），让学生对这部分内容有一个大致地了解<a>标签用于定义超链接，可以从一张页面链接到另一张页面，其属性有href，用于指定链接地址，其值是绝对地址或相对地址。该标签是行标签，其语法格式如下：<ahref="链接地址">超链接内容</a>【提示】当把鼠标指针移动到网页中的某个链接上时，鼠标指针通常会变为一只小手。【示例2-7-1】编辑HTML文档<body>标签的内容，代码如下：<body> <ahref="">百度一下</a> <ahref="bigClass.html">站内一级列表页</a></body>【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】ppt展示“超链接标签默认效果”图片（详见教材），并讲解效果：超链接文本的格式默认为蓝色字体且有下划线。【学生】聆听、记录、理解2.7.2超链接属性target【教师】讲解超链接属性target的使用与示例【课堂互动】✈【教师】提问HTML中超链接属性target应有什么设置？✈【学生】聆听、思考、回答target属性用于定义目标文档在何处显示，可以是当前窗口、新窗口、某浮动窗口等，其取值有_self、_blank、_parent和_top。其中，_self表示在当前窗口中打开目标文档；_blank表示在新窗口中打开目标文档；_parent表示将目标页面载入到当前框架的父框架窗口中，如果没有框架，则等同于_self；_top表示将目标页面载入到整个浏览器窗口，并删除所有框架。若超链接标签<a>没有设置属性target，则默认为_self。【示例2-7-2】在【示例2-7-1】基础上，编辑HTML文档<body>标签的内容，即为第一个超链接标签<a>添加属性target。代码如下：<ahref=""target="_blank">百度一下</a><ahref="bigClass.html">站内一级列表页</a>【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示效果：单击链接“百度一下”，则百度首页会在一个新的浏览器窗口中打开；单击链接“站内一级列表页”，则bigClass.html页面会在当前浏览器窗口中显示。【学生】聆听、记录、理解2.7.3锚点链接【教师】讲解锚点链接的使用与示例【课堂互动】✈【教师】提问HTML中锚点链接应有什么设置？✈【学生】聆听、思考、回答锚点链接用于实现在一个页面中的不同位置之间或不同页面中的某两个位置之间进行跳转。锚点的设置同样使用<a>标签，不过作为锚点的<a>标签不需要href属性，而是需要用name或id属性来定义锚点的名称或标记锚点。【提示】锚点又可以理解为书签，只是这个书签不会以任何特殊方式显示，它对浏览者是不可见的。要实现锚点链接，首先需要定义一个锚点，然后以此锚点为链接目标，主要步骤如下。步骤1定义锚点，其语法格式如下：<aname="锚点名称">锚点位置（可以为空）</a>或者<aid="锚点id值">锚点位置（可以为空）</a>【提示】为了遵行HTML5规范，建议使用id属性。步骤2链接到锚点，其语法格式如下：<ahref="#锚点名称/#id值">链接载体</a>【示例2-7-3】编辑HTML文档<body>标签的内容，代码如下：<body> <ahref="#shuqian">注意事项</a><br/> <imgsrc="img/beijing.jpg"alt=""><br/> <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=""> <imgsrc="img/logo.gif"alt=""width="300"height="auto"> </a></body>【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示效果：当鼠标浮于图像上时，鼠标指针变为手形。单击图像，网页可跳转至百度首页。【提示】视觉上，图像链接与普通图像没有不同。【学生】聆听、记录、理解2.7.5图像热区链接【教师】讲解图像热区链接的使用与示例【课堂互动】✈【教师】提问什么是图像热区链接？✈【学生】聆听、思考、回答图像热区链接是指在一张图像上划出若干个区域（称为热区），这些区域可以分别设置超链接，从而链接到不同的目标位置。需要注意的是，设置图像热区链接不再使用<a>标签，而是使用<area>标签定义图像映射中的区域（图像映射是指带有可单击区域的图像），并在<area>标签的外层增加<map>标签定义一个客户端图像映射。设置图像热区链接的步骤如下。步骤1在图像文件中设置映射图像的名称，即在添加图像的<img>标签中使用usemap属性，添加图像要引用的映射图像的名称，其语法格式如下：<imgsrc="图像地址"usemap="#映射图像名称"/>步骤2定义热区图像和热区连接，其语法格式如下：<mapname="映射图像名称"> <areashape="热区形状"coords="热区坐标"href="连接地址"/></map>【高手点拨】shape属性用于定义区域的形状，其值有circle、rect、poly、default（默认值）。其中，circle表示圆形；rect表示矩形；poly表示多边形；default表示整幅图像。coords属性用于定义可单击区域（对鼠标敏感的区域）的坐标。……（详见教材）【示例2-7-5】编辑HTML文档<body>标签的内容，代码如下：<body><imgsrc="img/googlein.jpg"usemap="#map_name"width="400px"/><mapname="map_name"><areashape="circle"coords="200,200,30"href=""alt=""/><areashape="rect"coords="120,120,185,185"href=""alt=""/><areashape="poly"coords="200,260,150,300,250,300"href=""alt=""/></map></body>【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示【教师】ppt展示“图像上的热点区域效果”图片（详见教材），并讲解效果：当单击图像上的相应区域时，会分别显示热区形状，且鼠标指针变为手形。【学生】聆听、记录、理解2.7.6空链接【教师】讲解空链接的使用与示例所谓空链接就是指鼠标指向链接后，鼠标指针变为手形，但单击链接后，页面仍然停留在当前页面。【课堂互动】✈【教师】提问空链接具有什么作用？✈【学生】聆听、思考、回答空连接用于设置暂时还未确定链接的目标地址，便于后期更新链接的目标地址。设置空链接的方法有很多，可以将<a>标签的href属性值设置为空，也可以仅使用符号#，还可以使用JavaScript的语句，它们的语法格式如下：<ahref=""></a><ahref="#"></a><ahref="javascript:void(0)"></a>【示例2-7-6】编辑HTML文档<body>标签的内容，代码如下：<body> <imgsrc="img/beijing.jpg"/> <ahref="">这是第一个空链接</a> <ahref="#">这是第二个空链接</a> <ahref="javascript:void(0)">这是第三个空链接</a></body>【教师】组织学生分组上机完成上面的任务，并在各组中挑选一位学生进行演示，演示完成后教师进行点评【学生】聆听、上机操作、演示效果：当图像高度超过一屏时，单击第一个和第二个空链接不会有新页面出现，但页面会返回到顶部，但是单击第三个空连接时，页面不会发生任何改变。【学生】聆听、记录、理解2.7.7E-mail链接【教师】讲解E-mail链接的使用与示例E-mail链接一般用于设置页面中的“联系我们”等条目，以指向一个电子邮件地址，然后浏览器会启动系统默认的邮件程序（如果有的话）。设置E-mail链接的语法格式如下：<ahref="mailto:邮件地址"></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:alert('弹窗显示内容');"></a>【示例2-7-8】编辑

人人文库> 全部分类> 教育资料 > 辅导培训

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论