網(wǎng)頁設(shè)計第5章超級鏈接

1、Company nameWEB編程基礎(chǔ)編程基礎(chǔ).第第5章章 超級鏈接超級鏈接.主要內(nèi)容 為網(wǎng)頁添加超鏈接為網(wǎng)頁添加超鏈接 添加書簽鏈接、電子郵件超鏈接、添加書簽鏈接、電子郵件超鏈接、 FTP鏈接鏈接 建立圖像映射建立圖像映射 .5.1超鏈接簡介超鏈接簡介 網(wǎng)頁文件的最大魅力是超越各個文件的空間，通過超鏈接相互連接構(gòu)成一個紛繁復(fù)雜的互聯(lián)網(wǎng)世界。超鏈接（hyperlink）是一個網(wǎng)站的精髓，超鏈接在本質(zhì)上屬于一個網(wǎng)頁的一部分，它是一種允許一個網(wǎng)頁同其他網(wǎng)頁或站點之間進(jìn)行鏈接的元素。各個網(wǎng)頁鏈接在一起后，才能真正構(gòu)成一個網(wǎng)站。超文本具有的鏈接能力，層層鏈接相關(guān)文件，這種具有超級鏈能力的特性，即稱為超

2、鏈接。超鏈接除了可鏈接文本外，也可鏈接各種媒體，如聲音、圖像和動畫等，通過它們可以將網(wǎng)站建設(shè)成一個豐富多彩的多媒體世界。 .5.1超鏈接簡介超鏈接簡介.5.1超鏈接簡介超鏈接簡介.5.2創(chuàng)建超鏈接創(chuàng)建超鏈接l建立超鏈接的標(biāo)記是a(anchor，錨)，以開始，以結(jié)束，錨可以指向網(wǎng)絡(luò)上的任何資源：一張HTML頁面，一幅圖像，一個聲音或視頻文件等。 基本語法： 超鏈接名稱.5.2創(chuàng)建超鏈接創(chuàng)建超鏈接創(chuàng)建鏈接創(chuàng)建鏈接創(chuàng)建鏈接創(chuàng)建鏈接新浪新浪 百度百度 北北 京京 大大 學(xué)學(xué) .5.2創(chuàng)建超鏈接創(chuàng)建超鏈接.5.2.1設(shè)置超鏈接路徑l 建立鏈接時，屬性“href”定義了這個鏈接所指的目標(biāo)地址，也就是路徑。

3、理解一個文件到要鏈接的那個文件之間的路徑關(guān)系是創(chuàng)建鏈接的根本。每一個網(wǎng)站都具有獨一無二的地址，英文中被稱作URL（Uniform Resource Locator），即統(tǒng)一資源定位器，同一個網(wǎng)站下的每一個網(wǎng)頁都有不同的地址，但是在創(chuàng)建一個網(wǎng)站的網(wǎng)頁時，不需要為每一個鏈接都輸入完整的地址，我們只需要確定當(dāng)前文檔同站點根目錄之間的相對路徑關(guān)系就可以了。.5.2.2內(nèi)部鏈接l所謂內(nèi)部鏈接，指的是在同一個網(wǎng)站內(nèi)部，不同的html頁面之間的鏈接關(guān)系，在建立網(wǎng)站內(nèi)部鏈接的時候，要明確哪個是主鏈接文件（即當(dāng)前頁），哪個是被鏈接文件。內(nèi)部鏈接一般采用相對路徑鏈接比較好。根據(jù)圖5-4所示的某班級網(wǎng)站站點目錄結(jié)構(gòu)

4、，表5-2所示的是內(nèi)部鏈接語句中相對路徑的寫法。.5.2.2內(nèi)部鏈接.5.2.3外部鏈接l所謂外部鏈接，指的是跳轉(zhuǎn)到當(dāng)前網(wǎng)站外部，與其它網(wǎng)站中頁面或其它元素之間的鏈接關(guān)系。這種鏈接的URL地址一般要用絕對路徑，要有完整的URL地址。 .5.3.1圖片鏈接l可以為一個圖片指定鏈接。 基本語法： .5.3.1圖片鏈接建立圖片鏈接建立圖片鏈接圖片鏈接圖片鏈接 .5.3.1圖片鏈接.5.3.2書簽鏈接l在瀏覽頁面時，如果頁面篇幅很長，要不斷的拖動滾動條，給瀏覽帶來不便，要是瀏覽者既可以從頭閱讀到尾，又可以很快尋找到自己感興趣的特定內(nèi)容進(jìn)行部分閱讀，這個時候就可以通過書簽鏈接來實現(xiàn)。當(dāng)瀏覽者單擊頁面上的

5、某一“標(biāo)簽”，就能自動跳到網(wǎng)頁相應(yīng)的位置進(jìn)行閱讀，給瀏覽者帶來方便。.5.3.2書簽鏈接l基本語法：基本語法： 在同一頁面內(nèi)要使用書簽鏈接的格式： 鏈接標(biāo)題 在不同頁面之間要使用書簽鏈接的格式（在不同頁面中鏈接的前提是需要指定好鏈接的頁面地址和鏈接的書簽名稱）： 鏈接標(biāo)題 以上兩種書簽鏈接形式，鏈接到的目標(biāo)為： 鏈接內(nèi)容。.5.3.2書簽鏈接.5.3.2書簽鏈接.5.3.2書簽鏈接.5.3.3電子郵件鏈接l在HTML頁面中建立E-mail鏈接，用戶單擊鏈接，系統(tǒng)會自動啟動默認(rèn)的電子郵件軟件，打開一個郵件窗口。 基本語法： 鏈接內(nèi)容.5.3.3電子郵件鏈接發(fā)送郵件發(fā)送郵件 這是郵件鏈接：這是郵件

6、鏈接： 聯(lián)系我們聯(lián)系我們 .5.3.3電子郵件鏈接.5.3.4 FTP鏈接lFTP是一種文件傳輸協(xié)議，它是計算機(jī)與計算機(jī)之間能夠相互通信的語言，通過FTP可以獲得Internet上豐富的資源。 基本語法：基本語法： 鏈接內(nèi)容.5.3.4 FTP鏈接ftp鏈接鏈接 這是一個這是一個FTP鏈接：鏈接： 北京大學(xué)北京大學(xué)FTP服務(wù)器服務(wù)器 .5.3.4 FTP鏈接.5.3.5下載文件的鏈接l如果希望制作下載文件的鏈接，只需在鏈接地址處輸入文件所在的位置即可。當(dāng)瀏覽器用戶單擊鏈接后，瀏覽器會自動判斷文件的類型，以做出不同情況的處理。 基本語法：基本語法： 鏈接內(nèi)容.5.3.5下載文件的鏈接下載文件下載

7、文件 這是一本電子書：這是一本電子書：數(shù)據(jù)結(jié)構(gòu)數(shù)據(jù)結(jié)構(gòu)-C# .5.3.5下載文件的鏈接.5.4圖像映射圖像映射 圖像映射就是在圖像上先劃分出不同的區(qū)域，然后定義哪個目標(biāo)與圖像的哪個區(qū)域?qū)?yīng)，但單擊圖像的某一區(qū)域，就會把用戶帶到一個目標(biāo)，單擊另一區(qū)域，又會把用戶帶到另外的目標(biāo)。其實，圖像映射就是將圖像內(nèi)的區(qū)域與一系列URL鏈接起來了，從而單擊特定區(qū)域就會把用戶帶到相應(yīng)的內(nèi)容。這里所講的映射是客戶端圖像映射，這和服務(wù)器端圖像映射相比，運(yùn)行速度要快。.5.4圖像映射圖像映射l基本語法：基本語法： .5.4圖像映射圖像映射 .5.4圖像映射圖像映射鄭州鄭州鄭州，河南省省會，是中國重要的內(nèi)陸開放城市和

8、歷史文化鄭州，河南省省會，是中國重要的內(nèi)陸開放城市和歷史文化名城。鄭州歷史悠久，文化燦爛，旅游資源豐富。名城。鄭州歷史悠久，文化燦爛，旅游資源豐富。 北京北京北京中華人民共和國首都。中央直轄市，簡稱京，是我國第北京中華人民共和國首都。中央直轄市，簡稱京，是我國第二大超級現(xiàn)代化大都市。北京是我國的政治中心、交通中心、文化中心、科二大超級現(xiàn)代化大都市。北京是我國的政治中心、交通中心、文化中心、科研中心、教育中心。具有較高的國際知名度。研中心、教育中心。具有較高的國際知名度。 上海上海上海是中國第一大城市，世界第八大城市，中國中央四個上海是中國第一大城市，世界第八大城市，中國中央四個直轄市之一。直轄

9、市之一。 有超過有超過2000萬人口居住和生活在上海及其附近地區(qū)。萬人口居住和生活在上海及其附近地區(qū)。 長春長春 長春，吉林省省會，全省政治、經(jīng)濟(jì)、文化和交通中心，長春，吉林省省會，全省政治、經(jīng)濟(jì)、文化和交通中心，中國最大的汽車工業(yè)城市，中國建成區(qū)面積和建成區(qū)人口第九大城市，中國最大的汽車工業(yè)城市，中國建成區(qū)面積和建成區(qū)人口第九大城市，東北地區(qū)中部最大的中心城市。東北地區(qū)中部最大的中心城市。 .5.4圖像映射圖像映射.5.5小實例小實例 程序5-9描述了班級網(wǎng)站首頁導(dǎo)航條的創(chuàng)建，這里綜合運(yùn)用了鏈接和樣式來設(shè)計導(dǎo)航。在head部分中的style標(biāo)記中，定義了導(dǎo)航條的使用效果(a.head部分)，

10、當(dāng)訪問者鼠標(biāo)移向每個欄目的名稱時，字的顏色都會發(fā)生變化，點擊欄目名，則進(jìn)入相應(yīng)的頁面。 .5.5小實例小實例班級網(wǎng)站班級網(wǎng)站 首頁首頁 班級新聞班級新聞 班級相冊班級相冊 .5.5小實例小實例 個人主頁個人主頁 留言本留言本 網(wǎng)頁設(shè)計網(wǎng)頁設(shè)計 關(guān)于我們關(guān)于我們 .5.5小實例小實例.5.5小實例小實例 班級相冊班級相冊.img_x margin: 15px;height: 80px;width: 120px;border: 1px solid #8397A0;圖片鏈接圖片鏈接 .5.5小實例小實例 .5.5小實例小實例.小結(jié)小結(jié)1. 一般規(guī)則是，對于自己站點上的網(wǎng)頁的鏈接，使用相 對URL；對于其他站點上的資源鏈接，使用絕對URL。2. 如果指定路徑但省略文件名，就會鏈接到目錄下的默認(rèn) 文件（網(wǎng)站可以自己定義默認(rèn)頁面），如果路徑也省略， 就會鏈接到網(wǎng)站的默認(rèn)主頁。3. URL最好使用小寫字母來表示。4. 不要使用“點擊這里”作為顯示標(biāo)簽，應(yīng)該使用文本中已 經(jīng)存在的關(guān)鍵詞來表示鏈接。.小結(jié)小結(jié) 5. 可以對鏈接應(yīng)用樣式進(jìn)行格式化，甚或使用圖像作為標(biāo) 簽，