中學網站的設計與實現—免費計算機(編輯修改稿)

　

【文章內容簡介】 以及實體之間關系的基礎上，我們就可以形成數據庫中的表格以及各個表格之間的關系。 根據分析階段得出的的結論，結合本網站對有關數據的存儲的需要，更加方便實現該網站預期的所有功能，現將本系統設計成 5 個數據庫表，每個表的字段名、類型、寬度設計如下： 數據庫中各個表格的設計結果如表 3－ 1 到表 3－ 2 所示。每個表格對應在數據庫中的一個表。 表 3－ 1 為新聞信息表。 該表用來記錄存儲本網站 新聞信息相關的各種信息： 字段名 類型 寬度 說明 newsid 自動編號 長整型 新聞編號 typeid 數字 小數 類別編號 borderid 數字 小數 欄目編號 topic 文本 80 主題 content 備注 備注 新聞內容 ntime 日期 8 發布時間 hits 數字 小數 閱讀次數 keys 備注 備注 關鍵字 img 文本 50 相關圖片 nfrom 文本 100 來源 modify 文本 30 編輯人 audit 數字 長整型 是否審核 auditer 文本 50 審核人 writer 文本 50 作者 imgsize 數字 小數 圖片大小 32：新聞類別 表： 該表用來存放本網站新聞信息的類別名稱。 字段名 類型 寬度 說明 typeid 自動編號 長整型 類別編號 typename 文本 50 類別名稱 33：新聞欄目 表： 該表用來存放本網站新聞信息的類別名稱。 字段名 類型 寬度 說明 borderid 自動編號 長整型 類別編號 typeid 自動編號 長整型 類別編號 bodername 文本 50 類別名稱 34：管理員 信息 表： 該表用來存放本網站管理員信息。 字段名 類型 寬度 說明 userid 自動編號 長整型 用戶編號 name 文本 15 用戶名 pwd 文本 14 密碼 以上是本系統的庫表結構的設計簡要說明。 第四章 網站的實現 完成了以上的后臺數據庫的設計后，下面就可以對前面系統分析階段邏輯設計出的功能模塊將技術設計轉化成為物理實現，是系統建設的實現階段。因此，網站的實現的成果將是系統分析和設計階段的結晶。 ：安裝網站設計相關軟件： 本站設計需 要用到 ， Adobe Photoshop ， Dreamweaver UltraDev 4 等網頁設計相關的軟件。 其中 主要完成網頁中相關動畫的設計和處理。 Adobe Photoshop 主要完成網頁中相關的圖片的大小，格式轉化，效果處理等。 Dreamweaver UltraDev 4 主要完成網頁的排版、布局設計。 建立 Asp 的運行環境 簽于目前流行的 windows 操作平臺有 windows 98,windows NT 最新windows 針對這三個操作平臺上建立 Asp 運行環境的一些簡要介紹。 1． windows 98 建立 Asp 的運行環境 作為個人用戶或在單機環境下測試 Asp， windows 98 將是一個很不錯的選擇。在 windows 98gh ,可以采用 Microsoft 的 PWS(Personal Web Server)作為 Asp 運行環境。 PWS 是一個短小精悍的 Web 服務器平臺，易學易用，并某些人備運行 Asp所需的所有條件，與 windows 98 的安裝光盤配套的是 Pws 。 具有新穎的外觀和許多新增加的功能，初學者無需具備專 業的網絡管理知識就可以輕松建立一個全功能的 Web 站點。 2． Windows NT 上建立 Asp 的運行環境 。 在 windows NT 上， Asp 的運行環境是基于 IIS 以上版本的，同windows 98 比較起來。使用 windows NT 具有明顯的優勢。在 windows NT/IIS這一強大的開發平臺上可以充分利用 windows NT 更強大的性能，更完善的安全性能，更完善的安全性并且能與企業級應用程序更完美的結合。運行在windows NT 以上的 IIS 其最版本是 。它占據了當今世界看 近 40%的Web 服務器市場。 3． 在 windows 2021 上建立 Asp 的運行環境 在 windows 2021 上運行 Asp 的環境也是 IIS。如果安裝的是 windows 2021 Server, 將作為一個默認選項被安裝。如果使用的是 windows 2021 中文專業版，則需要使用控制面板“ 添加 /刪除程序 ”來安裝 IIS 及其組件。 4． 主頁的設計 來訪者輸入網址，首先打開的就是學校網站的主頁，主頁設計應該美觀，同時提供足夠多的鏈接，以便來訪者可以通過鏈接導航到自己所關心的信息頁面上去。下面是該首頁運 行的界面圖： 該頁面的布局結構是 ∏型布局結構。具體的說：在網頁的上面是 log 圖片和導航條。 Log 圖片表明網站的主題：廣西藤縣塘步鎮一中網站。導航條將本站的欄目分成了學校概況，學校新聞，教育科研，名校名師，學生園地，招生信息，誠聘英才，校長信箱，網上留言等欄目。這些導航欄目分別設計有相應的文字鏈接，點擊這些文字鏈接可以進入相應的頁面。 打開專業的網頁設計工具 Dreamweaver UltraDev 4。 1：新建一個網頁文件，保存為 ，接著設置頁面屬性，在屬性頁中標題：廣西藤縣塘步鎮一中 。背景圖案： img/。 定義頁面中表格，單元格，文字和鏈接的表現風格。本頁面定義的語句如下： style body {margin:0px。fontsize:12px。overflowx:hidden。overflowy:scroll。color:666666。LINEHEIGHT: 160%} table {fontsize:12px。LINEHEIGHT: 160%} td {fontsize:12px。} .txt {fontsize:12px。borderwidth:0px。borderbottom:1px solid 000000。backgroundcolor:def1f7。position:relative。top:0px。left:5px。paddingbottom:0px。color:a0a0a0。} a: {fontsize:12px。color:666666。textdecoration:none。} a: {color:666666。textdecoration:none。} a: {color:333333。textdecoration:underline。} a: {fontsize:12px。color:666666。textdecoration:none。} a: {color:666666。textdecoration:none。} a: {color:333333。textdecoration:underline。} img {border:0px。} /style 利用布局表格工具，設置好網頁的表格布局。然后就可以在表格中添加單元格。利用表格的屬性面板和單元格屬性面板設定好各自的屬性以后，就可以在單元格中添加文字和插入圖片。 布局設計好的網頁如下： 代碼設計：為了實現首頁顯示學校快訊，教育科研，名校名師，學生園地等文字信息以及為了方便管理。不是在每個欄目設計靜態的文本信息，而是內嵌 java腳本，腳本的數據源來自一個和數據庫相連接的 asp 文件： 。下面給出學校快訊，教育科研，名校名師，學生園地對應的四個 java 腳本語句： 1： 2： 3： 4： 通過比較這四條腳本語句可以發現，腳本調用的是同一 asp 文件，只是一個 typeid不一樣。在數據庫的設計中我們以及知道，這個參數是新聞的類別編號。由于這四類不同的信息都是存儲在數據庫中的 news 表中，要實現信息的分類就可以通過設定這個類別編號。這里的 typeid=10 對應學校新聞， typeid=11 對應教育科研，typeid=12 對應名校名師， typeid=13 對應學生園地。 下面簡單的介紹一下 文件的代碼： 在 文件中首先獲得上面傳遞的參數。通過下面的語句實現： typeid=request(typeid) n=trim(request(n)) 這里的 n 是查詢表中符合條件的多少條記錄的參數。 接著通過下面的語句從數據庫 news 表中查詢符合條件的最后的 n 條記錄： sql=select top amp。 n amp。 * from news where typeid= amp。 cstr(typeid) amp。 and audit=1 order by newsid DESC 這里的 audit 表示已經是審 核通過的信息。最后的信息顯示是按 newsid 號倒序排列。 另外在該文件的開頭有包含文件： !include file=function/ 該文件用于鏈接數據庫。 在文件的末尾有包含文件： !include file=function/ 該包含文件用于關閉數據庫。 顯示新聞的 設計 在首頁中大量的新聞信息是通過鏈接到 show 文件來顯示新聞信息的。比如在首頁中點擊學校快訊中的任一新聞，就可 以鏈接到該頁面并顯示該新聞的詳情。 下面是學校快訊中“廣西藤縣塘步鎮一中教學成果顯著”這條新聞后顯示的頁面，該新聞的鏈接語句是： ?newsid=421 這里的傳遞的參數 newsid 用于傳遞顯示的新聞的編號。 該頁面的設計過程首先在 Dreamweaver UltraDev 4 中排版設計，設計的界面如圖所示： 對比實際運行的界面和設計界面可以看出，導航條的設計不是在這里直接給出，而是通過腳本調用一個 js 文件。這樣設計的好處在與可以和其它的頁面共享該導航的 js 文件。調用腳本的語句 如下： 該 new 文件的語句如下： document. writeln(table width=100% border=0 cellspacing=0 cellpadding=0)。 ( tr align=center)。 document. writeln( td width=15%a href=?type id=9學校概況/a/td)。 document. writeln( td width=14%a href=?typeid=10 學校新聞 /a/td)。 document. writeln( td width=14%a href=more. asp?typeid=11 教育科研 /a/td)。 document. writeln( td width=14%a href=?typeid=12 名校名師 /a/td)。 document. writeln( td width=14%a href=?typeid=13 學生園地 /a/td)。 document. writeln( td width=14%a href=?typeid=14 招生信息 /a/td)。 document. writeln( td width=14%a href=?typeid=15 誠聘英才 /a/td)。 riteln( /tr)。 (/table)。 另外對比 文件還可以看出，該頁面中的新聞標題和新聞內容也是調用其它的語句和腳本的。 新聞標題調用 asp 腳本： %=rs(topic)%用于顯示記錄集中的 topic 字段值。該字段是通過 sql 語句實現的查詢記錄集中的字段值。相關的 sql 查詢語句如下： select * from news where newsid= amp。 cstr(request(newsid)),conn,1,1 該語句實現從 news 表中查詢 newsid 編號等于傳遞的參數 newsid 的記錄。 對于新聞的內容顯示也和新聞的主題顯示類似，這里就不再說明。 最后這里介紹一下該頁面顯示的與本新聞相關的新聞的實現技術： 首先要從數據庫中 news 表的字段說起，在 news 表中有一個 keys 字段。 我們可以利用 sql 語句在 news 表中查詢 keys 值和該新聞關鍵字類似的記錄，就可以得到相關信息。 Sql 語句如下： select top amp。 aboutnews amp。 * from news where keys like 39。% amp。 trim(rs(keys)) amp。 %39。 and newsid amp。 cstr(rs(newsid)) amp。 and audit=1 order by ntime DESC,conn,1,1 更多新聞頁面的 設計 在首頁中的學校快訊，教育科研，名校名師，學生園地都只是顯示了該類別的10 條信息，如何得到更