加入分頁功能與動態產生XML 資料精品课件.pptVIP

加入分頁功能與動態產生XML 資料 第 15 堂課 15-1 加入分頁功能與換頁連結 通常使用了資料庫的網站, 資料量都比較大, 每次顯示出來的資料很可能都不是一個螢幕大小就顯示得完的。如果一頁中顯示的資料量過多, 一路往下捲也很容易捲到忘了身在何方呢！這種時候, 就要製作分頁與換頁功能的導覽、連結,才能讓使用者更輕鬆地瀏覽網頁內容。 本篇的 T 恤範例網站也有類似的分頁需求, 所以在本節中, 我們就要來學習一下, 如何為資料集加入分頁功能與換頁連結。 加入分頁功能與換頁連結 Dreamweaver 內建的分頁功能 利用擴充功能製作分頁效果 下載 Navigation Builder 擴充功能 安裝 Navigation Builder 擴充功能 插入 Navigation Builder 擴充功能的換頁連結 Dreamweaver 內建的分頁功能 Dreamweaver 其實有內建名為資料集導覽列的分頁功能, 只不過它提供的功能較少 (例如無法跳到指定頁次), 所以在本節中, 我們並不採用它來做為範例網站的分頁功能。 Dreamweaver 內建的分頁功能 利用擴充功能製作分頁效果 利用擴充功能製作分頁效果 對於 Dreamweaver 來說, 擴充功能泛指所有可增加其功能的「外掛元件」。之所以稱之為「外掛」, 是因為擴充功能本身無法獨立執行, 必須依附在 Dreamweaver 中才能發揮作用。 Dreamweaver 的擴充功能類型眾多, 從各種樣式的 Flash 按鈕、行為, 到 Script 程式碼都有。安裝好的擴充功能依據它們的類型不同, 可能出現在行為面板、『插入』功能表, 或『命令』功能表中。 利用擴充功能製作分頁效果 在 Adobe 官方網站上, 就有許多實用的擴充功能可以下載利用。這些擴充功能有的是由 Adobe 官方開發的, 也有的是網友私人的作品, 或是其它公司開發的產品。有的擴充功能是免費提供的, 也有需要付費的, 所以請您在下載時, 要留意一下版權訊息與使用範圍！ 下載 Navigation Builder 擴充功能 擴充功能百百種, 其中當然也有具備分頁功能的擴充功能！請連結到 /cfusion/exchange/ 網頁, 並以 Navigation Builder 關鍵字來搜尋, 或者直接連結到：/cfusion/exchange/index.cfm?event=dlextid=679325, 下載名為 Navigation Builder 的擴充功能： 下載 Navigation Builder 擴充功能 下載 Navigation Builder 擴充功能 下載 Navigation Builder 擴充功能 安裝 Navigation Builder 擴充功能 請雙按下載到本機的 MX679325_NavigationBuilder.mxp 檔, 開始依指示安裝該擴充功能。閱讀完版權資訊後按下接受鈕, 擴充功能就會自動進行安裝了： 安裝 Navigation Builder 擴充功能 安裝完後, 便可在 Adobe Extension Manager 裡看到安裝好的擴充功能： 插入 Navigation Builder 擴充功能的換頁連結 請先重新啟動 Dreamweaver, 以確保剛剛安裝的擴充功能可以運作。接著開啟Ch15\ex15-01\catalog.php 檔, 讓我們為此網頁加入分頁瀏覽功能： 插入 Navigation Builder 擴充功能的換頁連結 插入 Navigation Builder 擴充功能的換頁連結 插入 Navigation Builder 擴充功能的換頁連結 設定到此完成。請儲存 catalog.php 檔之後, 開啟同資料夾中的 index.php 檔,並按 F12 鍵測試看看： 插入 Navigation Builder 擴充功能的換頁連結 插入 Navigation Builder 擴充功能的換頁連結 為了讓使用者操作更方便, 接著在網頁底部也加上一個分頁連結。請回到剛剛編輯的 catalog.php 檔中, 然後如下操作： 插入 Navigation Builder 擴充功能的換頁連結 15-2 讓網頁內容自動捲至頂部 在上一堂課中, 我們已完成了 T 恤的分類檢視功能, 在上一節中又追加了分頁檢視的功能, 首頁的商品展示看似已相當完整, 但其實還有個小小的缺陷待改進。不知您有沒有注意到, 由於我們使用 iframe 架構來顯示 T 恤資料, 所以當使用者捲動到底部後, 又改選其他類別來檢視時, 整個畫面仍會停在網頁底部！ 讓網頁內容自動捲至頂部 讓網頁內容自動捲至頂部 讓網頁內容自動捲至頂部 這樣的顯示狀況雖然不是什麼大問題, 但若能加