大學(xué)計(jì)算機(jī)ii課件第7次

第7講創(chuàng)建網(wǎng)頁(yè)鏈接 參考資源 http 218 192 12 5 dxjsj2 大學(xué)計(jì)算機(jī) 2020 4 19 1 廣東金融學(xué)院 主要內(nèi)容 1 超鏈接的概念 2 理解路徑 3 創(chuàng)建文本超鏈接 下載超鏈接和圖像超鏈接 4 創(chuàng)建錨點(diǎn)鏈接和E mail鏈接 5 求職站點(diǎn)的頁(yè)面導(dǎo)航 6 總結(jié)并布置作業(yè) 2020 4 19 廣東金融學(xué)院 2 1 超鏈接的概念 什么是超鏈接超鏈接 簡(jiǎn)稱鏈接 是網(wǎng)頁(yè)文檔中的重要元素 使用超鏈接可以實(shí)現(xiàn)網(wǎng)頁(yè)文檔之間的快速跳轉(zhuǎn) 而不管這些網(wǎng)頁(yè)是來(lái)自一個(gè)站點(diǎn) 還是來(lái)自Internet中不同的站點(diǎn) 網(wǎng)頁(yè)中超鏈接通常以文本 圖像或動(dòng)畫等形式出現(xiàn) 當(dāng)鼠標(biāo)指針指向超鏈接時(shí) 鼠標(biāo)指針會(huì)變成手指狀 單擊超鏈接時(shí) 瀏覽器就會(huì)按照超鏈接指向的目標(biāo)載入另一個(gè)網(wǎng)頁(yè) 或者跳轉(zhuǎn)到同一網(wǎng)頁(yè) 也可以是其他網(wǎng)頁(yè) 的某一個(gè)位置 2020 4 19 廣東金融學(xué)院 3 1 超鏈接的概念 源端點(diǎn)和目標(biāo)端點(diǎn)超鏈接是由源端點(diǎn)到目標(biāo)端點(diǎn)的一種跳轉(zhuǎn) 源端點(diǎn)可以是網(wǎng)頁(yè)中的一段文本 一幅圖像或圖像熱區(qū)等 目標(biāo)端點(diǎn)可以是任意類型的網(wǎng)絡(luò)資源 例如一個(gè)網(wǎng)頁(yè) 一幅圖像 一首音樂(lè) 一段動(dòng)畫 一段電影或一個(gè)程序等 2020 4 19 廣東金融學(xué)院 4 1 超鏈接的概念 源端點(diǎn)和目標(biāo)端點(diǎn) 2020 4 19 廣東金融學(xué)院 5 1 超鏈接的概念 超鏈接分類 按照目標(biāo)端點(diǎn)的不同 文件鏈接 目標(biāo)端點(diǎn)是一個(gè)文件 通常是網(wǎng)頁(yè)文件 也可以是其它文件 用于打開(kāi)另外一個(gè)網(wǎng)頁(yè) 或者將一個(gè)文件直接下載到本地計(jì)算機(jī)中 錨點(diǎn)鏈接 目標(biāo)端點(diǎn)是網(wǎng)頁(yè)中的某個(gè)位置 用于快速跳轉(zhuǎn)到當(dāng)前網(wǎng)頁(yè)或其它網(wǎng)頁(yè)中的某個(gè)位置 E mail鏈接 目標(biāo)端點(diǎn)是一個(gè)發(fā)送郵件的客戶端程序 如Foxmail Outlook等 用于啟動(dòng)一個(gè)郵件客戶端程序 并向某個(gè)電子郵箱發(fā)送郵件 2020 4 19 廣東金融學(xué)院 6 2 理解路徑 什么是路徑 路徑是指文件或其它資源 如郵件或錨點(diǎn)等 在本地計(jì)算機(jī)或網(wǎng)絡(luò)中的存儲(chǔ)位置 通常用URL 統(tǒng)一資源定位器 表示 文件鏈接通常要指定目標(biāo)端點(diǎn)的文件位置 因此創(chuàng)建超鏈接前 理解文件路徑是非常關(guān)鍵的一步 2020 4 19 廣東金融學(xué)院 7 2 理解路徑 URL的格式http 指明文件在網(wǎng)絡(luò)中傳輸?shù)膮f(xié)議是超文本傳輸協(xié)議 Web服務(wù)器IP或域名 用于指定是網(wǎng)絡(luò)中的哪一臺(tái)計(jì)算機(jī) 文件目錄 就是Web站點(diǎn)的目錄 通常站點(diǎn)中的文件資源都放在這個(gè)目錄中 文件名 包括文件主名和擴(kuò)展名 2020 4 19 廣東金融學(xué)院 8 http Web服務(wù)器IP地址或域名 文件目錄 文件名 2 理解路徑 URL的唯一性網(wǎng)絡(luò)中計(jì)算機(jī)的IP地址 或域名 唯一 網(wǎng)絡(luò)中每臺(tái)計(jì)算機(jī)中的文件路徑唯一 因此 由于URL特殊的層次性結(jié)構(gòu) 使得在網(wǎng)絡(luò)中 每個(gè)文件的URL是唯一的 2020 4 19 廣東金融學(xué)院 9 2 理解路徑 路徑的類型絕對(duì)路徑也稱絕對(duì)URL 它給出鏈接目標(biāo)文件的完整URL地址 包括傳輸協(xié)議在內(nèi) 如 2020 4 19 廣東金融學(xué)院 10 2 理解路徑 路徑的類型相對(duì)路徑也稱為相對(duì)URL 是指以當(dāng)前文件所在位置為起點(diǎn)到目標(biāo)文檔所經(jīng)過(guò)的路徑 如 products dreamweaver html 若要將當(dāng)前文件與處在同一文件夾中的另一個(gè)文件鏈接 或者將同一站點(diǎn)中不同文件夾下的文件相互鏈接 都可以使用相對(duì)路徑 此時(shí)可以省去當(dāng)前文件與目標(biāo)文檔完整URL中的相同部分 只留下不同部分 2020 4 19 廣東金融學(xué)院 11 2 理解路徑 路徑的類型根相對(duì)路徑是指從站點(diǎn)根目錄到被鏈接文件的路徑 如 products dreamweaver html 實(shí)際上 根相對(duì)路徑是站點(diǎn)內(nèi)部的 絕對(duì)路徑 因此服務(wù)器地址加上根相對(duì)路徑就形成絕對(duì)路徑了 根相對(duì)路徑適用于當(dāng)前網(wǎng)頁(yè)文檔和鏈接目標(biāo)端點(diǎn)文件處于相同站點(diǎn)中的情況 2020 4 19 廣東金融學(xué)院 12 3 文本鏈接 下載鏈接和圖像鏈接 文本超鏈接是指源端點(diǎn)是文本的超鏈接 下載鏈接是一種特殊的文件超鏈接 即當(dāng)打開(kāi)超鏈接的瀏覽器不能顯示 或默認(rèn)顯示 目標(biāo)端點(diǎn)文件中的內(nèi)容時(shí) 瀏覽器將自動(dòng)提示下載對(duì)話框 圖像超鏈接是指源端點(diǎn)是圖像中熱點(diǎn)的超鏈接 2020 4 19 廣東金融學(xué)院 13 3 文本鏈接 下載鏈接和圖像鏈接 新建超鏈接的方法使用菜單命令使用 屬性 面板 2020 4 19 廣東金融學(xué)院 14 4 創(chuàng)建錨點(diǎn)鏈接和E mail鏈接 錨點(diǎn)鏈接當(dāng)網(wǎng)頁(yè)內(nèi)容很長(zhǎng)時(shí) 可以使用錨點(diǎn)超鏈接快速定位到網(wǎng)頁(yè)文檔的指定位置 加快頁(yè)面瀏覽速度 創(chuàng)建錨點(diǎn)鏈接一般分為兩個(gè)步驟 首先 在頁(yè)面的某處設(shè)置一個(gè)命名標(biāo)記 即錨點(diǎn) 其次 創(chuàng)建錨點(diǎn)鏈接 并使鏈接目標(biāo)指向一個(gè)錨點(diǎn) 這樣 瀏覽者單擊錨點(diǎn)鏈接就可以跳轉(zhuǎn)到錨點(diǎn)位置 2020 4 19 廣東金融學(xué)院 15 4 創(chuàng)建錨點(diǎn)鏈接和E mail鏈接 創(chuàng)建錨點(diǎn)鏈接 2020 4 19 廣東金融學(xué)院 16 4 創(chuàng)建錨點(diǎn)鏈接和E mail鏈接 E mail超鏈接為了讓瀏覽者單擊E mail超鏈接時(shí) 能正常發(fā)送電子郵件 必須為E mail超鏈接指定一個(gè)合法的目標(biāo)端點(diǎn) E mail超鏈接的目標(biāo)端點(diǎn)格式為 mailto 電子郵件地址創(chuàng)建E mail鏈接 2020 4 19 廣東金融學(xué)院 17 5 求職站點(diǎn)的頁(yè)面導(dǎo)航 個(gè)人求職站點(diǎn)整體架構(gòu) 2020 4 19 廣東金融學(xué)院 18 5 求職站點(diǎn)的頁(yè)面導(dǎo)航 個(gè)人求職站點(diǎn)整體架構(gòu) 2020 4 19 廣東金融學(xué)院 19 6 總結(jié)并布置作業(yè) 總結(jié)1 超鏈接和路徑的概念2 常見(jiàn)的超鏈接形式及創(chuàng)建方法3 頁(yè)面導(dǎo)航的制作方法 2020 4 19 廣東金融學(xué)院 20 6 總結(jié)并布置作業(yè) 作業(yè)1 給班級(jí)管理站點(diǎn)制作的一個(gè)頁(yè)