《網頁設計與制作》教學課件第9章：超級鏈接與導航欄一、課程引導二、明確知識技能目標三、展示網頁瀏覽效果主要教學環節四、分析操作任務五、知識講解與操作示范六、課堂模仿實踐七、疑難解析八、歸納總結九、布置習題（一）課程引導 一個網站由許多的網頁組成，而各個網頁之間通常是由超級鏈接聯系在一起的。超級鏈接是網頁中最基本的元素之一，利用它不僅可以進行網頁間的相互鏈接，還可以使網頁鏈接到相關的圖像文件、多媒體文件以及下載程序等。（二）明確知識技能目標（1）掌握創建外部鏈接和內部鏈接的操作方法。（2）掌握制作圖像映射的操作方法。（3）掌握創建E-mail鏈接的操作方法。（4）掌握測試鏈接的有效性的操作方法。（三）展示網頁瀏覽效果本章所制作的網頁index.html的瀏覽效果如圖所示。圖9-1網頁index.html的預覽效果 （四）分析操作任務 （1）在站點“長沙世界之窗”下創建文件夾“10超級鏈接”，在“10超級鏈接”文件夾中創建命名為“index.html”的網頁。 （2）在該網頁中創建外部鏈接和內部鏈接。 （3）在該網頁中制作圖像映射，設置圖像熱點的超級鏈接。 （4）在該網頁中創建導航欄。（五）知識講解與操作示范（1） 9.1超級鏈接概述 每一個網頁文檔都有自己的存放位置和路徑，在一個網站中，鏈接路徑通常有3種表格方法：絕對路徑、文檔目錄相對路徑、根目錄相對路徑。

（五）知識講解與操作示范（2） 1．絕對路徑 絕對路徑是被鏈接文檔的完整路徑，包括使用的傳輸協議，例如“”即是一個絕對路徑。絕對路徑包含的是具體地址，如果目標文件被移動，則鏈接無效。 從當前瀏覽的網頁鏈接到其他網站的網頁時，必須使用絕對路徑。（五）知識講解與操作示范（3） 2．文檔目錄相對路徑 文檔目錄相對路徑是指以當前文檔所在位置為起點到被鏈接文檔經由的路徑，使用文檔相對路徑可 省去當前文檔和被鏈接文檔的絕對路徑中相同的部分，保留不同部分。 文檔目錄相對路徑適合于網站的內部鏈接。只要是屬于同一網站之下，即使不在同一個文件夾中，文檔目錄相對路徑也是適合的。（五）知識講解與操作示范（4） 3．站點根目錄相對路徑 站點根目錄相對路徑是指從站點根文件夾到被鏈接檔經由的路徑。根目錄相對路徑也適用于創建內部鏈接，但大多數情況下，一般不使用這種路徑形式。（五）知識講解與操作示范（5） 9.2創建超級鏈接 在“10超級鏈接”文件夾中創建一個命名“index.html”的網頁。該網頁包括外部的友情鏈接，例如“湖南鳳凰”網站。也包括多種形式的內部鏈接，例如圖像映射、E-mail鏈接。 網頁“index.html”及其超級鏈接創建過程如下：（五）知識講解與操作示范（6） 9.2.1新建網頁 在站點“長沙世界之窗”下創建文件夾“10超級鏈接”，在“10超級鏈接”文件夾中創建一個命名為“index.html”的網頁，保存該網頁文檔。

（五）知識講解與操作示范（7） 9.2.2編輯網頁 （1）將光標置于網頁編輯窗口的左上角，插入一個8行 1列的表格，表格的“寬”設置為“767px”，“對齊”方式設置為“居中對齊”，“填充”、“間距”、“邊框”都設置為0。 （2）在表格的第一行插入一幅圖像“image/1001.jpg”，在表格的第二行插入一幅圖像“image/1002.jpg”，在表格的第三行插入一幅Flash動畫。 （3）在表格的第五行輸入文本：“返回首頁 | 關于我們 | 公司部門 | 企業文化 | 發送郵件”，且“居中”對齊。（五）知識講解與操作示范（8） （4）在表格的第六行中輸入文本：“友情鏈接：湖南張家界 | 湖南鳳凰 | 湖南韶山 ”，且“居中”對齊。 （5）在表格的第七行中輸入文本：“長沙世界之窗有限公司@2004-2005”，第八行中輸入文本：“中國長沙瀏陽河大橋東郵編：410003”，且都“居中”對齊。 （6）調整表格中的圖像和 Flash 動畫的大小和位置。（五）知識講解與操作示范（9）9.2.3創建超級鏈接1．創建外部鏈接 為表格中第六行中的文本“湖南張家界”等創建外 部分鏈接，操作過程如下： （1）選中表格第六行中的文字“湖南張家界”。

（2）在屬性面板的“鏈接”文本框中輸入外部鏈接的絕對路徑：。 （3）外部鏈接的絕對路徑輸入完成之后，屬性面板中的“目標”下拉列表框即變為可選狀態，共有4個選項可供選擇。（五）知識講解與操作示范（10） 2．創建文本形式的內部鏈接 為表格中的第五行文本“關于我們”創建內部鏈接，操作過程如下： （1）選中第五行中的文字“關于我們”。 （2）在“屬性”面板中，單擊“鏈接”列表框中右邊的【瀏覽文件】按鈕，在彈出的“選擇文件”對話框中選擇一個網頁文件。這里，選擇同一個站點中文件夾“02文本操作”中網頁文檔“02.html”，則鏈接到該網頁。 （3）在“目標”下拉列表框中選擇“_blank”。至此，一個內部鏈接創建完成。（五）知識講解與操作示范（11） 3．制作圖像映射 所謂圖像映射是指一張圖片上多個不同的區域擁有不同的鏈接地址。在圖像中定義一定形狀的區域，然后給這些區域加上鏈接，這些區域被稱為熱點。 下面為表格第二行中的圖像制作圖像映射，下面以圖像中的“超級游樂”位置為例說明操作過程。（五）知識講解與操作示范（12） （1）指定熱點區域 選擇表格第二行中的圖像，然后單擊“屬性”面板左側“地圖”下的“橢圓形熱點工具”按鈕，進入熱點區域繪制狀態。

當鼠標指針變成“+”字形狀時，按住鼠標左鍵，在需要設置熱點的位置“超級游樂”拖動鼠標形成一個圓形，于是一個圓形的熱點區域便形成，且用透明的藍色顯示指定圖像的熱點區域。 采用同樣的方法可以指定多個熱點區域。熱點區域繪制完成后，單擊“指針熱點工具”按鈕，取消熱點區域繪制狀態。（五）知識講解與操作示范（13） （2）調整熱點區域 選中熱點區域，可以對熱點區域的大小和位置進行適當調整。 （3）設置圖像熱點的超級鏈接 （4）保存網頁，且瀏覽網頁，當鼠標指向不同的區域時，單擊后打開鏈接頁面。（五）知識講解與操作示范（14） 4．創建E-mail鏈 創建E-mail鏈接的操作要求如下： （1）為表格中第五行中的文本“發送郵件”創建E-mail鏈接。 （2）替瀏覽者加入郵件的主題為“對網站的意見與建議”。 創建E-mail鏈接的操作過程如下： （1）選中頁面的文字“發送郵件”，在“屬性”面板的“鏈接”文本框 中輸入“mailto:”和郵箱地址，例如“mailto:”。 （2）在郵箱地址的后面加上“?subject=對網站的意見與建議”，完整的語句為“mailto:?subject=對網站的意見與建議”。

這樣預覽頁面時，用戶單擊鏈接彈出發信窗口會有現在的主題。（五）知識講解與操作示范（15） 9.2.4鏈接檢查 當創建完一個網站的鏈接后，應該對鏈接進行檢查與測試，利用“鏈接檢查器”可以檢查網站中的鏈接。過程如下： （1）在 8主窗口中，單擊菜單【窗口】→【結果】，打開“結果”面板。 （2）在“結果”面板中切換到“鏈接檢查器”選項卡，單擊面板左上角的綠色箭頭，在彈出的菜單中選擇相應命令，例如選擇“檢查整個當前本地站點的鏈接”。 （3）鏈接檢查器會自動開始檢查站點鏈接，檢查完畢后，如果有無效鏈接，便會顯示在該對話框中。如果要修改無效鏈接，直接單擊鏈接內容，并對其進行修改即可。（五）知識講解與操作示范（16） 9.3導航欄簡介 導航欄實際是超級鏈接的綜合應用。為了方便網站訪問者瀏覽網站中相關信息，通常將許多超鏈接有規律地排列網頁的上部或者左側，這些超鏈接就是瀏覽者訪問網站的向導，形象地稱為“導航欄”，尤其是首頁一般都有導航欄。（五）知識講解與操作示范（17） 導航欄可以理解為超鏈接的有序排列。導航條的布局方式通常分為橫向排列、縱向排列、弧形排列、浮動導航欄等多種形式；導航欄中的的超鏈接載體可以為文字、圖片、Flash動畫、按鈕等；導航欄也可做成彈出式菜單形式。

導航可以排列在頁面的上方、左側、右側、底部，有的網站將導航欄置于頁面的中部位置。（六）課堂模仿實踐 1．操作要求 （1）打開“課堂實踐”網站文件夾“10超級鏈接”中的網頁文檔“10.html”。 （2）選中頁面底部的文字“返回首頁”設置超鏈接，鏈接的網頁文檔為“index.html”；同樣為“關于我們”設置超鏈接，鏈接的網頁文檔為“02.html”；為“公司部門”設置超鏈接，鏈接的網頁文檔為“12.html”。 （3）為“聯系我們”創建E-mail鏈接，E-mail地址為mailto:abc@126com。 （4）為圖片“鳳凰城門”創建超鏈接，鏈接的網頁文檔為“10_1.html”。（六）課堂模仿實踐 2．效果展示圖9-15圖像超鏈接所打開的網頁圖9-14設置超鏈接的課堂實踐網頁的瀏覽效果（六）課堂模仿實踐 3．制作要點提示 先選中文字或圖片，然后在屬性面板的“鏈接”列表框中輸入鏈接對象的路徑和名稱，也可以打開對話框選擇鏈接的文件。（六）課堂模仿實踐 課外拓展實踐 1．在“湖鐵職院學院網站”站點文件夾“10超級鏈接”中創建網頁文檔“10.html”。 2．為該網頁的上部導航欄和底部導航欄設置超級鏈接。（七）疑難解析（八）歸納總結 制作網頁時經常需要通過超級鏈接將各個不同的頁面聯系起來，達到快速指向需要瀏覽頁面的目的。通過本章學習，熟練掌握如何創建外部鏈接，頁間鏈接、空鏈接、E-mail鏈接等，并能測試鏈接的有效性。（九）布置習題

一、關于微信小程序開發者文檔

一、關于微信小程序開發者文檔

這份微信小程序開發者文檔是微信公眾平臺官方團隊發布，由編輯整理完成，方便開發者查閱學習，并添加拓展了《微信小程序設計規范》等相關知識，使該文檔內容更加豐富。

學習小程序開發之前，請確保您已經具備基本的WEB前端能力：進行前端能力測試

微信小程序是一種不需要下載安裝即可使用的應用，它實現了應用“觸手可及”的夢想，用戶掃一掃或者搜一下即可打開應用。也體現了“用完即走”的理念，用戶不用關心是否安裝太多應用的問題。微信“小程序”可以為開發者提供基于微信的表單、導航、地圖、媒體和位置等開發組件，讓他們在微信的網頁里構建一個HTML 5應用。同時微信還開放了登錄和微信支付等接口，讓這個“小程序”可以和用戶的微信賬號打通。微信將“小程序”定義為“一種新的應用形態”。微信方面強調，小程序、訂閱號、服務號、企業號目前是并行的體系。

二、走進《微信小程序開發文檔》

“工欲善其事，必先利其器”如果你想開發小程序，必須先學會一套微信特制的「開發語言」。為了讓大家更快的上手這門開發語言，官網 為廣大小程序開發者收集整理了一份十分詳細的開發文檔。

詳細的介紹了微信小程序向開發者開放的下列API接口：

雖然微信小程序本質上來說就是一個HTML 5（移動網頁）應用，但與那些經常在朋友圈刷屏的 H5 小游戲或者應用不同的是，微信小程序獲得更多的系統權限。首先是數據緩存能力，這可以讓用戶在打開一個小程序的時候將程序的主要框架緩存到微信上，下一次就可以快速打開了。微信創始人張小龍曾說過，微信應用號希望實現的目標是“用完即走，無需安裝和卸載”，也就是說以后當你要使用一個應用時，只需要在微信里搜索就可以直接使用了。

《微信小程序開發文檔》讓微信小程序開發者開發微信小程序，觸手可及隨手可得。

想要熟悉小程序，光看是不行的，還需要動手去做。當然了想要開發微信小程序光有開發文檔可是不夠的，還需要HTML、JS、CSS等基本的WEB前端能力。在官網首頁，你同樣可以找到這些教程與手冊。

如果開發過程中遇到問題，最好的辦法就是查閱《微信小程序開發文檔》，相信在文檔中，你能找到絕大部分問題的解決辦法。

同時你還可以在《微信小程序資源匯總》找到更多微信小程序資源。

三、小程序開發工具下載最新版本 0.11.112300四、小程序開發交流