如何運(yùn)用插件繪制HTML地新聞系統(tǒng)

時(shí)間：2024-10-11 12:20:14 HTML DOM 我要投稿

相關(guān)推薦

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

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

　　下面我們就開始來利用Dreamweaver 8加插件來制作這個(gè)系統(tǒng)，首先我們建立一個(gè)數(shù)據(jù)庫和設(shè)計(jì)一個(gè)新聞數(shù)據(jù)表。如下圖：

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

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

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

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

　　下面我們開發(fā)著手制作這個(gè)系統(tǒng)。

　　首先我們打開Dreamweaver 8 新建一個(gè)站點(diǎn)。

　　然后設(shè)置站點(diǎn)所需要的編程語言：

　　站點(diǎn)建立成功后，我們要開始建立站點(diǎn)的數(shù)據(jù)庫連接。

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

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

　　你可以按照你數(shù)據(jù)庫存放的絕對路徑對連接字符串中的路徑進(jìn)行更改。

　　數(shù)據(jù)庫連接成功后，我們開始制作系統(tǒng)的第一個(gè)頁面：發(fā)布新聞頁面“add.ASP”。首先請先新建一個(gè)名為“add.ASP”的頁面。然后打開頁面選擇應(yīng)用程序面板。選擇插入表單向?qū)О粹o。

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

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

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

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

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

　　設(shè)置好記錄集后按下確定按鈕。

　　注意：接下來我們要對記錄集做一個(gè)關(guān)鍵而重要的設(shè)定。由于我們使用的是ACCESS作為數(shù)據(jù)庫，所有我們在加入生成HTML的插件操作之前需要把記錄集的光標(biāo)類型進(jìn)行更改。首先請點(diǎn)應(yīng)用程序面板的服務(wù)器行為，如圖：

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

　　你將看到記錄集的默認(rèn)光標(biāo)類型是“僅向前”，我們就是要講光標(biāo)類型進(jìn)行更改，將光標(biāo)類型改為“鍵集”。如圖所示

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

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

　　下一步將出現(xiàn)插件的設(shè)置對話框。如圖：

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

　　第三步我們將制作名為“index.ASP”的現(xiàn)實(shí)新聞列表的首頁。這個(gè)頁面將會需要建立一個(gè)數(shù)據(jù)集，設(shè)置數(shù)據(jù)的現(xiàn)實(shí)重復(fù)區(qū)域，以及加入翻頁的功能。

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

　　[編號字段]:[標(biāo)題字段][分頁程序內(nèi)容]

　　第一行將現(xiàn)實(shí)新聞的編號和標(biāo)題，第二行將放置分頁的代碼。

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

　　注意：為了在最前面現(xiàn)實(shí)最新發(fā)布的新聞，請將記錄集的排序設(shè)置條件。這里我們設(shè)置字段“id”的排序?yàn)榻敌颍簿褪亲詈蟀l(fā)布的新聞將現(xiàn)實(shí)在最前面。

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

　　為了讓標(biāo)題連接到相應(yīng)的HTML新聞，我們還要對標(biāo)題字段設(shè)置相應(yīng)的連接：選中標(biāo)題字段，然后再屬性面板設(shè)置其連接。如圖：

　　點(diǎn)箭頭所指的圖標(biāo)，將出現(xiàn)連接設(shè)置對話框。如圖：

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

　　[首頁][][末頁]

　　選擇頁數(shù)

　　接下來我們要讓每頁顯示10條新聞，實(shí)現(xiàn)整個(gè)功能我們需要用到服務(wù)器行為“重復(fù)區(qū)域”。我們選中表格行的“TR”標(biāo)簽，點(diǎn)選服務(wù)器行為的“重復(fù)區(qū)域”功能，將出現(xiàn)如下對話框：

　　按下確定就完成了重復(fù)區(qū)域的設(shè)置。設(shè)置完后的效果如下圖所示：

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

　　點(diǎn)擊該功能將會出現(xiàn)一個(gè)設(shè)置對話框。如圖：

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

　　至此，整個(gè)新聞顯示頁面就制作完畢，保存關(guān)閉后，我們將來測試整個(gè)新聞系統(tǒng)的功能。

　　[NextPage]

　　以上步驟，讓我們制作完成了整個(gè)系統(tǒng)，接下來我們就來測試一下這個(gè)系統(tǒng)。

　　因?yàn)閿?shù)據(jù)庫中還沒有數(shù)據(jù)，那么我們首先在打開“add.ASP”文件按下F12在瀏覽器中瀏覽執(zhí)行該文件。如圖：

　　我們填寫相關(guān)新聞后按下添加新聞按鈕。添加完成后系統(tǒng)將自動(dòng)前往HTML生成頁“setup.ASP”生成新聞。如圖：

　　從圖中我們看到數(shù)據(jù)已經(jīng)成功生成了HTML文件。

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

　　我們發(fā)現(xiàn)這個(gè)系統(tǒng)的新聞以及現(xiàn)實(shí)出來，我們隨便點(diǎn)擊一條新聞,都將連接到相應(yīng)的HTML文件。如圖：

　　寫道此整個(gè)系統(tǒng)就完成了，希望大家能喜歡我的教程，我將在后續(xù)文章中陸續(xù)推出Dreamweaver 8 加插件，進(jìn)行高級程序開發(fā)的系列教程，希望大家密切關(guān)注。

【如何運(yùn)用插件繪制HTML地新聞系統(tǒng)】相關(guān)文章：