《《設置超鏈接》PPT課件.ppt》由會員分享，可在線閱讀，更多相關《《設置超鏈接》PPT課件.ppt（26頁珍藏版）》請在裝配圖網(wǎng)上搜索。

1、第六章創(chuàng)建超級鏈接（一）,主講人：陳恒岳,新課導入,同學們有沒有看過“天龍八部”?。磕沁€記得“天龍八部”中段譽會的那種武功嗎？,,,凌波微步的特點：快速從一個地方到另一個地方。,“凌波微步”,,超級鏈接,,設置超級鏈接,本節(jié)課任務,鞏固表格布局方法。理解鏈接的概念，包括URL、絕對路徑和相對路徑。掌握文檔或圖片鏈接、空鏈接、腳本鏈接的創(chuàng)建方法。掌握超級鏈接的目標窗口及文本提示的設置方法。,作用：超級鏈接將許許多多毫無關聯(lián)的網(wǎng)頁通過文字、圖片、flash等元素聯(lián)系起來。用戶只需輕點鼠標便可訪問鏈接的網(wǎng)頁。類型：按照鏈接目標路徑分為：外部鏈接和內部鏈接。文檔、圖片鏈接：實現(xiàn)頁面的跳轉；書簽鏈接：可

2、以根據(jù)用戶需求只瀏覽其感興趣的內容，而不是瀏覽頁面中的所有內容；電子郵件鏈接：可以添加在圖片上或文本上，方便用戶直接打開電子郵件應用程序，如outlook。并在收件人位置上顯示設置好的地址，方便用戶發(fā)送郵件，建立聯(lián)系?？真溄樱核粫D到其他頁面，但可以讀取某些javascript事件，或當網(wǎng)頁內容較多時，可以為網(wǎng)頁添加“返回頁首”的鏈接。腳本鏈接：通過執(zhí)行javascript代碼或調用javascript函數(shù)，實現(xiàn)表單驗證等任務。,超級鏈接簡介（演示案例）,,內部鏈接,URL（統(tǒng)一資源定位符）地址解析,同學們，老師要是要你們打開咱們學校的網(wǎng)址，你會怎么做？做法：百度中搜索“中山中?！被蛑苯釉?/p>

3、瀏覽器地址欄中輸入http://zszz.zszz/client/web1/index.ASPURL格式：://://,,URL,URL各部分含義,以“http://zszz.zszz/client/web1/index.ASP”為例解釋各個部分的含義。：指文件訪問類型：如http表示超文本協(xié)議，ftp表示文件傳輸協(xié)議；：web頁所在服務器域名，對應本例中的zszz.zszz；：服務器端口，本例中沒有就是默認值80；：服務器上該網(wǎng)頁的路徑，對應本例中的/client/web1；：網(wǎng)頁對應的文件名，對應本例中的index.ASP；【小貼士】站點中的路徑和文件名中只能使用字母、數(shù)字、連字符和下劃線

4、。,絕對路徑和相對路徑,絕對路徑：是包含服務器協(xié)議的完全路徑。若創(chuàng)建對當前站點以外的文件鏈接時必須使用絕對路徑，例如鏈接到：http://zszz.zszz/client/web1/index.ASP；相對路徑：一般的，站點內的鏈接都是使用相對路徑，使用相對路徑方便站點的移植。,相對路徑引用方法,同一個目錄的文件引用如果源文件和引用文件在同一個目錄里，直接寫引用文件名即可。如index.html表示當前文件夾中內的頁面。如何表示上級目錄../表示源文件所在目錄的上一級目錄，../../表示源文件所在目錄的上上級目錄，以此類推。如../index.html表示當前文件夾的上級目錄下的index.

5、html頁面如何表示下級目錄引用下級目錄的文件，直接寫下級目錄文件的路徑即可。如files/jdjs.html表示當前文件夾下files文件夾中的文檔。,活動引導：一、新建站點及相關網(wǎng)頁。二、通過網(wǎng)頁屬性，設置鏈接文字屬性。三、設計網(wǎng)頁布局。四、使用多種方法設置超級鏈接。五、設置超級鏈接的目標窗口和文本提示。備注：學生自行完成活動的前四個任務,活動一：用不同的方式鏈接網(wǎng)頁,活動一：總結鏈接創(chuàng)建方法,1）直接點擊屬性面板中的“瀏覽文件”按鈕，選取鏈接的網(wǎng)頁；2）選中文字，按住shift鍵，拖動到站點窗口的目標文件，這種方法只應用于文字，圖片鏈接則不行；3)按住屬性面板中的“指向文件”，拖動到站點

6、窗口的目標文件。,超級鏈接的目標窗口,,_blank：在新的窗口中打開_parent：如果是嵌套的框架，鏈接會在父框架或窗口中打開，如果不是嵌套的框架，就等于_top，在整個瀏覽器中顯示目標網(wǎng)頁。_self：在當前框架或窗口打開，瀏覽器默認值。_top：取消所有框架，將網(wǎng)頁在整個窗口中打開。說明：后三種在第七章我們學習框架后，大家會更好的理解其含義及效果。,超級鏈接的文本提示,“文本提示”就是當用戶鼠標移到某個超級鏈接上，會彈出的文本。添加方法：選中文本或圖片，按住ctrl+T打開標簽編輯器，選擇“編輯標簽”模式，如果不是，可按住ctrl+T進行切換，在標簽a后面添加title屬性，輸入“ti

7、tle=相應文本提示”,活動二：巧用無址鏈接和腳本鏈接,任務一：為頁面jdjs.html中“返回”設置空鏈接，實現(xiàn)返回頁首效果。方法：選中“返回”，在屬性面板中“鏈接”域中輸入“#”，“目標”下來菜單中選取“_top”。任務二：為頁面index.html設置腳本鏈接，實現(xiàn)點擊logo彈出對話框“歡迎光臨四川旅游網(wǎng)”。方法：選中l(wèi)ogo“四川旅游網(wǎng)”，在屬性面板的“鏈接”域中輸入“javascript:alert(歡迎光臨四川旅游網(wǎng))”,課堂練習,選擇題：制作外部鏈接，使用（）；制作內部鏈接，使用（）。A絕對路徑；B相對路徑填空題：,A,B,http,,CLIENT/WEB1/sub_zsjy,

8、index.asp,課堂練習,操作題：1、在首頁index.html中右上方輸入“關閉窗口”，通過設置腳本鏈接關閉窗口，關閉窗口的代碼：“javascript:window.close()”2、完善四川旅游網(wǎng)中的空白頁內容，并完成未完成的鏈接。并上交作業(yè)。,小結,超級鏈接作用：將網(wǎng)站中的各個組成部分鏈接成一個整體URL格式：://://絕對路徑：是包含服務器協(xié)議的完全路徑相對路徑：一般的，站點內的鏈接都是使用相對路徑各種相對路徑引用方法：同一個目錄的文件，直接寫引用文件名即可。如何表示上級目錄../表示源文件所在目錄的上一級目錄，../../表示源文件所在目錄的上上級目錄，以此類推。如何表示下

9、級目錄：直接寫下級目錄文件的路徑即可。鏈接創(chuàng)建方法目標窗口及文本提示的設置方法無址鏈接與腳本鏈接設置方法,活動三：給網(wǎng)頁添加郵件鏈接和書簽鏈接,郵件鏈接設置方法（教師演示）方法一：選取該文本執(zhí)行“插入/電子郵件鏈接”命令，在打開的對話框中輸入Email地址，單擊“確定”按鈕。方法二：選中文本或圖片，在屬性面板中“鏈接”欄中輸入“mailto:Email地址”?！癿ailto:?subject=你好&cc=”。subject=郵件主題；cc=要抄送的電子郵件地址；其中？表示分隔符，&表示連接。,活動三：給網(wǎng)頁添加郵件鏈接和書簽鏈接,書簽鏈接設置方法（教師演示）方法步驟：scjd.html頁面中的

10、操作：定位插入/命名錨記命名錨記選中標題在屬性面板的“鏈接”域中輸入“#書簽名”index.html頁面中：選中景點設置矩形熱點在屬性面板的“鏈接”域中輸入files/jdjs.html#書簽名【小貼士】設置鏈接頁面時，當前網(wǎng)頁與鏈接頁面不在同一路經(jīng)時，輸入格式為“路徑+文件名+#+書簽名”，為了避免錯誤，可以先利用“瀏覽文件”按鈕，現(xiàn)在鏈接文件，然后在文件名后加上“#書簽名”即可。,活動三小結：,【小貼士】在制作郵件鏈接時，注意鏈接的書寫格式為“mailto:郵件地址?subject=郵件主題&cc=抄送地址”。在制作錨點鏈接時，注意鏈接的書寫格式為“路徑+文件名+#+書簽名”。,活動四：管

11、理站點鏈接資源,掌握站點鏈接資源的管理方法。,教學目標：,知識要點:,選項、“收藏”選項。,準備知識：（1）“站點”選項（2）“收藏”選項,“資源”面板,刷新站點列表,“收藏”選項,活動四：管理站點鏈接資源,活動引導：一、“站點”選項的設置二、“收藏”選項的設置,活動四：管理站點鏈接資源,活動小結:在本活動中我們對站點中的鏈接通過“資源”面板進行了編輯、管理。通過本活動主要讓我們對“資源”面板中的一些常用按鈕有所熟悉。,活動四：管理站點鏈接資源,,為某網(wǎng)頁中的文字設置郵件鏈接，并鏈接“”。要求：為某網(wǎng)頁中的文字設置郵件鏈接，并鏈接，同時自動填寫主題“咨詢問題”。問：創(chuàng)建不同錨點鏈接的步驟是什么：答：在原始頁面創(chuàng)建命名錨點進入目標頁面創(chuàng)建到命名錨點的鏈接,第六章實驗：制作“廬山風景”網(wǎng)站,實驗要求：一、建立站點目錄mysitelx，并將站點指定至站點目錄。二、繪制布局表格和布局單元格。三、制作網(wǎng)頁“廬山風景”，在網(wǎng)頁中加入相應文字及圖像。四、制作網(wǎng)頁中的各種鏈接，其中包括文字鏈接、圖像鏈接、錨點鏈接、郵件鏈接等。注意：本實驗提供的樣例僅供參考，也許你能設計出別具一格的網(wǎng)頁,第六章實驗：制作“廬山風景”網(wǎng)站,網(wǎng)頁效果,