《用HTML建立超鏈接》PPT課件.ppt

1、第四講,用HTML建立超鏈接,本章目標(biāo),Copyright 2010-2012 Hdwnt Inc. All Rights Reserved.,掌握使用HTML建立超級鏈接 掌握HTML如何設(shè)置錨點(diǎn),Copyright 2010-2012 Hdwnt Inc. All Rights Reserved.,4.1 設(shè)置基本文字超鏈接,超級鏈接基礎(chǔ),1. 理解超鏈接 超鏈接是由源端點(diǎn)到目標(biāo)端點(diǎn)的一種跳轉(zhuǎn)。源端點(diǎn)可以是網(wǎng)頁中的一段文本或一幅圖像等。目標(biāo)端點(diǎn)可以是任意類型的網(wǎng)絡(luò)資源，例如可以是一個網(wǎng)頁、一幅圖像、一首歌曲、一段動畫或一個程序等。 2 .按照目標(biāo)端點(diǎn)的不同，可以將超鏈接分為以下幾種形式。

2、(1) 文件鏈接：這種鏈接的目標(biāo)端點(diǎn)是的一個文件，它可以位于當(dāng)前網(wǎng)頁所在的服務(wù)器，也可以位于其他服務(wù)器。 (2) 錨點(diǎn)鏈接：這種鏈接的目標(biāo)端點(diǎn)是網(wǎng)頁中的一個位置，通過這種鏈接可以從當(dāng)前網(wǎng)頁跳轉(zhuǎn)到本頁面或其他頁面中的指定位置。 (3) E-mail鏈接：通過這種鏈接可以啟動電子郵件客戶端程序（如Outlook或FoxMail等），并允許訪問者向指定的地址發(fā)送郵件。,頁面鏈接標(biāo)簽,鏈接到其他頁面 免費(fèi)注冊,鏈接的地址, 鏈接到其他頁面 免費(fèi)注冊 登錄 ,鏈接內(nèi)容,單擊”免費(fèi)注冊”之后鏈接到的頁面,Copyright 2010-2012 Hdwnt Inc. All Rights Reserved.

3、,頁面鏈接標(biāo)簽,鏈接到其他頁面 相對路徑 指定從根目錄到文件的完整路徑。 絕對路徑 指定相對于當(dāng)前文件的文件位置。,在同一個文件夾下有兩個html文件，從一個文件超鏈接到另一個文件的路徑有幾種方式？,兩種方式：相對路徑和絕對路徑,Copyright 2010-2012 Hdwnt Inc. All Rights Reserved.,頁面鏈接標(biāo)簽,要鏈接到同一目錄 (C:HTML) 下的頁面，可編寫 或 ,相對路徑名,絕對路徑名,Copyright 2010-2012 Hdwnt Inc. All Rights Reserved.,超鏈接示例,頁面鏈接標(biāo)簽,要實(shí)現(xiàn)如下圖所示的超鏈接效果，怎么辦？

4、,演示示例：演示錨鏈接的例子,使用錨記標(biāo)簽,Copyright 2010-2012 Hdwnt Inc. All Rights Reserved.,頁面鏈接標(biāo)簽,鏈接到本頁面 錨記標(biāo)簽用于使用戶“跳”到文檔的某個部分 HTML 的 NAME 屬性用于創(chuàng)建錨標(biāo)記 主題名稱 為達(dá)到這種跳轉(zhuǎn)效果，請?jiān)?HREF 參數(shù)中使用該標(biāo)記 主題名稱 注意：href屬性賦的值若是錨站的name屬性值，則必須在書簽名前邊加一個“#”號。,演示示例：演示錨鏈接的例子, 鏈接到其他頁面 新人上路 新人上路指南 ,1、定義錨標(biāo)記,2、鏈接到錨標(biāo)記所在位置,Copyright 2010-2012 Hdwnt Inc. A

5、ll Rights Reserved.,Copyright 2010-2012 Hdwnt Inc. All Rights Reserved.,命名錨站示例,頁面鏈接標(biāo)簽,電子郵件鏈接 要鏈接電子郵件，可在鏈接標(biāo)簽中插入”mailto:郵箱地址” 站長信箱,演示示例：演示電子郵件鏈接, 電子郵件鏈接 站長信箱 ,單擊”站長信箱”鏈接后的輸出結(jié)果,任何正確的電子郵箱地址均可,使用圖像創(chuàng)建圖片鏈接,標(biāo)記其它常用屬性 TARGET：該屬性是可選項(xiàng)，用于指定一個窗口或框架的名稱，目標(biāo)文檔將在該窗口或框架中打開。如果省略該屬性，則目標(biāo)文檔將取代包含該超鏈接的文檔。TARGET屬性的取值既可以是窗口或框架

6、的名稱，也可以用“_blank”指定將鏈接的目標(biāo)文件加載到未命名的新瀏覽器窗口中；用“_parent”指定將鏈接的目標(biāo)文件加載到包含鏈接的父框架頁或窗口中，如果包含鏈接的框架不是嵌套的，則鏈接的目標(biāo)文件加載到整個瀏覽器窗口中；用“_self”指定將鏈接的目標(biāo)文件加載到鏈接所在的同一框架或窗口中；用“_top”指定將鏈接的目標(biāo)文件加載到整個瀏覽器窗口中，并由此刪除所有框架。 TITLE：該屬性也是可選項(xiàng)，用于指定指向超鏈接時所顯示的標(biāo)題文字,使用圖像創(chuàng)建圖片鏈接,可以為圖片設(shè)置鏈接，使其指向其它頁面。要設(shè)置圖片鏈接，只需要在錨站標(biāo)記和之間包含標(biāo)記，并在錨站標(biāo)記的href屬性中添加要鏈接到目標(biāo)文件

7、名稱。,使用圖像使用縮略圖,即用一幅文件較小的副本圖片來代替原來較大的圖片，將其加入到頁面中，再在較小的副本圖片上創(chuàng)建一個指向原來的大圖片的鏈接。這個副本圖片稱為“縮略圖”。,創(chuàng)建圖像地圖,圖像地圖是圖片鏈接的一種延伸，在一個圖像地圖中可以設(shè)置多個鏈接，可以連接到什么頁面主要取決于使用者點(diǎn)擊了圖片的哪個部分。 在一張圖像地圖中，整張圖片被分成多塊活動的區(qū)域，這些區(qū)域被稱為“熱點(diǎn)”。用戶需要自己定義這些熱點(diǎn)，把它們分別鏈接到各自獨(dú)立的URI地址。 圖像地圖的基本類型包括兩種： 客戶端圖像地圖：該地圖將直接被瀏覽器處理 服務(wù)器端圖像地圖：該地圖將被Web服務(wù)器上的一段程序負(fù)責(zé)解析處理,影像地圖標(biāo)記

8、 ,標(biāo)記形式 熱點(diǎn)標(biāo)記（）屬性 href屬性，用于設(shè)定該熱點(diǎn)所鏈接的url地址。 shape和coods屬性，shape和coords是兩個主要的參數(shù)，用于設(shè)定熱點(diǎn)的形狀和大小。 shape=“rect” ，shape=“circle” ，shape=poligon,圖像地圖實(shí)例,滾動標(biāo)簽, 滾動文字或圖像 ,滾動延遲時間,滾動對象的方向,說明： scrolldelay：表示滾動延遲時間，默認(rèn)值為90。 direction：表示滾動的方向，默認(rèn)為從右向左。,Copyright 2010-2012 Hdwnt Inc. All Rights Reserved.,查看源代碼,滾動標(biāo)簽,水平滾動 垂

9、直滾動 Avon化妝品 雅詩蘭黛 ,水平向左移動,垂直向上移動,圖片和文字同時垂直向上移動,聲明滾動文字結(jié)束,聲明滾動文字“水平滾動”開始，并且將會以默認(rèn)方式從右向左滾動,Copyright 2010-2012 Hdwnt Inc. All Rights Reserved.,移動的常用屬性,文字移動方向的設(shè)置 文字移動方式的設(shè)置 文字移動循環(huán)的設(shè)置 文字移動速度與延時的設(shè)置 文字移動底色的設(shè)置 文字移動面積的設(shè)置,移動的常用屬性,DIRECTION屬性決定了文字的移動方向：,移動的常用屬性,BEHAVIOR屬性決定了文字的移動方式：,移動的常用屬性,LOOP屬性決定了文字的移動次數(shù)：,移動的常

10、用屬性,SCROLLAMOUNT屬性決定了文字的移動速度：,移動的常用屬性,SCROLLDELAY屬性決定了將中間的字體循環(huán)移動的延時。,移動的常用屬性,HEIGHT、 WIDTH和BGCOLOR屬性分別控制了文字移動面積的高度、寬度和背景顏色。,框架之間的鏈接 - p59,1建立框架與框架集 2用COLS屬性將窗口分為左右兩部分 3用ROWS屬性將窗口分為上中下三部分 4框架的嵌套 5用SRC屬性在框架中插入網(wǎng)頁 6用SRC屬性在框架之間鏈接 7創(chuàng)建嵌入式框架,框架,廣告欄頂部框架(top.htm),導(dǎo)航欄左側(cè)框架(left.htm),詳細(xì)內(nèi)容頁面右側(cè)框架 (main.htm),框架的邊框,

11、框架集頁面(FrameSet.htm),框架使用場合,頁面的一個固定部分顯示徽標(biāo)或靜態(tài)信息,在另一個固定部分顯示導(dǎo)航部分詳細(xì)內(nèi)容,在此處顯示詳細(xì)內(nèi)容， 頁面中此部分是變化的。, ,框架的基本結(jié)構(gòu),框架頁面的基本語法,邊框尺寸大小,將窗口分割成左中右3個部分,可選,將窗口分割成上下2個部分,可選,第一個窗口要顯示的網(wǎng)頁,框架的基本結(jié)構(gòu), rows_cols框架 ,將窗口分割成上中下3部分,窗口邊框的寬度,如果要在瀏覽器中創(chuàng)建左中右三個窗口,該如何實(shí)現(xiàn)？,每個窗口對應(yīng)一個頁面，以及一個框架集頁面，總共需要幾個HTML頁面文件？,如何創(chuàng)建多個復(fù)雜的窗口,要實(shí)現(xiàn)如下圖所示的窗口，該如何制作？,1、分成

12、上下兩個窗口 2、把下面的窗口分成 左右兩個窗口,top窗口,left 窗口,right窗口,如何創(chuàng)建多個復(fù)雜的窗口,創(chuàng)建多個復(fù)雜的窗口實(shí)現(xiàn)步驟如下： 1、創(chuàng)建一個HTML頁面“top.html” 2、創(chuàng)建一個HTML頁面“l(fā)eft.html” 3、創(chuàng)建一個HTML頁面“right.html”,top.html效果圖,left.html效果圖,right.html效果,如何創(chuàng)建多個復(fù)雜的窗口,4、新建多框架HTML頁面“Frame_Sets.html”,. ,設(shè)置無框架邊框,不顯示滾動條,禁止調(diào)整框架大小,框架名稱，便于超文本鏈接錨標(biāo)簽target屬性所引用,如何設(shè)置窗口鏈接的顯示位置,如果在

13、同一個頁面中，要實(shí)現(xiàn)在一個框架窗口中的超鏈接頁面出現(xiàn)在另一個框架窗口中，如何實(shí)現(xiàn)？,演示示例2：不同框架之間超鏈接效果,使用target目標(biāo)窗口屬性,如何設(shè)置窗口鏈接的顯示位置,target目標(biāo)窗口屬性 name“顯示的窗口名” ,target屬性指定了所鏈接的文件出現(xiàn)在名稱為“窗口名”的框架窗口里。, ,target屬性指定了所鏈接的文件出現(xiàn)在名稱為“rightframe”的框架窗口里,演示示例3：使用target=“窗口名”,如何設(shè)置窗口鏈接的顯示位置,target目標(biāo)窗口屬性 四個特殊的窗口 顯示在新窗口 顯示在本窗口 顯示在父窗口 顯示在整個瀏覽器窗口, ,新啟一個窗口打開文件 “right.html”,演示示例4：使用四個特殊的窗口,小結(jié)2,top.html