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

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

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

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

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

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

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

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

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

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

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