《《設(shè)置超鏈接》PPT課件.ppt》由會(huì)員分享，可在線閱讀，更多相關(guān)《《設(shè)置超鏈接》PPT課件.ppt（26頁珍藏版）》請(qǐng)?jiān)谘b配圖網(wǎng)上搜索。
1、第六章創(chuàng)建超級(jí)鏈接（一）,主講人：陳恒岳,新課導(dǎo)入,同學(xué)們有沒有看過“天龍八部”??？那還記得“天龍八部”中段譽(yù)會(huì)的那種武功嗎？,,,凌波微步的特點(diǎn)：快速從一個(gè)地方到另一個(gè)地方。,“凌波微步”,,超級(jí)鏈接,,設(shè)置超級(jí)鏈接,本節(jié)課任務(wù),鞏固表格布局方法。理解鏈接的概念，包括URL、絕對(duì)路徑和相對(duì)路徑。掌握文檔或圖片鏈接、空鏈接、腳本鏈接的創(chuàng)建方法。掌握超級(jí)鏈接的目標(biāo)窗口及文本提示的設(shè)置方法。,作用：超級(jí)鏈接將許許多多毫無關(guān)聯(lián)的網(wǎng)頁通過文字、圖片、flash等元素聯(lián)系起來。用戶只需輕點(diǎn)鼠標(biāo)便可訪問鏈接的網(wǎng)頁。類型：按照鏈接目標(biāo)路徑分為：外部鏈接和內(nèi)部鏈接。文檔、圖片鏈接：實(shí)現(xiàn)頁面的跳轉(zhuǎn)；書簽鏈接：可
2、以根據(jù)用戶需求只瀏覽其感興趣的內(nèi)容，而不是瀏覽頁面中的所有內(nèi)容；電子郵件鏈接：可以添加在圖片上或文本上，方便用戶直接打開電子郵件應(yīng)用程序，如outlook。并在收件人位置上顯示設(shè)置好的地址，方便用戶發(fā)送郵件，建立聯(lián)系?？真溄樱核粫?huì)跳轉(zhuǎn)到其他頁面，但可以讀取某些javascript事件，或當(dāng)網(wǎng)頁內(nèi)容較多時(shí)，可以為網(wǎng)頁添加“返回頁首”的鏈接。腳本鏈接：通過執(zhí)行javascript代碼或調(diào)用javascript函數(shù)，實(shí)現(xiàn)表單驗(yàn)證等任務(wù)。,超級(jí)鏈接簡介（演示案例）,,內(nèi)部鏈接,URL（統(tǒng)一資源定位符）地址解析,同學(xué)們，老師要是要你們打開咱們學(xué)校的網(wǎng)址，你會(huì)怎么做？做法：百度中搜索“中山中專”或直接在
3、瀏覽器地址欄中輸入http://zszz.zszz/client/web1/index.ASPURL格式：://://,,URL,URL各部分含義,以“http://zszz.zszz/client/web1/index.ASP”為例解釋各個(gè)部分的含義。：指文件訪問類型：如http表示超文本協(xié)議，ftp表示文件傳輸協(xié)議；：web頁所在服務(wù)器域名，對(duì)應(yīng)本例中的zszz.zszz；：服務(wù)器端口，本例中沒有就是默認(rèn)值80；：服務(wù)器上該網(wǎng)頁的路徑，對(duì)應(yīng)本例中的/client/web1；：網(wǎng)頁對(duì)應(yīng)的文件名，對(duì)應(yīng)本例中的index.ASP；【小貼士】站點(diǎn)中的路徑和文件名中只能使用字母、數(shù)字、連字符和下劃線
4、。,絕對(duì)路徑和相對(duì)路徑,絕對(duì)路徑：是包含服務(wù)器協(xié)議的完全路徑。若創(chuàng)建對(duì)當(dāng)前站點(diǎn)以外的文件鏈接時(shí)必須使用絕對(duì)路徑，例如鏈接到：http://zszz.zszz/client/web1/index.ASP；相對(duì)路徑：一般的，站點(diǎn)內(nèi)的鏈接都是使用相對(duì)路徑，使用相對(duì)路徑方便站點(diǎn)的移植。,相對(duì)路徑引用方法,同一個(gè)目錄的文件引用如果源文件和引用文件在同一個(gè)目錄里，直接寫引用文件名即可。如index.html表示當(dāng)前文件夾中內(nèi)的頁面。如何表示上級(jí)目錄../表示源文件所在目錄的上一級(jí)目錄，../../表示源文件所在目錄的上上級(jí)目錄，以此類推。如../index.html表示當(dāng)前文件夾的上級(jí)目錄下的index.
5、html頁面如何表示下級(jí)目錄引用下級(jí)目錄的文件，直接寫下級(jí)目錄文件的路徑即可。如files/jdjs.html表示當(dāng)前文件夾下files文件夾中的文檔。,活動(dòng)引導(dǎo)：一、新建站點(diǎn)及相關(guān)網(wǎng)頁。二、通過網(wǎng)頁屬性，設(shè)置鏈接文字屬性。三、設(shè)計(jì)網(wǎng)頁布局。四、使用多種方法設(shè)置超級(jí)鏈接。五、設(shè)置超級(jí)鏈接的目標(biāo)窗口和文本提示。備注：學(xué)生自行完成活動(dòng)的前四個(gè)任務(wù),活動(dòng)一：用不同的方式鏈接網(wǎng)頁,活動(dòng)一：總結(jié)鏈接創(chuàng)建方法,1）直接點(diǎn)擊屬性面板中的“瀏覽文件”按鈕，選取鏈接的網(wǎng)頁；2）選中文字，按住shift鍵，拖動(dòng)到站點(diǎn)窗口的目標(biāo)文件，這種方法只應(yīng)用于文字，圖片鏈接則不行；3)按住屬性面板中的“指向文件”，拖動(dòng)到站點(diǎn)
6、窗口的目標(biāo)文件。,超級(jí)鏈接的目標(biāo)窗口,,_blank：在新的窗口中打開_parent：如果是嵌套的框架，鏈接會(huì)在父框架或窗口中打開，如果不是嵌套的框架，就等于_top，在整個(gè)瀏覽器中顯示目標(biāo)網(wǎng)頁。_self：在當(dāng)前框架或窗口打開，瀏覽器默認(rèn)值。_top：取消所有框架，將網(wǎng)頁在整個(gè)窗口中打開。說明：后三種在第七章我們學(xué)習(xí)框架后，大家會(huì)更好的理解其含義及效果。,超級(jí)鏈接的文本提示,“文本提示”就是當(dāng)用戶鼠標(biāo)移到某個(gè)超級(jí)鏈接上，會(huì)彈出的文本。添加方法：選中文本或圖片，按住ctrl+T打開標(biāo)簽編輯器，選擇“編輯標(biāo)簽”模式，如果不是，可按住ctrl+T進(jìn)行切換，在標(biāo)簽a后面添加title屬性，輸入“ti
7、tle=相應(yīng)文本提示”,活動(dòng)二：巧用無址鏈接和腳本鏈接,任務(wù)一：為頁面jdjs.html中“返回”設(shè)置空鏈接，實(shí)現(xiàn)返回頁首效果。方法：選中“返回”，在屬性面板中“鏈接”域中輸入“#”，“目標(biāo)”下來菜單中選取“_top”。任務(wù)二：為頁面index.html設(shè)置腳本鏈接，實(shí)現(xiàn)點(diǎn)擊logo彈出對(duì)話框“歡迎光臨四川旅游網(wǎng)”。方法：選中l(wèi)ogo“四川旅游網(wǎng)”，在屬性面板的“鏈接”域中輸入“javascript:alert(歡迎光臨四川旅游網(wǎng))”,課堂練習(xí),選擇題：制作外部鏈接，使用（）；制作內(nèi)部鏈接，使用（）。A絕對(duì)路徑；B相對(duì)路徑填空題：,A,B,http,,CLIENT/WEB1/sub_zsjy,
8、index.asp,課堂練習(xí),操作題：1、在首頁index.html中右上方輸入“關(guān)閉窗口”，通過設(shè)置腳本鏈接關(guān)閉窗口，關(guān)閉窗口的代碼：“javascript:window.close()”2、完善四川旅游網(wǎng)中的空白頁內(nèi)容，并完成未完成的鏈接。并上交作業(yè)。,小結(jié),超級(jí)鏈接作用：將網(wǎng)站中的各個(gè)組成部分鏈接成一個(gè)整體URL格式：://://絕對(duì)路徑：是包含服務(wù)器協(xié)議的完全路徑相對(duì)路徑：一般的，站點(diǎn)內(nèi)的鏈接都是使用相對(duì)路徑各種相對(duì)路徑引用方法：同一個(gè)目錄的文件，直接寫引用文件名即可。如何表示上級(jí)目錄../表示源文件所在目錄的上一級(jí)目錄，../../表示源文件所在目錄的上上級(jí)目錄，以此類推。如何表示下
9、級(jí)目錄：直接寫下級(jí)目錄文件的路徑即可。鏈接創(chuàng)建方法目標(biāo)窗口及文本提示的設(shè)置方法無址鏈接與腳本鏈接設(shè)置方法,活動(dòng)三：給網(wǎng)頁添加郵件鏈接和書簽鏈接,郵件鏈接設(shè)置方法（教師演示）方法一：選取該文本執(zhí)行“插入/電子郵件鏈接”命令，在打開的對(duì)話框中輸入Email地址，單擊“確定”按鈕。方法二：選中文本或圖片，在屬性面板中“鏈接”欄中輸入“mailto:Email地址”?！癿ailto:?subject=你好&cc=”。subject=郵件主題；cc=要抄送的電子郵件地址；其中？表示分隔符，&表示連接。,活動(dòng)三：給網(wǎng)頁添加郵件鏈接和書簽鏈接,書簽鏈接設(shè)置方法（教師演示）方法步驟：scjd.html頁面中的
10、操作：定位插入/命名錨記命名錨記選中標(biāo)題在屬性面板的“鏈接”域中輸入“#書簽名”index.html頁面中：選中景點(diǎn)設(shè)置矩形熱點(diǎn)在屬性面板的“鏈接”域中輸入files/jdjs.html#書簽名【小貼士】設(shè)置鏈接頁面時(shí)，當(dāng)前網(wǎng)頁與鏈接頁面不在同一路經(jīng)時(shí)，輸入格式為“路徑+文件名+#+書簽名”，為了避免錯(cuò)誤，可以先利用“瀏覽文件”按鈕，現(xiàn)在鏈接文件，然后在文件名后加上“#書簽名”即可。,活動(dòng)三小結(jié)：,【小貼士】在制作郵件鏈接時(shí)，注意鏈接的書寫格式為“mailto:郵件地址?subject=郵件主題&cc=抄送地址”。在制作錨點(diǎn)鏈接時(shí)，注意鏈接的書寫格式為“路徑+文件名+#+書簽名”。,活動(dòng)四：管
11、理站點(diǎn)鏈接資源,掌握站點(diǎn)鏈接資源的管理方法。,教學(xué)目標(biāo)：,知識(shí)要點(diǎn):,選項(xiàng)、“收藏”選項(xiàng)。,準(zhǔn)備知識(shí)：（1）“站點(diǎn)”選項(xiàng)（2）“收藏”選項(xiàng),“資源”面板,刷新站點(diǎn)列表,“收藏”選項(xiàng),活動(dòng)四：管理站點(diǎn)鏈接資源,活動(dòng)引導(dǎo)：一、“站點(diǎn)”選項(xiàng)的設(shè)置二、“收藏”選項(xiàng)的設(shè)置,活動(dòng)四：管理站點(diǎn)鏈接資源,活動(dòng)小結(jié):在本活動(dòng)中我們對(duì)站點(diǎn)中的鏈接通過“資源”面板進(jìn)行了編輯、管理。通過本活動(dòng)主要讓我們對(duì)“資源”面板中的一些常用按鈕有所熟悉。,活動(dòng)四：管理站點(diǎn)鏈接資源,,為某網(wǎng)頁中的文字設(shè)置郵件鏈接，并鏈接“”。要求：為某網(wǎng)頁中的文字設(shè)置郵件鏈接，并鏈接，同時(shí)自動(dòng)填寫主題“咨詢問題”。問：創(chuàng)建不同錨點(diǎn)鏈接的步驟是什么：答：在原始頁面創(chuàng)建命名錨點(diǎn)進(jìn)入目標(biāo)頁面創(chuàng)建到命名錨點(diǎn)的鏈接,第六章實(shí)驗(yàn)：制作“廬山風(fēng)景”網(wǎng)站,實(shí)驗(yàn)要求：一、建立站點(diǎn)目錄mysitelx，并將站點(diǎn)指定至站點(diǎn)目錄。二、繪制布局表格和布局單元格。三、制作網(wǎng)頁“廬山風(fēng)景”，在網(wǎng)頁中加入相應(yīng)文字及圖像。四、制作網(wǎng)頁中的各種鏈接，其中包括文字鏈接、圖像鏈接、錨點(diǎn)鏈接、郵件鏈接等。注意：本實(shí)驗(yàn)提供的樣例僅供參考，也許你能設(shè)計(jì)出別具一格的網(wǎng)頁,第六章實(shí)驗(yàn)：制作“廬山風(fēng)景”網(wǎng)站,網(wǎng)頁效果,
《設(shè)置超鏈接》PPT課件.ppt
