大學計算機ii課件 第7次課

1、第第7講講 創(chuàng)建網(wǎng)頁鏈接創(chuàng)建網(wǎng)頁鏈接參考資源：/dxjsj2/大學計算機11/26/20211廣東金融學院主要內(nèi)容主要內(nèi)容v1 1超鏈接的概念；超鏈接的概念；v2 2理解路徑；理解路徑；v3 3創(chuàng)建文本超鏈接、下載超鏈接和圖像創(chuàng)建文本超鏈接、下載超鏈接和圖像超鏈接；超鏈接；v4 4創(chuàng)建錨點鏈接和創(chuàng)建錨點鏈接和e-maile-mail鏈接；鏈接；v5 5求職站點的頁面導航；求職站點的頁面導航；v6 6總結(jié)并布置作業(yè)?？偨Y(jié)并布置作業(yè)。11/26/2021廣東金融學院21超鏈接的概念超鏈接的概念v什么是超鏈接什么是超鏈接 超鏈接（簡稱鏈接）是網(wǎng)頁文檔中的重要元超鏈

2、接（簡稱鏈接）是網(wǎng)頁文檔中的重要元素，使用超鏈接可以實現(xiàn)網(wǎng)頁文檔之間的快素，使用超鏈接可以實現(xiàn)網(wǎng)頁文檔之間的快速跳轉(zhuǎn)，而不管這些網(wǎng)頁是來自一個站點，速跳轉(zhuǎn)，而不管這些網(wǎng)頁是來自一個站點，還是來自還是來自internetinternet中不同的站點。中不同的站點。 網(wǎng)頁中超鏈接通常以文本、圖像或動畫等形網(wǎng)頁中超鏈接通常以文本、圖像或動畫等形式出現(xiàn)。當鼠標指針指向超鏈接時，鼠標指式出現(xiàn)。當鼠標指針指向超鏈接時，鼠標指針會變成手指狀；單擊超鏈接時，瀏覽器就針會變成手指狀；單擊超鏈接時，瀏覽器就會按照超鏈接指向的目標載入另一個網(wǎng)頁，會按照超鏈接指向的目標載入另一個網(wǎng)頁，或者跳轉(zhuǎn)到同一網(wǎng)頁（也可以是其他

3、網(wǎng)頁）或者跳轉(zhuǎn)到同一網(wǎng)頁（也可以是其他網(wǎng)頁）的某一個位置。的某一個位置。11/26/2021廣東金融學院31超鏈接的概念超鏈接的概念v源端點和目標端點源端點和目標端點 超鏈接是由源端點到目標端點的一種跳轉(zhuǎn)。超鏈接是由源端點到目標端點的一種跳轉(zhuǎn)。 源端點可以是網(wǎng)頁中的一段文本、一幅圖像源端點可以是網(wǎng)頁中的一段文本、一幅圖像或圖像熱區(qū)等?；驁D像熱區(qū)等。 目標端點可以是任意類型的網(wǎng)絡資源，例如目標端點可以是任意類型的網(wǎng)絡資源，例如一個網(wǎng)頁、一幅圖像、一首音樂、一段動畫一個網(wǎng)頁、一幅圖像、一首音樂、一段動畫、一段電影或一個程序等。、一段電影或一個程序等。11/26/2021廣東金融學院41超鏈接的概念

4、超鏈接的概念v源端點和目標端點源端點和目標端點11/26/2021廣東金融學院5文本圖像熱區(qū)其它網(wǎng)頁其它文件錨點e-mail圖像聲音程序鏈接源端點鏈接目標端點1超鏈接的概念超鏈接的概念v超鏈接分類（按照目標端點的不同）超鏈接分類（按照目標端點的不同） 文件鏈接：目標端點是一個文件（通常是網(wǎng)文件鏈接：目標端點是一個文件（通常是網(wǎng)頁文件，也可以是其它文件），用于打開另頁文件，也可以是其它文件），用于打開另外一個網(wǎng)頁，或者將一個文件直接下載到本外一個網(wǎng)頁，或者將一個文件直接下載到本地計算機中。地計算機中。 錨點鏈接：目標端點是網(wǎng)頁中的某個位置，錨點鏈接：目標端點是網(wǎng)頁中的某個位置，用于快速跳轉(zhuǎn)到當前

5、網(wǎng)頁或其它網(wǎng)頁中的某用于快速跳轉(zhuǎn)到當前網(wǎng)頁或其它網(wǎng)頁中的某個位置。個位置。 e-maile-mail鏈接：目標端點是一個發(fā)送郵件的客鏈接：目標端點是一個發(fā)送郵件的客戶端程序（如戶端程序（如foxmailfoxmail、outlookoutlook等），用于等），用于啟動一個郵件客戶端程序，并向某個電子郵啟動一個郵件客戶端程序，并向某個電子郵箱發(fā)送郵件。箱發(fā)送郵件。11/26/2021廣東金融學院62理解路徑理解路徑v什么是路徑？什么是路徑？ 路徑是指文件或其它資源（如郵件或錨點等路徑是指文件或其它資源（如郵件或錨點等）在本地計算機或網(wǎng)絡中的存儲位置，通常）在本地計算機或網(wǎng)絡中的存儲位置，通常用

6、用urlurl（統(tǒng)一資源定位器）表示。（統(tǒng)一資源定位器）表示。 文件鏈接通常要指定目標端點的文件位置，文件鏈接通常要指定目標端點的文件位置，因此創(chuàng)建超鏈接前，理解文件路徑是非常關因此創(chuàng)建超鏈接前，理解文件路徑是非常關鍵的一步。鍵的一步。11/26/2021廣東金融學院72理解路徑理解路徑vurlurl的格式的格式 http:/http:/：指明文件在網(wǎng)絡中傳輸?shù)膮f(xié)議是：指明文件在網(wǎng)絡中傳輸?shù)膮f(xié)議是超文本傳輸協(xié)議。超文本傳輸協(xié)議。 webweb服務器服務器ipip或域名：用于指定是網(wǎng)絡中的或域名：用于指定是網(wǎng)絡中的哪一臺計算機。哪一臺計算機。 文件目錄：就是文件目錄：就是webweb站點的目錄，

7、通常站點站點的目錄，通常站點中的文件資源都放在這個目錄中。中的文件資源都放在這個目錄中。 文件名：包括文件主名和擴展名。文件名：包括文件主名和擴展名。11/26/2021廣東金融學院8http:/web服務器ip地址或域名/文件目錄./文件名2理解路徑理解路徑vurlurl的唯一性的唯一性 網(wǎng)絡中計算機的網(wǎng)絡中計算機的ipip地址（或域名）唯一。地址（或域名）唯一。 網(wǎng)絡中每臺計算機中的文件路徑唯一。網(wǎng)絡中每臺計算機中的文件路徑唯一。 因此，由于因此，由于urlurl特殊的層次性結(jié)構(gòu)，使得在特殊的層次性結(jié)構(gòu)，使得在網(wǎng)絡中，每個文件的網(wǎng)絡中，每個文件的urlurl是唯一的。是唯一的。11/26/

8、2021廣東金融學院92理解路徑理解路徑v路徑的類型路徑的類型 絕對路徑絕對路徑 也稱絕對也稱絕對urlurl，它給出鏈接目標文件的完整，它給出鏈接目標文件的完整urlurl地地址，包括傳輸協(xié)議在內(nèi)，如址，包括傳輸協(xié)議在內(nèi)，如https:/ 如果鏈接的目標文件不在當前如果鏈接的目標文件不在當前webweb站點內(nèi)，必須站點內(nèi)，必須使用絕對路徑。使用絕對路徑。11/26/2021廣東金融學院102理解路徑理解路徑v路徑的類型路徑的類型 相對路徑相對路徑 也稱為相對也稱為相對urlurl，是指以當前文件所在位置為起，是指以當前文件所在位置為起點到目標文檔所經(jīng)過的路徑，如點到目標文檔所經(jīng)過的路徑，如“

9、products/dreamweaver.html”。若要將當前。若要將當前文件與處在同一文件夾中的另一個文件鏈接，或文件與處在同一文件夾中的另一個文件鏈接，或者將同一站點中不同文件夾下的文件相互鏈接，者將同一站點中不同文件夾下的文件相互鏈接，都可以使用相對路徑，此時可以省去當前文件與都可以使用相對路徑，此時可以省去當前文件與目標文檔完整目標文檔完整urlurl中的相同部分，只留下不同部中的相同部分，只留下不同部分。分。11/26/2021廣東金融學院112理解路徑理解路徑v路徑的類型路徑的類型 根相對路徑根相對路徑 是指從站點根目錄到被鏈接文件的路徑，如是指從站點根目錄到被鏈接文件的路徑，如

10、“/ /products/dreamweaver.html”。實際上，根。實際上，根相對路徑是站點內(nèi)部的相對路徑是站點內(nèi)部的“絕對路徑絕對路徑”，因此服務，因此服務器地址加上根相對路徑就形成絕對路徑了。器地址加上根相對路徑就形成絕對路徑了。 根相對路徑適用于當前網(wǎng)頁文檔和鏈接目標端點根相對路徑適用于當前網(wǎng)頁文檔和鏈接目標端點文件處于相同站點中的情況。文件處于相同站點中的情況。11/26/2021廣東金融學院123文本鏈接、下載鏈接和圖像鏈接文本鏈接、下載鏈接和圖像鏈接v文本超鏈接文本超鏈接 是指源端點是文本的超鏈接。是指源端點是文本的超鏈接。v下載鏈接下載鏈接 是一種特殊的文件超鏈接，即當打開

11、超鏈接是一種特殊的文件超鏈接，即當打開超鏈接的瀏覽器不能顯示（或默認顯示）目標端點的瀏覽器不能顯示（或默認顯示）目標端點文件中的內(nèi)容時，瀏覽器將自動提示下載對文件中的內(nèi)容時，瀏覽器將自動提示下載對話框。話框。v圖像超鏈接圖像超鏈接 是指源端點是圖像中熱點的超鏈接。是指源端點是圖像中熱點的超鏈接。11/26/2021廣東金融學院133文本鏈接、下載鏈接和圖像鏈接文本鏈接、下載鏈接和圖像鏈接v新建超鏈接的方法新建超鏈接的方法 使用菜單命令使用菜單命令 使用使用“屬性屬性”面板面板11/26/2021廣東金融學院144創(chuàng)建錨點鏈接和創(chuàng)建錨點鏈接和e-mail鏈接鏈接v錨點鏈接錨點鏈接 當網(wǎng)頁內(nèi)容很長

12、時，可以使用錨點超鏈接快當網(wǎng)頁內(nèi)容很長時，可以使用錨點超鏈接快速定位到網(wǎng)頁文檔的指定位置，加快頁面瀏速定位到網(wǎng)頁文檔的指定位置，加快頁面瀏覽速度。覽速度。v創(chuàng)建錨點鏈接一般分為兩個步驟：創(chuàng)建錨點鏈接一般分為兩個步驟： 首先，在頁面的某處設置一個命名標記（即首先，在頁面的某處設置一個命名標記（即錨點）；錨點）； 其次，創(chuàng)建錨點鏈接，并使鏈接目標指向一其次，創(chuàng)建錨點鏈接，并使鏈接目標指向一個錨點。這樣，瀏覽者單擊錨點鏈接就可以個錨點。這樣，瀏覽者單擊錨點鏈接就可以跳轉(zhuǎn)到錨點位置。跳轉(zhuǎn)到錨點位置。11/26/2021廣東金融學院154創(chuàng)建錨點鏈接和創(chuàng)建錨點鏈接和e-mail鏈接鏈接v創(chuàng)建錨點鏈接創(chuàng)建

13、錨點鏈接11/26/2021廣東金融學院164創(chuàng)建錨點鏈接和創(chuàng)建錨點鏈接和e-mail鏈接鏈接ve-maile-mail超鏈接超鏈接 為了讓瀏覽者單擊為了讓瀏覽者單擊e-maile-mail超鏈接時，能正常超鏈接時，能正常發(fā)送電子郵件，必須為發(fā)送電子郵件，必須為e-maile-mail超鏈接指定一超鏈接指定一個合法的目標端點。個合法的目標端點。ve-maile-mail超鏈接的目標端點格式為：超鏈接的目標端點格式為：mailto:mailto:電子郵件地址電子郵件地址v創(chuàng)建創(chuàng)建e-maile-mail鏈接鏈接11/26/2021廣東金融學院175求職站點的頁面導航求職站點的頁面導航v個人求職站

14、點整體架構(gòu)個人求職站點整體架構(gòu)11/26/2021廣東金融學院18求職站點首頁個人簡歷我的專業(yè)才藝展示求職意向我的同學母校風采我的相冊給我留言5求職站點的頁面導航求職站點的頁面導航v個人求職站點整體架構(gòu)個人求職站點整體架構(gòu)11/26/2021廣東金融學院19鏈接文本鏈接文本目標文件路徑目標文件路徑鏈接文本鏈接文本目標文件路徑目標文件路徑我的專業(yè)specialty.html母校風采school.html才藝展示gift.html我的相冊album.html求職意向will.html給我留言messageboard.html我的同學schoolmate.html返回主頁index.html6總結(jié)并布置作業(yè)總結(jié)并布置作業(yè)v總結(jié)總結(jié) 1) 1) 超鏈接和路徑的概念超鏈接和路徑的概念 2) 2) 常見的超鏈接形式及創(chuàng)建方法常見的超鏈接形式及創(chuàng)建方法 3) 3) 頁面導航的制作方法頁面導航的制作方法11/26/2021廣東金融學院206總結(jié)并布置作業(yè)總結(jié)并布置作業(yè)v作業(yè)作業(yè) 1) 1) 給班級管