Download presentation
Presentation is loading. Please wait.
1
6-1 認識超連結 超連結是網頁中少不了的元件，透過他才能將不同的網頁、網站相連，讓使用者可以在不同網站中瀏覽。而圖片、動畫等檔案，也是透過超連結的方式來呈現網頁中，所以底下讓我們來好好的認識超連結。
2
超連結的對象 當你要設定超連結時，首先要知道要連結的對象以及這個對象的路徑，這個對象可以是網站，也可以是圖片，隨著對象的不同路徑也有分別。
外部網站 該網站的網址 網頁 該網頁的網址 檔案或圖片 檔案的位址 電子郵件 電子郵件位址
3
超連結標籤文字的大小寫 在先前曾經說過，當你輸入HTML程式語法時，大小寫英文是沒有差異的，但當你輸入<A>標籤時就得注意這個問題。這是因為超連結是連到其他網站或伺服器，目前不少伺服器採用UNIX系統，而UNIX的檔案名稱中大小寫是有差異的，所以連結時就得注意到大小寫的問題，才不會發生錯誤。
4
超連結的種類 超連結隨著設定對象的不同，主要可分為三種，內部超連結、外部超連結和電子郵件超連結，內部超連結所連結的是網頁內部的文字或物件，例如當網頁文字過長時，會在網頁中加上書籤，讓使用者可以快速瀏覽到自己想看的內容，這就是內部超連結。
5
6-2 網頁超連結的設定 認識超連結的種類後，底下就來看看要如何利用HTML程式在網頁中建立各種不同的超連結，要在HTML文件建立超文字連結是使用<A>標籤。首先先來看看要如何建立外部超連結。
6
建立外部超連結 外部超連結主要是建立網站的連結，也就是當您點選文字後，會連到另一個網站，建立外部超連結時，所使用的為絕對路徑，所以在程式中必須要輸入完整的網址。這時當您點選「博碩文化」時會直接在同一個視窗中連結到博碩文化的網站。
7
建立內部超連結-網頁 當你製作網站時，一定少不了建立內部網頁的超連結，這樣網頁觀眾才能在從首頁中進入其他的網頁。底下來看看如何建立文字連結和圖片。 <body> 超連結文字,<a href="02.htm">請設定連結到另一個網頁</a> </body> 當你寫程式時，直接將超連結標籤<a>加入要設定的文字之前，而</a>則在設定的文字之後，被標籤包含的文字，就是超連結文字，。
8
建立同一個資料夾的檔案連結 底下讓我們使用實際的範例來說明要如何建立不同的超連結，先來看看建立同一個資料夾的檔案連結。請打開光碟中CH06的HTML資料夾中，裡面筆者準備了三個網頁，請先開啟檔案book.htm，來示範如何建立同一個資料夾的檔案連結。
9
建立不同資料夾的連結 再用同一個範例來示範如何建立不同資料夾的連結，要點選book.htm網頁中的「網路概論」時，會連結到NE20184.htm網頁，網頁是存放在temp資料夾下，這時程式碼會如下： <a href="../temp/NE20184.htm">網路概論</a>
10
設定文件的錨點超連結 在內部超連結中，還有一種連結經常被使用，稱為文件的錨點或是文件的書籤。在一個網頁中，可能包含了相當多的資訊，為了讓使用者可以清楚文件的內容，你會利用條列文字來排列資訊的重點。
11
建立 的連結 大部分的網頁都會建立和電子郵件信箱的連結，讓瀏覽網頁的使用者有意見時，可以直接發信給站長。 信箱也是屬於外部連結的一種，所以同樣得加上完整的電子郵件信箱位址，差異在於連結前面要加上「mailto:」這時才能自動開啟郵件程式，並且設定好收件人的位址。
12
6-3 超連結文字的變化 本節來看看超連結文字的各種變化，HTML程式碼中對超連結文字的設定不少，不過若配合CSS樣式會有更多的變化。
13
設定超連結文字不同狀態的色彩 當文字設定超連結後，文字會改成藍色底線的樣式，來標示這是超連結文字，這是預設的顯示方式，那能否變更超連結的色彩呢！當然可以囉，不過是在<BODY>標籤中設定。也就是這個色彩的設定會套用在整個網頁中，而非套用到個別的文字上。 在介紹<BODY>標籤時，有提及超連結的色彩屬性，底下就來看看要如何設定。在設定超連結的色彩時，有三種屬性可以設定，超連結色彩相關的屬性有三種，分別是： Link：指定尚未瀏覽的超連結文字色彩。 Vlink：已經瀏覽過的超連結文字色彩。 Alink：目前正被選取的超連結文字色彩。
14
替超連結加上說明文字 在不少軟體中當滑鼠游標移到工具列的圖示時，會出現說明文字，在超連結上也可以有同樣的設定，當滑鼠游標移到超連結時，會出現說明文字。設定的方式就是在標籤中加上屬性『TITLE』而屬性值就是要顯示的說明文字。
15
點選超連結文字時變更游標的形狀 瀏覽網頁時，當滑鼠游標超連結文字時換呈現手狀游標，表示所選取的物件為超連結。你是否有遇到過瀏覽網頁時，發現網頁的滑鼠游標呈現不同的形狀呢！這也可以透過程式來設定喔！透過STYLE這個屬性來設定。 值 游標形狀 Crosshair Default Help Move Text wait
16
超連結設定與#符號 當你在設定超連結時，有時不確定超連結的檔案或是網址，這時可以先用『#』符號代替超連結的對象，即使是輸入#符號，也會變更為超連結的狀態。
Similar presentations
