《网站前端技术》教案第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的使用与示例通过教师讲解、课堂互动、演示操作等方式，让学生熟悉超链接标签的语法与使用，为后续的学习提供知识基础【课堂互动】+【教师】
