超链接、浮动框架
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
2.4.3 超链接标记
创建图像的热点区域链接
（3）<area>标记定义图像映射中的可点击区域，<area>标记要嵌套 在<map>标记中，其属性如下： ① shape属性：设置鼠标点击区域的形状，属性值有rect（矩形）、 circle（圆形）和poly（多边形）。 ② cords属性：设置可以点击的区域坐标，属性值单位为像素。 如果shape = "rect"，cords属性值分别是矩形的左、上、右、下四 条边的坐标； 如果shape = "circle"，cords属性值分别是圆形的圆心坐标和半径； 如果shape = "poly"，cords属性值分别是多边形各个顶点的坐标； ③ href属性：设置点击区域的链接的URL。 ④ target属性：设置链接页面显示的目标窗口。 ⑤ alt属性：设置替代文字。
qt.html
2.4.3 超链接标记
超链接标记属性
（2）target属性：设定链接页面显示的目标窗口，默认情况下， 目标页面在同一个窗口中显示。如果要在点击某个链接以后， 打开一个新的浏览器窗口，在这个新窗口中显示目标页面， 就需要在<a>标记中设置“target”属性。
2.4.3 超链接标记
3.7.4 框架的嵌套
<html > <head> <title>窗体水平和垂直分割</title> </head> <frameset cols="30%,*"> <frame /> <frameset rows=“50%,*"> <frame /> <frame /> </frameset> </frameset> </html>
超链接不仅可以跳转到其他网页，也可以在本页内跳转 (也可称为书签(锚点)链接)。 在制作网页时，可能会出现网页内容比较长的情况，用 户浏览网页时会很不方便，利用锚点链接解决该问题。
2.4.3 超链接标记
创建页面内部链接(锚点链接) 要在当前页面内实现超链接，需要定义两个标记： 一个为超链接标记，另一个为书签标记。
3.7.2 用cols属性将窗口分为左右
<html > <head> <title>窗体分割</title> </head> <frameset cols="30%,*"> <frame /> <frame /> </frameset> </html> 注意： <frameset cols="30%,*">...</frameset>
授课教师：黄彩霞 Ewk.baidu.comMAIL：906037985@qq.com
复习
图像标记
<img src=“图像路径” alt=“替换文字” width=“图像 宽度” height=“图像高度”/>
列表标记
(1)有序列表 <ol type=“a” start=“3”> <li>苹果</li> <li>香蕉</li> <li>葡萄</li> </ol>
文字设置为超链接后，默认显示为加下划线的蓝色 字体；图像设置为超链接后，会自动加一个黑色的 边框。
2.4.3 超链接标记
超链接标记属性
（1）href属性：是<a>标记的最重要的属性，用来放置超链 接的目标地址，可以是本网站内部的某个HTML文件，也 可以是外部网站某个网页的URL地址。
2.4.3 超链接标记
复习
(3)列表之间的嵌套 (2)无序列表 <ol> <ul type=“square”> <li>华东地区 <li>苹果</li> <ul> <li>江苏部分</li> <li>香蕉</li> <li>浙江部分</li> <li>葡萄</li> </ul> </li> </ul>
<li>华北地区 <ul> <li>北京部分</li> <li>天津部分</li> </ul> </li>
2.4.3 超链接标记
创建图像的热点区域链接
创建图像的热点区域链接需要同时使用<img>、<map> 和<area>标记，下面分别对上面的代码进行解释。 （1）<map>标记用来定义图像映射，就是利用name属性 来定义带有可点击区域的图像。 （2）<img>标记除了使用src属性插入图像外，还要用 usermap属性引用图像映射的名称，创建图像与映射之间 的关系，属性值为<map>标记中name属性值前面再加 上“#”。
超链接标记属性
（3）title属性：设置鼠标经过超链接时显示的文字提示。 （4）name属性：指定元素的名称，可用于设置网页中的某个 位置（锚点）。
创建超链接的方式 超链接的文件可以是任意类型：.html 、 jpg、.word、.ppt、.zip等等。
例如： <a href = "chapter2/网页设计与制作.doc">下载word文档</a> <a href = "chapter2/网页设计与制作.ppt">下载ppt文档</a>
<frameset cols="300,*,*">...</frameset> <frameset cols="30%,2*,*">...</frameset> <frameset cols="*,*,*">...</frameset>
3.7.3 用rows属性将窗口分为上下
<html > <head> <title>窗体分割</title> </head> <frameset rows="30%,*"> <frame src="1.html" /> <frame src="2.html" /> </frameset> </html>
</ol>
复习
(4)定义列表
<dl> <dt> 名词1 </dt> <dd> 解释1</dd><dd> 解释2</dd> <dd> 解释3</dd> <dt> 名词2 </dt> <dd> 解释1</dd><dd> 解释2</dd> <dd> 解释3</dd> </dl> 注意：<dt>标记表示名词；<dd>标记表示对名 词的解释。
复习
多媒体标记
(1)<bgsound src="梁祝.mp3" loop=“-1“/> (2)<embed>…</embed> (3)<marquee>滚动的文字或图像</marquee>
2.4.3 超链接标记
HTML文件最重要的特性之一就是超链接，通过网 页上所提供的链接功能，用户可以链接到网络上的 其他网页。 如果网页上没有超链接，就不得不在浏览器地址栏 中一遍遍地输入各网页的URL地址了，这样也就无 法体现互联网的优点了。 在HTML语言中，利用<a>标记在网页中创建超链 接，一般语法格式如下： <a href = "URL" >超链接的文字或图像</a>
2.4.3 超链接标记
创建电子邮件链接
在某些网页中，单击某个超链接以后，会自动打开电子邮件 客户端软件，向某个特定的E-mail地址发送邮件。此类链接 类似于URL的链接方式，例如： 基本格式：<a href=“mailto:E-mail地址”>链接显示文字 </a>
2.4.3 超链接标记
创建页面内部链接
3.7.6 在框架之间进行链接
<html > <head> <title>窗体水平和垂直分割</title> </head> <frameset cols=“40%,*"> <frame src=“1.html” /> <frame src=“2.html” name=“名称”> </frameset> </html> 注意：如果在框架之间进行链接，就要为框架命名。 target=“名称”
如： href=“index.html” //index.html是本地当前路径下的文件 href=“web/index.html” href=“../index.html” href=“../../index.html”
如：http://wy.haust.edu.cn/jj/jigou.html
2.4.3 超链接标记
网页上的超链接有多种：文字链接、图片链接、页 面内部链接等等。
例如： <a href = "chapter2/2-5.html">链接到一个页面</a> <a href = "#">空链接</a> <a href = "#"><img src = “images/1.gif“ border=“0” /></a>
3.7.5 在框架中插入网页
<html > <head> <title>窗体水平和垂直分割</title> </head> <frameset cols=“40%,*"> <frame src=“1.html” /> <frame src=“2.html”/> </frameset> </html>
3.7框架之间的链接
3.7.1 建立框架与框架集
前面曾经介绍过<a>标记的target属性，但是没有详细介 绍，这是因为target属性必须和框架配合使用，因此这里 先对框架进行一些介绍，然后再演示框架与链接的关系。 框架集标记 <frameset> ... </frameset> 框架标记 <frame> 注意： <frameset> ... </frameset>标记与 <body>...</body>标记是同级的，进行替代。
URL(统一资源定位器)：每一个网页在互联网上都有唯一 的地址。 URL的格式
协议 文件夹名
http://www.artech.cn/study/index.htm
主机名
文件名
2.4.3 超链接标记
URL的类型：绝对URL和相对URL
相对URL的优点：当用户将包含所有文件的文件 夹整体迁移到不同的服务器或其他位置时，文件 之间的超链接仍可以正常链接。
2.4.3 超链接标记
创建图像的热点区域链接
所谓图像的热点区域就是将一幅图像划分出若干个链接 区域，当访问者单击不同的区域时，就会链接到不同的目标 页面。
2.4.3 超链接标记
创建图像的热点区域链接
在HTML中可以使用3种类型的热点区域：矩形、圆形 和多边形。 <img src="stars.jpg" border="0" usemap="#Map1"> <map name="Map1"> <area shape="rect" coords="23,28,111,81" href="#"> <area shape="circle" coords="187,57,33" href="#"> <area shape="poly" coords="271,12,321,23,321,80,275,87,251,49" href="#"> </map>
(1)用<a>标签的属性href的值来确定跳转的目标名称 即超链接标记的格式为： 如：<a href=“#目标名称”>链接文字</a> (2)设置相应的跳转目标位置(锚点)，即书签标记在<a>的 name属性中定义： 如：<a name=“目标名称”>链接目标文字</a>
注意：二者的目标名称必须一致。
2.4.7 浮动框架标记
浮动框架标记<iframe>用于创建“嵌入式框架”或浮动 框架，可以在窗口中再创建一个窗口并自由控制窗口的大 小，允许在一个网页中插入另一个网页。 使用时直接在HTML文档中插入<iframe>标记即可，一 个页面中可以插入多个浮动框架。 例如： <iframe src = "http://www.haust. edu.cn" width = "650" height = "280" name="ss“ frameborder=“0”> </iframe>
有如下目录结构：
My Web Default.htm lanqiu zgzs
Lqzs.html
tp.html
fy
Default.htm存在链接到qt.html的链接，那么超链接代码 如何写： <a href=“zgzs\fy\qt.html” >链接到qt</a> qt.html 存在链接到Default.htm的链接，那么超链接代 码如何写： <a href=“..\..\default.htm” >返回首页</a> ..表示返回上级目录。