張鵬 帶你一周hold住htmlcss 第11講 html超鏈接應用 ! (貼圖)

3年前 (2021-07-29)閱讀1086回復0
王樂(lè )楓
王樂(lè )楓
  • 管理員
  • 發(fā)消息
  • 注冊排名2080
  • 經(jīng)驗值50
  • 級別管理員
  • 主題10
  • 回復0
樓主
印刷廠(chǎng)直印加工●彩頁(yè)1000張只需要69元●名片5元每盒-更多產(chǎn)品印刷報價(jià)?聯(lián)系電話(huà):138-1621-1622(微信同號)

  一、超文本(HyperText)

  標記語(yǔ)言的真正威力在于其收集能力,它可以將收集來(lái)的文檔組合成一個(gè)完整的信息庫,并且可以將文檔庫與世界上的其他文檔集合鏈接起來(lái)夏普550 錯誤代碼H3-02 。

  這樣的話(huà),讀者不僅可以完全控制文檔在屏幕上的顯示,還可以通過(guò)超鏈接來(lái)控制瀏覽信息的順序夏普550 錯誤代碼H3-02 。這就是 HTML 和 XHTML 中的 “HT” - 超文本(hypertext),就是它將整個(gè) Web 網(wǎng)絡(luò )連接起來(lái)。

  二、超鏈接(Hyper Link)

  1.超鏈接定義

  超鏈接(Hyperlink):是網(wǎng)頁(yè)中指向一個(gè)目標的連接關(guān)系,這個(gè)目標可以是網(wǎng)頁(yè)、網(wǎng)頁(yè)中的具體位置、圖片、郵件地址、文件、應用程序等夏普550 錯誤代碼H3-02 。

  鏈接標記的屬性

021yin.com 然后回車(chē),會(huì )打開(kāi)網(wǎng)頁(yè)教學(xué)網(wǎng)網(wǎng)站的主頁(yè)面。可以看到,頁(yè)面中有多個(gè)欄目,多條新聞等,最上方不同的欄目就是文字鏈接。

  鏈接標記雖然在網(wǎng)站設計制作中占有不可替代的地位,但是其標記只有一個(gè),那就是;a;標記夏普550 錯誤代碼H3-02 。本站介紹的鏈接應用都是基于;a;標記基礎上的。

  鏈接標記的屬性見(jiàn)下表

  關(guān)于路徑

  每一個(gè)文件都有自己的存放位置和路徑,理解一個(gè)文件到要鏈接的那個(gè)文件之間的路徑關(guān)系是創(chuàng )建鏈接的根本夏普550 錯誤代碼H3-02 。url—統一資源定位器,指的就是每一個(gè)網(wǎng)站都具有的獨立的地址。同一個(gè)網(wǎng)站下的每一個(gè)網(wǎng)頁(yè)都屬于同一個(gè)地址之下,但是當創(chuàng )建網(wǎng)頁(yè)時(shí),不可能也不需要為每一個(gè)鏈接都輸入完全的地址。我們只需要確定當前文檔同站點(diǎn)根目錄之間的相對路徑關(guān)系。因此鏈接可以分為以下3種:

  絕對路徑

021yin.com

  相對路徑

  如news/default.htm

  根路徑

  如/website/news/default.htm

  在了解這三種地址形式前先要理解另外兩個(gè)概念:內部鏈接和外部鏈接

  內部和外部都是相對于站點(diǎn)文件夾而言,如果鏈接指向的是站點(diǎn)文件夾之內的文件,就是內部鏈接夏普550 錯誤代碼H3-02 。如果鏈接指向站點(diǎn)文件夾之外的,就被稱(chēng)做外部鏈接。在添加外部鏈接的時(shí)候,將用到下面所講的絕對地址;而添加內部鏈接的時(shí)候,將用到下面所講的根目錄相對地址和文件相對地址。

  下面分別介紹這3種鏈接:

  絕對路徑

  絕對路徑為文件提供完全的路徑,包括適應的協(xié)議,如 。一般常見(jiàn)的有:

021yin.com

  ftp://202.136.254.1

  當鏈接到其它網(wǎng)站中的文件時(shí),必須使用絕對鏈接夏普550 錯誤代碼H3-02 。

  相對路徑

  相對鏈接最適合網(wǎng)站的內部鏈接夏普550 錯誤代碼H3-02 。只要是同一網(wǎng)站之下的,即使不在同一個(gè)目錄下,相對鏈接也非常合適。文件相對地址是書(shū)寫(xiě)內部鏈接的理想形式。只要是處于站點(diǎn)文件夾之內,相對地址可以自由地在文件之間構建鏈接。這種地址形式利用的是構建鏈接的兩個(gè)文件之間的相對關(guān)系,不受站點(diǎn)文件夾所處服務(wù)器位置的影響。因此這種書(shū)寫(xiě)形式省略了絕對地址中的相同部分。這樣做的優(yōu)點(diǎn)是:站點(diǎn)文件夾所在的服務(wù)器地址發(fā)生改變時(shí),文件夾的所有內部鏈接(如果采用此種地址形式)都不會(huì )出問(wèn)題。

  相對鏈接的使用方法為:

  如果鏈接到同一目錄下,則只需輸入要鏈接文檔的名稱(chēng)夏普550 錯誤代碼H3-02 。

  要鏈接到下一級目錄中的文件,只需先輸入目錄名,然后加" / "再輸入文件名夏普550 錯誤代碼H3-02 。

  如鏈接到上一級目錄中的文件,則先輸入"…/ ",再輸入目錄名、文件名夏普550 錯誤代碼H3-02 。

  根路徑

  根目錄相對地址同樣適應于創(chuàng )建內部鏈接,但大多數情況下,不建議使用此種地址形式夏普550 錯誤代碼H3-02 。它在下列情況下使用:

  當站點(diǎn)的規模非常大夏普550 錯誤代碼H3-02 ,防置于幾個(gè)服務(wù)器上時(shí)

  當一個(gè)服務(wù)器上同時(shí)放置幾個(gè)站點(diǎn)時(shí)

  根目錄相對地址的書(shū)寫(xiě)形式也很簡(jiǎn)單,首先以一個(gè)斜杠開(kāi)頭,代表根目錄,然后書(shū)寫(xiě)文件夾名,最后書(shū)寫(xiě)文件名夏普550 錯誤代碼H3-02 。根路徑以" / "開(kāi)始,然后是根目錄下的目錄名。

  制作內部鏈接

  所謂內部鏈接,指的是在同一個(gè)網(wǎng)站內部,不同的html頁(yè)面之間的鏈接關(guān)系夏普550 錯誤代碼H3-02 。在建立網(wǎng)站內部鏈接的時(shí)候,要考慮到使鏈接具有清晰的導航結構,使用戶(hù)方便地找到所需內容的html文件。

  下面我們建立3個(gè)網(wǎng)頁(yè)頁(yè)面,在第一個(gè)8-1.htm網(wǎng)頁(yè)頁(yè)面中,制作到8-1-1.htm和8-1-2.htm兩個(gè)頁(yè)面的鏈接,并在兩個(gè)被鏈接的頁(yè)面中制作返回到8-1.htm頁(yè)面的鏈接夏普550 錯誤代碼H3-02 。3個(gè)頁(yè)面的目錄關(guān)系如下所示:

  8-1.htm和8-1-1.htm存放在網(wǎng)站的根目錄下,8-1-2.htm存放在test目錄下夏普550 錯誤代碼H3-02 。

  基本語(yǔ)法

  ;a href="File_name";鏈接文字;/a;

  語(yǔ)法解釋

  通過(guò)href屬性指定地址,File_name為要鏈接文件的路徑,"鏈接文字"為鼠標單擊的文字內容夏普550 錯誤代碼H3-02 。

  文件范例:8-1.htm

  通過(guò);a;標記建立兩個(gè)鏈接,分別鏈接到另外兩個(gè)html頁(yè)面中夏普550 錯誤代碼H3-02 。

  01 ;!-- ------------------------------ --;

  02 ;!-- 文件范例:8-1.htm --;

  03 ;!-- 文件說(shuō)明:建立內部鏈接 --;

  04 ;!-- ------------------------------ --;

  05 ;html;

  06 ;head;

  07 ;title;建立內部鏈接;/title;

  08 ;/head;

  09 ;body;

  10 ;h1;主流的網(wǎng)頁(yè)設計軟件;/h1;

  11 ;p;目前,網(wǎng)頁(yè)技術(shù)進(jìn)入了一個(gè)新的階段,現在的網(wǎng)頁(yè)再也不是圖片的堆積和枯燥無(wú)味的文本了,人們現在追求的是網(wǎng)頁(yè)的動(dòng)態(tài)效果和交互性夏普550 錯誤代碼H3-02 。而Macromedia公司的網(wǎng)頁(yè)設計三劍客軟件Dreamweaver、Flash、Fireworks正是交互性網(wǎng)頁(yè)設計的杰出代表,其最新版本mx 2004繼承了前期版本的優(yōu)點(diǎn),進(jìn)行了功能的進(jìn)一步整合,非常適合于網(wǎng)頁(yè)設計和網(wǎng)站建設的需要。;/p;

  12 ;a href="8-1-1.htm";網(wǎng)頁(yè)制作軟件Dreamweaver mx 2004;/a;

  13 ;br;

  14 ;a href="test/8-1-2.htm";網(wǎng)頁(yè)動(dòng)畫(huà)軟件Flash mx 2004;/a;

  15 ;/body;

  16 ;/html;

  文件說(shuō)明

  第12行定義了到8-1-1.htm同級頁(yè)面的鏈接,第14行定義了到test目錄下的8-1-2.htm頁(yè)面的鏈接夏普550 錯誤代碼H3-02 。

  文件范例:8-1-1.htm

  這個(gè)文件是"網(wǎng)頁(yè)制作軟件Dreamweaver mx 2004"頁(yè)面,通過(guò);a;標記建立返回到 8-1.htm頁(yè)面的鏈接夏普550 錯誤代碼H3-02 。

  01 ;!-- ------------------------------ --;

  02 ;!-- 文件范例:8-1-1.htm --;

  03 ;!-- 文件說(shuō)明:內部鏈接文件之一 --;

  04 ;!-- ------------------------------ --;

  05 ;html;

  06 ;head;

  07 ;title;內部鏈接文件之一;/title;

  08 ;/head;

  09 ;body;

  10 ;h1;Dreamweaver mx 2004;/h1;

  11 Dreamweaver mx 2004作為網(wǎng)頁(yè)設計軟件的代表,具有站點(diǎn)管理和頁(yè)面制作兩大核心功能夏普550 錯誤代碼H3-02 。如果你也擁有織夢(mèng)的理想,那么這個(gè)軟件無(wú)疑是幫助你實(shí)現夢(mèng)想的最好手段。完全的可視化編輯、優(yōu)秀的代碼控制、完整的站點(diǎn)規劃和管理、超乎尋常的動(dòng)態(tài)效果設計,這些都為設計人員提供了得心應手的途徑。mx版本的軟件將動(dòng)態(tài)網(wǎng)站和傳統的靜態(tài)頁(yè)面功能進(jìn)行了更進(jìn)一步的整合,無(wú)疑為制作網(wǎng)站提供了更多的實(shí)現方式。

  12 ;p;

  13 ;a href="8-1.htm";返回;/a;

  14 ;/body;

  15 ;/html;

  文件說(shuō)明

  第13行定義了到8-1.htm同級頁(yè)面的鏈接夏普550 錯誤代碼H3-02 。

  基本語(yǔ)法

  ;a href="File_name" target="value";鏈接文字;/a;

  語(yǔ)法解釋

  通過(guò)target定義目標窗口夏普550 錯誤代碼H3-02 ,value的取值如下表所示

  10 ;h1;主流的網(wǎng)頁(yè)設計軟件;/h1;

  11 目前,網(wǎng)頁(yè)技術(shù)進(jìn)入了一個(gè)新的階段,現在的網(wǎng)頁(yè)再也不是圖片的堆積和枯燥無(wú)味的文本了,人們現在追求的是網(wǎng)頁(yè)的動(dòng)態(tài)效果和交互性夏普550 錯誤代碼H3-02 。而Macromweaver公司的網(wǎng)頁(yè)設計三劍客軟件Dreamweaver、Flash、Fireworks正是交互性網(wǎng)頁(yè)設計的杰出代表,其最新版本mx 2004繼承了前期版本的優(yōu)點(diǎn),進(jìn)行了功能的進(jìn)一步整合,非常適合于網(wǎng)頁(yè)設計和網(wǎng)站建設的需要。;p;

  12 ;a href="8-1-1.htm" target="_self";網(wǎng)頁(yè)制作軟件Dreamweaver mx 2004;/a;

  13 ;br;

  14 ;a href="test/8-1-2.htm" target="_blank";網(wǎng)頁(yè)動(dòng)畫(huà)軟件Flash mx 2004;/a;

  15 ;/body;

  16 ;/html;

  文件說(shuō)明

  第12行定義了在原窗口顯示鏈接頁(yè)面,第14行定義了在新開(kāi)窗口顯示鏈接頁(yè)面夏普550 錯誤代碼H3-02 。

  建立書(shū)簽鏈接

  在瀏覽頁(yè)面的時(shí)候,如果頁(yè)面的內容較多、頁(yè)面過(guò)長(cháng),瀏覽的時(shí)候需要不斷拖動(dòng)滾動(dòng)條,很不方便,如果要尋找特定的內容,就更加不方便夏普550 錯誤代碼H3-02 。這時(shí)如果能在該網(wǎng)頁(yè)或另外一個(gè)頁(yè)面上建立目錄,瀏覽者單擊目錄上的項目就能自動(dòng)跳到網(wǎng)頁(yè)相應的位置進(jìn)行閱讀,應該是件很方便的事,并且還可以在頁(yè)面中設定諸如"返回首頁(yè)"的鏈接。這就稱(chēng)為書(shū)簽鏈接。

  建立書(shū)簽鏈接分為兩步:一是建立書(shū)簽,二是為書(shū)簽建立鏈接夏普550 錯誤代碼H3-02 。

  下面來(lái)制作一個(gè)包含網(wǎng)頁(yè)設計三劍客內容的軟件介紹頁(yè)面,并為其中的每一個(gè)軟件建立一個(gè)書(shū)簽,這個(gè)書(shū)簽就是隨后將要跳轉轉的位置夏普550 錯誤代碼H3-02 。也就是說(shuō),這個(gè)書(shū)簽就確定了一個(gè)頁(yè)面內部的鏈接導引依據。

  基本語(yǔ)法

  ;a name="name";文字;/a;

  10 ;h1;主流的網(wǎng)頁(yè)設計軟件;/h1;

  11 ;a name="dw";;h3;Dreamweaver mx 2004;/h3;;/a;

  12 Dreamweaver mx 2004作為網(wǎng)頁(yè)設計軟件的代表,具有站點(diǎn)管理和頁(yè)面制作兩大核心功能夏普550 錯誤代碼H3-02 。如果你也擁有織夢(mèng)的理想,那么這個(gè)軟件無(wú)疑是幫助你實(shí)現夢(mèng)想的最好手段。完全的可視化編輯、優(yōu)秀的代碼控制、完整的站點(diǎn)規劃和管理、超乎尋常的動(dòng)態(tài)效果設計,這些都為設計人員提供了得心應手的途徑。mx版本的軟件將動(dòng)態(tài)網(wǎng)站和傳統的靜態(tài)頁(yè)面功能進(jìn)行了更進(jìn)一步的整合,無(wú)疑為制作網(wǎng)站提供了更多的實(shí)現方式。

  13 ;p;

  14 ;a name="fl";;h3;Flash mx 2004;/h3;;/a;

  15 Flash mx 2004作為網(wǎng)頁(yè)矢量交互動(dòng)畫(huà)軟件的代表,提供了圖形繪制、動(dòng)畫(huà)制作和交互三大功能夏普550 錯誤代碼H3-02 。掌握了這個(gè)軟件的核心,也就有能力在網(wǎng)上沖浪的同時(shí),充當一把閃客的角色。越來(lái)越多的個(gè)人、商業(yè)網(wǎng)站采用Flash技術(shù),廣告banner、動(dòng)畫(huà)片頭、mtv、交互游戲,廣闊的應用為Flash的學(xué)習者提供了廣泛的發(fā)展平臺,學(xué)習Flash mx 2004軟件更是一個(gè)具有誘惑力的過(guò)程。

  16 ;p;

  17 ;a name="fw";;h3;Fireworks mx 2004;/h3;;/a;

  18 Fireworks mx 2004作為網(wǎng)頁(yè)圖像設計軟件的代表,在繼承了前期版本圖形繪制、頁(yè)面特效功能的同時(shí),大大地發(fā)展了位圖圖像方面的處理功能,這無(wú)疑使這個(gè)軟件有了更大的向Photoshop挑戰的資本,而其在網(wǎng)頁(yè)設計方面的諸多應用,又是無(wú)任何軟件可與之媲美夏普550 錯誤代碼H3-02 。與Dreamweaver mx 2004的整合使其在專(zhuān)業(yè)網(wǎng)站圖像設計過(guò)程中,早已并繼續扮演著(zhù)不可或缺的角色。

  19 ;p;

  20 ;/body;

  21 ;/html;

  文件說(shuō)明

  第11、14、17行分別定義了3各段落標題文字的書(shū)簽名稱(chēng)dw、fl、fw夏普550 錯誤代碼H3-02 。

  鏈接同一頁(yè)面中的書(shū)簽

  下面我們就為制作的8-3.htm制作好鏈接,我們希望在頁(yè)面的起始位置制作3個(gè)鏈接,分別鏈接到每一個(gè)軟件介紹的位置上夏普550 錯誤代碼H3-02 。

  基本語(yǔ)法

  ;a href="bookmark_name";文字鏈接;/a;

  語(yǔ)法解釋

  bookmark_name就是剛剛定義的書(shū)簽名稱(chēng)夏普550 錯誤代碼H3-02 。

  10 ;h1;主流的網(wǎng)頁(yè)設計軟件;/h1;

  11 ;a href="#dw";Dreamweaver mx 2004;/a;

  12 ;a href="#fl";Flash mx 2004;/a;

  13 ;a href="#fw";Fireworks mx 2004;/a;

  14 ;a name="dw";;h3;Dreamweaver mx 2004;/h3;;/a;

  15 Dreamweaver mx 2004作為網(wǎng)頁(yè)設計軟件的代表,具有站點(diǎn)管理和頁(yè)面制作兩大核心功能夏普550 錯誤代碼H3-02 。如果你也擁有織夢(mèng)的理想,那么這個(gè)軟件無(wú)疑是幫助你實(shí)現夢(mèng)想的最好手段。完全的可視化編輯、優(yōu)秀的代碼控制、完整的站點(diǎn)規劃和管理、超乎尋常的動(dòng)態(tài)效果設計,這些都為設計人員提供了得心應手的途徑。mx 2004版本的軟件將動(dòng)態(tài)網(wǎng)站和傳統的靜態(tài)頁(yè)面功能進(jìn)行了更進(jìn)一步的整合,無(wú)疑為制作網(wǎng)站提供了更多的實(shí)現方式。

  16 ;p;

  17 ;a name="fl";;h3;Flash mx 2004;/h3;;/a;

  18 Flash mx 2004作為網(wǎng)頁(yè)矢量交互動(dòng)畫(huà)軟件的代表,提供了圖形繪制、動(dòng)畫(huà)制作和交互三大功能夏普550 錯誤代碼H3-02 。掌握了這個(gè)軟件的核心,也就有能力在網(wǎng)上沖浪的同時(shí),充當一把閃客的角色。越來(lái)越多的個(gè)人、商業(yè)網(wǎng)站采用Flash技術(shù),廣告banner、動(dòng)畫(huà)片頭、mtv、交互游戲,廣闊的應用為Flash的學(xué)習者提供了廣泛的發(fā)展平臺,學(xué)習Flash mx 2004軟件更是一個(gè)具有誘惑力的過(guò)程。

  19 ;p;

  20 ;a name="fw";;h3;Fireworks mx 2004;/h3;;/a;

  21 Fireworks mx 2004作為網(wǎng)頁(yè)圖像設計軟件的代表,在繼承了前期版本圖形繪制、頁(yè)面特效功能的同時(shí),大大地發(fā)展了位圖圖像方面的處理功能,這無(wú)疑使這個(gè)軟件有了更大的向Photoshop挑戰的資本,而其在網(wǎng)頁(yè)設計方面的諸多應用,又是無(wú)任何軟件可與之媲美夏普550 錯誤代碼H3-02 。與Dreamweaver mx 2004的整合使其在專(zhuān)業(yè)網(wǎng)站圖像設計過(guò)程中,早已并繼續扮演著(zhù)不可或缺的角色。

  22 ;p;

  23 ;/body;

  24 ;/html;

  文件說(shuō)明

  第11、12、13行分別定義了到3個(gè)段落標題文字的書(shū)簽鏈接夏普550 錯誤代碼H3-02 。

  鏈接到其它頁(yè)面中的書(shū)簽

  在頁(yè)面之間,也可以完成跳轉到另一頁(yè)面某一位置的過(guò)程夏普550 錯誤代碼H3-02 。這需要指定好鏈接的頁(yè)面和鏈接的書(shū)簽位置。

  基本語(yǔ)法

  ;a href="File_name#bookmark_name";文字鏈接;/a;

  語(yǔ)法解釋

  File_name是要跳轉到的頁(yè)面路徑,bookmark_name是定義的書(shū)簽名稱(chēng)夏普550 錯誤代碼H3-02 。

  10 ;h1;主流的網(wǎng)頁(yè)設計軟件;/h1;

  11 目前,網(wǎng)頁(yè)技術(shù)進(jìn)入了一個(gè)新的階段,現在的網(wǎng)頁(yè)再也不是圖片的堆積和枯燥無(wú)味的文本了,人們現在追求的是網(wǎng)頁(yè)的動(dòng)態(tài)效果和交互性夏普550 錯誤代碼H3-02 。而Macromedia公司的網(wǎng)頁(yè)設計三劍客軟件Dreamweaver、Flash、Fireworks正是交互性網(wǎng)頁(yè)設計的杰出代表,其最新版本mx 2004繼承了前期版本的優(yōu)點(diǎn),進(jìn)行了功能的進(jìn)一步整合,非常適合于網(wǎng)頁(yè)設計和網(wǎng)站建設的需要。;p;

  12 ;a href="8-4.htm#dw";Dreamweaver mx 2004;/a;

  13 ;a href="8-4.htm#fl";Flash mx 2004;/a;

  14 ;a href="8-4.htm#fw";Fireworks mx 2004;/a;

  15 ;/body;

  16 ;/html;

  文件說(shuō)明

  第12、13、14行分別定義了到8-4.htm頁(yè)面中3個(gè)段落標題文字的書(shū)簽鏈接夏普550 錯誤代碼H3-02 。

  外部鏈接

  所謂外部鏈接,指的是跳轉到當前網(wǎng)站外部,與其它網(wǎng)站中頁(yè)面或其它元素之間的鏈接關(guān)系夏普550 錯誤代碼H3-02 。這種鏈接在一般情況下需要書(shū)寫(xiě)絕對的鏈接地址。

  制作外部鏈接的時(shí)候,使用url統一資源定位符來(lái)定位萬(wàn)維網(wǎng)信息,這種方式可以簡(jiǎn)潔、明了、準確地描述信息所在的地點(diǎn)夏普550 錯誤代碼H3-02 。最常見(jiàn)的url格式是"http://",其它的格式如表所示。

  鏈接到外部網(wǎng)站

  頁(yè)面中的常用友情鏈接,經(jīng)常是單擊后可以訪(fǎng)問(wèn)別人的網(wǎng)站,達到互相交流信息的目的夏普550 錯誤代碼H3-02 。下面就是制作鏈接到外部網(wǎng)站的方法。

  基本語(yǔ)法

  ;a href=";

  語(yǔ)法解釋

  " 。

021yin.com /icd/video.shtml?from=wl

0
0
收藏0
回帖

張鵬 帶你一周hold住htmlcss 第11講 html超鏈接應用 ! (貼圖) 期待您的回復!

取消
載入表情清單……
載入顏色清單……
插入網(wǎng)絡(luò )圖片

取消確定

圖片上傳中
編輯器信息
提示信息