理论教育 框架间链接的设计与制作

框架间链接的设计与制作

时间:2023-11-04 理论教育 版权反馈
【摘要】:在网页设计中,常需要在一个框架中显示文档目录,当单击某目录名时,则会在另一个框架中显示相应的具体内容。这时目录就是热点文本,需要在框架之间建立超链接,并指明显示的目标文件的框架。target="_parent":当框架嵌套时,链接的目标文件显示在父框架中;否则显示在整个浏览器窗口中。图6-14框架间的链接框架说明文件ex6-13.html的内容为:<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Frameset//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type"content="text/html;charset=gb2312"/><title>框架间的链接</title></head><frameset rows="20%,*"><frame src="ex6-13-top.html"name="top"/><!

框架间链接的设计与制作

在网页设计中,常需要在一个框架中显示文档目录,当单击某目录名时,则会在另一个框架中显示相应的具体内容。这时目录就是热点文本,需要在框架之间建立超链接,并指明显示的目标文件的框架。

通过将<frame>中的name="框架名"与<a>中的target="框架名”相联系,用<a>中的target属性就可以控制目标网页在哪个框架内显示。当单击链接时,目标网页就会出现在指定的框架内。其格式为:

<a href="目标文件名.html"target="框架名">超链接显示文本</a>

说明:“框架名”有4个特殊的值,分别实现4类特殊的操作:

(1)target="_blank":链接的目标文件显示在一个新的未命名的浏览器窗口中。

(2)target="_self":链接的目标文件显示在当前框架窗口中,代替正在显示的热点文本所在的那个文件,此为默认值。

(3)target="_top":链接的目标文件显示在整个浏览器窗口中(取消了框架)。

(4)target="_parent":当框架嵌套时,链接的目标文件显示在父框架中;否则显示在整个浏览器窗口中。

【例6-13】如图6-14所示,建立框架间的链接。

本例需要编写4个HTML文件,分别为框架说明文件、上侧框架文件、右侧框架文件和左侧框架文件。

图6-14 框架间的链接

框架说明文件ex6-13.html的内容为:

<!--文件名:ex6-13.html-->

<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Frameset//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type"content="text/html;charset=gb2312"/>

<title>框架间的链接</title>

</head>

<frameset rows="20%,*">

<frame src="ex6-13-top.html"name="top"/><!--上侧窗格-->

<frameset cols="20%,*">

<frame src="ex6-13-left.html"name="left"/><!--左侧窗格-->

<frame src="ex6-13-right.html"name="right"/><!--右侧窗格-->

</frameset>

</frameset>

</html>

上侧框架文件ex6-13-top.html的内容为:

<!--文件名:ex6-13-top.html-->

<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type"content="text/html;charset=gb2312">/

<title>TOP框架内容</title>

</head>

<body>

<h3 align="center">《网页制作》课程第4章示例</h3>

<a href="ex4-1.html"target="right">【例4-1】</a>  <!--在右侧窗格中显示-->(www.daowen.com)

<a href="ex4-2.html"target="right">【例4-2】</a>  

<a href="ex4-3.html"target="left">【例4-3】</a>  <!--在左侧窗格中显示-->

<a href="ex4-4.html"target="_blank">【例4-4】</a>  

<a href="ex4-5.html"target="_top">【例4-5】</a>  <!--单击“后退”按钮返回-->

<a href="ex4-6.html"target="top">【例4-6】</a><br/><!--在上侧窗格中显示-->

</body>

</html>

左侧框架文件ex6-13-left.html的内容为:

<!--文件名:ex6-13-left.html-->

<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type"content="text/html;charset=gb2312"/>

<title>LFFT框架内容</title>

</head>

<body>

<h3 align="center">第5章示例</h3>

<a href="ex5-1.html"target="right">【例5-1】</a><br/>

<a href="ex5-2.html"target="_self">【例5-2】</a><br/><!--在当前窗格中显示-->

<a href="ex5-3.html"target="_parent">【例5-3】</a><br/>

<a href="ex5-4.html"target="_blank">【例5-4】</a><br/><!--打开新的浏览器窗口-->

<a href="ex5-5.html"target="top">【例5-5】</a><br/><!--在上侧窗格中显示-->

<a href="ex5-6.html"target="left">【例5-6】</a><br/>

</body>

</html>

右侧框架文件ex6-13-right.html的内容为:

<!--文件名:ex6-13-right.html-->

<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type"content="text/html;charset=gb2312"/>

<title>RIGHT框架内容</title>

</head>

<body>

<h3 align="center">初始内容</h3>

</body>

</html>

免责声明:以上内容源自网络,版权归原作者所有,如有侵犯您的原创版权请告知,我们将尽快删除相关内容。

我要反馈