第2次课 HTML基础二.doc

湖南商务职业技术学院教师授课课时计划 课程章节 及 主 题 2.5~.2.8（第二讲） 超链接、图像、表格、框架标签 授课老师签字 教研室主任签字 教学目的 让学生掌握超链接、图象映射、表格和框架标记的使用 教学重点 超链接 表格 框架 教学难点 框架 教学方法 多媒体教学，讲授为主 授课班次 08计应1班 授课日期 授课地点 J2408 教 学 过 程 及 内 容 提 要 HTML语言基础 1、超链接 2、图像标记 3、表格 4、框架 教学过程及内容 导入 以本次课所要讲的HTML标记的作用为切入点，介绍超链接、图象映射、表格和框架标记的使用 教学内容 2.1超链接 1、超链接基础 1）超链接的种类 超链接按源端点的链接划分，可分为超文本链接和非超文本链接两类。超链接按目标端点的链接划分，可分为外部链接、内部链接、电子邮件链接、局部链接、脚本链接等。 2）文档路径类型 文档路径类型有绝对路径和相对路径两种。 绝对路径 绝对路径是包括服务器协议（以HTTP开头）的完全路径。 相对路径 相对路径包括根相对路径（Site Root）和文档相对路径（Document）两种。 根相对路径 根相对路径（也称相对根目录）以“/”开头，路径是从当前站点的根目录开始计算。 文档相对路径 文档相对路径的基本思想是省略当前文档和链接的文档都相同的绝对URL部分，而只提供不同的那部分路径。 3）超链接的HTML定义格式： a超链接文本/a 常用属性有： Href属性：指定超链接链接的目标地址 Title属性：指定当鼠标指向超链接的文本对象时的提示文本 Target属性：指定所链接的文档在什么位置打开，其属性有 _blank:在一个未命名的新浏览器窗口中载入目标文档 _parent:在该连接所在的框架的父框架或父窗口中载入目标文档。如果包含连接的框架不是嵌套框架，则所链接的文档在整个浏览器窗口中打开。 _self:在链接所在的同一框架或窗口中打开目标文档。 _top:在整个浏览器窗口中打开目标文档，但它会删除所有的框架。 2、创建超链接 1）创建文字超链接 2）创建锚点超链接 （1）创建链接的目标端点，即锚点，并为其命名 a name=c0h1index/h1/a （2）在源端点创建该锚点的超链接 a href=#c0return to index/a 注意，在命名锚点时应遵循以下规则： 只能使用字母和数字，锚记的命名不支持中文 锚记名称的第一个字母最好是英文字母，一般那不要以数字作为锚记名称的开头 锚记名称区别英文字母的大小写 锚记名称不能还有空格，也不能含有特殊符号 锚点不能放在层当中 3）创建电子邮件链接 a href=mailto:abc@163.com联系我们/a 4）创建空链接 a href=#首页/a 5）脚本链接 a href=# onclick=alert(你好);点击我试一下/a 2.2插入图像 1、Web图像格式 在网页中最常用的两种图像格式: GIF格式 JPEG格式 2、 在网页中插入图像 在HTML语言中，可使用IMG标记（单标记）在网页中插入一个行内图像。 1）SRC和ALT属性 IMG标记有许多属性，其中最常用的是SRC和ALT属性，分别用于设置图像的位置和替换文本。SRC属性给出图像文件的URL地址，图像可以是JPEG文件、GIF文件或PNG文件。ALT属性给出图像的简单文本说明，这段文本在浏览器不能显示图像时显示出来，或图像加载时间过长时先显示出来。 2）指定图像的高和宽 当使用IMG标记在网页中插入一个图像时，可以通过HEIGHT和WIDTH属性来设置图像的高度和宽度，所用单位可以是像素或百分数。如果只给出了高度或宽度，则图像将按比例进行缩放。 3）align属性 设置图像的对齐方式。如左对齐、右对齐、底部对齐、顶部对齐和中部对齐等等。 4）border属性 设置图像边框的宽度，边框的宽度可以为0。 例如： img src=images/zp1.jpg alt=产品图片 border=3 / 2.3图像映射 1、什么是图像映射 所谓图像影射就是将图像分成不同的区域，然后将每一个区域与一个HTML文件建立链接。 2、创建图像影射 img src=images/zp1.jpg alt=产品图片 border=3 usemap=#Map / map name=Map id=Map area shape=rect coords=2,0,148,49 href=/amples2/a.html / area shape=circle coords=38,92,29 href=samples2/label