如何運用外掛繪製HTML地新聞系統

才智咖 人氣:2.8W

出於對Dreamweaver 8 的喜愛,我對Dreamweaver 8 做了一些研究。同時也用Dreamweaver 8作為封裝平臺給Dreamweaver 8封裝了許多服務器行為的功能擴充套件外掛,當然也封裝了一些命令、行為和物件外掛。這些外掛大家可以去我的外掛釋出頁下載使用。

如何運用外掛繪製HTML地新聞系統

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

下面我們就開始來利用Dreamweaver 8加外掛來製作這個系統,首先我們建立一個數據庫和設計一個新聞資料表。如下圖:

我們建立一個名為“”的資料庫。並且在資料庫中設計一個名為“news”的資料表用來儲存新聞資料。具體欄位設計你可以參照上圖設計。

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

我們發現一個簡單的生成HTML的新聞系統至少需要4個檔案。首先是名為“”的現實新聞列表的首頁,然後是名為“”的新聞釋出表單頁,再者是名為“”的生成HTML新聞的功能頁。最後是名為“”的新聞模板頁,這個頁面你可以隨意設計只需要在現實資料的地方鑲嵌上資料顯示的標籤即可。比如在要顯示標題的地方鑲嵌上 “@標題@”這樣的標籤即可。非常的.簡單和便利。

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

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

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

然後設定站點所需要的程式語言:

站點建立成功後,我們要開始建立站點的資料庫連線。

為了設定使用方便,我們使用絕對路徑連線資料庫。具體例項連線程式碼如下:

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

你可以按照你資料庫存放的絕對路徑對連線字串中的路徑進行更改。

資料庫連線成功後,我們開始製作系統的第一個頁面:釋出新聞頁面“”。首先請先新建一個名為“”的頁面。然後開啟頁面選擇應用程式面板。選擇插入表單嚮導按鈕。

根據圖示你設定好你要插入的欄位名成和完成插入後所要前往的頁面。這裡提醒一下菜鳥讀者,自動編號欄位和時間日期欄位時不要要進行插入操作的,這型別的欄位都會在插入操作的同時在資料庫中自行完成新增動作。所以在表單欄位框中,你可以刪除這兩個欄位的插入操作。

當然為了防止使用者提交空資料到資料庫中,我們可以為該表單加入驗證輸入的行為。鑑於Dreamweaver 8 自帶的表單驗證行為功能薄弱,而且不能自己定義出錯提示,我們這裡將用到本系統第一個用到的外掛“高階表單驗證”。如果你安裝了這個外掛可以用常用面板中找到這個外掛。

利用這個表單驗證的外掛設定好表單提交資料的條件。最後按下確定按鈕,那麼整個“”頁面的所有功能就製作完成。我們按下儲存按鈕來儲存所有的操作,然後關閉這個頁面。

第二步,我們開始製作名為“”的生成HTML的功能頁面。整個頁面需要進行2個操作,一個是建立記錄集,另一個是加入外掛功能。好那我們就開始製作整個頁面。

首先,我們新建立一個檔名為“”,開啟這個新建立的檔案。首先我們在這個檔案中建立一個行新聞表“news” 的記錄集。如圖:

設定好記錄集後按下確定按鈕。

注意:接下來我們要對記錄集做一個關鍵而重要的設定。由於我們使用的是ACCESS作為資料庫,所有我們在加入生成HTML的外掛操作之前需要把記錄集的游標型別進行更改。首先請點應用程式面板的伺服器行為,如圖:

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

你將看到記錄集的預設游標型別是“僅向前”,我們就是要講游標型別進行更改,將游標型別改為“鍵集”。如圖所示

注意:只有使用ACCESS資料庫是才需要做這樣的更改操作,假如你使用SQL作為資料庫,那麼這個步驟可以省略。

設定好記錄集後,我們馬上要加入整個系統最激動人心和最重要的一項功能,那就是生成HTML的功能。首先你點選伺服器行為面板,單擊上面的加號。在出現的選單中選擇“落魄小生外掛集”再選擇外掛集裡的“生成HTML檔案”的功能。如圖:

下一步將出現外掛的設定對話方塊。如圖:

在這個你可以設定生成HTML所必須的條件,比如標題欄位、檔名欄位、HTML存放的資料夾等資料。設定完成後按下確定。那麼至此整個生成HTML檔案的功能頁面就算製作完成了。我們按下儲存,然後關閉整個頁面。

第三步我們將製作名為“”的現實新聞列表的首頁。這個頁面將會需要建立一個數據集,設定資料的現實重複區域,以及加入翻頁的功能。

那麼我們接下來就開始製作這個頁面,首先先新建一個名為“”的檔案,然後開啟這個檔案。在這個檔案中插入一個2行1列的表格。如下表格效果:

[編號欄位]:[標題欄位][分頁程式內容]

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

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

注意:為了在最前面現實最新發布的新聞,請將記錄集的排序設定條件。這裡我們設定欄位“id”的排序為降序,也就是最後釋出的新聞將現實在最前面。

設定好記錄集後,按下確定按鈕。然後我們把需要顯示的欄位拖放繫結在頁面相應的地方。如圖:

為了讓標題連線到相應的HTML新聞,我們還要對標題欄位設定相應的連線:選中標題欄位,然後再屬性面板設定其連線。如圖:

點箭頭所指的圖示,將出現連線設定對話方塊。如圖:

這樣就製作好了新聞的連線。

[首頁][][末頁]

選擇頁數

1

2

3

4

5

6

接下來我們要讓每頁顯示10條新聞,實現整個功能我們需要用到伺服器行為“重複區域”。我們選中表格行的“TR”標籤,點選伺服器行為的“重複區域”功能,將出現如下對話方塊:

按下確定就完成了重複區域的設定。設定完後的效果如下圖所示:

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

點選該功能將會出現一個設定對話方塊。如圖:

按下確定按鈕,完成後的效果圖如下:

至此,整個新聞顯示頁面就製作完畢,儲存關閉後,我們將來測試整個新聞系統的功能。

[NextPage]

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

因為資料庫中還沒有資料,那麼我們首先在開啟“”檔案按下F12在瀏覽器中瀏覽執行該檔案。如圖:

我們填寫相關新聞後按下新增新聞按鈕。新增完成後系統將自動前往HTML生成頁“”生成新聞。如圖:

從圖中我們看到資料已經成功生成了HTML檔案。

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

我們發現這個系統的新聞以及現實出來,我們隨便點選一條新聞,都將連線到相應的HTML檔案。如圖:

寫道此整個系統就完成了,希望大家能喜歡我的教程,我將在後續文章中陸續推出Dreamweaver 8 加外掛,進行高階程式開發的系列教程,希望大家密切關注。