- 相關(guān)推薦
如何運用插件繪制HTML地新聞系統
出于對Dreamweaver 8 的喜愛(ài)，我對Dreamweaver 8 做了一些研究。同時(shí)也用Dreamweaver 8作為封裝平臺給Dreamweaver 8封裝了許多服務(wù)器行為的功能擴展插件，當然也封裝了一些命令、行為和對象插件。這些插件大家可以去我的插件發(fā)布頁(yè)下載使用。
今天我要教大家的是如何利用Dreamweaver 8加上我制作的插件來(lái)實(shí)現一個(gè)簡(jiǎn)單的生成HTML的新聞系統。例子是簡(jiǎn)單的，但是原理和方法是一致的，學(xué)會(huì )了使用這個(gè)插件的功能，可以將這個(gè)插件應用到許多大的新聞和文章系統當中去。 至于數據生成HTML有什么好處，我相信在這里不需要做說(shuō)明，大家也能理解和明白。
下面我們就開(kāi)始來(lái)利用Dreamweaver 8加插件來(lái)制作這個(gè)系統，首先我們建立一個(gè)數據庫和設計一個(gè)新聞數據表。如下圖：
我們建立一個(gè)名為“data.mdb”的數據庫。并且在數據庫中設計一個(gè)名為“news”的數據表用來(lái)存儲新聞數據。具體字段設計你可以參照上圖設計。
數據庫建立設計好后我們先來(lái)分析一下一個(gè)簡(jiǎn)單的生成HTML的新聞系統需要有什么樣的流程。注意：設計任何形式的系統之前分析系統的功能和流程這一步是非常重要的。事先分析好了流程，能讓你的整個(gè)系統條理清晰，能讓你在設計系統的時(shí)候有計劃有目的的去實(shí)現系統的功能。
我們發(fā)現一個(gè)簡(jiǎn)單的生成HTML的新聞系統至少需要4個(gè)文件。首先是名為“index.ASP”的現實(shí)新聞列表的首頁(yè)，然后是名為“add.ASP”的新聞發(fā)布表單頁(yè)，再者是名為“setup.ASP”的生成HTML新聞的功能頁(yè)。最后是名為“templates.HTML”的新聞模板頁(yè)，這個(gè)頁(yè)面你可以隨意設計只需要在現實(shí)數據的地方鑲嵌上數據顯示的標簽即可。比如在要顯示標題的地方鑲嵌上 “@標題@”這樣的標簽即可。非常的簡(jiǎn)單和便利。
從上面的分析我們可以看出一個(gè)最基本的系統構架。其每個(gè)頁(yè)面所必須具備的功能也就很容易理解。
下面我們開(kāi)發(fā)著(zhù)手制作這個(gè)系統。
首先我們打開(kāi)Dreamweaver 8 新建一個(gè)站點(diǎn)。
然后設置站點(diǎn)所需要的編程語(yǔ)言：
站點(diǎn)建立成功后，我們要開(kāi)始建立站點(diǎn)的數據庫連接。
為了設置使用方便，我們使用絕對路徑連接數據庫。具體實(shí)例連接代碼如下：
"Driver={Microsoft Access Driver (*.mdb)};Dbq=E:SHOPdata.mdb;"
你可以按照你數據庫存放的絕對路徑對連接字符串中的路徑進(jìn)行更改。
數據庫連接成功后，我們開(kāi)始制作系統的第一個(gè)頁(yè)面：發(fā)布新聞頁(yè)面“add.ASP”。首先請先新建一個(gè)名為“add.ASP”的頁(yè)面。然后打開(kāi)頁(yè)面選擇應用程序面板。選擇插入表單向導按鈕。
根據圖示你設置好你要插入的字段名成和完成插入后所要前往的頁(yè)面。這里提醒一下菜鳥(niǎo)讀者，自動(dòng)編號字段和時(shí)間日期字段時(shí)不要要進(jìn)行插入操作的，這類(lèi)型的字段都會(huì )在插入操作的同時(shí)在數據庫中自行完成新增動(dòng)作。所以在表單字段框中，你可以刪除這兩個(gè)字段的插入操作。
當然為了防止用戶(hù)提交空數據到數據庫中，我們可以為該表單加入驗證輸入的行為。鑒于Dreamweaver 8 自帶的表單驗證行為功能薄弱，而且不能自己定義出錯提示，我們這里將用到本系統第一個(gè)用到的插件“高級表單驗證”。如果你安裝了這個(gè)插件可以用常用面板中找到這個(gè)插件。
利用這個(gè)表單驗證的插件設置好表單提交數據的條件。最后按下確定按鈕，那么整個(gè)“add.ASP”頁(yè)面的所有功能就制作完成。我們按下保存按鈕來(lái)保存所有的操作，然后關(guān)閉這個(gè)頁(yè)面。
第二步，我們開(kāi)始制作名為“setup.ASP”的生成HTML的功能頁(yè)面。整個(gè)頁(yè)面需要進(jìn)行2個(gè)操作，一個(gè)是建立記錄集，另一個(gè)是加入插件功能。好那我們就開(kāi)始制作整個(gè)頁(yè)面。
首先，我們新建立一個(gè)文件名為“setup.ASP”,打開(kāi)這個(gè)新建立的文件。首先我們在這個(gè)文件中建立一個(gè)行新聞表“news” 的記錄集。如圖：
設置好記錄集后按下確定按鈕。
注意：接下來(lái)我們要對記錄集做一個(gè)關(guān)鍵而重要的設定。由于我們使用的是ACCESS作為數據庫，所有我們在加入生成HTML的插件操作之前需要把記錄集的光標類(lèi)型進(jìn)行更改。首先請點(diǎn)應用程序面板的服務(wù)器行為，如圖：
然后你將看到記錄集的屬性面板。
你將看到記錄集的默認光標類(lèi)型是“僅向前”，我們就是要講光標類(lèi)型進(jìn)行更改，將光標類(lèi)型改為“鍵集”。如圖所示
注意：只有使用ACCESS數據庫是才需要做這樣的更改操作，假如你使用SQL作為數據庫，那么這個(gè)步驟可以省略。
設定好記錄集后，我們馬上要加入整個(gè)系統最激動(dòng)人心和最重要的一項功能，那就是生成HTML的功能。首先你點(diǎn)擊服務(wù)器行為面板，單擊上面的加號。在出現的菜單中選擇“落魄小生插件集”再選擇插件集里的“生成HTML文件”的功能。如圖：
下一步將出現插件的設置對話(huà)框。如圖：
在這個(gè)你可以設置生成HTML所必須的條件，比如標題字段、文件名字段、HTML存放的文件夾等資料。設置完成后按下確定。那么至此整個(gè)生成HTML文件的功能頁(yè)面就算制作完成了。我們按下保存，然后關(guān)閉整個(gè)頁(yè)面。
第三步我們將制作名為“index.ASP”的現實(shí)新聞列表的首頁(yè)。這個(gè)頁(yè)面將會(huì )需要建立一個(gè)數據集，設置數據的現實(shí)重復區域，以及加入翻頁(yè)的功能。
那么我們接下來(lái)就開(kāi)始制作這個(gè)頁(yè)面，首先先新建一個(gè)名為“index.ASP”的文件，然后打開(kāi)這個(gè)文件。在這個(gè)文件中插入一個(gè)2行1列的表格。如下表格效果：
[編號字段]:[標題字段][分頁(yè)程序內容]
第一行將現實(shí)新聞的編號和標題，第二行將放置分頁(yè)的代碼。
建立好了表格我們就將建立一個(gè)記錄集。如圖所示：
注意：為了在最前面現實(shí)最新發(fā)布的新聞，請將記錄集的排序設置條件。這里我們設置字段“id”的排序為降序，也就是最后發(fā)布的新聞將現實(shí)在最前面。
設置好記錄集后，按下確定按鈕。然后我們把需要顯示的字段拖放綁定在頁(yè)面相應的地方。如圖：
為了讓標題連接到相應的HTML新聞，我們還要對標題字段設置相應的連接：選中標題字段，然后再屬性面板設置其連接。如圖：
點(diǎn)箭頭所指的圖標，將出現連接設置對話(huà)框。如圖：
這樣就制作好了新聞的連接。
[首頁(yè)][][末頁(yè)]
選擇頁(yè)數
1
2
3
4
5
6
接下來(lái)我們要讓每頁(yè)顯示10條新聞，實(shí)現整個(gè)功能我們需要用到服務(wù)器行為“重復區域”。我們選中表格行的“TR”標簽，點(diǎn)選服務(wù)器行為的“重復區域”功能，將出現如下對話(huà)框：
按下確定就完成了重復區域的設置。設置完后的效果如下圖所示：
加入新聞不只10條呢？那我們該如何顯示所有的新聞呢？這里我們就需要用到翻頁(yè)的功能。Dreamweaver 8 本身自帶了分頁(yè)的功能行為，但是其功能過(guò)于弱小，往往難以滿(mǎn)足程序開(kāi)發(fā)和現實(shí)的需要。那么有沒(méi)有辦法讓Dreamweaver 8 具備像高手手寫(xiě)代碼那樣的分頁(yè)功能呢？答案是肯定的，當然可以，我們可以通過(guò)我開(kāi)發(fā)的插件來(lái)完成整個(gè)分頁(yè)的功能。如下圖：
點(diǎn)擊該功能將會(huì )出現一個(gè)設置對話(huà)框。如圖：
按下確定按鈕，完成后的效果圖如下：
至此，整個(gè)新聞顯示頁(yè)面就制作完畢，保存關(guān)閉后，我們將來(lái)測試整個(gè)新聞系統的功能。
[NextPage]
以上步驟，讓我們制作完成了整個(gè)系統，接下來(lái)我們就來(lái)測試一下這個(gè)系統。
因為數據庫中還沒(méi)有數據，那么我們首先在打開(kāi)“add.ASP”文件按下F12在瀏覽器中瀏覽執行該文件。如圖：
我們填寫(xiě)相關(guān)新聞后按下添加新聞按鈕。添加完成后系統將自動(dòng)前往HTML生成頁(yè)“setup.ASP”生成新聞。如圖：
從圖中我們看到數據已經(jīng)成功生成了HTML文件。
我們再返回察看新聞列表.如圖：
我們發(fā)現這個(gè)系統的新聞以及現實(shí)出來(lái)，我們隨便點(diǎn)擊一條新聞,都將連接到相應的HTML文件。如圖：
寫(xiě)道此整個(gè)系統就完成了，希望大家能喜歡我的教程，我將在后續文章中陸續推出Dreamweaver 8 加插件，進(jìn)行高級程序開(kāi)發(fā)的系列教程，希望大家密切關(guān)注。
【如何運用插件繪制HTML地新聞系統】相關(guān)文章：
ERP系統如何運用于企業(yè)管理05-13
如何在CAD中繪制文字09-28
如何繪制建筑施工圖09-21
php如何過(guò)濾危險html代碼09-21
CAD如何在矩形中心繪制圓形11-30
如何實(shí)現html表單輸入監聽(tīng)08-09
ERP系統：ERP四知運用07-30
該如何合并多個(gè)HTML 幫助文件09-18