利用超連結,可以對外連結到其他網頁,也可以在網頁內部跳躍移動。
使用超連結,我們必須常常站在讀者的立場想像要補充的資訊。 |
不要嫌麻煩,多多連結
互動是數位文本最重要的特色之一。而超連結這項功能,是互動文本特色最基本的運用。讀者在閱讀過程中是否有什麼背景知識是不夠的,我們要用超連結功能來補充相關資訊。 |
KompoZer超連結影音教學:
影音內容說明:
一、對外連結時,可以多想一下是不是要在另一個新視窗來開啟。
二、對內部連結時,多想一下跳躍點要出現在視窗的位置。可以適時調整放「錨點」的位置。
一、學生愛用的互動式「回到頁首」對內連結:
浮動的導覽列: 〈回到頁首〉click here。
二、互動式對內跳躍連結:使用 Javascript
網路組建議對內互動式跳躍連結。使用詳細說明, click here。
快速語法使用:
要跳至的連結目的編輯物件,請設id。例如:
<div id="a01ex">xxx</div>
要按下去的編輯物件,請設如下語法:onclick=" document.location='#a01ex'; "
例如,
<span onclick=" document.location='#a01ex';" style="cursor: pointer; text-decoration: underline; ">我要按下去的文字,會跳到上面指定地點。</span><br>
呈現:
我要按下去的文字,會跳到上面指定地 點。
三、使用javascript的對外超連結
語法:
onclick="javascript:window.open(' 對外網頁網址 ', '_blank')"
語法使用範例:
<span style="cursor: pointer; text-decoration: underline;" onclick="javascript:window.open(' http://lmcmultimedia.blogspot.tw/p/blog-page_5627.html ', '_blank')">這是文字,按下去,會跳到對外頁面。</span>
呈現:
這 是文字,按下去,會跳到對外頁面。
四、滑動式互動效果的對內超連結:使用jquery
語法:
要跳至的連結目的編輯物件,請設id。
onclick=" $('html, body').animate({scrollTop: $('#目標物的-id').offset().top}, 1000); "
語法使用範例:
<div id="a01ex">目標編輯物</div>
<span style="text-decoration: underline; cursor: pointer;" onclick=" $('html, body').animate({scrollTop: $('#a01ex').offset().top}, 1000); ">要按下去的地方。</span>
呈現:
要 按下去的地方。
補充:
animate({scrollTop: $('#目標物的-id').offset().top -100}, // 向上延伸100px // +100 向下
最後總說明:
onclick 可以設置的物件,不只是span而己,任何編輯物件,例如div、img、 table等等都可以。