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

第5章 超級鏈接,清華大學出版社,主要內(nèi)容,為網(wǎng)頁添加超鏈接,添加書簽鏈接、電子郵件超鏈接、 FTP鏈接,建立圖像映射,5.1超鏈接簡介,網(wǎng)頁文件的最大魅力是超越各個文件的空間，通過超鏈接相互連接構成一個紛繁復雜的互聯(lián)網(wǎng)世界。超鏈接（hyperlink）是一個網(wǎng)站的精髓，超鏈接在本質上屬于一個網(wǎng)頁的一部分，它是一種允許一個網(wǎng)頁同其他網(wǎng)頁或站點之間進行鏈接的元素。各個網(wǎng)頁鏈接在一起后，才能真正構成一個網(wǎng)站。超文本具有的鏈接能力，層層鏈接相關文件，這種具有超級鏈能力的特性，即稱為超鏈接。超鏈接除了可鏈接文本外，也可鏈接各種媒體，如聲音、圖像和動畫等，通過它們可以將網(wǎng)站建設成一個豐富多彩的多媒體世界。,5.1超鏈接簡介,5.1超鏈接簡介,5.2創(chuàng)建超鏈接,建立超鏈接的標記是a(anchor，錨)，以開始，以結束，錨可以指向網(wǎng)絡上的任何資源：一張HTML頁面，一幅圖像，一個聲音或視頻文件等。 基本語法： 超鏈接名稱,5.2創(chuàng)建超鏈接, 創(chuàng)建鏈接 創(chuàng)建鏈接 新浪 百度 北 京 大 學 ,5.2創(chuàng)建超鏈接,5.2.1設置超鏈接路徑,建立鏈接時，屬性“href”定義了這個鏈接所指的目標地址，也就是路徑。理解一個文件到要鏈接的那個文件之間的路徑關系是創(chuàng)建鏈接的根本。每一個網(wǎng)站都具有獨一無二的地址，英文中被稱作URL（Uniform Resource Locator），即統(tǒng)一資源定位器，同一個網(wǎng)站下的每一個網(wǎng)頁都有不同的地址，但是在創(chuàng)建一個網(wǎng)站的網(wǎng)頁時，不需要為每一個鏈接都輸入完整的地址，我們只需要確定當前文檔同站點根目錄之間的相對路徑關系就可以了。,5.2.2內(nèi)部鏈接,所謂內(nèi)部鏈接，指的是在同一個網(wǎng)站內(nèi)部，不同的html頁面之間的鏈接關系，在建立網(wǎng)站內(nèi)部鏈接的時候，要明確哪個是主鏈接文件（即當前頁），哪個是被鏈接文件。內(nèi)部鏈接一般采用相對路徑鏈接比較好。根據(jù)圖5-4所示的某班級網(wǎng)站站點目錄結構，表5-2所示的是內(nèi)部鏈接語句中相對路徑的寫法。,5.2.2內(nèi)部鏈接,5.2.3外部鏈接,所謂外部鏈接，指的是跳轉到當前網(wǎng)站外部，與其它網(wǎng)站中頁面或其它元素之間的鏈接關系。這種鏈接的URL地址一般要用絕對路徑，要有完整的URL地址。,5.3.1圖片鏈接,可以為一個圖片指定鏈接。 基本語法： ,5.3.1圖片鏈接, 建立圖片鏈接 圖片鏈接 ,5.3.1圖片鏈接,5.3.2書簽鏈接,在瀏覽頁面時，如果頁面篇幅很長，要不斷的拖動滾動條，給瀏覽帶來不便，要是瀏覽者既可以從頭閱讀到尾，又可以很快尋找到自己感興趣的特定內(nèi)容進行部分閱讀，這個時候就可以通過書簽鏈接來實現(xiàn)。當瀏覽者單擊頁面上的某一“標簽”，就能自動跳到網(wǎng)頁相應的位置進行閱讀，給瀏覽者帶來方便。,5.3.2書簽鏈接,基本語法： 在同一頁面內(nèi)要使用書簽鏈接的格式： 鏈接標題 在不同頁面之間要使用書簽鏈接的格式（在不同頁面中鏈接的前提是需要指定好鏈接的頁面地址和鏈接的書簽名稱）： 鏈接標題 以上兩種書簽鏈接形式，鏈接到的目標為： 鏈接內(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上豐富的資源。 基本語法： 鏈接內(nèi)容,5.3.4 FTP鏈接, ftp鏈接 這是一個FTP鏈接： 北京大學FTP服務器 ,5.3.4 FTP鏈接,5.3.5下載文件的鏈接,如果希望制作下載文件的鏈接，只需在鏈接地址處輸入文件所在的位置即可。當瀏覽器用戶單擊鏈接后，瀏覽器會自動判斷文件的類型，以做出不同情況的處理。 基本語法： 鏈接內(nèi)容,5.3.5下載文件的鏈接, 下載文件 這是一本電子書： 數(shù)據(jù)結構-C# ,5.3.5下載文件的鏈接,5.4圖像映射,圖像映射就是在圖像上先劃分出不同的區(qū)域，然后定義哪個目標與圖像的哪個區(qū)域對應，但單擊圖像的某一區(qū)域，就會把用戶帶到一個目標，單擊另一區(qū)域，又會把用戶帶到另外的目標。其實，圖像映射就是將圖像內(nèi)的區(qū)域與一系列URL鏈接起來了，從而單擊特定區(qū)域就會把用戶帶到相應的內(nèi)容。這里所講的映射是客戶端圖像映射，這和服務器端圖像映射相比，運行速度要快。,5.4圖像映射,基本語法： ,5.4圖像映射, ,5.4圖像映射,鄭州 鄭州，河南省省會，是中國重要的內(nèi)陸開放城市和歷史文化 名城。鄭州歷史悠久，文化燦爛，旅游資源豐富。 北京 北京中華人民共和國首都。中央直轄市，簡稱京，是我國第 二大超級現(xiàn)代化大都市。北京是我國的政治中心、交通中心、文化中心、科 研中心、教育中心。具有較高的國際知名度。 上海 上海是中國第一大城市，世界第八大城市，中國中央四個 直轄市之一。 有超過2000萬人口居住和生活在上海及其附近地區(qū)。 長春 長春，吉林省省會，全省政治、經(jīng)濟、文化和交通中心， 中國最大的汽車工業(yè)城市，中國建成區(qū)面積和建成區(qū)人口第九大城市， 東北地區(qū)中部最大的中心城市。 ,5.4圖像映射,5.5小實例,程序5-9描述了班級網(wǎng)站首頁導航條的創(chuàng)建，這里綜合運用了鏈接和樣式來設計導航。在head部分中的style標記中，定義了導航條的使用效果(a.head部分)，當訪問者鼠標移向每個欄目的名稱時，字的顏色都會發(fā)生變化，點擊欄目名，則進入相應的頁面。,5.5小實例, 班級網(wǎng)站 首頁 班級新聞 班級相冊,5.5小實例, 個人主頁 留言本 網(wǎng)頁設計 關于我們 ,5.5小實例,5.5小實例, 班級相冊 .img_x margin: 15px; height: 80px; width: 120px; border: 1px solid #8397A0; 圖片鏈接 ,5.5小實例, ,5.5小實例,小結,1. 一般規(guī)則是，對于自己站點上的網(wǎng)頁的鏈接，使用相 對URL；對于其他站點上的資源鏈接，使用絕對URL。 2. 如果指定路徑但省略文件名，就會鏈接到目錄下的默認 文件（網(wǎng)站可以自己定義默認頁面），如果路徑也省略， 就會鏈接到網(wǎng)站的默認主頁。 3. URL最好使用小寫字母來表示。 4. 不要使用“點擊這里”作為顯示標簽，應該使用文本中已 經(jīng)存在的關鍵詞來表示鏈接。,小結,5. 可以對鏈接應用樣式進行格式化，甚或使用圖像作為標 簽，來吸引用戶的注意力。 6. 可以為頁面內(nèi)的鏈接規(guī)定制表符順序，這樣訪問者就可 以用鍵盤在頁面上移動。 7. 對于供下載的資源，如果超出了一定的大小，最好事先 進行壓縮，甚至把一個文件分成幾個壓縮文件，來保證 傳輸?shù)陌踩?Thank You !,