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