- HTML+CSS+JavaScript網(wǎng)頁(yè)制作(第2版)
- 劉瑞新 張兵義主編
- 2235字
- 2020-10-23 14:22:20
3.1 超鏈接
超鏈接(hyperlink)是網(wǎng)頁(yè)互相聯(lián)系的橋梁,超鏈接可以看作一個(gè)“熱點(diǎn)”,它可以從當(dāng)前網(wǎng)頁(yè)定義的位置跳轉(zhuǎn)到其他位置,包括當(dāng)前頁(yè)的某個(gè)位置,以及Internet、本地硬盤或局域網(wǎng)上的其他文件,甚至跳轉(zhuǎn)到聲音、圖像等多媒體文件。
當(dāng)網(wǎng)頁(yè)中包含超鏈接時(shí),其外觀形式為彩色(一般為藍(lán)色)且?guī)庐嬀€的文字或圖像。單擊這些文本或圖像,可跳轉(zhuǎn)到相應(yīng)位置。鼠標(biāo)指針指向超鏈接時(shí),將變成手形。
3.1.1 超鏈接簡(jiǎn)介
1.超鏈接的分類
根據(jù)超鏈接目標(biāo)文件的不同,超鏈接可分為頁(yè)面超鏈接、錨點(diǎn)超鏈接、電子郵件超鏈接等;根據(jù)超鏈接單擊對(duì)象的不同,超鏈接可分為文字超鏈接、圖像超鏈接、圖像映射等。
2.路徑
創(chuàng)建超級(jí)鏈接時(shí)必須了解鏈接與被鏈接文本的路徑。在一個(gè)網(wǎng)站中,路徑通常有3種表示方式:絕對(duì)路徑、根目錄相對(duì)路徑和文檔目錄相對(duì)路徑。
(1)絕對(duì)路徑
絕對(duì)路徑是指包括服務(wù)器規(guī)范(網(wǎng)頁(yè)一般使用http://)在內(nèi)的完全路徑。例如,http://www.adobe.com/support/dreamweaver/contents.html就是一個(gè)絕對(duì)路徑。
必須使用絕對(duì)路徑,才能鏈接到其他服務(wù)器上的文檔。盡管對(duì)本地鏈接(即到同一站點(diǎn)內(nèi)文檔的鏈接)也可使用絕對(duì)路徑鏈接,但不建議采用這種方式,因?yàn)槿绻麑⒋苏军c(diǎn)移到其他域中,則所有本地絕對(duì)路徑鏈接都將斷開。對(duì)本地鏈接使用相對(duì)路徑,也便于在本地站點(diǎn)內(nèi)移動(dòng)文件。
(2)根目錄相對(duì)路徑
根目錄相對(duì)路徑是指從站點(diǎn)根文件夾到被鏈接文檔經(jīng)過的路徑。站點(diǎn)上所有公開的文件都存放在站點(diǎn)的根目錄下。站點(diǎn)根目錄相對(duì)路徑以一個(gè)正斜杠(/)開始,例如,/support/tips.htm是文件(tips.htm)的站點(diǎn)根目錄相對(duì)路徑,該文件位于站點(diǎn)根文件夾的support子文件夾中。
(3)文檔目錄相對(duì)路徑
文檔目錄相對(duì)路徑是指以當(dāng)前文檔所在位置為起點(diǎn)到被鏈接文檔經(jīng)過的路徑,這種方式適合于創(chuàng)建本地鏈接。文檔相對(duì)路徑的基本思想是省略當(dāng)前文檔和所鏈接的文檔都相同的絕對(duì)URL部分,而只提供不同的部分。
3.1.2 超鏈接的應(yīng)用
1.錨點(diǎn)標(biāo)簽<a>…</a>
錨點(diǎn)(anchor)標(biāo)簽由<a>定義,它在網(wǎng)頁(yè)上建立超文本鏈接。通過單擊一個(gè)詞、句或圖像,可從此處轉(zhuǎn)到另一個(gè)鏈接資源(目標(biāo)資源),這個(gè)目標(biāo)資源有唯一的地址(URL)。具有以上特點(diǎn)的詞、句或圖像就稱為熱點(diǎn)。<a>標(biāo)簽的格式為:

href屬性為超文本引用,它的值為一個(gè)URL,是目標(biāo)資源的有效地址。如果要?jiǎng)?chuàng)建一個(gè)不鏈接到其他位置的空超鏈接,可用“#”代替URL。target屬性設(shè)定鏈接被單擊后所要開始窗口的方式,可選值為:_blank,_parent,_self,_top。
2.指向其他頁(yè)面的鏈接
創(chuàng)建指向其他頁(yè)面的鏈接,就是在當(dāng)前頁(yè)面與其他相關(guān)頁(yè)面之間建立超鏈接。根據(jù)目標(biāo)文件與當(dāng)前文件的目錄關(guān)系,有4種寫法。注意,應(yīng)該盡量采用相對(duì)路徑。
(1)鏈接到同一目錄內(nèi)的網(wǎng)頁(yè)文件
格式為:

其中,“目標(biāo)文件名”是鏈接所指向的文件。
(2)鏈接到下一級(jí)目錄中的網(wǎng)頁(yè)文件
格式為:

(3)鏈接到上一級(jí)目錄中的網(wǎng)頁(yè)文件
格式為:

其中,“../”表示退到上一級(jí)目錄中。
(4)鏈接到同級(jí)目錄中的網(wǎng)頁(yè)文件
格式為:

表示先退到上一級(jí)目錄中,然后再進(jìn)入目標(biāo)文件所在的目錄。
【演練3-1】制作夢(mèng)想櫥柜頁(yè)面之間的鏈接,當(dāng)前頁(yè)3-1.html中包含兩個(gè)鏈接分別指向注冊(cè)頁(yè)和登錄頁(yè),如圖3-1所示。

圖3-1 頁(yè)面之間的鏈接
代碼如下:

3.指向書簽的鏈接
書簽就是用<a>標(biāo)簽對(duì)網(wǎng)頁(yè)元素作一個(gè)記號(hào),其功能類似于用于固定船的錨,所以書簽也稱錨記或錨點(diǎn)。如果頁(yè)面中有多個(gè)書簽鏈接,對(duì)不同目標(biāo)元素要設(shè)置不同的書簽名。書簽名在<a>標(biāo)簽的name屬性中定義,格式為:

(1)指向頁(yè)面內(nèi)書簽的鏈接
要在當(dāng)前頁(yè)面內(nèi)實(shí)現(xiàn)書簽鏈接,需要定義兩個(gè)標(biāo)簽:一個(gè)為超鏈接標(biāo)簽,另一個(gè)為書簽標(biāo)簽。超鏈接標(biāo)簽的格式為:

即單擊“熱點(diǎn)文本”,將跳轉(zhuǎn)到“記號(hào)名”開始的網(wǎng)頁(yè)元素。
【演練3-2】制作指向頁(yè)面內(nèi)書簽的鏈接,在頁(yè)面下方的“關(guān)于企業(yè)”文本前定義一個(gè)書簽“about”,當(dāng)單擊頁(yè)面頂部的“關(guān)于企業(yè)”鏈接時(shí),將跳轉(zhuǎn)到頁(yè)面下方的關(guān)于企業(yè)位置處,如圖3-2所示。

圖3-2 指向頁(yè)面內(nèi)書簽的鏈接
代碼如下:


【說明】在驗(yàn)證本例效果時(shí),可以把瀏覽器縮放到只顯示頁(yè)面上半部分信息的大小,然后單擊頂部的“關(guān)于企業(yè)”鏈接,就可以看到頁(yè)面自動(dòng)定位到下方的“關(guān)于企業(yè)”位置處。
(2)指向其他頁(yè)面書簽的鏈接
要在其他頁(yè)面內(nèi)實(shí)現(xiàn)書簽鏈接,需要定義兩個(gè)標(biāo)簽:一個(gè)為當(dāng)前頁(yè)面的超鏈接標(biāo)簽,另一個(gè)為跳轉(zhuǎn)頁(yè)面的書簽標(biāo)簽。當(dāng)前頁(yè)面的超鏈接標(biāo)簽的格式為:

即單擊“熱點(diǎn)文本”,將跳轉(zhuǎn)到目標(biāo)頁(yè)面“記號(hào)名”開始的網(wǎng)頁(yè)元素。
【演練3-3】制作指向其他頁(yè)面書簽的鏈接,在頁(yè)面info.html的“關(guān)于企業(yè)”文本前定義一個(gè)書簽“about”,當(dāng)單擊當(dāng)前頁(yè)面3-3.html中頁(yè)面頂部的“關(guān)于企業(yè)”鏈接時(shí),將跳轉(zhuǎn)到頁(yè)面info.html中“關(guān)于企業(yè)”位置處,如圖3-3所示。

圖3-3 指向其他頁(yè)面書簽的鏈接
當(dāng)前頁(yè)面3-3.html的代碼如下:

跳轉(zhuǎn)頁(yè)面info.html的代碼如下:


4.指向下載文件的鏈接
如果鏈接到的文件不是HTML文件,則該文件將作為下載文件。指向下載文件的鏈接格式為:

例如,下載一個(gè)購(gòu)物向?qū)У膲嚎s包文件guide.rar,可以建立如下鏈接:

5.指向電子郵件的鏈接
單擊指向電子郵件的鏈接,將打開默認(rèn)的電子郵件程序,如FoxMail、Outlook Express等,并自動(dòng)填寫郵件地址。指向電子郵件鏈接的格式為:

例如,E-mail地址是cat@163.com,可以建立如下鏈接:

3.1.3 案例——制作夢(mèng)想櫥柜服務(wù)指南頁(yè)面
【演練3-4】制作夢(mèng)想櫥柜服務(wù)指南及下載的頁(yè)面,本例文件包括3-4.html、2-5.html兩個(gè)展示網(wǎng)頁(yè)和guide.rar下載文件。在瀏覽器中顯示的效果如圖3-4和圖3-5所示。

圖3-4 頁(yè)面之間的鏈接

圖3-5 下載鏈接
代碼如下:

【說明】
①當(dāng)把鼠標(biāo)指針移到超鏈接上時(shí),鼠標(biāo)指針變?yōu)槭中危瑔螕簟俺R妴栴}解答”鏈接則打開指定的網(wǎng)頁(yè)2-5.html。如果在<a>標(biāo)簽中省略屬性target,則在當(dāng)前窗口中顯示;當(dāng)target="_blank"時(shí),將在新的瀏覽器窗口中顯示。
②在圖3-5所示的網(wǎng)頁(yè)中單擊下載熱點(diǎn)“夢(mèng)想櫥柜服務(wù)指南”,將打開“文件下載”對(duì)話框,將該文件下載到指定位置。
- Photoshop電商網(wǎng)頁(yè)廣告設(shè)計(jì)實(shí)戰(zhàn)從入門到精通(超值版)
- 中文版Dreamweaver CS6/Flash CS6/Photoshop CS6網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)培訓(xùn)
- Pro/ENGINEER三維造型設(shè)計(jì)實(shí)例精解
- jQuery網(wǎng)頁(yè)特效設(shè)計(jì)基礎(chǔ)教程(慕課版·第2版)
- Vue.js Web開發(fā)案例教程(在線實(shí)訓(xùn)版)
- 全能網(wǎng)頁(yè)設(shè)計(jì)師精煉手冊(cè)
- 網(wǎng)頁(yè)設(shè)計(jì)與制作Dreamweaver CS6標(biāo)準(zhǔn)教程(第2版)
- 人人都玩開心網(wǎng):Ext JS+Android+SSH整合開發(fā)Web與移動(dòng)SNS
- 網(wǎng)頁(yè)設(shè)計(jì)與制作
- 中文版Dreamweaver CS6完全自學(xué)教程
- Sketch 移動(dòng)UI與交互設(shè)計(jì)(視頻講解版)
- Dreamweaver CS3網(wǎng)站制作炫例精講
- Dreamweaver CS4網(wǎng)頁(yè)制作入門、進(jìn)階與提高
- Dreamweaver CS5網(wǎng)頁(yè)制作
- 網(wǎng)頁(yè)設(shè)計(jì)與網(wǎng)站建設(shè)完全實(shí)戰(zhàn)手冊(cè)