第4章 用HTML建立超鏈接

1、第四章第四章 用用HTML建立超鏈接建立超鏈接 4.1 設置基本文字超鏈接設置基本文字超鏈接 l建立HTML標記為標記。超鏈接最重 要的兩個要素，設置為超鏈接到文本內(nèi)容和超 鏈接指向的目標地址。 l基本超鏈接的結(jié)構(gòu)如下： 百度 鏈接 標記 屬性 地址鏈接文本 URL的格式的格式 l每個文檔在互聯(lián)網(wǎng)上有唯一的地址，該地址被 稱為統(tǒng)一資源定位器（Uniform Resource Laocator）,簡稱URL。 lURL由四個部分組成：協(xié)議、主機名、文件夾 名和文件名。 http:/ 協(xié)議 主機名 文件夾名 文件名 URL的類型的類型 l超鏈接的URL有兩種類型：絕對URL和相對URL。 l絕對U

2、RL如下： http:/ l相對URL分為兩種： 1、相對文檔的URL，這種URL以鏈接的原文檔為起點。 2、相對服務器的URL，這種URL以服務器的根目錄為前 點。 URL的類型的類型 l l l 超鏈接 l l l 點擊鏈接 01鏈接到第1個網(wǎng)頁。 l 點擊鏈接02鏈接到第2個網(wǎng)頁。 l 點擊鏈接03鏈接到第3個網(wǎng)頁。 l l 絕對URL 服務器相對URL 文檔相對URL 絕對URL和文檔相對URL比較常用。 4.2 設置頁面內(nèi)部特定目標的鏈接設置頁面內(nèi)部特定目標的鏈接 l超鏈接不僅可以跳轉(zhuǎn)到其他頁面，也可以在本 業(yè)內(nèi)跳轉(zhuǎn)。 二者的跳轉(zhuǎn) 目標名稱必 須要一致 4.2 設置頁面內(nèi)部特定目標的

3、鏈接設置頁面內(nèi)部特定目標的鏈接 l l 無標題文檔 l l第1本書 第2本書 第3本書 l精通CSS+DIV網(wǎng)頁樣式與布局 l本書系統(tǒng)地講解了CSS層疊樣式表的能力。 l詳細介紹 l CSS設計徹底研究 l本書是一本深入研究和揭示CSS設計技術(shù)的書籍。本書在以然。 l 詳細介紹 l CSS設計禪意花園 l本書作者是世界著名的網(wǎng)站設計師，性能優(yōu)良且具有強大生命 力的網(wǎng)站。 l l 4.3設置圖片的超鏈接設置圖片的超鏈接 l l l 圖片的超鏈接 l l l l l 4.3設置圖片的超鏈接設置圖片的超鏈接 l為圖片添加一個超鏈接后，瀏覽器就會自動給 圖片加上一個粗邊框，就像在建立文字超鏈接 時會加

4、上下劃線一樣。如果希望去掉這個邊框， 只需要在標記中設置border=“1”后就可 以取消這個邊框。 l 4.4 設置電子郵件鏈接設置電子郵件鏈接 l電子郵件鏈接類似于URL的鏈接方式，格式是mailto:電子郵件地 址。 l l l 郵件的鏈接 l l l 聯(lián)系我們：給我們發(fā) 送郵件。 l l 4.5 設置以新窗口顯示鏈接頁面設置以新窗口顯示鏈接頁面 l如果要在點擊某個鏈接以后，打開一個新的瀏 覽器窗口，在這個新窗口里顯示目標頁面，就 需要在標記中設置”target” 屬性。 lTarget屬性設置為“_blank”，就會自動打開一 個新窗口，顯示目標頁面。 4.5 設置以新窗口顯示鏈接頁面

5、設置以新窗口顯示鏈接頁面 l l l以新窗口方式打開 l l以新窗口 方式打開一個頁面。 l l 4.6 創(chuàng)建熱點區(qū)域創(chuàng)建熱點區(qū)域 l所謂圖片的熱點區(qū)域就是將一個圖片劃分成若 干個鏈接區(qū)域。訪問者點擊不同區(qū)域會鏈接到 不同的目標頁面。 lHTML中可以使用3種類型的熱點區(qū)域：矩形、 圓形和多邊形。 4.6 創(chuàng)建熱點區(qū)域創(chuàng)建熱點區(qū)域 l l l l 矩形 左 上右 下 鏈接地址 4.6 創(chuàng)建熱點區(qū)域創(chuàng)建熱點區(qū)域 l l l 左 上 半徑 各點坐標 4.6 創(chuàng)建熱點區(qū)域創(chuàng)建熱點區(qū)域 l在設計窗口中定位熱點區(qū)域： 4.6 創(chuàng)建熱點區(qū)域創(chuàng)建熱點區(qū)域 l1、創(chuàng)建新文檔，插入圖片。 l2、在屬性面板中選擇

6、要創(chuàng)建的熱點類型（矩 形、圓形、多邊形） l3、畫區(qū)域 l4、指針熱點進行調(diào)整 l5、輸入跳轉(zhuǎn)的目標頁面 l6、選擇跳轉(zhuǎn)方式 4.7 框架之間的鏈接框架之間的鏈接 l框架是一種常用網(wǎng)頁布局工具。它的作用是把 瀏覽器的顯示空間劃分為幾個部分，每個部分 都可以獨立顯示不同的頁面。 建立框架與框架集（建立框架與框架集（ ） l和 標記是與和 同級的，因此，不要將和 標記包含在標記中，否則 標記將無法正常使用。 用用cols屬性將窗口分為左右兩部分屬性將窗口分為左右兩部分 l窗口框架的分割方式有兩種，一種是水平分割，另一 種是垂直分割。在標記中的cols屬性和 rows屬性用來控制窗口的分割方式。 l

7、Cols屬性可以將一個框架集分割為若干列，其中語法 結(jié)構(gòu)是： N1表示窗口1的的寬度，以像素或百分比為單位 *表示分配給前面所有窗口后剩下的寬度。 比如,那么星號就代表50% 用用rows屬性將窗口分為上中下三部分屬性將窗口分為上中下三部分 l l l l l l l 框架的嵌套框架的嵌套 lRows屬性和cols屬性也可以混合起來使用，實現(xiàn)框架的嵌套。 l l l l l l l l l l 用用src屬性在框架中插入網(wǎng)頁屬性在框架中插入網(wǎng)頁 l其語法結(jié)構(gòu)如下： l l l l l l l l 用用src屬性在框架之間鏈接（屬性在框架之間鏈接（P63） lTarget的四種屬性： l_bla

8、nk:表示新打開一個瀏覽器窗口，在其中顯示鏈接 的目標頁面。 l_self:相當于不設置target屬性，窗口中顯示鏈接的目 標頁面。 l_top:表示在頂級框架，也就是在瀏覽器窗口中顯示鏈 接的目標頁面。 l_partent：表示在上一級框架中顯示鏈接的目標頁面。 創(chuàng)建嵌入式框架創(chuàng)建嵌入式框架 l 也稱為“浮動框架”，可以自由控制窗口的大小。 在使用的時候不需要創(chuàng)建框架集，直接插入 即可。 4.8 鏈接增多后網(wǎng)站的組織結(jié)構(gòu)與維護鏈接增多后網(wǎng)站的組織結(jié)構(gòu)與維護 l通常在開發(fā)網(wǎng)站的時候，并不是把所有的網(wǎng)頁 文件都保存在一個站點根目錄下，而是使用不 同的文件夾存放不同性質(zhì)的文件。 l建立起合適的網(wǎng)站文件存儲結(jié)果，能迅速定位 自己需要的文件，或者將制作完成的文件存儲 到相應的目錄中，進行網(wǎng)站的開發(fā)工作。 4.8 鏈接增多后網(wǎng)站的組織結(jié)構(gòu)與維護鏈接增多后網(wǎng)站的組織結(jié)構(gòu)與維護 l方案一 l將不同類型的文件存放在不同的文件夾中，這 種存儲方法使用于中小型的網(wǎng)站，該方法是用 過文件的類型對文件進行管理。 l例如：將圖片文件都放在Pic文件夾中，將聲 音文件都放在sounds文件夾中。 方案二方案二 l按照主題對文件進行分類管理。在這種存儲方 案中，網(wǎng)站的頁面按照不同的主題進行分類存 儲。關(guān)于某個主題的所有文件被存放在一個文 件夾中，然后再進一步細分文件