DW網頁設計-第6章 網頁鏈接_第1頁
DW網頁設計-第6章 網頁鏈接_第2頁
DW網頁設計-第6章 網頁鏈接_第3頁
DW網頁設計-第6章 網頁鏈接_第4頁
DW網頁設計-第6章 網頁鏈接_第5頁
已閱讀5頁，還剩17頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

第6章網頁鏈接一個完整的網站，就是將許多頁面鏈接在一起，用戶通過網站的主頁查找網站中所有頁面，而網頁彼此之間的鏈接，則稱之為頁面的鏈接。這就像在書本中查找目錄的時候，在第一頁的目錄中找到所需資料的所在書頁，然后根據所在頁數翻找到此頁。而在網站中，用戶在頁面中選擇鏈接內容，頁面則會自動跳轉到所在的頁面。6.1網頁鏈接所謂的鏈接是指從一個頁面指向一個目標的鏈接關系，這個目標是多種樣式的，可以是一個網頁，也可以是相同網頁的不同位置，甚至可以是一張圖片、一個電子郵件地址、一個應用程序。當用戶單擊已經添加鏈接的頁面內容時，鏈接目標將顯示在瀏覽器上，并根據目標的類型來運行。6.1.1初識頁面鏈接在HTML文檔中，使用<a>標簽指引頁面中鏈接的目標點，讓設計者創(chuàng)建指向目標點的鏈接。在鏈接的屬性中，代碼的寫法為：<ahref=”鏈接對象的路徑”>鏈接錨點對象</a>用a來表示錨點，a也源自于英文中的anchor。href屬性意思是超文本引用，這個屬性的值指定了鏈接的目標路徑。6.1.2理解鏈接地址鏈接地址指的是鏈接到錨點對象的路徑，這個路徑所指的不僅僅只是一個頁面地址，也可能是一個文件地址、一個郵箱地址。那么，對于一個頁面的鏈接，該如何去定位這個鏈接對象的路徑呢？6.2鏈接的種種不同鏈接的分類有種種不同，使用的方法卻是大同小異，創(chuàng)建一個超鏈接很容易。事實上，設計者使用到的只有<a>標簽這樣的一個標簽而已。雖然鏈接的方法類似，但是其展示的形式卻自由多變，如鏈接的方式，鏈接指向何處等。而從使用者的角度來說，設計者最重要的是保持鏈接的友好性。6.2.1基本的文本鏈接文本的鏈接是頁面中最常見的鏈接形式，也是最基本的一種鏈接使用。一般文本鏈接中，最初文字上的超鏈接呈藍色，文字下面有一條下劃線，如果超鏈接已經被瀏覽過了，文本顏色就會發(fā)生改變，默認是紫色。6.2.2基本的圖像鏈接圖像鏈接的使用頻率和文本鏈接一樣高，設置圖像鏈接的方法和文本無異，在引用圖片的代碼前面先放入<a>標簽。代碼如下：<ahref="…"><imgsrc="…"></a>6.2.3把郵箱留給需要聯系你的人<a>標簽還可以鏈接電子郵箱地址。這是通過網頁讓使用者和設計者聯系的最方便的方法。當然，也可以直接在頁面中留下電子郵件地址，但是有時候為了突出友好性，不是直接留下地址，而是采用將郵箱鏈接到頁面內容上的方式，使用方法如下：<ahref=”mailto:郵箱地址”>鏈接錨點對象</a>6.2.4在同一頁面中快速查找信息頁面除了和頁面之外的文件或者程序鏈接外，還可以和同一頁面中的內容進行鏈接。這種情況通常用于導航，使瀏覽頁面的人直接可以跳到自己需要的信息版塊上。由于是在同一頁面內實現鏈接，也就是說，頁面鏈接的路徑就是在同一頁面內，所以在HTML語言中使用<a>標簽中的“id”屬性來確定路徑位置。6.2.4在同一頁面中快速查找信息通過以下兩個步驟可以理解這種代碼的用法。（1）要確定鏈接的錨點對象，不同于頁面和外部文件鏈接的方式在于，鏈接的路徑由于在同一頁面內，這里需要使用“#”來引用同一頁面中的內容。代碼寫為：<ahref=#...></a>（2）需要在頁面中設定出鏈接的目標。使用的就是id屬性。<aid=…>6.3提高頁面鏈接的友好度在設置了超鏈接的文本中，鏈接的內容都帶有下劃線，瀏覽過的字體也都是特定的顏色，始終給人千篇一律的感覺，而對于瀏覽者來說，這是一種不太舒服的感受。為了解決這些問題，使頁面展現出親和力的一面，設計者總是會用一些新穎的方法去改變鏈接的狀態(tài)。6.3.1美觀鏈接的狀態(tài)鏈接的狀態(tài)在頁面中是很顯眼的一部分，起到的作用舉足輕重，而鏈接的樣式是可以通過定義來修改的。在修改之前，首先要搞明白鏈接的過程，一個鏈接狀態(tài)，可以分解為以下4個步驟。（1）鏈接還未被訪問。（2）鏈接被選中時。（3）鼠標滑過鏈接。（4）鏈接被訪問后。6.3.1美觀鏈接的狀態(tài)使用HTML標簽屬性，通過添加link、alink和vlink來修改超鏈接文本的顏色。link屬性修改鏈接未訪問時的文本顏色，alink屬性修改鏈接被選中時候文本的顏色，vlink屬性修改鏈接被訪問后的文本顏色。6.3.1美觀鏈接的狀態(tài)【深入學習】這里是使用HTML標簽屬性來實現的功能，事實上這種舊方法并不值得推薦，更好的方法是使用CSS。除了結構性的標簽無法替代，如<body>、<p>，在表現性的作用上，應該習慣于避免使用標簽屬性的用法。而且CSS可以包含更多的屬性修改，實現自由度更大的修飾。接下來從CSS的角度來了解如何修改鏈接狀態(tài)。6.3.1美觀鏈接的狀態(tài)鏈接還未被訪問。a:link{…}鏈接被選中時。a:active{…}鼠標滑過鏈接。a:hover{…}鏈接被訪問后。a:visited{…}而在{}中通常添加兩個基本的屬性：color屬性修改文本的顏色，text-decoration選擇是否顯示下劃線。6.3.2奇妙特殊的鏈接方式6.3.1節(jié)中了解了通過使用CSS的方法可以去除鏈接默認的下劃線。本節(jié)將介紹2種新方法來改變下劃線的樣式。首先需要了解兩個屬性：border-bottom屬性和padding-bottom屬性。前者的意思是底部邊界，后者的意思是底部內邊。顧名思義，它們都是用來描述邊框性質的屬性。那么，這里的原理就是使用邊框屬性來替換掉原來的下劃線。6.3.2奇妙特殊的鏈接方式【深入學習】這里的dotted是點狀的意思，除此之外，CSS中還允許其他形狀的下劃線。其他的還有dashed（虛線）、double（雙線）、groove（槽線）、ridge（脊線）、inset（內陷）、outset（外陷），有興趣的讀者可以去嘗試一下。而padding-bottom屬性的作用可以引用自定義圖像來制定下劃線，技巧在于要細心地排版好下劃線和文本的距離，如實例6-11設計的自定義下劃線。6.3.3熱點圖像區(qū)域的鏈接所謂圖像熱點區(qū)域，就是指一個圖像中的某一區(qū)域。那么熱點圖像區(qū)域的鏈接，自然就是使用這一個區(qū)域作為超鏈接，就好像在一張地圖上，以其中某一區(qū)域作為超鏈接。所以，在代碼中也用到一個形象的標簽——<map>標簽。<map>標簽下，嵌入使用<area>標簽表明某一區(qū)域，其中有3個屬性值來確定這個區(qū)域，分別是shape屬性、coords屬性和href屬性。shape屬性：用來確定選區(qū)的形狀，分別是rect（矩形）、circle（圓形）和poly（多邊形）。coords屬性：用來控制形狀的位置，通過坐標來找到這個位置。href屬性：就是超鏈接。所以，將這些屬性運用在一起，這種方法的具體代碼寫法為：<mapid=…>

<areashape="…"

coords="…"href="…"></map>6.4在新窗口中顯示鏈接窗口在先前的所有鏈接中，頁面都是在同一頁面中跳轉，有時候設計者希望鏈接的頁面在新的窗口中打開，這時只要在<a>標簽中添加“target=_blank”就行了。6.5案例：制作普通鏈接的主頁在網頁上經常遇到這樣的鏈接功能：一個主頁上羅列很多名詞條目，每個條目鏈接著一個頁面，用來為專門的

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯系上傳者。文件的所有權益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網頁內容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經權益所有人同意不得將文件中的內容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網僅提供信息存儲空間，僅對用戶上傳內容的表現方式做保護處理，對用戶上傳分享的文檔內容本身不做任何修改或編輯，并不能對任何下載內容負責。
  • 6. 下載文件中如有侵權或不適當內容，請與我們聯系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

最新文檔

評論

0/150

提交評論