5.4 书签链接
教学录像:光盘\TM\lx\5\书签链接.exe
在浏览页面的时候,如果页面的内容较多,页面过长,浏览的时候需要不断拖动滚动条,很不方便,如果要寻找特定的内容,就更加不方便。这时如果能在该网页或另外一个页面上建立目录,浏览者只要单击目录上的项目就能自动跳到网页相应的位置进行阅读,这样无疑是最方便的事,并且还可以在页面中设定诸如“返回页首”之类的链接。这就称为书签链接。
建立书签链接分为两步,一是建立书签,二是为书签制作链接。
5.4.1 建立书签
书签可以与链接文字在同一页面,也可以在不同的页面。但是实现网页内部的书签链接,都需要先建立书签。通过建立书签才能对页面的内容进行引导和跳转。
语法
<A name="书签名称">文字</A>
语法解释
在该语法中,书签名称就是对于后面要跳转所创建的书签,而文字则是设置链接后跳转的位置。
【例5.4】实例代码。(实例位置:光盘\TM\sl\5\4)
<html> <head> <title>定义书签</title> </head> <body> <h3>性格测试:公园里看书测试你性格。</h3> <hr size="3" color="#FF0000" /> <a name="answerA">选择A:雷阵雨</a><br />  ;雷阵雨,是会淋湿书本、头发,令人感觉不太舒服的事物。故选此答案的人,是想回 避此种情况,显示是属于自我防卫本能比较强的人。你的不安比别人强一倍,对可能威胁到自我的危机相当敏感。 因此,一旦察觉自己身处危机的状况时,通常会力争上游、发挥潜力。倘若陷入低潮的话,也能化危机为转机, 及早摆脱困境。<br /><br /> <hr size="3" color="#FF0000" /> <a name="answerA">选择B:午睡</a><br />  ;午睡,显示乐观的潜在心理。此种人的循环性气质很强,容易受当场的气氛感染。一 旦感觉情绪低落时,可以借着运动、休闲来变换心情,或是改变工作、生活环境,让自己轻松一下。如此一来,便 能摆脱困境。重新出发。万一遇到极度低潮的状况,换个新工作或是改变根本的环境,都是不错的主意。<br /><br /> <hr size="3" color="#FF0000" /> <a name="answerA">选择C:改念别科</a><br />  ;改念别科,表示可能性或上进心。此种人原本提升自我的欲望就很强。因此,当陷入 低潮时,可以去找德高望重的人开导,不然就是阅读名人传记,接受精神上的刺激。因为这样可以激发上进心, 不会被一点小小的挫折击垮。<br /><br /> </body> </html>
在这段代码中,定义了3个书签,分别命名为answerA、answerB和answerC。运行这段代码,效果如图5.8所示。
图5.8 定义书签
可以看到,在浏览器中并不能看到定义的书签,但是它实际上已经存在了。此时就可以定义书签链接了。
5.4.2 链接到同一页面的书签
下面是可以为刚才制作的书签添加链接内容了。在代码的前面添加链接文字和链接地址就能够实现同页面的书签链接。
语法
<A href="#书签的名称">链接的文字</A>
语法解释
在该语法中,书签的名称就是刚才所定义的书签名,也就是name的赋值。而#则代表这是书签的链接地址。
【例5.5】实例代码。(实例位置:光盘\TM\sl\5\5)
<html> <head> <title>定义书签</title> </head> <body> <h3>性格测试:公园里看书测试你性格。</h3> 夏天,一位年轻人坐在公园的椅子上看书,看样子像是考生,只见他在看一本像是英文的参考书。突然,他合上 书本——你认为他为什么合上书本呢?请从以下几个备选答案中选一个与你想象中较接近的:<br /><br /> <a href="#answerA">A:雷阵雨</a><br /><br /> <a href="#answerB">B:午睡</a><br /><br /> <a href="#answerC">C:改念别科</a><br /><br /> <hr size="3" /> <a name="answerA">选择A:雷阵雨</a><br />  ;雷阵雨,是会淋湿书本、头发,令人感觉不太舒服的事物。故选此答案的人,是想回 避此种情况,显示是属于自我防卫本能比较强的人。你的不安比别人强一倍,对可能威胁到自我的危机相当敏感。 因此,一旦察觉自己身处危机的状况时,通常会力争上游、发挥潜力。倘若陷入低潮的话,也能化危机为转机, 及早摆脱困境。<br /><br /> <hr size="3" color="#FF0000" /> <a name="answerB">选择B:午睡</a><br />  ;午睡,显示乐观的潜在心理。此种人的循环性气质很强,容易受当场的气氛感染。一 旦感觉情绪低落时,可以借着运动、休闲来变换心情,或是改变工作、生活环境,让自己轻松一下。如此一来,便 能摆脱困境。重新出发。万一遇到极度低潮的状况,换个新工作或是改变根本的环境,都是不错的主意。<br /><br /> <hr size="3" color="#FF0000" /> <a name="answerC">选择C:改念别科</a><br />  ;改念别科,表示可能性或上进心。此种人原本提升自我的欲望就很强。因此,当陷入 低潮时,可以去找德高望重的人开导,不然就是阅读名人传记,接受精神上的刺激。因为这样可以激发上进心, 不会被一点小小的挫折击垮。<br /><br /> </body> </html>
运行这段代码,可以看到3个文字链接,如图5.9所示。
图5.9 建立书签和链接的页面效果
在页面中单击其中的一个链接文字,页面将会跳转到该链接的书签所在位置。如单击“A:雷阵雨”,跳转后的页面效果如图5.10所示。
图5.10 跳转的效果
单击页面中的“C:改念别科”,页面跳转到书签answerC所在的位置,如图5.11所示。
图5.11 跳转到书签所在位置
5.4.3 链接到不同页面的书签
书签链接不但可以链接到同一页面,也可以在不同页面中进行链接。
语法
<A href="链接的文件地址#书签的名称" >链接的文字</A>
语法解释
在该语法中,与同一页面的书签链接不同的是,需要在链接的地址前添加文件所在的位置。
下面设置一个单独的链接页面,使其链接到前面定义的书签页面。
【例5.6】实例代码。(实例位置:光盘\TM\sl\5\6)
<html> <head> <title>定义书签</title> </head> <body> <h3>性格测试:公园里看书测试你性格。</h3> &;夏天,一位年轻人坐在公园的椅子上看书,看样子像是考生,只见他在看一本像是英文的参考书。突 然,他合上书本——你认为他为什么合上书本呢?请从以下几个备选答案中选一个与你想象中较接近的:<br /><br /> <a href="5-6-1.html#answerA">选择A:雷阵雨</a><br /><br /> <a href="5-6-1.html#answerB">选择B:午睡</a><br /><br /> <a href="5-6-1.html#answerC">选择C:改念别科</a><br /><br /> </body> </html>
运行这段代码,效果如图5.12所示。
图5.12 运行效果
单击其中的某个链接,例如“C:改念别科”,就可以直接链接到书签所在的位置即5-6-1.html,如图5.13所示。
图5.13 链接的效果