HTML CSS DIV网页设计与布局（第3版）（微课版）-教案 第3章 超链接.doc

PAGE6

网页设计与制作

授课教案

学年第学期

学院（部）专业（学部）

课程名称

电子商务网页设计与制作

任课教师

课内形式

理论教学□课内实践□理实一体?习题复习□考核评价□其他活动□

学习量

安排

课内：

课外形式

调查分析?小组研讨□实践任务?理论探究□考核评价□汇报展示□其他活动?

课外：

序号

3

授课日期

月日

月日

月日

月日

授课班级

课内教学内容：

第3章超链接

课外学习任务：

（1）课前：

以小组为单位，讨论超链接的相关知识，分析超链接的标签和属性使用规则并以PPT的形式记录下来。

（2）课后：

eq\o\ac(○,1)使用a标签来创建一个以新窗口打开的超链接。

eq\o\ac(○,2)使用a标签创建一个链接到其他网页的锚点。

eq\o\ac(○,3)使用img标签的usemap属性和map标签设置一个矩形的图片热点区域。

教学目标：

知识目标

掌握超链接的使用

掌握锚点的创建和使用

掌握热点的创建和使用

能力目标

能够掌握超链接的各种使用方法；

能够正确使用锚点和图像热点区域。

素质目标

较强的专业知识和技术能力；

丰富知识结构，提升专业知识。

重点难点及解决方法：

（1）重点：掌握超链接使用规则

解决方法：通过课堂示例+启发式教学的方法，教师讲解在讲解超链接的创建和使用等相关知识的同时，引导学生积极思考，掌握锚点连接的创建和使用，以及锚点的创建和使用等相关知识；同时通过课堂示例，使学生深入掌握超链接的相关使用规则。

（2）难点：熟练通过各种方式创建超链接

解决方法：通过实战案例解析+启发式教学讲解的方式，细致讲解各种形式超链接的使用方法。帮助学生加深掌握如何使用超链接实现页面之间，页面之内等多种方式的跳转。

课内教学授课地点：

教学媒体：微课、PPT课件、网页图片、相关教学视频等。

设备及材料：多媒体计算机、多媒体教学广播软件、网页素材图片、教学载体源文件等。

其它资源：与本次课相关的专业技术论文电子版。

学习效果评价方式：

对理论知识学习效果评价：采用课堂提问、课后习题和查阅技术论文研读笔记的方式；

对技能的评价：教师对学生上交网页作品按制作要求进行综合性评价；

对职业素养的评价：采用学生自评、小组内评价和教师评价相结合的方式。

课后小结：

填表说明：1.序号，指该课程授课的顺序号，应与授课计划一致；2.授课形式在相应的选项打“√”。

课内教学内容及过程

时间分配

方法

及手段

1.创建超链接

【超链接标签】

在HTML中，创建超链接的标签是a。a标签是双标签，以a开始、以/a结束。a标签创建的超链接能指向一个HTML页面、一张图片、一个视频文件等，其语法格式如下。

aname=锚名称href=urltitle=标题target=目标超链接文字/a

超链接标签的属性很多，上面的语法格式中只包含了常用的4个属性。这4个属性的具体说明如下。

name：用于设置超链接当前位置的锚名称。

href：用于设置超链接的链接地址。

title：用于设置超链接的标题。

target：用于设置打开超链接的目标地址。

从上面的超链接语法格式可以看出，超链接主要包括目标地址、链接文字、标题、目标窗口及锚。

【链接地址】

链接地址用于设置超链接的路径，可以使用a标签中的href属性来设置。设置链接地址的语法格式如下。

ahref=链接地址用来设置超链接的标签/a

其中，链接地址可以是相对路径，也可以是绝对路径。

绝对路径实际就是完整路径。绝对路径可以是硬盘文件的真正路径，也可以是域名的完整网页路径。使用绝对路径定位链接目标文件比较清晰，但是如果该文件被移动了，就需要重新设置所有的相关链接。例如，设置路径为“C:\ProgramFiles\1.htm”，在本地确实可以找到，但是到了网站上，因为该文件不一定在这个路径下，所以就会出问题。

相对路径，顾名思义就是相对目标位置的路径。使用相对路径时，无论将这些文件放到哪里，只要它们的相对关系没有变，就不会出错。一般有如下3种相对路径的写法。

同一目录下的文件：只需要输入链接文件的名称即可，如01.html。

上一级目录中的文件：在目录名和文件名之前加入“../”，如../04/02.html；如果是上两级，则需要加两个“../”，如../../file/01.html。

下一级目录：目录名和文件名之间以“/”隔开，如Html/05/01.html。

【打开链接的方式】

单击网页中的超链接时，通常都会在当前窗口打开目标页面。如果想保留当前网页的内容，让链接的页面从一个新建窗口中打开，应该怎么办？使用a标签的target属性可以实现这个功