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

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