官术网_书友最值得收藏!

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ì)話框,將該文件下載到指定位置。

主站蜘蛛池模板: 中江县| 磐安县| 双城市| 北安市| 武山县| 黔东| 常宁市| 辰溪县| 绥中县| 亚东县| 垦利县| 高邑县| 宕昌县| 文昌市| 财经| 柳江县| 吉安市| 文化| 永春县| 三原县| 莆田市| 平阳县| 沙洋县| 榆林市| 盐山县| 石狮市| 衢州市| 滨州市| 海盐县| 界首市| 遂平县| 昂仁县| 温宿县| 体育| 岗巴县| 慈利县| 鄂温| 深水埗区| 农安县| 山阴县| 张北县|