超链接、浮动框架.ppt

1、授课教师：黄彩霞 E-MAIL：,复习,图像标记 列表标记 (1)有序列表 苹果 香蕉 葡萄 ,复习,(2)无序列表 苹果 香蕉 葡萄 ,(3)列表之间的嵌套 华东地区 江苏部分 浙江部分 华北地区 北京部分 天津部分 ,复习,(4)定义列表 名词1 解释1 解释2 解释3 名词2 解释1 解释2 解释3 注意：标记表示名词；标记表示对名词的解释。,复习,多媒体标记 (1) (2) (3)滚动的文字或图像,HTML文件最重要的特性之一就是超链接，通过网页上所提供的链接功能，用户可以链接到网络上的其他网页。 如果网页上没有超链接，就不得不在浏览器地址栏中一遍遍地输入各网页的URL地址了，这样也就

2、无法体现互联网的优点了。 在HTML语言中，利用标记在网页中创建超链接，一般语法格式如下： 超链接的文字或图像,2.4.3 超链接标记,网页上的超链接有多种：文字链接、图片链接、页面内部链接等等。 文字设置为超链接后，默认显示为加下划线的蓝色字体；图像设置为超链接后，会自动加一个黑色的边框。,2.4.3 超链接标记,例如： 链接到一个页面 空链接 ,超链接标记属性 （1）href属性：是标记的最重要的属性，用来放置超链接的目标地址，可以是本网站内部的某个HTML文件，也可以是外部网站某个网页的URL地址。,2.4.3 超链接标记,URL(统一资源定位器)：每一个网页在互联网上都有唯一的地址。

3、URL的格式,2.4.3 超链接标记,URL的类型：绝对URL和相对URL 如： 相对URL的优点：当用户将包含所有文件的文件夹整体迁移到不同的服务器或其他位置时，文件之间的超链接仍可以正常链接。 如： href=“index.html” /index.html是本地当前路径下的文件 href=“web/index.html” href=“./index.html” href=“././index.html”,2.4.3 超链接标记,有如下目录结构：,Default.htm存在链接到qt.html的链接，那么超链接代码如何写： 链接到qt qt.html 存在链接到Default.htm的链接

4、，那么超链接代码如何写： 返回首页 .表示返回上级目录。,超链接标记属性 （2）target属性：设定链接页面显示的目标窗口，默认情况下，目标页面在同一个窗口中显示。如果要在点击某个链接以后，打开一个新的浏览器窗口，在这个新窗口中显示目标页面，就需要在标记中设置“target”属性。,2.4.3 超链接标记,超链接标记属性 （3）title属性：设置鼠标经过超链接时显示的文字提示。 （4）name属性：指定元素的名称，可用于设置网页中的某个位置（锚点）。 创建超链接的方式 超链接的文件可以是任意类型：.html 、jpg、.word、.ppt、.zip等等。,2.4.3 超链接标记,例如： 下

5、载word文档 下载ppt文档,创建电子邮件链接 在某些网页中，单击某个超链接以后，会自动打开电子邮件客户端软件，向某个特定的E-mail地址发送邮件。此类链接类似于URL的链接方式，例如：,2.4.3 超链接标记,基本格式：链接显示文字 ,创建页面内部链接 超链接不仅可以跳转到其他网页，也可以在本页内跳转(也可称为书签(锚点)链接)。 在制作网页时，可能会出现网页内容比较长的情况，用户浏览网页时会很不方便，利用锚点链接解决该问题。,2.4.3 超链接标记,创建页面内部链接(锚点链接) 要在当前页面内实现超链接，需要定义两个标记：一个为超链接标记，另一个为书签标记。 (1)用标签的属性href

6、的值来确定跳转的目标名称 即超链接标记的格式为： 如：链接文字 (2)设置相应的跳转目标位置(锚点)，即书签标记在的name属性中定义： 如：链接目标文字,2.4.3 超链接标记,注意：二者的目标名称必须一致。,创建图像的热点区域链接 所谓图像的热点区域就是将一幅图像划分出若干个链接区域，当访问者单击不同的区域时，就会链接到不同的目标页面。,2.4.3 超链接标记, ,创建图像的热点区域链接 在HTML中可以使用3种类型的热点区域：矩形、圆形和多边形。,2.4.3 超链接标记,创建图像的热点区域链接 创建图像的热点区域链接需要同时使用、和标记，下面分别对上面的代码进行解释。 （1）标记用来定义

7、图像映射，就是利用name属性来定义带有可点击区域的图像。 （2）标记除了使用src属性插入图像外，还要用usermap属性引用图像映射的名称，创建图像与映射之间的关系，属性值为标记中name属性值前面再加上“#”。,2.4.3 超链接标记,创建图像的热点区域链接 （3）标记定义图像映射中的可点击区域，标记要嵌套在标记中，其属性如下： shape属性：设置鼠标点击区域的形状，属性值有rect（矩形）、circle（圆形）和poly（多边形）。 cords属性：设置可以点击的区域坐标，属性值单位为像素。 如果shape = rect，cords属性值分别是矩形的左、上、右、下四条边的坐标； 如果

8、shape = circle，cords属性值分别是圆形的圆心坐标和半径； 如果shape = poly，cords属性值分别是多边形各个顶点的坐标； href属性：设置点击区域的链接的URL。 target属性：设置链接页面显示的目标窗口。 alt属性：设置替代文字。,2.4.3 超链接标记,2.4.7 浮动框架标记,浮动框架标记用于创建“嵌入式框架”或浮动框架，可以在窗口中再创建一个窗口并自由控制窗口的大小，允许在一个网页中插入另一个网页。 使用时直接在HTML文档中插入标记即可，一个页面中可以插入多个浮动框架。 例如： ,3.7框架之间的链接,3.7.1 建立框架与框架集,前面曾经介绍过标记的target属性，但是没有详细介绍，这是因为target属性必须和框架配合使用，因此这里先对框架进行一些介绍，然后再演示框架与链接的关系。 框架集标记 . 框架标记 注意： . 标记与.标记是同级的，进行替代。,3.7.2 用cols属性将窗口分为左右, 窗体分割 ,注意： . . . .,3.7.3 用r