網(wǎng)頁(yè)設(shè)計(jì)第5章超級(jí)鏈接.ppt

《網(wǎng)頁(yè)設(shè)計(jì)第5章超級(jí)鏈接.ppt》由會(huì)員分享，可在線閱讀，更多相關(guān)《網(wǎng)頁(yè)設(shè)計(jì)第5章超級(jí)鏈接.ppt（44頁(yè)珍藏版）》請(qǐng)?jiān)谘b配圖網(wǎng)上搜索。

1、第5章 超級(jí)鏈接,,清華大學(xué)出版社,主要內(nèi)容,為網(wǎng)頁(yè)添加超鏈接,添加書簽鏈接、電子郵件超鏈接、 FTP鏈接,建立圖像映射,5.1超鏈接簡(jiǎn)介,網(wǎng)頁(yè)文件的最大魅力是超越各個(gè)文件的空間，通過(guò)超鏈接相互連接構(gòu)成一個(gè)紛繁復(fù)雜的互聯(lián)網(wǎng)世界。超鏈接（hyperlink）是一個(gè)網(wǎng)站的精髓，超鏈接在本質(zhì)上屬于一個(gè)網(wǎng)頁(yè)的一部分，它是一種允許一個(gè)網(wǎng)頁(yè)同其他網(wǎng)頁(yè)或站點(diǎn)之間進(jìn)行鏈接的元素。各個(gè)網(wǎng)頁(yè)鏈接在一起后，才能真正構(gòu)成一個(gè)網(wǎng)站。超文本具有的鏈接能力，層層鏈接相關(guān)文件，這種具有超級(jí)鏈能力的特性，即稱為超鏈接。超鏈接除了可鏈接文本外，也可鏈接各種媒體，如聲音、圖像和動(dòng)畫等，通過(guò)它們可以將網(wǎng)站建設(shè)成一個(gè)豐富多彩的多媒體世

2、界。,5.1超鏈接簡(jiǎn)介,5.1超鏈接簡(jiǎn)介,,5.2創(chuàng)建超鏈接,建立超鏈接的標(biāo)記是a(anchor，錨)，以開(kāi)始，以結(jié)束，錨可以指向網(wǎng)絡(luò)上的任何資源：一張HTML頁(yè)面，一幅圖像，一個(gè)聲音或視頻文件等。 基本語(yǔ)法： 超鏈接名稱,5.2創(chuàng)建超鏈接, 創(chuàng)建鏈接 創(chuàng)建鏈接 新浪 百度 北 京 大 學(xué) ,5.2創(chuàng)建超鏈接,,5.2.1設(shè)置超鏈接路徑,建立鏈接時(shí)，屬性“href”定義了這個(gè)鏈接所指的目標(biāo)地址，也就是路徑。理解一個(gè)文件到要鏈接的那個(gè)文件之間的路徑關(guān)系是創(chuàng)建鏈接的根本。每一個(gè)網(wǎng)站都具有獨(dú)一無(wú)二的地址，英文中被稱作URL（Uniform Resource Locator），即統(tǒng)一資源定位器，同一

3、個(gè)網(wǎng)站下的每一個(gè)網(wǎng)頁(yè)都有不同的地址，但是在創(chuàng)建一個(gè)網(wǎng)站的網(wǎng)頁(yè)時(shí)，不需要為每一個(gè)鏈接都輸入完整的地址，我們只需要確定當(dāng)前文檔同站點(diǎn)根目錄之間的相對(duì)路徑關(guān)系就可以了。,5.2.2內(nèi)部鏈接,所謂內(nèi)部鏈接，指的是在同一個(gè)網(wǎng)站內(nèi)部，不同的html頁(yè)面之間的鏈接關(guān)系，在建立網(wǎng)站內(nèi)部鏈接的時(shí)候，要明確哪個(gè)是主鏈接文件（即當(dāng)前頁(yè)），哪個(gè)是被鏈接文件。內(nèi)部鏈接一般采用相對(duì)路徑鏈接比較好。根據(jù)圖5-4所示的某班級(jí)網(wǎng)站站點(diǎn)目錄結(jié)構(gòu)，表5-2所示的是內(nèi)部鏈接語(yǔ)句中相對(duì)路徑的寫法。,5.2.2內(nèi)部鏈接,,5.2.3外部鏈接,所謂外部鏈接，指的是跳轉(zhuǎn)到當(dāng)前網(wǎng)站外部，與其它網(wǎng)站中頁(yè)面或其它元素之間的鏈接關(guān)系。這種鏈接的UR

4、L地址一般要用絕對(duì)路徑，要有完整的URL地址。,5.3.1圖片鏈接,可以為一個(gè)圖片指定鏈接。 基本語(yǔ)法： ,5.3.1圖片鏈接, 建立圖片鏈接 圖片鏈接 ,5.3.1圖片鏈接,,5.3.2書簽鏈接,在瀏覽頁(yè)面時(shí)，如果頁(yè)面篇幅很長(zhǎng)，要不斷的拖動(dòng)滾動(dòng)條，給瀏覽帶來(lái)不便，要是瀏覽者既可以從頭閱讀到尾，又可以很快尋找到自己感興趣的特定內(nèi)容進(jìn)行部分閱讀，這個(gè)時(shí)候就可以通過(guò)書簽鏈接來(lái)實(shí)現(xiàn)。當(dāng)瀏覽者單擊頁(yè)面上的某一“標(biāo)簽”，就能自動(dòng)跳到網(wǎng)頁(yè)相應(yīng)的位置進(jìn)行閱讀，給瀏覽者帶來(lái)方便。,5.3.2書簽鏈接,基本語(yǔ)法： 在同一頁(yè)面內(nèi)要使用書簽鏈接的格式： 鏈接標(biāo)題 在不同頁(yè)面之間要使用書簽鏈接的格式（在不同頁(yè)面中

5、鏈接的前提是需要指定好鏈接的頁(yè)面地址和鏈接的書簽名稱）： 鏈接標(biāo)題 以上兩種書簽鏈接形式，鏈接到的目標(biāo)為： 鏈接內(nèi)容。,5.3.2書簽鏈接,,5.3.2書簽鏈接,,5.3.2書簽鏈接,,5.3.3電子郵件鏈接,在HTML頁(yè)面中建立E-mail鏈接，用戶單擊鏈接，系統(tǒng)會(huì)自動(dòng)啟動(dòng)默認(rèn)的電子郵件軟件，打開(kāi)一個(gè)郵件窗口。 基本語(yǔ)法： 鏈接內(nèi)容,5.3.3電子郵件鏈接, 發(fā)送郵件 這是郵件鏈接： 聯(lián)系我們 ,5.3.3電子郵件鏈接,,5.3.4 FTP鏈接,FTP是一種文件傳輸協(xié)議，它是計(jì)算機(jī)與計(jì)算機(jī)之間能夠相互通信的語(yǔ)言，通過(guò)FTP可以獲得Internet上豐富的資源。 基本語(yǔ)法： 鏈

6、接內(nèi)容,5.3.4 FTP鏈接, ftp鏈接 這是一個(gè)FTP鏈接： 北京大學(xué)FTP服務(wù)器 ,5.3.4 FTP鏈接,,5.3.5下載文件的鏈接,如果希望制作下載文件的鏈接，只需在鏈接地址處輸入文件所在的位置即可。當(dāng)瀏覽器用戶單擊鏈接后，瀏覽器會(huì)自動(dòng)判斷文件的類型，以做出不同情況的處理。 基本語(yǔ)法： 鏈接內(nèi)容,5.3.5下載文件的鏈接, 下載文件 這是一本電子書： 數(shù)據(jù)結(jié)構(gòu)--C# ,5.3.5下載文件的鏈接,,5.4圖像映射,圖像映射就是在圖像上先劃分出不同的區(qū)域，然后定義哪個(gè)目標(biāo)與圖像的哪個(gè)區(qū)域?qū)?yīng)，但單擊圖像的某一區(qū)域，就會(huì)把用戶帶到一個(gè)目標(biāo)，單擊另一區(qū)域，又會(huì)把用戶帶到另

7、外的目標(biāo)。其實(shí)，圖像映射就是將圖像內(nèi)的區(qū)域與一系列URL鏈接起來(lái)了，從而單擊特定區(qū)域就會(huì)把用戶帶到相應(yīng)的內(nèi)容。這里所講的映射是客戶端圖像映射，這和服務(wù)器端圖像映射相比，運(yùn)行速度要快。,5.4圖像映射,基本語(yǔ)法： ,5.4圖像映射, ,5.4圖像映射,鄭州 鄭州，河南省省會(huì)，是中國(guó)重要的內(nèi)陸開(kāi)放城市和歷史文化 名城。鄭州歷史悠久，文化燦爛，旅游資源豐富。 北京 北京中華人民共和國(guó)首都。中央直轄市，簡(jiǎn)稱京，是我國(guó)第 二大超級(jí)現(xiàn)代化大都市。北京是我國(guó)的政治中心、交通中心、文化中心、科 研中心、教育中心。具有較高的國(guó)際知名度。 上海 上海是中國(guó)第一大城市，世界第八大城市，中國(guó)中央四個(gè)

8、直轄市之一。 有超過(guò)2000萬(wàn)人口居住和生活在上海及其附近地區(qū)。 長(zhǎng)春 長(zhǎng)春，吉林省省會(huì)，全省政治、經(jīng)濟(jì)、文化和交通中心， 中國(guó)最大的汽車工業(yè)城市，中國(guó)建成區(qū)面積和建成區(qū)人口第九大城市， 東北地區(qū)中部最大的中心城市。 ,5.4圖像映射,,5.5小實(shí)例,程序5-9描述了班級(jí)網(wǎng)站首頁(yè)導(dǎo)航條的創(chuàng)建，這里綜合運(yùn)用了鏈接和樣式來(lái)設(shè)計(jì)導(dǎo)航。在head部分中的style標(biāo)記中，定義了導(dǎo)航條的使用效果(a.head部分)，當(dāng)訪問(wèn)者鼠標(biāo)移向每個(gè)欄目的名稱時(shí)，字的顏色都會(huì)發(fā)生變化，點(diǎn)擊欄目名，則進(jìn)入相應(yīng)的頁(yè)面。,5.5小實(shí)例, 班級(jí)網(wǎng)站 首頁(yè) 班級(jí)新聞 班級(jí)相冊(cè),5.5小實(shí)例, 個(gè)人主頁(yè) 留言本 網(wǎng)頁(yè)設(shè)計(jì)

9、 關(guān)于我們 ,5.5小實(shí)例,,5.5小實(shí)例, 班級(jí)相冊(cè) .img_x margin: 15px; height: 80px; width: 120px; border: 1px solid #8397A0; 圖片鏈接 ,5.5小實(shí)例, ,5.5小實(shí)例,,小結(jié),1. 一般規(guī)則是，對(duì)于自己站點(diǎn)上的網(wǎng)頁(yè)的鏈接，使用相 對(duì)URL；對(duì)于其他站點(diǎn)上的資源鏈接，使用絕對(duì)URL。 2. 如果指定路徑但省略文件名，就會(huì)鏈接到目錄下的默認(rèn) 文件（網(wǎng)站可以自己定義默認(rèn)頁(yè)面），如果路徑也省略， 就會(huì)鏈接到網(wǎng)站的默認(rèn)主頁(yè)。 3. URL最好使用小寫字母來(lái)表示。 4. 不要使用“點(diǎn)擊這里”作為顯示標(biāo)簽，應(yīng)該使用文本中已 經(jīng)存在的關(guān)鍵詞來(lái)表示鏈接。,小結(jié),5. 可以對(duì)鏈接應(yīng)用樣式進(jìn)行格式化，甚或使用圖像作為標(biāo) 簽，來(lái)吸引用戶的注意力。 6. 可以為頁(yè)面內(nèi)的鏈接規(guī)定制表符順序，這樣訪問(wèn)者就可 以用鍵盤在頁(yè)面上移動(dòng)。 7. 對(duì)于供下載的資源，如果超出了一定的大小，最好事先 進(jìn)行壓縮，甚至把一個(gè)文件分成幾個(gè)壓縮文件，來(lái)保證 傳輸?shù)陌踩?,Thank You !,