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