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

下載本文檔

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

文檔簡介

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

href：指定鏈接地址name：給鏈接點命名target：指定鏈接的目標(biāo)窗口——_self、_blank、_top、_parent5第5頁，課件共41頁，創(chuàng)作于2023年2月6.2超鏈接的路徑一個網(wǎng)站的多個頁面之間的關(guān)系都是通過超鏈接實現(xiàn)的，每個頁面都有一個存放位置和路徑，了解一個文件與另一個文件之間的路徑關(guān)系對建立超鏈接而言是非常重要的。在HTML文件中提供了三種路徑：絕對路徑、相對路徑和根路徑6第6頁，課件共41頁，創(chuàng)作于2023年2月絕對和相對路徑名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絕對路徑名相對路徑名第7頁，課件共41頁，創(chuàng)作于2023年2月設(shè)置絕對路徑絕對路徑是指文件的完整路徑，即在進(jìn)行超鏈接時使用了URL，例如：/index.php/teach/index.php絕對路徑通常會在網(wǎng)站的友情鏈接中使用8第8頁，課件共41頁，創(chuàng)作于2023年2月6.2.2設(shè)置相對路徑相對路徑是指相對于當(dāng)前文件的路徑，即由當(dāng)前文件如何找到目標(biāo)文件。采用相對路徑是建立兩個文件之間的相對關(guān)系，可以不受站點和所處服務(wù)器位置的影響。相對路徑的使用方法：同一目錄：輸入要鏈接的文件名稱即可上一級目錄：輸入“../文件名”下一級目錄：輸入“目錄名/文件名”對于圖片文件而言，上面內(nèi)容同樣適用。9第9頁，課件共41頁，創(chuàng)作于2023年2月6.2.3使用根路徑根路徑的設(shè)置也適合內(nèi)部鏈接的建立，一般情況下不使用根路徑，根路徑以/開頭，后面跟隨文件所在位置的詳細(xì)路徑。例如文件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第10頁，課件共41頁，創(chuàng)作于2023年2月實例演練第11頁，課件共41頁，創(chuàng)作于2023年2月images/logo.gif../images/logo.gifgenres/rock/pinkfloyd.html實例演練第12頁，課件共41頁，創(chuàng)作于2023年2月錨點鏈接錨點鏈接是指點擊鏈接后跳轉(zhuǎn)到同一文檔的不同部分，鏈接的目標(biāo)點必須定義為錨標(biāo)記。<a>標(biāo)簽中的NAME

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

13第13頁，課件共41頁，創(chuàng)作于2023年2月鏈接到同一文檔的某個部分2-1錨記標(biāo)簽用于使用戶“跳”到文檔的某個部分HTML的NAME

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

為達(dá)到這種跳轉(zhuǎn)效果，請在HREF參數(shù)中使用該標(biāo)記14<ANAME=“marker”>主題名稱</A><AHREF=“#marker”>主題名稱</A>第14頁，課件共41頁，創(chuàng)作于2023年2月鏈接到同一文檔的各個部分2-215...<BODY><AHREF=#Lion>獅子</A><BR><AHREF=#Zebra>斑馬</A><BR><AHREF=#Cheetah>印度豹</A><BR><ANAME=Lion>獅子</A><P>獅子的吼聲從八公里之外就能聽到！雄獅（很容易從鬃毛識別出雌雄）的重量達(dá)250公斤。而雌獅則要輕得多，只有180公斤。<BR><ANAME=Zebra>斑馬</A><P>沒有任何兩匹斑馬的斑紋完全一樣，因此每匹斑馬都是獨一無二的。斑馬也稱為黑白條紋相間的馬......第15頁，課件共41頁，創(chuàng)作于2023年2月19.1.8設(shè)置圖片鏈接——<a>基本語法<ahref=”URL”target=”目標(biāo)窗口的打開方式”><imgsrc=”圖片地址”></a>語法說明href屬性是用來設(shè)置圖片的鏈接地址URL，target屬性用來設(shè)置目標(biāo)窗口的打開方式img標(biāo)記中還可以添加其他的屬性，如height、hspace、border等。第16頁，課件共41頁，創(chuàng)作于2023年2月19.1.8設(shè)置圖片鏈接——<a>實例代碼第17頁，課件共41頁，創(chuàng)作于2023年2月19.1.8設(shè)置圖片鏈接——<a>網(wǎng)頁效果第18頁，課件共41頁，創(chuàng)作于2023年2月19.1.9設(shè)置圖片熱區(qū)鏈接基本語法<imgsrc=”圖片地址”usemap=”#映射圖片名稱”>熱區(qū)鏈接屬性的定義如下：<mapname=”映射圖片名稱”><areashape=”熱區(qū)形狀”coords=”熱區(qū)坐標(biāo)”href=”URL”></map>第19頁，課件共41頁，創(chuàng)作于2023年2月19.1.9設(shè)置圖片熱區(qū)鏈接語法說明<img>標(biāo)記用來插入圖片和引用映射圖片名稱，即用usemap屬性來引用在<map>標(biāo)記中所定義的映射圖片名稱，并且要在名稱前加上#號。<map>標(biāo)記只有一個name屬性，用來定義映射圖片的名稱。<area>標(biāo)記有三個屬性，shape屬性、coords屬性和href屬性。shape屬性用來定義熱區(qū)的形狀，又有3個屬性值，具體取值見表19-2coords屬性用來定義熱區(qū)的坐標(biāo)，不同的形狀其coords屬性的設(shè)置方式也不同，具體可以參見表19-3href屬性，用來定義超鏈接的目標(biāo)地址。第20頁，課件共41頁，創(chuàng)作于2023年2月19.1.9設(shè)置圖片熱區(qū)鏈接表19-2shape屬性取值說明表19-2shape屬性取值說明第21頁，課件共41頁，創(chuàng)作于2023年2月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第22頁，課件共41頁，創(chuàng)作于2023年2月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>第23頁，課件共41頁，創(chuàng)作于2023年2月廈大漳州校區(qū)地圖/gcampus/index.html#第24頁，課件共41頁，創(chuàng)作于2023年2月廈大漳州校區(qū)地圖/gcampus/index.html#第25頁，課件共41頁，創(chuàng)作于2023年2月中國地圖<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>第26頁，課件共41頁，創(chuàng)作于2023年2月電子郵件鏈接用戶可從網(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>第27頁，課件共41頁，創(chuàng)作于2023年2月下載鏈接在圖象、文字鏈接的地方，將壓縮文件做為鏈接地址腳本鏈接：javascript:window.close()第28頁，課件共41頁，創(chuàng)作于2023年2月作業(yè)制作頁面-continent/index.html體現(xiàn)以下技術(shù)的幾種：內(nèi)部鏈接建立外部鏈接建立錨點鏈接圖像鏈接圖像映射29第29頁，課件共41頁，創(chuàng)作于2023年2月框架廣告欄

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

右側(cè)框架

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

(left.htm)第30頁，課件共41頁，創(chuàng)作于2023年2月為何使用框架在另一個固定部分顯示導(dǎo)航部分在頁面的一個固定部分顯示徽標(biāo)或靜態(tài)信息在此處顯示主要內(nèi)容。

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

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

name：設(shè)置子窗口的名稱frameborder：設(shè)置邊框?qū)挾?，通常將其設(shè)置為0

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

noresize：禁止改變子窗口大小marginwidthmarginheight第35頁，課件共41頁，創(chuàng)作于2023年2月36Src屬性應(yīng)用舉例<html><head><title>框架應(yīng)用</title></head><framesetcols="190,*"><framesrc=navigation.html><framesrc=main.html></frameset></html>第36頁，課件共41頁，創(chuàng)作于202

溫馨提示

  • 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)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

最新文檔

評論

0/150

提交評論