如何制作超鏈接PPT課件.ppt

3 3 4建立超鏈接 2 一 概述 HTML文件中最重要的應(yīng)用之一就是超鏈接 web上的網(wǎng)頁(yè)是互相鏈接的 單擊被稱為超鏈接的文本或圖形就可以鏈接到其它頁(yè)面 超文本具有的鏈接能力 可層層鏈接相關(guān)文件 這種具有超級(jí)鏈能力的操作 即稱為超級(jí)鏈接 超級(jí)鏈接除了可鏈接文本外 也可鏈接各種媒體 如聲音 圖象 動(dòng)畫(huà) 通過(guò)它們我們可享受豐富多采的多媒體世界 3 建立超鏈接的標(biāo)簽為和格式為 超鏈接名稱說(shuō)明 標(biāo)簽表示一個(gè)鏈接的開(kāi)始 表示鏈接的結(jié)束 屬性 HREF 定義了這個(gè)鏈接所指的目標(biāo)地址 目標(biāo)地址是最重要的 一旦路徑上出現(xiàn)差錯(cuò) 該資源就無(wú)法訪問(wèn)TARGET 該屬性用于指定打開(kāi)鏈接的目標(biāo)窗口 其默認(rèn)方式是原窗口 一 概述 4 TITLE 該屬性用于指定指向鏈接時(shí)所顯示的標(biāo)題文字 超鏈接名稱 是要單擊到鏈接的元素 元素可以包含文本 也可以包含圖像 文本帶下劃線且與其它文字顏色不同 圖形鏈接通常帶有邊框顯示 用圖形做鏈接時(shí)只要把顯示圖像的標(biāo)志嵌套在之間就能實(shí)現(xiàn)圖像鏈接的效果 當(dāng)鼠標(biāo)指向 超鏈接名稱 處時(shí)會(huì)變成手狀 單擊這個(gè)元素可以訪問(wèn)指定的目標(biāo)文件 一 概述 5 一 概述 6 例1 下面是一個(gè)使用HTML編輯器編輯的 HTML初學(xué)者指南 文檔 它的文件名是beginner html 存放在d盤(pán)lianjie example1的文件夾下 該文檔包含有4個(gè)部分 每個(gè)部分用單獨(dú)的一個(gè)文檔來(lái)表示 分別是page1 html page2 html page3 html page4 html而且都存放在lianjie example1目錄下 HTML初學(xué)者指南 的文檔如下所示 7 HTML初學(xué)者指南HTML入門第一部分 第二部分 第三部分 第四部分 8 小練習(xí) 用HTML自定義3個(gè)內(nèi)容不同的超鏈接文檔p1 p2 p3 并編寫(xiě)一個(gè)超鏈接文檔lianjie html 鏈接這3個(gè)html文檔 使用在原窗口打開(kāi)文檔以及在新窗口打開(kāi)文檔的屬性 9 二 鏈接路徑 每一個(gè)文件都有自己的存放位置和路徑 理解一個(gè)文件到要鏈接的那個(gè)文件之間的路徑關(guān)系是創(chuàng)建鏈接的根本 URL UniformResourcLocator 指的就是每一個(gè)網(wǎng)站都具有的地址 同一個(gè)網(wǎng)站下的每一個(gè)網(wǎng)頁(yè)都屬于同一個(gè)地址之下 在創(chuàng)建一個(gè)網(wǎng)站的網(wǎng)頁(yè)時(shí) 不需要為每一個(gè)連接都輸入完全的地址 我們只需要確定當(dāng)前文檔同站點(diǎn)根目錄之間的相對(duì)路徑關(guān)系就可以了 10 因此 鏈接可以分以下三種 絕對(duì)路徑如 相對(duì)路徑如 news index html根路徑如 d web news index html 二 鏈接路徑 11 1 絕對(duì)路徑 絕對(duì)路徑 包含了標(biāo)識(shí)INTERNET上的文件所需要的所有信息 文件的鏈接是相對(duì)原文檔而定的 包括完整的協(xié)議名稱 主機(jī)名稱 文件夾名稱和文件名稱其格式為 通訊協(xié)議 服務(wù)器地址 通訊端口 文件位置 文件名 12 2 相對(duì)路徑 相對(duì)路經(jīng) 是以當(dāng)前文件所在路徑為起點(diǎn) 進(jìn)行相對(duì)文件的查找 一個(gè)相對(duì)的URL不包括協(xié)議和主機(jī)地址信息 表示它的路徑與當(dāng)前文檔的訪問(wèn)協(xié)議和主機(jī)名相同 甚至有相同的目錄路徑 通常相對(duì)路徑只包含文件夾名和文件名 甚至只有文件名 可以用相對(duì)URL指向與源文檔位于同一服務(wù)器或同文件夾中的文件 此時(shí) 瀏覽器鏈接的目標(biāo)文檔處在同一服務(wù)器或同一文件夾下 13 如果鏈接到同一目錄下 則只需輸入要鏈接文件的名稱 要鏈接到下級(jí)目錄中的文件 只需先輸入目錄名 然后加 再輸入文件名 要鏈接到上一級(jí)目錄中文件 則先輸入 再輸入文件名 2 相對(duì)路徑 14 2 相對(duì)路徑 15 例2 如果文檔 page1 html 存放在目錄d lianjie example page下 使用相對(duì)路徑時(shí)可寫(xiě)成 第一部分使用絕對(duì)路徑時(shí)寫(xiě)成 第一部分 16 3 根路徑 根路徑目錄地址同樣可用于創(chuàng)建內(nèi)部鏈接 但大多數(shù)情況下 不建議使用此種鏈接形式 根路徑目錄地址的書(shū)寫(xiě)也很簡(jiǎn)單 首先以一個(gè)斜杠開(kāi)頭 代表根目錄 然后書(shū)寫(xiě)文件夾名 最后書(shū)寫(xiě)文件名 如果根目錄要寫(xiě)盤(pán)符 就在盤(pán)符后使用 而不用 與DOS的寫(xiě)法不同 如 web highight shouey htmld web highight shouey html 17 思考 鏈接本地機(jī)器上的文件時(shí) 應(yīng)該使用相對(duì)路徑還是根路徑 在絕大多數(shù)情況下使用相對(duì)路徑比較好 例如 用絕對(duì)路徑定義了鏈接 當(dāng)把文件夾改名或者移動(dòng)之后 那么所有的鏈接都要失敗 這樣就必須對(duì)你的所有html文件的鏈接進(jìn)行重新編排 而一旦將此文夾件移到網(wǎng)絡(luò)服務(wù)器上時(shí) 需要重新改動(dòng)的地方就更多了 那是一件很麻煩的事情 而使用相對(duì)路徑 不僅在本地機(jī)器環(huán)境下適合 就是上傳到網(wǎng)絡(luò)或其他系統(tǒng)下也不需要進(jìn)行多少更改就能準(zhǔn)確鏈接 3 根路徑 18 三 在站點(diǎn)內(nèi)部建立鏈接 所謂內(nèi)部鏈接 指的是在同一個(gè)網(wǎng)站內(nèi)部 不同的html頁(yè)面之間的鏈接關(guān)系 在建立網(wǎng)站內(nèi)部鏈接的時(shí)候 要明確哪個(gè)是主鏈接文件 即當(dāng)前頁(yè) 哪個(gè)是被鏈接文件 在前面介紹鏈接路徑時(shí) 已經(jīng)給大家介紹了內(nèi)部鏈接概念 內(nèi)部鏈接一般采用相對(duì)路徑鏈接比較好 下面我們根據(jù)如圖示 來(lái)看看相對(duì)路徑的具體的鏈接方法 19 20 四 外部鏈接 所謂外部鏈接 指的是跳轉(zhuǎn)到當(dāng)前網(wǎng)站外部 與其它網(wǎng)站中頁(yè)面或其它元素之間的鏈接關(guān)系 這種鏈接的URL地址一般要用絕對(duì)路徑 要有完整的URL地址 包括協(xié)議名 主機(jī)名 文件所在主機(jī)上的的位置的路徑以及文件名 最常用的外部鏈接格式是 還有其他的格式如下表所示 21 四 外部鏈接 22 例3 在例2中 如果文檔 page1 html 不在同一臺(tái)機(jī)器上 而是在URL 23 五 建立E mail鏈接 在HTML頁(yè)面中 可以建立E mail鏈接 當(dāng)瀏覽者單擊鏈接后 系統(tǒng)會(huì)啟動(dòng)默認(rèn)的本地郵件服務(wù)系統(tǒng)發(fā)送郵件 在Web頁(yè)面上鏈接電子郵件程序需要使用 mailto mailto的語(yǔ)法結(jié)構(gòu)如下 Name其中 userinfo 是電子郵件地址的用戶名 host 是電子郵件服務(wù)器的主機(jī)名 Name 應(yīng)該是讓人能容易理解的名稱 24 例4 如有什么評(píng)論請(qǐng)發(fā)電子郵件到清華大學(xué)出版社 25 五 建立E mail鏈接 在實(shí)際應(yīng)用中 用戶還可以加入另外的兩個(gè)參數(shù) cc E mali地址 和 body 這分別表示在發(fā)送郵件的同時(shí)把郵件抄送給第三者和設(shè)定郵件主題內(nèi)容 如果希望同時(shí)寫(xiě)下多個(gè)參數(shù) 則參數(shù)之間使用 分隔符 26 五 建立E mail鏈接 27 試一試 用HTML定義普通文本及鏈接 28 網(wǎng)上手機(jī)市場(chǎng)你想要買手機(jī)嗎 你可以訪問(wèn)手機(jī)網(wǎng)站了解有關(guān)信息 29 練習(xí)題 1 練習(xí)絕對(duì)路徑 相對(duì)路徑 根路徑的使用 2 練習(xí)內(nèi)部鏈接 外部鏈接 E mail鏈接 并編寫(xiě)網(wǎng)頁(yè)包含這三種鏈接 3 3 5圖像的處理 31 一 背景圖像的設(shè)定 在網(wǎng)頁(yè)中除了可以用單一的顏色做背景外 還可用圖像設(shè)置背景 設(shè)置背景圖像的格式 其中 image url 指圖像的位置 32 二 網(wǎng)頁(yè)中插入圖片標(biāo)簽 網(wǎng)頁(yè)中插入圖片用單標(biāo)簽 當(dāng)瀏覽器讀取到標(biāo)簽時(shí) 就會(huì)顯示此標(biāo)簽所設(shè)定的圖像 如果要對(duì)插入的圖片進(jìn)行修飾時(shí) 僅僅用這一個(gè)屬性是不夠的 還要配合其它屬性來(lái)完成 的格式及一般屬性設(shè)定 33 34 三 圖像的超鏈接 圖像的鏈接和文字的鏈接方法是一樣的 都是用標(biāo)簽來(lái)完成 只要將標(biāo)簽放在和之間就可以了 用圖像鏈接的圖片的上有藍(lán)色的邊框 這