基本信息
文件名称:Web前端开发任务驱动式教程(HTML5+CSS3+JavaScript)(第2版)(微课版) 教案 第2讲次 任务3 图像和超链接.docx
文件大小:1.47 MB
总页数:8 页
更新时间:2025-05-27
总字数:约2.45千字
文档摘要

教案

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