網頁設計建立鏈接_第1頁
網頁設計建立鏈接_第2頁
網頁設計建立鏈接_第3頁
網頁設計建立鏈接_第4頁
網頁設計建立鏈接_第5頁
已閱讀5頁，還剩18頁未讀， 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

第3章

建立超級鏈接所謂的超鏈接是指從一個網頁指向一個目標的連接關系，這個目標可以是另一個網頁，也可以是相同網頁上的不同位置，還可以是一個圖片、一個電子郵件地址、一個文件，甚至是一個應用程序。而在一個網頁中用來超鏈接的對象，可以是一段文本或者是一個圖片。當瀏覽者單擊已經鏈接的文字或圖片后，鏈接目標將顯示在瀏覽器上，并且根據目標的類型來打開或運行。3.1超鏈接的概念合理安排超鏈接在網頁的制作中是非常重要的。采用什么結構的鏈接會直接影響到網頁的布局。建議：避免孤立文件的存在在網頁中避免使用過多的超鏈接網頁中的超鏈接不要超過4層頁面較長時可以使用書簽設置主頁或上一層的鏈接

合理安排超鏈接

URL（UniversalResourcesLocator）用于定位Web上的文檔信息。一個URL包括四部分：協(xié)議、計算機地址、端口號、文件路徑。協(xié)議：//計算機:端口號/文件路徑一個典型的URL為:

:80超鏈接基礎超鏈接基礎——絕對URL絕對URL常用于引用另一網絡服務器上的鏈接，它是指資源的完整地址，包括URL所有四個部分，即：協(xié)議：//計算機域名/路徑/文檔名超鏈接基礎——相對URL相對URL是指網站內部資源相對于當前頁面的地址，它包含從當前頁面指向目標頁面位置的路徑。如果要鏈接的資源位于當前文件夾中，就只要輸入文件名即可，如help.html。當要鏈接的資源不在當前文件夾時，則需要添加路徑信息。超鏈接基礎——相對URL要鏈接的資源位于下級文件夾時，需先輸入下級文件夾名，后跟一個“/”號，再輸入文件名，如content/computer.html。要鏈接的資源在上級文件夾或上級文件夾的其他下級文件夾中時，可使用“../”表示上級文件夾路徑，后面再跟上具體路徑信息。如../index.html，再如：../images/flower.jpg。超鏈接基礎——相對URL要鏈接的資源位于下級目錄時，需先輸入下級文件夾名，后跟一個“/”號，再輸入文件名，如content/computer.html。當要鏈接的資源不在當前文件夾時，則需要添加路徑信息。不同類型的超鏈接按照鏈接路徑的不同，網頁中超鏈接一般分為以下3種類型：內部鏈接：即在同一個站點內的不同頁面之間相互聯系的超鏈接。錨點鏈接：可以鏈接到網頁中某個特定位置的鏈接。外部鏈接：把網頁與Internet中的目標相聯系的鏈接。不同類型的超鏈接如果按照使用對象的不同，網頁中的鏈接又可以分為：文本超鏈接圖像超鏈接E-mail鏈接錨點鏈接多媒體文件鏈接空鏈接3.2HTML設置超鏈接文字超鏈接書簽鏈接文件（下載）鏈接Email鏈接超鏈接的顯示效果1）文本超鏈接標簽1．格式：

<ahref="鏈接位置"target="窗口名稱">超鏈接名稱</a>2．說明：①超鏈接名稱就是鏈接的源點，當鼠標被移到超鏈接名稱處時會變成手狀。②鏈接位置就是超鏈接的目標，可使用URL指定。URL的格式是由通訊協(xié)議、鏈接地址與文件位置所組成，語法如下：通訊協(xié)議://鏈接地址/文件位置.../文件名稱③target用于指定打開鏈接的目標窗口。Target屬性

<a>…</a>標記中的target屬性稱為目標屬性，用于指定新引用的資源顯示在哪一個窗口中。Target屬性取值分為以下兩種情況：如果需要新引用的頁面顯示在本窗口中，亦即復蓋當前頁面的內容，應該不為target屬性賦值。如果需要另開一個新窗口來顯示新引用的頁面，則可為target屬性賦值為:target=“windowname”。其中，target屬性取值為一個空窗口名“_BLANK”2）錨點(書簽)鏈接

使用頁面內的超鏈接，首先需要定義錨點，然后在超鏈接中指向該錨點。定義錨點應使用<aname=xxx></a>

指向錨點的超鏈接為：

<ahref=#xxx>link</a>錨點命名的注意事項①只能使用字母和數字，錨記命名不支持中文。雖然在插入錨記對話框中能輸入中文，但在屬性面板上顯示的則是一堆亂碼，且在為錨記添加鏈接的時候，也無法工作。②錨記名稱的第1個字符最好是英文字母，一般不要以數字作為錨記名稱的開頭。③錨記名稱區(qū)別英文字母的大小寫。④錨記名稱間不能含有空格，也不能含有特殊字符。鏈接錨記時，注意以下事項：①在#和錨記名之間不要留有空格，否則鏈接會失敗。②符號#必須是半角符號，而不能為全角符號。錨點鏈接指向其他頁面內錨點的超鏈接：<ahref=頁面的URL#該文件中的錨點>link</a><ahref=#>blanklink</a>各種常用超文本鏈接標記應用的實例<HTML><HEAD><TITLE>超文本鏈接標記實例</TITLE></HEAD><BODY>大<br>家<br>好<br> <aname="A1">跳轉錨記1。</a><br><br><br><br><br> 長<br>沙<br>理<br>工<br>大<br>學<br> <ahref=“a1.html”>點擊此處將跳轉到另一個網頁。</a><br> <ahref=“a1.html”target=“_blank”>點擊此處將在一個新的瀏覽器窗口打開另一個網頁。</a><br> <ahref="#A1">向前跳轉到錨記1。</a>、<ahref="#A2">向后跳轉到錨記2。</a> 計<br>算<br>機<br>與<br>通<br>信<br>工<br>程<br>學<br>院 <br><br><br><br> 長<br>沙<br>理<br>工<br>大<br>學<br> <aname="A2">錨記2。</a><br></BODY></HTML>3）文件下載

當超鏈接目標為瀏覽器不能識別的文件格式時，那么就自動生成了文件下載鏈接。<ahref=abc.zip>下載</a>4）Email鏈接<ahref=mailto:i@>Email</a>示例：<ahref=mailto:djs_mail@>請給我寫信</a>點擊“請給我寫信”將打開本地的電子郵件客戶端程序，方便用戶編寫電子郵件。5）超鏈接的顯示效果HTML文件中超鏈接文字顏色的設置，是由<body>標簽中的text、alink、vlink與link屬性所控制。其中：①text屬性：非可鏈接文字的顏色， 默認為黑色（Black）。②link屬性：可鏈接文字的顏色，默認為藍色(Blue)。③vlink屬性：已經被訪問過的可鏈接文字的顏色， 默認為粟色（Maroon）。④alink屬性：正被單擊的可鏈接文字的顏色， 默認為紅色(Red)。超鏈接的顯示效果示例示例：<HTML><HEAD><TITLE>超文本鏈接標記實例</TITLE></HEAD><BODYvlink=green>長沙理工大學<br> <aname="A1">跳轉錨記1。</a><br>長<br>沙<br>理<br>工<br>大<br>學<br><br><br><br><br><br><ahref=“a1.html”>在本窗口中打開一個新網頁</a><br><ahref=“a1.html”target=“_blank”>在新窗口中打開一個網頁</a><br><ahref=“#A1”>向前跳轉到錨記1。</a>、

<ahref="#A2">向后跳轉到錨記2。</a> <br><br><br><br><br><br><br><br><br

溫馨提示

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

評論

0/150

提交評論