《網(wǎng)頁設(shè)計超鏈接》PPT課件.ppt

網(wǎng)頁制作綜合技術(shù)教程,第三章 超鏈接,第四課 超鏈接,學(xué)習(xí)目標 超鏈接概述 鏈接路徑 內(nèi)部鏈接建立 外部鏈接建立 錨點鏈接 圖像鏈接 圖像映射,2,超鏈接概述,鏈接是超文本的“超”的部分，鏈接，又稱位置點anchor，將文本或圖形標識指向其他文檔、圖形、小程序、多媒體效果或文檔中特定位置。,3,超級鏈接,4, 有趣的動物 會彈琴的狗狗 單擊此處查看 ,超鏈接概述,鏈接是超文本的“超”的部分，鏈接，又稱位置點anchor，將文本或圖形標識指向其他文檔、圖形、小程序、多媒體效果或文檔中特定位置。 鏈接由以下兩個部分構(gòu)成： 位置點標簽，將文本或圖形標識為鏈接 屬性href，用于指定要鏈接的文件 標簽的常用屬性 href：指定鏈接地址 name：給鏈接點命名 target：指定鏈接的目標窗口_self、 _blank、 _top、 _parent,5,6.2 超鏈接的路徑,一個網(wǎng)站的多個頁面之間的關(guān)系都是通過超鏈接實現(xiàn)的，每個頁面都有一個存放位置和路徑，了解一個文件與另一個文件之間的路徑關(guān)系對建立超鏈接而言是非常重要的。 在HTML文件中提供了三種路徑：絕對路徑、相對路徑和根路徑,6,絕對和相對路徑名,7,要鏈接到另一目錄 (C:example) 下的頁面，可編寫 或,要鏈接到同一目錄 (C:html) 下的頁面，可編寫 或 ,C:html 目錄,C:example目錄,絕對路徑名,相對路徑名,設(shè)置絕對路徑,絕對路徑是指文件的完整路徑，即在進行超鏈接時使用了URL，例如： 絕對路徑通常會在網(wǎng)站的友情鏈接中使用,8,6.2.2 設(shè)置相對路徑,相對路徑是指相對于當(dāng)前文件的路徑，即由當(dāng)前文件如何找到目標文件。采用相對路徑是建立兩個文件之間的相對關(guān)系，可以不受站點和所處服務(wù)器位置的影響。 相對路徑的使用方法： 同一目錄：輸入要鏈接的文件名稱即可 上一級目錄：輸入“./文件名” 下一級目錄：輸入“目錄名/文件名” 對于圖片文件而言，上面內(nèi)容同樣適用。,9,6.2.3 使用根路徑,根路徑的設(shè)置也適合內(nèi)部鏈接的建立，一般情況下不使用根路徑，根路徑以/開頭，后面跟隨文件所在位置的詳細路徑。 例如文件znlj.jpg的根路徑為 /example/ch06/image/znlj.jpg 使用根路徑明顯增加了代碼的復(fù)雜程度 在動態(tài)網(wǎng)頁技術(shù)(ASP，JSP,PHP等)中通常會設(shè)置全局常量保存重要目錄，方便訪問相關(guān)文件，$image + “/catelog/bags/p1.jpg”,10,實例演練,images/logo.gif ./images/logo.gif genres/rock/pinkfloyd.html,實例演練,錨點鏈接,錨點鏈接是指點擊鏈接后跳轉(zhuǎn)到同一文檔的不同部分，鏈接的目標點必須定義為錨標記。 標簽中 的 NAME 屬性用于創(chuàng)建錨標記 主題名稱 為達到這種跳轉(zhuǎn)效果，需在 HREF 參數(shù)中使用該標記 熱點文字,13,鏈接到同一文檔的某個部分2-1,錨記標簽用于使用戶“跳”到文檔的某個部分HTML 的 NAME 屬性用于創(chuàng)建錨標記 為達到這種跳轉(zhuǎn)效果，請在 HREF 參數(shù)中使用該標記,14,主題名稱,主題名稱,鏈接到同一文檔的各個部分2-2,15,. . . 獅子 斑馬 印度豹 獅子 獅子的吼聲從八公里之外就能聽到！雄獅（很容易從鬃毛識別出雌雄）的重量達 250 公斤。而雌獅則要輕得多，只有 180 公斤。 斑馬 沒有任何兩匹斑馬的斑紋完全一樣，因此每匹斑馬都是獨一無二的。斑馬也稱為黑白條紋相間的馬.,19.1.8 設(shè)置圖片鏈接,基本語法, ,語法說明,href屬性是用來設(shè)置圖片的鏈接地址URL， target屬性用來設(shè)置目標窗口的打開方式 img標記中還可以添加其他的屬性，如height、hspace、border等。,19.1.8 設(shè)置圖片鏈接,實例代碼,19.1.8 設(shè)置圖片鏈接,網(wǎng)頁效果,19.1.9 設(shè)置圖片熱區(qū)鏈接,基本語法 ,熱區(qū)鏈接屬性的定義如下： ,19.1.9 設(shè)置圖片熱區(qū)鏈接,語法說明, 標記用來插入圖片和引用映射圖片名稱，即用usemap屬性來引用在標記中所定義的映射圖片名稱，并且要在名稱前加上#號。 標記只有一個name屬性，用來定義映射圖片的名稱。 標記有三個屬性，shape屬性、coords屬性和href屬性。 shape屬性用來定義熱區(qū)的形狀，又有3個屬性值，具體取值見表19-2 coords屬性用來定義熱區(qū)的坐標，不同的形狀其coords屬性的設(shè)置方式也不同，具體可以參見表19-3 href屬性，用來定義超鏈接的目標地址。,19.1.9 設(shè)置圖片熱區(qū)鏈接,表19-2 shape屬性取值說明,表19-2 shape屬性取值說明,19.1.9 設(shè)置圖片熱區(qū)鏈接,示例 選擇矩形熱區(qū) ,手形所在的矩形區(qū)域就是定義好的熱區(qū)鏈接。 通過單擊該區(qū)域即可打開鏈接地址19-1-8-2.html,19.1.9 設(shè)置圖片熱區(qū)鏈接,示例 ,廈大漳州校區(qū)地圖,廈大漳州校區(qū)地圖,中國地圖, ,電子郵件鏈接,用戶可從網(wǎng)頁發(fā)送電子郵件,27, 海豚 充分交流，密切配合 據(jù)說，海豚的交流模式幾乎與人類的一樣復(fù)雜！ 請將您的疑問發(fā)送至 David Fernandez ,下載鏈接,在圖象、文字鏈接的地方，將壓縮文件做為鏈接地址 腳本鏈接： javascript:window.close(),作業(yè),制作頁面-continent/index.html 體現(xiàn)以下技術(shù)的幾種： 內(nèi)部鏈接建立 外部鏈接建立 錨點鏈接 圖像鏈接 圖像映射,29,框架,廣告欄頂部框架(top.htm),商品詳細介紹右側(cè)框架(main.htm),商品導(dǎo)航 左側(cè) 框架(left.htm),為何使用框架,在另一個固定部分 顯示導(dǎo)航部分,在頁面的一個固定部分顯示徽標或靜態(tài)信息,在此處顯示主要內(nèi)容。 站點中只有此部分是變化的。,32,9.1 框架概述,框架用于將瀏覽器窗口劃分為若干個區(qū)域，每個區(qū)域可以分別顯示不同的頁面內(nèi)容；另外框架可以方便地進行網(wǎng)頁的導(dǎo)航。 框架集 框架主要包括兩部分：框架集和框架。 框架集是在一個文檔內(nèi)定義一組框架結(jié)構(gòu)的HTML網(wǎng)頁，它定義了在一個窗口中顯示的框架數(shù)、框架的尺寸和載入到框架中的網(wǎng)頁等 框架指在網(wǎng)頁上定義的一個顯示區(qū)域。,33,框架集語法及屬性, ,標簽屬性如下： Cols：將窗口縱向劃分為幾個框架 Rows：將窗口橫向劃分為幾個框架 Framespacing：設(shè)置框架邊框之間的間隔距離，默認0 Bordercolor：設(shè)置框架邊框顏色（設(shè)置的是間距顏色）,注意：在框架集頁面代碼中不要使用標簽，即與不同時使用,34,補充例題,將窗口分割成左右兩部分，左面占據(jù)20%，框架邊框間距為4像素，顏色為紅色（3-8.htm）（若是上下分割呢？） 代碼如下： 框架的應(yīng)用 ,此處指定上側(cè)框架窗口為190px，*代表剩下的寬度,35,框架的設(shè)置,完成窗口分割后，需要對分割出來的每個子窗口進行控制，相應(yīng)的屬性在標簽中設(shè)置，主要屬性如下： src：設(shè)置子窗口中要顯示的頁面的路徑和名稱 name：設(shè)置子窗口的名稱 frameborder：設(shè)置邊框?qū)挾龋ǔ⑵湓O(shè)置為0 scrolling：設(shè)置是否顯示滾動條，取值有yes、no、auto（默認） noresize：禁止改變子窗口大小 marginwidth marginheight,36,Src屬性應(yīng)用舉例, 框架應(yīng)用 ,37,Name屬性舉例,在frame6.htm中，點擊左側(cè)框架中的超級鏈接，結(jié)果都顯示在新窗口中，若要把左側(cè)框架中的超鏈接“課程特色”、“教學(xué)大綱”、“電子課件”、“電子教案”、“授課計劃”和“教材建設(shè)”所鏈接的頁面內(nèi)容顯示在右側(cè)框架中，該如何進行？ 將右側(cè)框架命名為right 將navigation.html中的每個超鏈接設(shè)置target=right,3.7.6 在框架之間進行鏈接,圖3.20 框架之間的鏈接,39,9.5 浮動框架,使用普通框架很難控制頁面的整體寬度和布局，而浮動框架是一種特殊的框架頁面，在瀏覽器窗口中可以直接將浮動框架嵌入在某個單元格中，以達到通過表格控制頁面布局的目的。語法如下： 注意：浮動框架總是要顯式設(shè)置高度和寬度,40,完成案例iframe.htm,41,為上面案例添加外圍一行一列的外圍表格，用于設(shè)置頁面邊框效果。,