如何運用插件繪制HTML地新聞系統

時間：2024-10-11 12:20:14 HTML DOM

如何運用插件繪制HTML地新聞系統

　　出于對Dreamweaver 8 的喜愛，我對Dreamweaver 8 做了一些研究。同時也用Dreamweaver 8作為封裝平臺給Dreamweaver 8封裝了許多服務器行為的功能擴展插件，當然也封裝了一些命令、行為和對象插件。這些插件大家可以去我的插件發布頁下載使用。

　　今天我要教大家的是如何利用Dreamweaver 8加上我制作的插件來實現一個簡單的生成HTML的新聞系統。例子是簡單的，但是原理和方法是一致的，學會了使用這個插件的功能，可以將這個插件應用到許多大的新聞和文章系統當中去。至于數據生成HTML有什么好處，我相信在這里不需要做說明，大家也能理解和明白。

　　下面我們就開始來利用Dreamweaver 8加插件來制作這個系統，首先我們建立一個數據庫和設計一個新聞數據表。如下圖：

　　我們建立一個名為“data.mdb”的數據庫。并且在數據庫中設計一個名為“news”的數據表用來存儲新聞數據。具體字段設計你可以參照上圖設計。

　　數據庫建立設計好后我們先來分析一下一個簡單的生成HTML的新聞系統需要有什么樣的流程。注意：設計任何形式的系統之前分析系統的功能和流程這一步是非常重要的。事先分析好了流程，能讓你的整個系統條理清晰，能讓你在設計系統的時候有計劃有目的的去實現系統的功能。

　　我們發現一個簡單的生成HTML的新聞系統至少需要4個文件。首先是名為“index.ASP”的現實新聞列表的首頁，然后是名為“add.ASP”的新聞發布表單頁，再者是名為“setup.ASP”的生成HTML新聞的功能頁。最后是名為“templates.HTML”的新聞模板頁，這個頁面你可以隨意設計只需要在現實數據的地方鑲嵌上數據顯示的標簽即可。比如在要顯示標題的地方鑲嵌上 “@標題@”這樣的標簽即可。非常的簡單和便利。

　　從上面的分析我們可以看出一個最基本的系統構架。其每個頁面所必須具備的功能也就很容易理解。

　　下面我們開發著手制作這個系統。

　　首先我們打開Dreamweaver 8 新建一個站點。

　　然后設置站點所需要的編程語言：

　　站點建立成功后，我們要開始建立站點的數據庫連接。

　　為了設置使用方便，我們使用絕對路徑連接數據庫。具體實例連接代碼如下：

　　"Driver={Microsoft Access Driver (*.mdb)};Dbq=E:SHOPdata.mdb;"

　　你可以按照你數據庫存放的絕對路徑對連接字符串中的路徑進行更改。

　　數據庫連接成功后，我們開始制作系統的第一個頁面：發布新聞頁面“add.ASP”。首先請先新建一個名為“add.ASP”的頁面。然后打開頁面選擇應用程序面板。選擇插入表單向導按鈕。

　　根據圖示你設置好你要插入的字段名成和完成插入后所要前往的頁面。這里提醒一下菜鳥讀者，自動編號字段和時間日期字段時不要要進行插入操作的，這類型的字段都會在插入操作的同時在數據庫中自行完成新增動作。所以在表單字段框中，你可以刪除這兩個字段的插入操作。

　　當然為了防止用戶提交空數據到數據庫中，我們可以為該表單加入驗證輸入的行為。鑒于Dreamweaver 8 自帶的表單驗證行為功能薄弱，而且不能自己定義出錯提示，我們這里將用到本系統第一個用到的插件“高級表單驗證”。如果你安裝了這個插件可以用常用面板中找到這個插件。

　　利用這個表單驗證的插件設置好表單提交數據的條件。最后按下確定按鈕，那么整個“add.ASP”頁面的所有功能就制作完成。我們按下保存按鈕來保存所有的操作，然后關閉這個頁面。

　　第二步，我們開始制作名為“setup.ASP”的生成HTML的功能頁面。整個頁面需要進行2個操作，一個是建立記錄集，另一個是加入插件功能。好那我們就開始制作整個頁面。

　　首先，我們新建立一個文件名為“setup.ASP”,打開這個新建立的文件。首先我們在這個文件中建立一個行新聞表“news” 的記錄集。如圖：

　　設置好記錄集后按下確定按鈕。

　　注意：接下來我們要對記錄集做一個關鍵而重要的設定。由于我們使用的是ACCESS作為數據庫，所有我們在加入生成HTML的插件操作之前需要把記錄集的光標類型進行更改。首先請點應用程序面板的服務器行為，如圖：

　　然后你將看到記錄集的屬性面板。

　　你將看到記錄集的默認光標類型是“僅向前”，我們就是要講光標類型進行更改，將光標類型改為“鍵集”。如圖所示

　　注意：只有使用ACCESS數據庫是才需要做這樣的更改操作，假如你使用SQL作為數據庫，那么這個步驟可以省略。

　　設定好記錄集后，我們馬上要加入整個系統最激動人心和最重要的一項功能，那就是生成HTML的功能。首先你點擊服務器行為面板，單擊上面的加號。在出現的菜單中選擇“落魄小生插件集”再選擇插件集里的“生成HTML文件”的功能。如圖：

　　下一步將出現插件的設置對話框。如圖：

　　在這個你可以設置生成HTML所必須的條件，比如標題字段、文件名字段、HTML存放的文件夾等資料。設置完成后按下確定。那么至此整個生成HTML文件的功能頁面就算制作完成了。我們按下保存，然后關閉整個頁面。

　　第三步我們將制作名為“index.ASP”的現實新聞列表的首頁。這個頁面將會需要建立一個數據集，設置數據的現實重復區域，以及加入翻頁的功能。

　　那么我們接下來就開始制作這個頁面，首先先新建一個名為“index.ASP”的文件，然后打開這個文件。在這個文件中插入一個2行1列的表格。如下表格效果：

　　[編號字段]:[標題字段][分頁程序內容]

　　第一行將現實新聞的編號和標題，第二行將放置分頁的代碼。

　　建立好了表格我們就將建立一個記錄集。如圖所示：

　　注意：為了在最前面現實最新發布的新聞，請將記錄集的排序設置條件。這里我們設置字段“id”的排序為降序，也就是最后發布的新聞將現實在最前面。

　　設置好記錄集后，按下確定按鈕。然后我們把需要顯示的字段拖放綁定在頁面相應的地方。如圖：

　　為了讓標題連接到相應的HTML新聞，我們還要對標題字段設置相應的連接：選中標題字段，然后再屬性面板設置其連接。如圖：

　　點箭頭所指的圖標，將出現連接設置對話框。如圖：

　　這樣就制作好了新聞的連接。

　　[首頁][][末頁]

　　選擇頁數

　　接下來我們要讓每頁顯示10條新聞，實現整個功能我們需要用到服務器行為“重復區域”。我們選中表格行的“TR”標簽，點選服務器行為的“重復區域”功能，將出現如下對話框：

　　按下確定就完成了重復區域的設置。設置完后的效果如下圖所示：

　　加入新聞不只10條呢？那我們該如何顯示所有的新聞呢？這里我們就需要用到翻頁的功能。Dreamweaver 8 本身自帶了分頁的功能行為，但是其功能過于弱小，往往難以滿足程序開發和現實的需要。那么有沒有辦法讓Dreamweaver 8 具備像高手手寫代碼那樣的分頁功能呢？答案是肯定的，當然可以，我們可以通過我開發的插件來完成整個分頁的功能。如下圖：

　　點擊該功能將會出現一個設置對話框。如圖：

　　按下確定按鈕，完成后的效果圖如下：

　　至此，整個新聞顯示頁面就制作完畢，保存關閉后，我們將來測試整個新聞系統的功能。

　　[NextPage]

　　以上步驟，讓我們制作完成了整個系統，接下來我們就來測試一下這個系統。

　　因為數據庫中還沒有數據，那么我們首先在打開“add.ASP”文件按下F12在瀏覽器中瀏覽執行該文件。如圖：

　　我們填寫相關新聞后按下添加新聞按鈕。添加完成后系統將自動前往HTML生成頁“setup.ASP”生成新聞。如圖：

　　從圖中我們看到數據已經成功生成了HTML文件。

　　我們再返回察看新聞列表.如圖：

　　我們發現這個系統的新聞以及現實出來，我們隨便點擊一條新聞,都將連接到相應的HTML文件。如圖：

　　寫道此整個系統就完成了，希望大家能喜歡我的教程，我將在后續文章中陸續推出Dreamweaver 8 加插件，進行高級程序開發的系列教程，希望大家密切關注。

【如何運用插件繪制HTML地新聞系統】相關文章：