DW網(wǎng)頁(yè)設(shè)計(jì)-第6章 網(wǎng)頁(yè)鏈接_第1頁(yè)
DW網(wǎng)頁(yè)設(shè)計(jì)-第6章 網(wǎng)頁(yè)鏈接_第2頁(yè)
DW網(wǎng)頁(yè)設(shè)計(jì)-第6章 網(wǎng)頁(yè)鏈接_第3頁(yè)
DW網(wǎng)頁(yè)設(shè)計(jì)-第6章 網(wǎng)頁(yè)鏈接_第4頁(yè)
DW網(wǎng)頁(yè)設(shè)計(jì)-第6章 網(wǎng)頁(yè)鏈接_第5頁(yè)
已閱讀5頁(yè)，還剩17頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

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

<areashape="…"

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

溫馨提示

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

評(píng)論

0/150

提交評(píng)論