網(wǎng)頁設(shè)計與開發(fā)實(shí)驗(yàn)課件第5章 超級鏈接_第1頁
網(wǎng)頁設(shè)計與開發(fā)實(shí)驗(yàn)課件第5章 超級鏈接_第2頁
網(wǎng)頁設(shè)計與開發(fā)實(shí)驗(yàn)課件第5章 超級鏈接_第3頁
網(wǎng)頁設(shè)計與開發(fā)實(shí)驗(yàn)課件第5章 超級鏈接_第4頁
網(wǎng)頁設(shè)計與開發(fā)實(shí)驗(yàn)課件第5章 超級鏈接_第5頁
已閱讀5頁，還剩26頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡介

主要內(nèi)容為網(wǎng)頁添加超鏈接添加書簽鏈接、下載文件鏈接網(wǎng)頁文件的最大魅力是超越各個文件的空間，通過超鏈接相互連接構(gòu)成一個紛繁復(fù)雜的互聯(lián)網(wǎng)世界。超鏈接（hyperlink）是一個網(wǎng)站的精髓，超鏈接在本質(zhì)上屬于一個網(wǎng)頁的一部分，它是一種允許一個網(wǎng)頁同其他網(wǎng)頁或站點(diǎn)之間進(jìn)行鏈接的元素。各個網(wǎng)頁鏈接在一起后，才能真正構(gòu)成一個網(wǎng)站。超文本具有的鏈接能力，層層鏈接相關(guān)文件，這種具有超級鏈能力的特性，即稱為超鏈接。超鏈接除了可鏈接文本外，也可鏈接各種媒體，如聲音、圖像和動畫等，通過它們可以將網(wǎng)站建設(shè)成一個豐富多彩的多媒體世界。5.1超鏈接簡介5.1超鏈接簡介5.2創(chuàng)建超鏈接超鏈接的標(biāo)記建立超鏈接的標(biāo)記是a(anchor，錨)，以<a>開始，以</a>結(jié)束，錨可以指向網(wǎng)絡(luò)上的任何資源：一張HTML頁面，一幅圖像，一個聲音或視頻文件等?；菊Z法：

<ahref="url"title="指向鏈接顯示的文字"target="窗口名稱">超鏈接名稱</a>Href：建立鏈接時，屬性“href”定義了這個鏈接所指的目標(biāo)地址，也就是路徑。理解一個文件到要鏈接的那個文件之間的路徑關(guān)系是創(chuàng)建鏈接的根本。Target：有4個保留的目標(biāo)名稱用作特殊的文檔重定向操作。_blank：在新窗口中打開被鏈接文檔。_self：默認(rèn)。在相同的框架中打開被鏈接文檔。_parent：在父框架集中打開被鏈接文檔。_top：在整個窗口中打開被鏈接文檔。Framename：在指定的框架中打開被鏈接文檔。5.2創(chuàng)建超鏈接<!—程序5-1--><html><head><title>創(chuàng)建鏈接</title></head><body><center><h2>創(chuàng)建鏈接</h2><hr><p><ahref=""title="打開新浪首頁">新浪</a><!--添加新浪鏈接--><br><ahref=""target=_blank>百度</a><!--添加百度鏈接--><br><ahref="">北京大學(xué)</a><!--添加北京大學(xué)鏈接--></p></center></body></html>5.2創(chuàng)建超鏈接5.2.2內(nèi)部鏈接內(nèi)部鏈接所謂內(nèi)部鏈接，指的是在同一個網(wǎng)站內(nèi)部，不同的html頁面之間的鏈接關(guān)系，在建立網(wǎng)站內(nèi)部鏈接的時候，要明確哪個是主鏈接文件（即當(dāng)前頁），哪個是被鏈接文件。內(nèi)部鏈接一般采用相對路徑鏈接比較好。根據(jù)圖5-4所示的某班級網(wǎng)站站點(diǎn)目錄結(jié)構(gòu)，表5-2所示的是內(nèi)部鏈接語句中相對路徑的寫法。5.2.2內(nèi)部鏈接5.2.3外部鏈接外部鏈接所謂外部鏈接，指的是：跳轉(zhuǎn)到當(dāng)前網(wǎng)站外部，與其它網(wǎng)站中頁面或其它元素之間的鏈接關(guān)系。這種鏈接的URL地址一般要用絕對路徑，要有完整的URL地址。5.3.1圖片鏈接可以為一個圖片指定鏈接?；菊Z法：

<ahref="url"target="目標(biāo)窗口的打開方式"><imgsrc="圖片地址"></a>5.3.1圖片鏈接<!--程序5-2--><html><head><title>建立圖片鏈接</title></head><body><center><h2>圖片鏈接</h2><hr><ahref=“"target="_blank"><imgsrc="images/baidu_logo.gif"/></a></center></body></html>5.3.1圖片鏈接5.3.2書簽鏈接書簽鏈接在瀏覽頁面時，如果頁面篇幅很長，要不斷的拖動滾動條，給瀏覽帶來不便，要是瀏覽者既可以從頭閱讀到尾，又可以很快尋找到自己感興趣的特定內(nèi)容進(jìn)行部分閱讀，這個時候就可以通過書簽鏈接來實(shí)現(xiàn)。當(dāng)瀏覽者單擊頁面上的某一“標(biāo)簽”，就能自動跳到網(wǎng)頁相應(yīng)的位置進(jìn)行閱讀，給瀏覽者帶來方便。5.3.2書簽鏈接基本語法：在同一頁面內(nèi)要使用書簽鏈接的格式：<ahref="#書簽名稱"target="窗口名稱">鏈接標(biāo)題</a>在不同頁面之間要使用書簽鏈接的格式（在不同頁面中鏈接的前提是需要指定好鏈接的頁面地址和鏈接的書簽名稱）：<ahref="URL地址#書簽名稱"target="窗口名稱">鏈接標(biāo)題</a>以上兩種書簽鏈接形式，鏈接到的目標(biāo)為：<aname="書簽名稱">鏈接內(nèi)容</a>。5.3.2書簽鏈接5.3.2書簽鏈接5.3.2書簽鏈接5.3.3下載文件的鏈接如果希望制作下載文件的鏈接，只需在鏈接地址處輸入文件所在的位置即可。當(dāng)瀏覽器用戶單擊鏈接后，瀏覽器會自動判斷文件的類型，以做出不同情況的處理。

基本語法：

<ahref="url">鏈接內(nèi)容</a>5.3.3下載文件的鏈接<!--程序5-5--><html><head><title>下載文件</title></head><body><p>

這是一本電子書：<ahref="ds.rar">數(shù)據(jù)結(jié)構(gòu)--C#</a></p></body></html>5.3.3下載文件的鏈接5.4小實(shí)例

程序5-6描述了班級網(wǎng)站首頁導(dǎo)航條的創(chuàng)建，這里綜合運(yùn)用了鏈接和樣式來設(shè)計導(dǎo)航。在head部分中的style標(biāo)記中，定義了導(dǎo)航條的使用效果(a.head部分)，當(dāng)訪問者鼠標(biāo)移向每個欄目的名稱時，字的顏色都會發(fā)生變化，點(diǎn)擊欄目名，則進(jìn)入相應(yīng)的頁面。5.4小實(shí)例<!--程序5-6--><html><head><title>班級網(wǎng)站</title><linkhref="css/style.css"rel="stylesheet"type="text/css"><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"></head><body><tablewidth="940"border="0"align="center"cellpadding="0"cellspacing="0"background="images/menu-bg.gif"><tr><tdwidth="3"><imgsrc="images/menu-bg-left.gif"width="3"height="40"/></td><tdwidth="199"align="center"valign="middle"></td><tdvalign="middle"width="120"align="center"><ahref="#"class="head"><b>首頁</b></a></td><tdclass="menuSpace"width="3"></td><tdvalign="middle"width="120"align="center"><ahref="xinwen/news.html"class="head">班級新聞</a></td><tdclass="menuSpace"width="3"></td><tdvalign="middle"width="120"align="center"><ahref="photo/photo1.html"class="head">班級相冊</a></td>5.4小實(shí)例

<tdclass="menuSpace"width="3"></td><tdvalign="middle"width="120"align="center"><ahref="gerenzhuye/student.html"class="head">個人主頁</a></td><tdclass="menuSpace"width="3"></td><tdvalign="middle"width="120"align="center"><ahref="liuyan/message.html"class="head">留言本</a></td><tdclass="menuSpace"width="3"></td><tdvalign="middle"width="120"align="center"><ahref="benqishili/li.html"class="head">網(wǎng)頁設(shè)計</a></td><tdclass="menuSpace"width="3"></td><tdvalign="middle"width="120"align="center"><ahref="about/about.html"class="head">關(guān)于我們</a></td><tdwidth="3"><imgsrc="images/menu-bg-right.gif"width="3"height="40"/></td></tr></table></body></html>5.4小實(shí)例5.4小實(shí)例<!--程序5-7--><html><head><title>班級相冊</title></head><style>.img_x{ margin:15px; height:80px; width:120px; border:1pxsolid#8397A0;}</style><body><center><h2>圖片鏈接</h2><HR><table><tr><tdalign="center"><ahref="images/004.jpg"target="_blank">5.4小實(shí)例<imgsrc="images/004_s.jpg"width="400"height="545"border="0"class="img_x"alt="點(diǎn)擊圖片查看大圖"></a></td><tdalign="center"><ahref="images/005.jpg"target="_blank"><imgsrc="images/005_s.jpg"width="600"height="404"border="0"class="img_x"alt="點(diǎn)擊圖片查看大圖"></a></td><tdalign="center"><ahref="images/006.jpg"target="_blank"><imgsrc="images/006_s.jpg"width="600"height="404"border="0"class="img_x"alt="點(diǎn)擊圖片查看大圖"></a></td></tr></table></center></body></html>5.4小實(shí)例小結(jié)1.一般規(guī)則是，對于自己站點(diǎn)上的網(wǎng)頁的鏈接，使用相對URL；對于其他站點(diǎn)上的資源鏈接，使用絕對URL。2.如果指定路徑但省略文件名，就會鏈接到目錄下的默認(rèn)文件（網(wǎng)站可以自己定義默認(rèn)頁面），如果路徑也省略，就會鏈接到網(wǎng)站的默認(rèn)主頁。3.URL最好使用小寫字母來表示。4

溫馨提示

  • 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

提交評論