對外、對內超連結: 使用KompoZer

利用超連結，可以對外連結到其他網頁，也可以在網頁內部跳躍移動。

使用超連結，我們必須常常站在讀者的立場想像要補充的資訊。

不要嫌麻煩，多多連結 互動是數位文本最重要的特色之一。而超連結這項功能，是互動文本特色最基本的運用。 讀者在閱讀過程中是否有什麼背景知識是不夠的，我們要用超連結功能來補充相關資訊。

 

★★對內、對外超連結HTML、CSS語法，以及「互動」基礎操作。click!　

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等等都可以。

---