*YouTube 教學頻道* *影像布落格*
首頁
初學者技能教案專區
布落格寫作
數位影音專題寫作
西洋哲學史導讀
老子探義導讀
《論語》小談
flickr圖像集

2013年2月23日 星期六

對外、對內超連結: 使用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>

呈現:

要 按下去的地方。


最後總說明:

onclick 可以設置的物件,不只是span而己,任何編輯物件,例如div、img、 table等等都可以。





5 則留言:

  1. 老師你好
    請問KompoZer 中
    我用文字建立超連結時,可以直接設定目標,
    但用圖片建立超連結時,卻無法設定目標?
    除了直接修改原始碼內html外
    還有方法嗎?
    謝謝


    回覆刪除
    回覆
    1. 有,做了一個使用javascript的,你參考看看

      刪除
  2. 老師您好:
    一.文字或圖片超連結https://tw.yahoo.com,儲存瀏覽,視窗出現file:///k:/https//tw.yahoo.com,無法連結雅虎首頁,要如何改?

    回覆刪除
    回覆
    1. file:///k:/https//tw.yahoo.com
      這是指你電腦的檔案
      所以會連不出去

      刪除
  3. 文字或圖片超連結露天或蝦皮網頁,卻可以連結如蝦皮網頁https://shopee.tw/product/9421017/394580129/,不知原因何在?

    回覆刪除