【正文】 17 信息公示板類網(wǎng)站的設(shè)計(jì)與實(shí)現(xiàn) 1 引 言 隨著網(wǎng)絡(luò)的飛速發(fā)展，興起了網(wǎng)絡(luò)熱潮，互聯(lián)網(wǎng)已成為人們快速獲取、發(fā)布和傳遞信息的重要渠道，它在人們政治、經(jīng)濟(jì)、生活等各個(gè)方面發(fā)揮著重要的作用。網(wǎng)絡(luò)上發(fā)布信息主要是通過網(wǎng)站來實(shí)現(xiàn)的，而用戶檢索的也是網(wǎng)站的信息。 然而建立一個(gè)網(wǎng)站和維護(hù)需要專業(yè)的人員 ，維護(hù)成本高，與用戶交流不方便 ，如何快捷、方便的發(fā)布信息而又不需要專業(yè)的知識(shí)，成為 擺在網(wǎng)站設(shè)計(jì)者面前的一道問題。 BBS 的出現(xiàn)，解決了這個(gè)問題，只要在前期由專業(yè)人員將 BBS 網(wǎng)站架設(shè)好，后期的使用完全不需要專業(yè)的知識(shí)，只要會(huì)上網(wǎng)就能使用 ，而且 BBS 交互式的特點(diǎn)更方便網(wǎng)站管理者與訪問者的交流，已成為互聯(lián)網(wǎng)上一種重要的信息發(fā)布與交流工具。 信息公示板類網(wǎng)站的設(shè)計(jì)與實(shí)現(xiàn) 2 1 概 述 背景 BBS的英文全稱是 Bulletin Board System，翻譯為中文就是“電子公告板”。BBS最早是用來公布股市價(jià)格等類信息的，當(dāng)時(shí) BBS連文件傳輸?shù)墓δ芏紱]有，而且只能在蘋果計(jì)算機(jī)上運(yùn)行。 早期的 BBS與一般街頭和校園 內(nèi)的公告板性質(zhì)相同，只不過是通過電腦來傳播或獲得消息而已。隨著網(wǎng)絡(luò)的發(fā)展， BBS也得到了迅速的發(fā)展及普及，如今網(wǎng)絡(luò)上遍布各種主題的 BBS論壇，它已經(jīng)成為人們生活中獲取信息及交流的一種重要方式。 1978 年在美國(guó)芝加哥開發(fā)出一套基于 8080 芯片的CBBS/Chicago(Computerized Bulletin Board System/Chicago)，此乃最早的一套 BBS 系統(tǒng)。之后隨著蘋果機(jī)的問世，開 BBS 發(fā)展數(shù)據(jù)發(fā)出基于蘋果機(jī)的 Bulletin Board System 和大眾信息系統(tǒng)（ People Message System） 2 種 BBS 系統(tǒng)。 1981 年IBM 個(gè)人計(jì)算機(jī)誕生時(shí)，并沒有自己的 BBS 系統(tǒng)。直到 1982 年， Buss Lane 才用Basic 語(yǔ)言為 IBM 個(gè)人計(jì)算機(jī)編寫了一個(gè)原型程序。其后經(jīng)過幾番增修，終于在1983 年通過 Capital PC User Group（ CPCUG）的 Communication Special Interest Group 會(huì)員的努力，改寫出了個(gè)人計(jì)算機(jī)系統(tǒng)的 BBS。經(jīng) Thomas Mach 整理后，終于完成了個(gè)人計(jì)算機(jī)的第 1版 BBS 系統(tǒng) —— RBBSPC。這套 BBS 系統(tǒng)的 最大特色是其源程序全部公開，有利于日后的修改和維護(hù)，因此后來在開發(fā)其他的 BBS 系統(tǒng)時(shí)都以此為框架，所以 RBBSPC 贏得了 BBS 鼻祖的美稱。 但在當(dāng)時(shí)，如何實(shí)現(xiàn)站與站之間的聯(lián)系問題并未解決。 1984 年美國(guó)的 Tom Jonning 開發(fā)了一套具有電子功能的電子公告板程序 FIDO。由于該軟件具有站際連線和自動(dòng)互傳信息的功能，所以站際間彼此可以在一個(gè)共同的預(yù)定時(shí)間傳送電子郵件，使得 BBS 網(wǎng)絡(luò)化有了一線生機(jī)。 BBS 發(fā)展至今，目前世界上業(yè)余的 BBS 網(wǎng)絡(luò)除了 Fido Net（惠多網(wǎng)）以外，幾個(gè)較具知名度的還有 Egg Net、 AlterNet 和 RBBSNet 等等。由于這些網(wǎng)絡(luò)和 Fido Net 之間的信息交流不成問題，這就實(shí)現(xiàn)了所謂的跨網(wǎng)。 大約是從 1991 年開始，國(guó)內(nèi)開始了第一個(gè) BBS 站。經(jīng)過長(zhǎng)時(shí)間的發(fā)展，直到1995 年，隨著計(jì)算機(jī)及其外設(shè)的大幅降價(jià)， BBS 才逐漸被人們所認(rèn)識(shí)。 1996 年更是以驚人的速度發(fā)展起來。國(guó)內(nèi)的 BBS 站，按其性質(zhì)劃分，可以分為 2 種：一種是商業(yè) BBS 站，如新華龍訊網(wǎng)；另一種是業(yè)余 BBS 站，如天堂資訊站。由于使用信息公示板類網(wǎng)站的設(shè)計(jì)與實(shí)現(xiàn) 3 商業(yè) BBS 站要交納一筆費(fèi)用，而商業(yè)站所能提供的服務(wù)與業(yè)余站相比，并沒有什PHPwind 么 優(yōu)勢(shì)，所以其用戶數(shù)量不多。多數(shù)業(yè)余 BBS 站的站長(zhǎng)，基于個(gè)人關(guān)系，每天都互相交換電子郵件，漸漸地形成了一個(gè)全國(guó)性的電子郵件網(wǎng)絡(luò) China Fido Net（中國(guó)惠多網(wǎng)）。于是，各地的用戶都可以通過本地的業(yè)余 BBS 站與遠(yuǎn)在異地的網(wǎng)友互通信息。這種跨地域電子郵件交流正是商業(yè)站無法與業(yè)余站相抗衡的根本因素。由于業(yè)余 BBS 站擁有這種優(yōu)勢(shì)，所以使用者都更樂意加入。這里“業(yè)余”2字，并不是代表這種類型的 BBS 站的服務(wù)和技術(shù)水平是業(yè)余的，而是指這類 BBS站的性質(zhì)。一般 BBS 站都是由志愿者開發(fā)的。他們付出的不僅是金錢，更多的 是精力。其目的是為了推動(dòng)中國(guó)計(jì)算機(jī)網(wǎng)絡(luò)的健康發(fā)展，提高廣大計(jì)算機(jī)用戶的應(yīng)用水平。 現(xiàn)如今國(guó)內(nèi)外最常用的三種動(dòng)態(tài)網(wǎng)頁(yè)語(yǔ)言是 PHP（ personal home page）、 ASP（ active server page）和 JSP（ java server page）。 PHP 可以在 Windows、 UNIX、Linux 的 web 服務(wù)器上正常執(zhí)行，支持 IIS 和 Apache 等一般的 web 服務(wù)器。微軟開發(fā)的 ASP 功能強(qiáng)大，簡(jiǎn)單易學(xué)，但是只能在 Windows 系統(tǒng)下運(yùn)行。 UNIX 下有 Chili soft 的組件來支持 ASP，但是 ASP 本身功能有限，必須通過與 的群組合來擴(kuò)充功能。 JSP 基于平臺(tái)和服務(wù)器的互相獨(dú)立，支持來自廣泛的、專門的工具包，服務(wù)器組件和數(shù)據(jù)庫(kù)產(chǎn)品由開發(fā)商提供。這三種語(yǔ)言各有優(yōu)缺點(diǎn)，根據(jù) BBS 的用途不同，可以選擇合適的語(yǔ)言來開發(fā)。 本文的主要內(nèi)容及組織結(jié)構(gòu) 本文研究的內(nèi)容為 BBS 論壇基本功能的實(shí)現(xiàn)及演示 ，主要是靜態(tài)頁(yè)面展示及互相跳轉(zhuǎn)這一塊，而不是動(dòng)態(tài)網(wǎng)站的具體實(shí)現(xiàn)，不需要連接具體的數(shù)據(jù)庫(kù)。 本文的組織結(jié)構(gòu)： 全文共分 5 章。 第一章，主要是介紹 本文的主要內(nèi)容及基本結(jié)構(gòu) 。 第二章，介紹 BBS 網(wǎng)站的特點(diǎn)及 網(wǎng)站布局 。 第三章， BBS 網(wǎng)站的基本制作方法及演示 。 第四章， BBS 網(wǎng)站在瀏覽器中的測(cè)試。 第五章，本文小結(jié) 及展示。 信息公示板類網(wǎng)站的設(shè)計(jì)與實(shí)現(xiàn) 4 2 BBS 類網(wǎng)站的結(jié)構(gòu)與布局 設(shè)計(jì)一個(gè)網(wǎng)站，首先要確定一個(gè)網(wǎng)站的框架，然后在這個(gè)框架的基礎(chǔ)上添加各類元素，實(shí)現(xiàn)網(wǎng)站的各種功能。 BBS 類網(wǎng)站 結(jié)構(gòu) 特點(diǎn) BBS網(wǎng)站 可分為框架式和非框架式兩類，如下圖 為碧海青天 BBS站網(wǎng)頁(yè)截圖，從圖中我們可以看出，此網(wǎng)站為 框架式結(jié)構(gòu) 圖 論壇類網(wǎng)站首頁(yè)示例圖 從 圖 ，左側(cè)為導(dǎo)航欄，為論壇的各級(jí)欄目 列表 ， 右側(cè)為主框 架，顯示貼子列表及內(nèi)容。 點(diǎn) 擊左側(cè)的欄目列表鏈接，在右側(cè)框架中會(huì)出現(xiàn)相對(duì)應(yīng)欄目的貼子列表。 左側(cè)的欄目列表可以隱藏，以增加瀏覽貼子內(nèi)容的空間。 這種結(jié)構(gòu)的特點(diǎn)是 可以將一個(gè)瀏覽器窗口劃分為不同的區(qū)域，每個(gè)區(qū)域都可以顯示不同的文檔。如上圖中 左側(cè)框架中 鏈接目標(biāo)會(huì)顯示在右側(cè)的檔目中，而左側(cè)框架中 始終顯示各級(jí)欄目列表， 優(yōu)點(diǎn)是方便在各個(gè)欄目間切換 。 第二種結(jié)構(gòu)為非框架式結(jié)構(gòu) ,如下圖中的新浪讀書論壇。 信息公示板類網(wǎng)站的設(shè)計(jì)與實(shí)現(xiàn) 5 圖 新浪讀書論壇頁(yè)面例圖 從圖 ，整個(gè)論壇不再象框架式網(wǎng)頁(yè)那樣分為左右兩部分，而是根據(jù)欄目的 分類劃分，統(tǒng)一顯示在一個(gè)頁(yè)面中， 點(diǎn) 擊欄目鏈接，整個(gè)頁(yè)面隨之 改 變?yōu)樵摍谀刻恿斜怼? 技術(shù) 特點(diǎn) 運(yùn)行環(huán)境 建立一個(gè)網(wǎng)站首先要架設(shè)運(yùn)行環(huán)境，當(dāng)前流行的平臺(tái)有 IIS和 Apache，不同的平臺(tái)支持不同的 服務(wù)器 腳本語(yǔ)言， IIS對(duì) ASP的支持比較好，而 Apache則對(duì) PHP支持的比較好。在本文中，我們使用的平臺(tái)是的 WIN2020+IIS， 編程語(yǔ)言使用 ASP， 數(shù)據(jù)庫(kù)系統(tǒng)使用 MSSQL。 ASP技術(shù) ASP是 Active Server Page的縮寫 ，即為“動(dòng)態(tài)服務(wù)器頁(yè)面”，可以和數(shù)據(jù)庫(kù)及其他程序進(jìn)行 交互，是一種簡(jiǎn)單的、方便的編程工具。 ASP的網(wǎng)頁(yè)擴(kuò)展名為 .ASP，現(xiàn)在常用于各種動(dòng)態(tài)網(wǎng)站中 ，可以在運(yùn)行中實(shí)時(shí)從數(shù)據(jù)庫(kù)中讀取信息，通過瀏覽器顯示在用戶面前。 信息公示板類網(wǎng)站的設(shè)計(jì)與實(shí)現(xiàn) 6 網(wǎng)站模板 制作一個(gè) BBS，不僅需要編寫服務(wù)器端腳本，還需要制作網(wǎng)站的模板，模板和后臺(tái)腳 本 運(yùn)行時(shí)產(chǎn)生的數(shù)據(jù)共同構(gòu)成了一頁(yè)面。 制作模板需要制作者有一定的網(wǎng)頁(yè)制作基礎(chǔ)，能對(duì) Html、 Css有一定的了解，并能熟練使用網(wǎng)頁(yè)制作工具，如 Dreamweaver（圖 ） 。 圖 Dreamweaver打開界面 HTML（ HyperText Markup Language）即超文本標(biāo)記語(yǔ)言或超文本鏈接標(biāo)示語(yǔ)言是構(gòu)成一個(gè)網(wǎng)頁(yè) 的基本語(yǔ)言 ，通過 HTML標(biāo)記，我們可以在網(wǎng)頁(yè)中 說明文字、圖形、動(dòng)畫、聲音、表格、鏈接 等各種網(wǎng)頁(yè)元素，可以實(shí)現(xiàn) BBS中網(wǎng)頁(yè)跳轉(zhuǎn)，刪除、修改、瀏覽等各種鏈接。 CSS是樣式表文件，可以控制網(wǎng)頁(yè)的外觀，通過使用 CSS樣式設(shè)置頁(yè)面的格式，可將頁(yè)面的內(nèi)容與表現(xiàn)形式分離，使網(wǎng)站外觀的維護(hù)變得簡(jiǎn)便宜行，可以使 HTML文檔更加簡(jiǎn)練，減少瀏覽器加載的時(shí)間。 模板制作的好壞直接關(guān)系到 一個(gè)網(wǎng)頁(yè)是否漂亮，用戶瀏覽的時(shí)候是否賞心悅信息公示板類網(wǎng)站的設(shè)計(jì)與實(shí)現(xiàn) 7 目，所以要求制作者有一定的 美術(shù)基礎(chǔ)，有良好的審美觀。在模板制作中我們需要使用許多圖片元素對(duì)網(wǎng)頁(yè)進(jìn)行點(diǎn)綴，比如制作一個(gè)導(dǎo)航圖標(biāo)、一個(gè) BANNER等，制作這些圖片的的主要工具有 Photoshop或者 Fireworks軟件。 圖 Photoshop打開界面 分類特點(diǎn) BBS網(wǎng)站的基本組成模塊 BBS網(wǎng)站的可分為前臺(tái)和后臺(tái)兩個(gè)部分，前臺(tái)主要提供給用戶和版主使用，后臺(tái)是提供給管理員進(jìn)行系統(tǒng)維護(hù)使用。 網(wǎng)站可以設(shè)置用戶瀏覽權(quán)限，可以設(shè)置是否允許游客瀏覽，但一般只允許注冊(cè)用戶才可發(fā)貼，為了加強(qiáng)管理，還可設(shè)置發(fā)貼審核機(jī) 制。 信息公示板類網(wǎng)站的設(shè)計(jì)與實(shí)現(xiàn) 8 圖 網(wǎng)站的基本功能結(jié)構(gòu)圖 網(wǎng)站的欄目分類 一個(gè) BBS論壇可能有很多小欄目，為了便于瀏覽和管理，一般將具有相同屬性的子欄目歸入一個(gè)大欄目?jī)?nèi)，如圖 ，將歷史人文分為一大類，原創(chuàng)文學(xué)分為一大類，每一大類下又有若干小欄目。 信息公示板類網(wǎng)站的設(shè)計(jì)與實(shí)現(xiàn) 9 3 具體 網(wǎng)站 展示 的設(shè)計(jì) 本章主要講述了網(wǎng)站設(shè)計(jì)思路和具體實(shí)現(xiàn)方法，并通過靜態(tài)頁(yè)面演示了 BBS類網(wǎng)站的基本功能。 創(chuàng)建站點(diǎn) 通過 Dream weaver CS3 創(chuàng)建一個(gè)網(wǎng)站 ，名稱為： BBS 網(wǎng)站 ，網(wǎng)站所在目錄為 E： \BBS 網(wǎng)站 ， 網(wǎng)站的 URL 不填，由于我們進(jìn)行的是靜態(tài)演示，不使用服務(wù)器技術(shù)，不連接遠(yuǎn)程服務(wù)器。設(shè)置如下圖 圖 在 Dreamweaver CS3 中新建一個(gè)網(wǎng)站 圖 Dream weaver CS3中創(chuàng)建站點(diǎn) 在網(wǎng)站目錄下建立 html、 images、 flash 三個(gè)子目錄，做為 HTML 網(wǎng)頁(yè)、圖片、 FLASH 的保存目錄 。 制作首頁(yè)框架 BBS網(wǎng)站的首頁(yè)框架設(shè)計(jì)為上方固定、左側(cè)嵌套的格式，這樣上方可以放置 信息公示板類網(wǎng)站的設(shè)計(jì)與實(shí)現(xiàn) 10 網(wǎng)站的 BANNER，左側(cè)為 BBS網(wǎng)站的欄目導(dǎo)航，右下為 欄目 列表和 BBS貼子內(nèi)容查看顯示區(qū)域。 打開 網(wǎng)頁(yè)制作程序 Dreamweaver,新建一個(gè)上方固定、左側(cè)嵌套的框架集的文檔，每一個(gè)框架使用默認(rèn)名稱。 圖 選擇主頁(yè)框架示例圖 模塊設(shè)計(jì) 網(wǎng)站 首頁(yè)的為框架式結(jié)構(gòu)，共分為三個(gè) 子 框架（ topframe、 leftframe、rightframe），網(wǎng)頁(yè)框架 確定之后，可以開始制作網(wǎng)站的各個(gè)模塊，本 BBS網(wǎng)站中共有四個(gè)模塊： 網(wǎng)站 TOP頁(yè)面 （ topframe） ； 導(dǎo)航欄目頁(yè)面 （ leftframe） ； 欄目列表頁(yè)面 （ mainframe） ； BBS查看頁(yè)面 （ mainframe） 。 制作 網(wǎng)站 TOP 頁(yè)面 網(wǎng)站的 TOP 頁(yè)面 網(wǎng)站的最上部分， 常常包含的網(wǎng)站的 LOGO 和 一條橫幅。 在 TOP 框架區(qū)域插入一個(gè)表格（一行兩列）， 表格的邊框 寬度 （ BORDER）設(shè)為 0， 分別在表格中插入 LOGO 和 BANNER 圖像元素，并調(diào)整為合適的寬度和高度。 信息公示板類網(wǎng)站的設(shè)計(jì)與實(shí)現(xiàn) 11 圖 制作網(wǎng)站 TOP頁(yè)面 制作 導(dǎo)航欄目 頁(yè)面 BBS 網(wǎng)站的導(dǎo)航頁(yè)為網(wǎng)站的重要部分，它包含網(wǎng)站所有欄目的列表，通過鏈接熱點(diǎn)，可以到達(dá)網(wǎng)站的任意一個(gè)欄目。欄目列表設(shè)計(jì)要直觀，分類 清晰，使用戶能夠很方便的找到所要訪問的內(nèi)容。 本次設(shè)計(jì)的網(wǎng)站導(dǎo)航頁(yè) 將顯示 在框架的左下部分（ leftframe 區(qū)域 ），欄目鏈接熱點(diǎn)的目標(biāo)頁(yè)顯示在右下部分，即 mainframe 區(qū)域。 圖 導(dǎo)航欄目的演示 如圖 ，網(wǎng)頁(yè)左下部分為欄目導(dǎo)航頁(yè)，每一個(gè)欄目名稱都是一個(gè)超鏈接， 信息公示板類網(wǎng)站的設(shè)計(jì)與實(shí)現(xiàn) 12 點(diǎn)擊欄目名稱鏈接，將在右下框架內(nèi)顯示該欄目列表頁(yè)。 在 Dreamweaver 中， 我們插入一個(gè)四行一列的表格，在每一行中錄入欄目名稱，選定欄目名稱，在下方的屬性欄中設(shè)置 文字鏈接的頁(yè)面地址及 的目標(biāo)位 。 在圖 中，“ BBS 欄目列表一”鏈接的是“ ”，頁(yè)面顯示位置為mainframe。查看網(wǎng)頁(yè)源文件，我們發(fā)現(xiàn)這行代碼為： a href= target=mainFrameBBS 欄目一 /a 在代碼中 a href=”? .” target=”? .” 和 /a是 HTML 語(yǔ)言的標(biāo)記，它代表一個(gè)超鏈接， href 的值是鏈接網(wǎng)頁(yè)地址， target 是鏈接頁(yè)顯示的目標(biāo)，點(diǎn)擊超鏈接可以跳轉(zhuǎn)到相應(yīng)的網(wǎng)頁(yè)。在 a href=”?” 和 /a之間即可以是文字，也可以是圖片，許多的按 鈕就是使用這個(gè)標(biāo)記來實(shí)現(xiàn)的，比如下面這行代碼： a href=” ” img src=” ” broder=0/a 在 BBS 網(wǎng)站中，網(wǎng)站的導(dǎo)航欄目可以由程序動(dòng)態(tài)生成，在本文中我們只做靜態(tài)演示，講述導(dǎo)航欄目的屬性和所實(shí)現(xiàn)的功能。 制作 分類 頁(yè)面 欄目列表頁(yè)顯示該欄目信息標(biāo)題列表。 圖 欄目列表頁(yè)的制作及演示 圖 欄目列表頁(yè)演示 信息公示板類網(wǎng)站的設(shè)計(jì)與實(shí)現(xiàn) 13 在本文設(shè)計(jì)中，信息查看頁(yè)在和標(biāo)題列表頁(yè)在同一框架窗口顯示，即點(diǎn)擊信息標(biāo)題，列表頁(yè)即跳轉(zhuǎn)為 該條信息所對(duì)應(yīng)的具體內(nèi)容。 在 Dreamweaver 中，我們先插入一個(gè)四行二列的表格，表格框?qū)挾葹?0。在每一行的第一列為標(biāo)題，第二列為時(shí)間，然后選定標(biāo)題，在下方的屬性窗口中設(shè)置鏈接網(wǎng)頁(yè)信置。 列表頁(yè)和導(dǎo)航一樣，需要使用許多 HTML 標(biāo)記， 不僅有鏈接標(biāo)記，還用到了許多表格（ TABLE）標(biāo)簽，表格是網(wǎng)頁(yè)設(shè)計(jì)中一個(gè)很重要的元素，它不僅可以作為顯示數(shù)據(jù)時(shí)的分類表格使用，還起到頁(yè)面布局的重要功能。表格的重要屬性有欄、列、寬、高、表格線等，可以在設(shè)計(jì)時(shí)根據(jù)不同的要求來改變這些屬性。 table border=0 cellspacing=0 c