教案
序号: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页