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