網(wǎng)頁設(shè)計超鏈接_第1頁
網(wǎng)頁設(shè)計超鏈接_第2頁
網(wǎng)頁設(shè)計超鏈接_第3頁
網(wǎng)頁設(shè)計超鏈接_第4頁
網(wǎng)頁設(shè)計超鏈接_第5頁
已閱讀5頁，還剩36頁未讀， 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

網(wǎng)頁設(shè)計超鏈接第一頁，共四十一頁，編輯于2023年，星期三第四課超鏈接學習目標超鏈接概述鏈接路徑內(nèi)部鏈接建立外部鏈接建立錨點鏈接圖像鏈接圖像映射2第二頁，共四十一頁，編輯于2023年，星期三超鏈接概述鏈接是超文本的“超”的部分，鏈接，又稱位置點anchor，將文本或圖形標識指向其他文檔、圖形、小程序、多媒體效果或文檔中特定位置。3第三頁，共四十一頁，編輯于2023年，星期三超級鏈接4<HTML><HEAD><TITLE>有趣的動物</TITLE></HEAD><BODY><H1>會彈琴的狗狗</H1><AHREF=“dog.htm”>單擊此處查看</A></BODY></HTML>第四頁，共四十一頁，編輯于2023年，星期三超鏈接概述鏈接是超文本的“超”的部分，鏈接，又稱位置點anchor，將文本或圖形標識指向其他文檔、圖形、小程序、多媒體效果或文檔中特定位置。鏈接由以下兩個部分構(gòu)成：位置點標簽<a>，將文本或圖形標識為鏈接屬性href，用于指定要鏈接的文件標簽<A>的常用屬性

href：指定鏈接地址name：給鏈接點命名target：指定鏈接的目標窗口——_self、_blank、_top、_parent5第五頁，共四十一頁，編輯于2023年，星期三6.2超鏈接的路徑一個網(wǎng)站的多個頁面之間的關(guān)系都是通過超鏈接實現(xiàn)的，每個頁面都有一個存放位置和路徑，了解一個文件與另一個文件之間的路徑關(guān)系對建立超鏈接而言是非常重要的。在HTML文件中提供了三種路徑：絕對路徑、相對路徑和根路徑6第六頁，共四十一頁，編輯于2023年，星期三絕對和相對路徑名7要鏈接到另一目錄(C:\example)下的頁面，可編寫<AHREF=“..\example\Doc2.htm”>或

<AHREF=“C:\example\Doc2.htm”>要鏈接到同一目錄(C:\html)下的頁面，可編寫<AHREF=“Doc3.htm”>或<AHREF=“C:\html\Doc3.htm”>C:\html目錄C:\example目錄Doc1.htmDoc3.htmDoc2.htmDoc4.htm絕對路徑名相對路徑名第七頁，共四十一頁，編輯于2023年，星期三設(shè)置絕對路徑絕對路徑是指文件的完整路徑，即在進行超鏈接時使用了URL，例如：/index.php/teach/index.php絕對路徑通常會在網(wǎng)站的友情鏈接中使用8第八頁，共四十一頁，編輯于2023年，星期三6.2.2設(shè)置相對路徑相對路徑是指相對于當前文件的路徑，即由當前文件如何找到目標文件。采用相對路徑是建立兩個文件之間的相對關(guān)系，可以不受站點和所處服務(wù)器位置的影響。相對路徑的使用方法：同一目錄：輸入要鏈接的文件名稱即可上一級目錄：輸入“../文件名”下一級目錄：輸入“目錄名/文件名”對于圖片文件而言，上面內(nèi)容同樣適用。9第九頁，共四十一頁，編輯于2023年，星期三6.2.3使用根路徑根路徑的設(shè)置也適合內(nèi)部鏈接的建立，一般情況下不使用根路徑，根路徑以/開頭，后面跟隨文件所在位置的詳細路徑。例如文件znlj.jpg的根路徑為

/example/ch06/image/znlj.jpg使用根路徑明顯增加了代碼的復(fù)雜程度在動態(tài)網(wǎng)頁技術(shù)(ASP，JSP,PHP等)中通常會設(shè)置全局常量保存重要目錄，方便訪問相關(guān)文件，$image+“/catelog/bags/p1.jpg”10第十頁，共四十一頁，編輯于2023年，星期三實例演練第十一頁，共四十一頁，編輯于2023年，星期三images/logo.gif../images/logo.gifgenres/rock/pinkfloyd.html實例演練第十二頁，共四十一頁，編輯于2023年，星期三錨點鏈接錨點鏈接是指點擊鏈接后跳轉(zhuǎn)到同一文檔的不同部分，鏈接的目標點必須定義為錨標記。<a>標簽中的NAME

屬性用于創(chuàng)建錨標記<ANAME=“marker”>主題名稱</A>為達到這種跳轉(zhuǎn)效果，需在HREF參數(shù)中使用該標記<AHREF=“#marker”>熱點文字</A>

13第十三頁，共四十一頁，編輯于2023年，星期三鏈接到同一文檔的某個部分2-1錨記標簽用于使用戶“跳”到文檔的某個部分HTML的NAME

屬性用于創(chuàng)建錨標記

為達到這種跳轉(zhuǎn)效果，請在HREF參數(shù)中使用該標記14<ANAME=“marker”>主題名稱</A><AHREF=“#marker”>主題名稱</A>第十四頁，共四十一頁，編輯于2023年，星期三鏈接到同一文檔的各個部分2-215...<BODY><AHREF=#Lion>獅子</A><BR><AHREF=#Zebra>斑馬</A><BR><AHREF=#Cheetah>印度豹</A><BR><ANAME=Lion>獅子</A><P>獅子的吼聲從八公里之外就能聽到！雄獅（很容易從鬃毛識別出雌雄）的重量達250公斤。而雌獅則要輕得多，只有180公斤。<BR><ANAME=Zebra>斑馬</A><P>沒有任何兩匹斑馬的斑紋完全一樣，因此每匹斑馬都是獨一無二的。斑馬也稱為黑白條紋相間的馬......第十五頁，共四十一頁，編輯于2023年，星期三19.1.8設(shè)置圖片鏈接——<a>基本語法<ahref=”URL”target=”目標窗口的打開方式”><imgsrc=”圖片地址”></a>語法說明href屬性是用來設(shè)置圖片的鏈接地址URL，target屬性用來設(shè)置目標窗口的打開方式img標記中還可以添加其他的屬性，如height、hspace、border等。第十六頁，共四十一頁，編輯于2023年，星期三19.1.8設(shè)置圖片鏈接——<a>實例代碼第十七頁，共四十一頁，編輯于2023年，星期三19.1.8設(shè)置圖片鏈接——<a>網(wǎng)頁效果第十八頁，共四十一頁，編輯于2023年，星期三19.1.9設(shè)置圖片熱區(qū)鏈接基本語法<imgsrc=”圖片地址”usemap=”#映射圖片名稱”>熱區(qū)鏈接屬性的定義如下：<mapname=”映射圖片名稱”><areashape=”熱區(qū)形狀”coords=”熱區(qū)坐標”href=”URL”></map>第十九頁，共四十一頁，編輯于2023年，星期三19.1.9設(shè)置圖片熱區(qū)鏈接語法說明<img>標記用來插入圖片和引用映射圖片名稱，即用usemap屬性來引用在<map>標記中所定義的映射圖片名稱，并且要在名稱前加上#號。<map>標記只有一個name屬性，用來定義映射圖片的名稱。<area>標記有三個屬性，shape屬性、coords屬性和href屬性。shape屬性用來定義熱區(qū)的形狀，又有3個屬性值，具體取值見表19-2coords屬性用來定義熱區(qū)的坐標，不同的形狀其coords屬性的設(shè)置方式也不同，具體可以參見表19-3href屬性，用來定義超鏈接的目標地址。第二十頁，共四十一頁，編輯于2023年，星期三19.1.9設(shè)置圖片熱區(qū)鏈接表19-2shape屬性取值說明表19-2shape屬性取值說明第二十一頁，共四十一頁，編輯于2023年，星期三19.1.9設(shè)置圖片熱區(qū)鏈接示例<imgsrc=“19-1-9.jpg”border=0usemap=“#hh”><mapname=“hh”><areashape=“rect”coords=“60,50,100,95“href=“19-1-8-2.html”>選擇矩形熱區(qū)</map>手形所在的矩形區(qū)域就是定義好的熱區(qū)鏈接。通過單擊該區(qū)域即可打開鏈接地址19-1-8-2.html第二十二頁，共四十一頁，編輯于2023年，星期三19.1.9設(shè)置圖片熱區(qū)鏈接示例<imgsrc="19-1-9.jpg"border=0usemap="#hh"alt="插入圖片"><mapname="hh"><areashape="rect"coords="60,50,100,95"href="19-1-8-2.html"alt="荷花"></map>第二十三頁，共四十一頁，編輯于2023年，星期三廈大漳州校區(qū)地圖/gcampus/index.html#第二十四頁，共四十一頁，編輯于2023年，星期三廈大漳州校區(qū)地圖/gcampus/index.html#第二十五頁，共四十一頁，編輯于2023年，星期三中國地圖<imgsrc="chinamap.gif"width="654"height="520"border="0"usemap="#Map"alt="chinamap"/><mapname="Map"id="Map"><areashape="poly"coords="504,363,502,366,498,369,494,368,492,366,489,366,489,370,489,375,489,378,486,380,483,383,480,385,480,388,480,393,479,399,477,401,476,406,476,409,474,412,475,413,479,413,482,413,484,414,488,418,489,421,489,425,490,429,493,429,498,424,499,419,503,416,506,414,509,411,511,407,515,405,516,402,518,399,520,398,520,393,515,392,515,389,517,389,519,386,519,383,519,381,522,381,525,378,526,374,527,372,523,372,522,372,520,372,520,369,518,369,516,371,516,374,513,374,511,372,510,369,505,365,503,361"href="/view/2812.htm"alt="福建"/></map>第二十六頁，共四十一頁，編輯于2023年，星期三電子郵件鏈接用戶可從網(wǎng)頁發(fā)送電子郵件27<HTML><HEAD><TITLE>海豚</TITLE></HEAD><BODY><H3>充分交流，密切配合</H3><BR><P>據(jù)說，海豚的交流模式幾乎與人類的一樣復(fù)雜！<BR><BR><AHREF="mailto:thisperson@">請將您的疑問發(fā)送至DavidFernandez</A></BODY></HTML>第二十七頁，共四十一頁，編輯于2023年，星期三下載鏈接在圖象、文字鏈接的地方，將壓縮文件做為鏈接地址腳本鏈接：javascript:window.close()第二十八頁，共四十一頁，編輯于2023年，星期三作業(yè)制作頁面-continent/index.html體現(xiàn)以下技術(shù)的幾種：內(nèi)部鏈接建立外部鏈接建立錨點鏈接圖像鏈接圖像映射29第二十九頁，共四十一頁，編輯于2023年，星期三框架廣告欄

頂部框架(top.htm)商品詳細介紹

右側(cè)框架

(main.htm)商品導(dǎo)航左側(cè)框架

(left.htm)第三十頁，共四十一頁，編輯于2023年，星期三為何使用框架在另一個固定部分顯示導(dǎo)航部分在頁面的一個固定部分顯示徽標或靜態(tài)信息在此處顯示主要內(nèi)容。

站點中只有此部分是變化的。第三十一頁，共四十一頁，編輯于2023年，星期三329.1框架概述框架用于將瀏覽器窗口劃分為若干個區(qū)域，每個區(qū)域可以分別顯示不同的頁面內(nèi)容；另外框架可以方便地進行網(wǎng)頁的導(dǎo)航。框架集框架主要包括兩部分：框架集和框架?？蚣芗窃谝粋€文檔內(nèi)定義一組框架結(jié)構(gòu)的HTML網(wǎng)頁，它定義了在一個窗口中顯示的框架數(shù)、框架的尺寸和載入到框架中的網(wǎng)頁等框架指在網(wǎng)頁上定義的一個顯示區(qū)域。第三十二頁，共四十一頁，編輯于2023年，星期三33框架集語法及屬性<html><head>…</head><framesetcols||rows=“”framespacing=“”bordercolor=“”><framesrc=“頁面文件名稱”><framesrc=“頁面文件名稱”></frameset></html><frameset>標簽屬性如下：Cols：將窗口縱向劃分為幾個框架Rows：將窗口橫向劃分為幾個框架Framespacing：設(shè)置框架邊框之間的間隔距離，默認0Bordercolor：設(shè)置框架邊框顏色（設(shè)置的是間距顏色）注意：在框架集頁面代碼中不要使用<body>標簽，即<frameset>與<body>不同時使用第三十三頁，共四十一頁，編輯于2023年，星期三34補充例題將窗口分割成左右兩部分，左面占據(jù)20%，框架邊框間距為4像素，顏色為紅色（3-8.htm）（若是上下分割呢？）代碼如下：<html><head><title>框架的應(yīng)用</title></head><framesetrows="190,*"bordercolor=redframespacing=4><frame><frame></frameset></html> 此處指定上側(cè)框架窗口為190px，*代表剩下的寬度第三十四頁，共四十一頁，編輯于2023年，星期三35框架的設(shè)置完成窗口分割后，需要對分割出來的每個子窗口進行控制，相應(yīng)的屬性在<frame>標簽中設(shè)置，主要屬性如下：

src：設(shè)置子窗口中要顯示的頁面的路徑和名稱

name：設(shè)置子窗口的名稱frameborder：設(shè)置邊框?qū)挾龋ǔ⑵湓O(shè)置為0

scrolling：設(shè)置是否顯示滾動條，取值有yes、no、auto（默認）

noresize：禁止改變子窗口大小marginwidthmarginheight第三十五頁，共四十一頁，編輯于2023年，星期三36Src屬性應(yīng)用舉例<html><head><title>框架應(yīng)用</title></head><framesetcols="190,*"><framesrc=navigation.html><framesrc=main.html></frameset></html>第三十六頁，共四十一頁，編輯于2023年，星期

溫馨提示

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

評論

0/150

提交評論