教案
序号：2
授课日期
课时数
4
章节名称
任务3图像和超链接
教学内容
重点
图像标签、相对路径、超链接标签、锚点标签
难点
相对路径和结构标签的使用
教学目的与要求
1.掌握HTML5的页面结构。
2.掌握HTML5语言中的标签的使用方法。
3.掌握标签中的属性的使用方法。
4.掌握HTML5页面文档的编写方法。
教学方法
与手段
教师采用任务驱动法，使用教学PPT辅助授课。
教师操作演示，学生实训练习。
学生课前课后均可通过“浙江省高等学校在线开放课程共享平台”的配套微课学习。
作业及
思考题
完成课堂上未完成的习题，通过网络平台上交作业，通过回帖的方式回答课上留下的思考题，并预习下一节内容。
讲授内容
课堂组织
第一学时
（任务3图像和超链接3.1图像标签）
首先发布思考题：网页中常用的图片格式，可在“浙江省高等学校在线开放课程共享平台”回帖。
实操任务目标发布（制作网页介绍界面、“文章故事网”页面）
图2-
图2-SEQ图\*ARABIC1index.html页面
图2-
图2-SEQ图\*ARABIC2page1.html页面
图2-
图2-SEQ图\*ARABIC3page2.html页面
图2-
图2-SEQ图\*ARABIC4“文章故事网”界面
准备知识介绍
图像标签
语法格式：imgsrc=urlalt=some_text
图像标签的属性：
属性
描述
属性
描述
src
规定显示图像的URL。
alt
图像不能显示时的替换文本。
align
规定如何根据周围的文本来排列图像。（不推荐使用）
border
定义图像周围的边框。（不推荐使用）
height
定义图像的高度。
width
设置图像的宽度。
hspace
定义图像左侧和右侧的空白。（不推荐使用）
vspace
定义图像顶部和底部的空白。（不推荐使用）
title
光标停留在图像上时，显示提示文字。
子任务发布：在网页中插入图像
图2-
图2-SEQ图\*ARABIC5子任务1完成效果图
发布任务，学生能够有目标地进行学习
教师介绍标签类型及属性，学生实际操作巩固标签作用。
第二学时
（任务3图像和超链接3.2绝对路径和相对路径、3.3超链接标签、3.4锚点链接）
绝对路径和相对路径
介绍
绝对路径：指文件或目录在硬盘上真正的路径。比如，图像top.jpg存放在c盘的images文件夹下，那么该图像的绝对路径表示方法为c:\images\top.jpg。
相对路径：相对于当前文件的路径。网页中的图片、超链接等一般都使用相对路径来表示。
相对路径常见的表示方法
Html文档的位置
图像的位置
相对路径
情形说明
c:\demo
c:\demo
imgsrc=top.jpg
图文均在同一目录
c:\demo
c:\demo\images
imgsrc=images/top.jpg
图在网页下一层目录
c:\demo
c:\
imgsrc=../top.jpg
图在网页上一层
c:\demo
c:\images
imgsrc=../images/top.jpg
图文在同一层但不同目录
提示：“../”指回到上一层目录，“images/”指进入下一层目录images，“../images/”指回到上一层目录，然后再进入目录images中.
子任务发布：使用不同路径进行网页图像排列
图2-
图2-SEQ图\*ARABIC6站点中各文件的位置
超链接标签
语法格式：
ahref=urltarget=目标窗口的弹出方式链接文本/a
href属性：描述链接的地址
target属性：描述链接页面的打开方式
_self：默认值，表示在原网页窗口中打开链接
_blank：在新窗口中打开链接
子任务发布：在网页中插入超链接
图2-
图2-SEQ图\*ARABIC7在网页中插入超链接
提示：href属性的内容可以是站点内网页文件的相对路径，也可以是网页的网址等。
锚点标签
锚点链接
可以帮助浏览者快速定位网页内的目标内容，实现网页内的链接跳转。
创建方法
第一步：使用aname=锚点名称/a创建目标位置的锚点名称
第二步：使用ahref=#锚点名称链接文本/a创建锚点链接
这样，鼠标点击链接文本，网页窗口即可定位到目标位置。
发布子任务：在网页中插入锚点链接
图2-SEQ图\*ARABIC8在网页中插入锚点链接
第三学时
（3.2实战演练——制作“网页技术介绍”网页）
实训操作：设计并制作网页技术介绍页面，单击index.html页