《《創(chuàng)建超級鏈接》PPT課件.ppt》由會員分享，可在線閱讀，更多相關(guān)《《創(chuàng)建超級鏈接》PPT課件.ppt（47頁珍藏版）》請在裝配圖網(wǎng)上搜索。
1、課堂講解 上機實戰(zhàn),第5課 創(chuàng)建超級鏈接,課堂講解,超級鏈接概念 超級鏈接分類 創(chuàng)建文本超級鏈接 創(chuàng)建錨鏈接 創(chuàng)建空鏈接 創(chuàng)建電子郵件超級鏈接 創(chuàng)建圖像超級鏈接 創(chuàng)建下載超鏈接 創(chuàng)建導(dǎo)航條,超級鏈接概念,超級鏈接是指頁面對象之間的鏈接關(guān)系，它網(wǎng)頁的靈魂，能合理、協(xié)調(diào)地把網(wǎng)站中的各個元素、頁面通過超級鏈接構(gòu)成了一個有機整體，使瀏覽者能快速地訪問到想要訪問的頁面。,超級鏈接分類,絕對超級鏈接 文檔相對路徑 站點根目錄相對路徑,絕對超級鏈接,絕對超級鏈接就是形如“http://www.china/zh_cn”的超級鏈接地址，它給出了超級鏈接目標(biāo)端點完整的URL地址，包括使用的協(xié)議“http://”。
2、一般用于創(chuàng)建站外具有固定地址的超級鏈接。,文檔相對路徑,使用文檔相對路徑不需要給出完整的URL地址，可省去URL地址的協(xié)議，只需保留不同的部分。如pic/logo.gif，這是本地站點超級鏈接中最常用的鏈接形式。由于相對超級鏈接的文件之間相互關(guān)系并沒有發(fā)生變化，因此使用文檔相對路徑創(chuàng)建的超級鏈接在上傳時可以不用更新各個超級鏈接。,站點根目錄相對路徑,站點根目錄相對路徑是形如“/help/help.html”的超級鏈接地址，它基于站點根目錄，在同一個站點中網(wǎng)頁的超級鏈接也可采用這種方法。,創(chuàng)建文本超級鏈接,文本超級鏈接是最常見的超級鏈接，通過使用鼠標(biāo)點擊文本即可從一個網(wǎng)頁跳轉(zhuǎn)到另一個網(wǎng)頁。,2、
3、創(chuàng)建文字鏈接 （1）選中文本 （2）打開屬性面板，在【鏈接】文本框里輸入鏈接地址，或指向文件。 （3）保存后按F12預(yù)覽，當(dāng)鼠標(biāo)點擊文本時會直接鏈接到剛才輸入的網(wǎng)站。,創(chuàng)建錨鏈接,創(chuàng)建命名錨記 鏈接命名錨記,創(chuàng)建命名錨記,在制作網(wǎng)頁時，為了達(dá)到跳轉(zhuǎn)到網(wǎng)頁固定位置的目的，可以使用錨鏈接。通過對網(wǎng)頁中指定位置的命名，利用超級鏈接打開目標(biāo)網(wǎng)頁時可直接跳轉(zhuǎn)到相應(yīng)的命名位置上。,鏈接命名錨記,創(chuàng)建好錨記之后，必須創(chuàng)建對應(yīng)的超級鏈接源端點。,創(chuàng)建錨記鏈接： （1）復(fù)制一篇文章，在頂部將大綱列出1.. 2 3 （2）將光標(biāo)放到每一段前依次添加錨記點，英文命名 （3）選中大綱1.，在屬性面板下【鏈接】中
4、輸入“#英文名” （5）重復(fù)操作，保存F12瀏覽,創(chuàng)建空鏈接,要想對文本設(shè)置行為，首先必須為文本建立空超級鏈接（空超級鏈接是一個未指派目標(biāo)的超級鏈接），這樣行為才會有效。 為文本建立空超級鏈接時，只要先在文檔窗口中選中需要建立空超級鏈接的文本，然后在屬性面板的“鏈接”文本框中輸入一個“#”符號即可。建立空超級鏈接的目的只是為了應(yīng)用行為，其他情況下不必建立。,1、創(chuàng)建空鏈接 有時制作網(wǎng)頁只是為了測試一下頁面，這時我們就需要使用空鏈接。 （1）選中要創(chuàng)建空鏈接的對象，打開屬性面板 （2）在【鏈接】文本框里輸入“#”號 （3）保存，F(xiàn)12鍵瀏覽，當(dāng)光標(biāo)指向鏈接對象時，光標(biāo)會 變?yōu)樾∈?/p>
5、的形狀，這就創(chuàng)建了空鏈接,二、鏈接分類,創(chuàng)建電子郵件超級鏈接,電子郵件在網(wǎng)絡(luò)應(yīng)用中十分廣泛，在網(wǎng)頁中建立電子郵件超級鏈接可方便網(wǎng)頁瀏覽者與設(shè)計者之間的聯(lián)系。,創(chuàng)建電子郵件鏈接 與其他鏈接的區(qū)別是，電子郵件鏈接并不是移動到特定的站點或網(wǎng)頁文檔，而是直接調(diào)用了可發(fā)送郵件的程序,創(chuàng)建電子郵件鏈接,（1）將光標(biāo)放在需要插入郵件地址的位置 （2）執(zhí)行【插入】--【電子郵件鏈接】，打開對話框 （3）在【文本】中輸入電子郵件鏈接要顯示在頁面上的文本，在【E-mail】中輸入要鏈接的郵箱地址,創(chuàng)建圖像超級鏈接,為一般圖像創(chuàng)建超級鏈接 創(chuàng)建圖像熱點超級鏈接,為一般圖像創(chuàng)建超級鏈接,3、創(chuàng)建圖像鏈接
6、 創(chuàng)建圖像鏈接可以單擊圖像跳轉(zhuǎn)到相關(guān)的瀏覽頁面，是網(wǎng)頁設(shè)計者常用的一種鏈接方式。 （1）在文檔中插入一幅圖像 （2）選擇該圖像，打開屬性面板 （3）在【鏈接】文本框中輸入鏈接地址或指向文件。 （4）保存并瀏覽,創(chuàng)建圖像熱點超級鏈接,要在一幅比較大的圖片中添加許多超級鏈接時，應(yīng)該將圖片化整為零，分割成較小的圖片，然后分別為這些小圖像上建立超級鏈接來達(dá)到目的，但這時整幅圖片就不能對齊，利用Dreamweaver 8的圖像熱點超級鏈接功能就能避免這個問題。,創(chuàng)建熱點鏈接 注意：熱點鏈接只針對圖像 熱點工具：矩形熱點、橢圓形熱點、多邊形熱點 如果一個文檔中只有一幅圖像，而又想在這幅圖
7、像的不同位置創(chuàng)建多個鏈接，這時用圖像鏈接的方法是行不通的。只能將圖像劃分為多個區(qū)域作為鏈接的熱點。,創(chuàng)建熱點鏈接,（1）選擇熱點繪制工具，繪制熱點 （2）打開屬性面板在【鏈接】輸入鏈接方向，確定目標(biāo),創(chuàng)建下載鏈接 常用對象為：.doc、.ppt、.exe、.rar、.zip （1）選中文本 （2）單擊【鏈接】文本框右側(cè)的“瀏覽文件”按鈕，選擇文件 （3）將文件保存在站點下 （4）單擊【確定】按鈕，保存并瀏覽,創(chuàng)建導(dǎo)航條,插入導(dǎo)航條 編輯導(dǎo)航條,插入導(dǎo)航條,導(dǎo)航條一般由圖像或圖像組組成，這些圖像的顯示內(nèi)容隨用戶的操作不同而進行相應(yīng)的變化。導(dǎo)航條為訪問者瀏覽不同網(wǎng)頁提供了一條捷徑。,編輯導(dǎo)
8、航條,二、導(dǎo)航條 導(dǎo)航條由圖像或圖像組組成，圖像顯示內(nèi)容會隨用戶不同操作而變化。導(dǎo)航條主要是為在站點上的頁面和文件之間移動提供一條簡捷的途徑。 導(dǎo)航條項目共包含有4種狀態(tài)。 一般：指用戶尚未單擊或尚未與此項目交互時所顯示的圖像。例如，此種狀態(tài)的項目看起來未被單擊過。 滑過：指鼠標(biāo)指針滑過“一般”圖像時所顯示的圖像。項目的外觀發(fā)生變化（例如變得更亮），以便讓用戶知道可與這個項目進行交互。,二、導(dǎo)航條 按下：指項目被單擊后所顯示的圖像。例如，用戶單擊某項目后，載入一個新的頁面，而導(dǎo)航條仍然顯示，只是被單擊的項目變暗，表示它曾被選擇過。 按下時鼠標(biāo)經(jīng)過：指在項目被單擊后，鼠標(biāo)指針滑過“按下”圖像時，
9、所顯示的圖像。此狀態(tài)可作為一個給用戶的可視提示，告訴他們在站點的這一部分，此項目不能再被單擊，例如，項目變淡或變灰。,二、導(dǎo)航條 下圖所示的4個圖片即為用戶自定義導(dǎo)航條4種不同狀態(tài)下圖片效果。 1. 插入導(dǎo)航條 使用【插入導(dǎo)航條】命令之前，須先為各個導(dǎo)航項目的顯示狀態(tài)創(chuàng)建一組圖像，并將該組圖像拷貝到站點內(nèi)。用戶可將導(dǎo)航條項目視為按鈕，因為單擊它時，導(dǎo)航條項目將鏈接到其他網(wǎng)頁。打開如下圖所示的【插入導(dǎo)航條】對話框，設(shè)置完畢后單擊【確定】按鈕即可。,【插入導(dǎo)航條】對話框中各選項功能。 添加項目 ：向【導(dǎo)航條元件】列表框中添加項目。,二、導(dǎo)航條 刪除項目 ：刪除【導(dǎo)航條元件】列表框中項目。 向上移動
10、項目 ：向上移動【導(dǎo)航條元件】列表框中的項目。 向下移動項目 ：向下移動【導(dǎo)航條元件】列表框中的項目。 導(dǎo)航條元件：顯示所有項目。 項目名稱：為導(dǎo)航條項目命名，例如Home。 狀態(tài)圖像：單擊【瀏覽】按鈕可從打開的對話框中自由選擇最初顯示的圖像。值得注意的是，此項為必添項，其他圖像狀態(tài)選項為可選項。 鼠標(biāo)經(jīng)過圖像：單擊Browse按鈕可從打開的對話框中自由選擇當(dāng)用戶鼠標(biāo)指針滑過項目所顯示的圖像。 按下圖像：單擊Browse按鈕可從打開的對話框中自由選擇用戶單擊項目后顯示的圖像。 按下時鼠標(biāo)經(jīng)過圖像：單擊rowse按鈕可從打開的對話框中自由選擇當(dāng)用戶將鼠 標(biāo)指針滑過按下圖像時所顯示的圖像
11、。,二、導(dǎo)航條 替換文本：輸入項目的描述性名稱。 按下時，前往的URL：單擊Browse按鈕，以選擇要打開的鏈接文件。該選項后包含一個下拉列表框： 選擇Main window(主窗口)選項可在同一窗口中打開文件。 如果導(dǎo)航條位于框架集中，則應(yīng)選擇要在其中打開文件的框架。 預(yù)先載入圖像：可在載入頁面時下載圖像。如果未選擇此選項，在用戶鼠標(biāo)指針滑過鼠標(biāo)經(jīng)過圖像時可能會出現(xiàn)延遲。 頁面載入時就顯示“鼠標(biāo)按下圖像”：可在顯示頁面時，以按下狀態(tài)顯示所選項目。選擇此選項時，在【導(dǎo)航條元件】列表框中該項目后面出現(xiàn)一個星號。 插入：可選擇在文檔中是設(shè)置導(dǎo)航條項目插入方式是垂直Vertically插入還是Hor
12、izontally水平插入。 使用表格：以表格的形式插入導(dǎo)航條項目。,二、導(dǎo)航條 打開【插入導(dǎo)航條】對話框的方法有兩種。 選擇【插入】|【圖像對象】|【導(dǎo)航條】命令。 單擊【插入】工具欄左側(cè)的下拉三角按鈕，從彈出的快捷菜單中選擇【常規(guī)】選項，然后單擊其右側(cè)的【圖像】按鈕，從彈出的菜單中選擇選擇【導(dǎo)航條】選項，如圖8-17所示。 新創(chuàng)建一個網(wǎng)頁，向其中添加一個“首頁”導(dǎo)航按鈕，其4種狀態(tài)使用的圖片分別為PIC01.jpg、PIC02.jpg、PIC03.jpg、PIC04.jpg，替換文本為“鏈接至首頁”，鏈接目標(biāo)為default.html。 (1) 選擇【文件】|【新建】命令，創(chuàng)建一個HTML
13、基本頁。 (2) 將光標(biāo)置于文件的頂部，然后單擊【常規(guī)】工具欄中的【導(dǎo)航條】按鈕，打開【插入導(dǎo)航條】對話框。 (3) 單擊【狀態(tài)圖像】文本框右側(cè)的【瀏覽】按鈕，選擇PIC01.jpg。 (4) 單擊【鼠標(biāo)經(jīng)過圖像】文本框右側(cè)的【瀏覽】按鈕，選擇PIC02.jpg。 (5) 單擊【按下圖像】文本框右側(cè)的【瀏覽】按鈕，選擇PIC03.jpg。,二、導(dǎo)航條 (6) 單擊【按下時鼠標(biāo)經(jīng)過圖像】文本框右側(cè)的【瀏覽】按鈕，選擇PIC04.jpg。 (7 在【替換文本】文本框中輸入項目的描述性名稱“鏈接至首頁”。 (8) 單擊【按下時，前往的】右側(cè)的【瀏覽】按鈕，選擇站點中的default.htm
14、l文件。 (10) 設(shè)置完畢后單擊【確定】按鈕即可完成導(dǎo)航條的設(shè)置。 2. 編輯導(dǎo)航條 為文檔創(chuàng)建導(dǎo)航條后，可使用【修改導(dǎo)航條】命令向?qū)Ш綏l添加圖像，或從導(dǎo)航條中刪除圖像。此命令可用于更改圖像或圖像組、更改單擊項目時所打開的文件、選擇在不同的窗口或框架中打開文件以及重新排序圖像。 若要修改導(dǎo)航條，選擇【修改】|【導(dǎo)航條】命令，打開【修改導(dǎo)航條】對話框，從【導(dǎo)航條元件】列表框中選擇要編輯的項目，再根據(jù) 實際需要進行設(shè)置，設(shè)置完畢后單擊【確定】按鈕即可。,三、動手實踐 為“卡通動漫”網(wǎng)站index.asp網(wǎng)頁中左框架中的4張圖片添加超級鏈接，為上框架中的“設(shè)為首頁”、“加入收藏”、“聯(lián)系站
15、長”添加超級鏈接；打開dmjs.asp網(wǎng)頁，添加“返回主頁”、“動漫介紹”、“動漫圖庫”和“留言薄”導(dǎo)航條；并設(shè)置“鼠標(biāo)未經(jīng)過”時文字超級鏈接樣式為去除下劃線。 步驟1 設(shè)置圖像鏈接 (1) 進入ktzj站點，雙擊【文件】面板中的index.asp網(wǎng)頁。 (2) 選擇“返回主頁”圖片，拖動【屬性】面板中的【指向文件】按鈕，指向【文件】面板中的index.asp網(wǎng)頁，打開【目標(biāo)】下拉列表框，選擇【_parent】選項。 (3) 選擇“動漫介紹”圖片，拖動【屬性】面板中的【指向文件】按鈕，指向【文件】面板中的dmjs.asp網(wǎng)頁，打開【目標(biāo)】下拉列表框，選擇【_parent】選項。 (4) 選擇“
16、動漫圖庫”圖片，拖動【屬性】面板中的【指向文件】按鈕，指向【文件】面板中的pic.asp網(wǎng)頁，打開【目標(biāo)】下拉列表框，選擇【_parent】選項。 (5) 選擇“留言薄”圖片，拖動【屬性】面板中的【指向文件】按鈕，指向【文件】 面板中的liuyan.asp網(wǎng)頁，打開【目標(biāo)】下拉列表框，選擇 【_parent】選項。,三、動手實踐 步驟2 設(shè)置“設(shè)為首頁”鏈接 將光標(biāo)置于“設(shè)為首頁”字樣前，然后單擊【文檔】工具欄中的【拆分】按鈕，在“設(shè)為首頁”前添加一段代碼： 如右圖所示：,三、動手實踐 步驟3 設(shè)置“加入收藏”鏈接 在“加入收藏”前找到標(biāo)簽，加入如下代碼： 如右圖所示：
17、,三、動手實踐 步驟4 設(shè)置E-Mail鏈接 選擇設(shè)計區(qū)域中的“聯(lián)系站長”文本，單擊【常規(guī)】工具欄中的【電子郵件鏈接】按鈕，打開【電子郵件鏈接】對話框，確定【文本】文本框輸入的文字為“聯(lián)系站長”，在【E-Mail】文本輸入中輸入，然后單擊【確定】按鈕，完成E-Mail鏈接設(shè)置。 步驟5 設(shè)置導(dǎo)航條 (1) 選擇【插入】|【圖像對象】|【導(dǎo)航條】命令，打開【插入導(dǎo)航條】對話框。 (2) 在【項目名稱】文本框中輸入zhuye，單擊【狀態(tài)圖像】右側(cè)的【瀏覽】按鈕，從站點的dmjs文件夾中選擇zhuye.jpg；單擊【鼠標(biāo)經(jīng)過圖像】右側(cè)的【瀏覽】按鈕，從站點的dmjs文件夾中選擇zhuye01.jpg
18、；在【替換文本】文本框中輸入“返回主頁”；單擊【按下時，前往的URL】右側(cè)的【瀏覽】按鈕，從站點中選擇index.asp。 (3) 單擊【添加元件】按鈕，設(shè)置【項目名稱】為jieshao，【狀態(tài)圖像】為 jieshao.jpg，【鼠標(biāo)經(jīng)過圖像】為jieshao01.jpg，【替換文本】為“動 漫介紹”，【按下時，前往的URL】為dmjs.asp。,三、動手實踐 (4) 單擊【添加元件】按鈕，設(shè)置【項目名稱】為tuku，【狀態(tài)圖像】為tuku.jpg，【鼠標(biāo)經(jīng)過圖像】為tuku01.jpg，【替換文本】為“動漫圖庫”，【按下時，前往的URL】為pic.asp。 (5) 單擊【
19、添加元件】按鈕，設(shè)置【項目名稱】為liuyan，【狀態(tài)圖像】為liuyan.jpg，【鼠標(biāo)經(jīng)過圖像】為liuyan01.jpg，【替換文本】為“留言薄”，【按下時，前往的URL】為all.asp，如右圖所示。 (6) 設(shè)置完畢后單擊【確定】按鈕。,(7) 選擇整個導(dǎo)航條布局表格，在【屬性】面板中的【寬】文本框中輸入812，單位選擇【像素】。 (8) 選擇導(dǎo)航條布局單元格，在【屬性】面板中的,【寬】文本框中輸入203，單位選擇【像素】，如下圖所示。,三、動手實踐 (9) 設(shè)置完畢后保存文件，按F12鍵進行預(yù)覽，將指針移至“動漫介紹”導(dǎo)航按鈕上時，得到如右圖所示的效果。,步驟6 改變超級鏈接樣式
20、在index.asp網(wǎng)頁中“設(shè)為首頁”、“加入收藏”和“聯(lián)系站長”中前兩個字樣都不帶下劃線，而第三個電子郵件聯(lián)接卻帶有下劃線，看上去很不美觀。下面介紹在鼠標(biāo)未經(jīng)過時超級鏈接樣式的改變方法。 （1）選擇【文本】|【CSS樣式】|【新建】命令，打開【新建CSS樣式】對話框，。 （2）從【選擇器類型】列表框中選擇【高級（ID、上下文選擇器等）】單選按鈕。 （3）從【選擇器】下拉列表框中選擇【a:link】選項。,三、動手實踐 （4）選擇【定義在】選項組中的【新建樣式表文件】單選按鈕，如左1圖所示。 （5）設(shè)置完畢后，單擊【確定】按鈕，打開【保存樣式表文件為】對話框，在【文件名】文本框中輸入ljcs，
21、如左圖2所示，單擊【保存】按鈕。 （6）打開【a:link的CSS樣式定義】對話框，設(shè)置【字體】為【華文新魏】，設(shè)置【大小】為16，選擇【修飾】中的【無】，如左3圖所示，設(shè)置完畢的單擊【確定】按鈕。 (7) 如果用戶想要設(shè)置其它的CSS樣式，可選擇【文本】|【CSS樣式】|【管理樣式】命令，打開【編輯樣式表】對話框，單擊【編輯】按鈕，如左4圖所示。,三、動手實踐 (8) 進入ljcs.css對話框，單擊【新建】按鈕，如左下圖所示。 (9) 打開步驟（4）中的【新建CSS樣式】對話框，選擇a:visited選項，單擊【確定】按鈕，在打開的對話框中選擇【修飾】選項組中的【無】選項，設(shè)置完畢后單擊【
22、確定】按鈕回到ljcs.css對話框。 (10) 以同樣的方式，設(shè)置a:hover和a:active。 (11) 連續(xù)單擊【完成】按鈕，完成設(shè)置。 (12) 保存后按F12鍵預(yù)覽，這時我們就看不到默認(rèn)狀態(tài)下的下劃線了，如右下圖所示。,多項選擇題,在dreamweaver中，熱點工具有哪幾項？ （A）矩形工具 （B）橢圓形工具 （C）三角形工具 （D）多邊形工具,多項選擇題,在dreamweaver中，可以繪制出的熱點形狀有： （A）矩形 （B）橢圓形 （C）三角形 （D）多邊形,HTML,1、超鏈接使用的是....標(biāo)記 2、空鏈接：. 3、文字鏈接：文字 4、圖像鏈接： 圖像,上機實戰(zhàn),本課上機實戰(zhàn)制作過程可分為左側(cè)導(dǎo)航圖像超級鏈接的創(chuàng)建、主要內(nèi)容區(qū)文本和圖像超級鏈接的創(chuàng)建、公司Logo下方的圖像熱點超級鏈接的創(chuàng)建及底部版權(quán)信息區(qū)電子郵件超級鏈接的創(chuàng)建4部分進行。,
《創(chuàng)建超級鏈接》PPT課件.ppt
