㊣傲楓曰：超連結不會用就慘了。 






  

    超連結的標籤 
    ： 

      

        

　何謂超連結呢？就是滑鼠游標放上去會變成手指，按下去會連到新
　的網頁，這個東東就是超連結。

　其實超連結不只可以連到網頁，還可以連結 ftp、e-mail，這部分
　我們稍後再介紹。


<a href="xxx.html">文字敘述</a>
　文字敘述就是用來告訴別人，這個超連結連到何處。
　而xxx.html處，則是填入網頁的位置。

　這牽涉到絕對位置跟相對位置的問題，大家一定要到位置設定看看
　，因為這太重要了。我們這個例子是用絕對位置的方式寫的。




寫法顯示


<a href="http://www.kimo.com.tw/">奇摩站</a>奇摩站



　
　

　文字敘述的部分還可以用圖片來代替，這就是網頁中按鈕的道理。




寫法顯示


<a href="http://www.microsoft.com/taiwan">
<img src="ie.gif" alt="到暈倒總部"></a>		到暈倒總部






　大家有沒有發現，按鈕的旁邊有一層框線，要讓這個框線消失嗎？
　只要在<img>後面加上border="0"這個屬性就可以了。




寫法顯示


<a href="http://www.microsoft.com/taiwan">
<img src="ie.gif" alt="到暈倒總部" border="0"></a>		到暈倒總部





        		
      

    

    		
  














  

    內部連結 
    ： 

      

        
  
　當你的某一頁內容太多了，瀏覽者往往會因為懶得捲動捲軸，而放
　棄繼續看下去，所以我們可以在這一頁，做一些超連結，直接連到
　這一頁的某一個地方。


　首先我們將欲連結處定義起來。
<a name="point">欲連結處</a>


　想用一個超連結連到此處，連結的寫法只要在前面多加一個 #。
<a href="#point">連到欲連結處</a>


　完整範例


　還有用這個方法要注意，必須有去有回，例如你從最上面跳到最下
　面，之後瀏覽者想回去，那還是要動用到捲軸，所以貼心的你，必
　須在最下面的地方也做一個超連結連回去，大家去看看我的免費資
　源，就是這樣做的。

        		
      

    

    		
  














  

    網頁開啟位置 
    ： 

      

        

　target是超連結屬性中相當重要的，它決定了你按下超連結後，新
　網頁開啟的位置。寫法：

<a href="xxx.html" target="??">文字敘述</a>

　??可以換成_blank、_parent、_self、_top


target="_blank"
　使連結的畫面內容，在新視窗中開啟。

 
target="_parent"
　使連結的畫面內容，當成文件的上一個畫面。

 
target="_self"
　使連結的畫面內容，顯示在目前的框架中。(預設值)


target="_top"
　將瀏覽器的畫面全部清掉之後，再貼上連結的畫面內容，也就是可
　以去除原來的框架。


        		
      

    

    		
  














  

    連結的其他功能 
    ： 

      

        

　　別忘了，超連結不只是能連到網頁而已，其他功能如下表




          

            <a href="kitty.gif">kitty貓</a>
<a href="note.txt">重要記事</a>		
            連到圖檔、文字檔等
          

          

            <a href="gopher://gopher.hinet.net/">hinet</a>
            可以連到gopher系統。
          

          

            <a href="ftp://ftp.hello.com.tw/">地下ftp</a>
            可以連到ftp站台。
          

          

            <a href="news:news.dj.net.tw">大至新聞</a>
            可以連到新聞群組。
          

          

            <a href="mailto:lala@com.tw">寫信給傲楓</a>
            可以連結電子郵件。
          

          

            <a href="telnet://140.112.253.222">心情小築</a>
            可以連結bbs站台。
          

        

        

      

    

    		
  














  

    預設超連結樣式 
    ： 

      

        

　大家應該記得，在第二章的時候，我們曾經利用<body>中的屬性
　link、alink、vlink來控制超連結的顏色，我現在來介紹一個更
　炫的。

<style>
<!--
a {text-decoration:none;color:#8080ff}
a:hover {text-decoration:underline;color:#ff9900}
// -->
</style>

　這是一種CSS的排版方法，加在<head>和</head>之間，讓我們來
　慢慢說明。

a {} 
　這個括弧裡的設定是滑鼠還沒有放上超連結時，超連結的樣式，
　none代表不加底線， color裡面的色碼是超連結的顏色。變換這
　些色碼，可自行設定顏色。


a:hover {}
　這個括弧裡的設定是滑鼠放上超連結時，超連結的樣式，
　underline代表加底線，色碼當然是滑鼠放上後超連結的顏色。


a:visited {}
　這個括弧裡的設定是代表按過此超連結後，超連結的樣式。

　詳情亦可參考敝站的CSS教學。

        		
      

    

    		
  










回上一章　圖像之美　　　　　　到下一章　水平線條