【導(dǎo)讀】系網(wǎng)站”的過程。該網(wǎng)站利用了先進的asp網(wǎng)頁動態(tài)技術(shù)以及數(shù)據(jù)庫技術(shù)，為教師和學(xué)生提。供一個網(wǎng)上交流信息的平臺，并為維護者提供了方便的操作后臺。MX2020等工具，力求網(wǎng)站的實用、美觀與效率。管理網(wǎng)站并進行維護工作。

　　

【正文】 首頁上還應(yīng)當有一些最新的公告、消息，以及計算機工程系師資力量的介紹。而后臺管理作為網(wǎng)站的數(shù)據(jù)庫及管理系統(tǒng)分別管理著每一個枝葉。 這當然只是粗略的構(gòu)造框架，詳細部分將在下一章重點實現(xiàn) 。構(gòu)造這一框架的目的是為了更深刻的明確網(wǎng)站的組成及內(nèi)容，從而讓網(wǎng)站的建設(shè)工作能夠有條不紊的進行。 首頁 教學(xué)安排 課程建設(shè) 科研情況 文檔下載 通訊錄 最新消息 師資力量 留言板 后臺管理 下載系統(tǒng) 畢業(yè)論文：計算機工程系網(wǎng)站建設(shè) 14 第四章 網(wǎng)站的實現(xiàn) 這一部分是整個設(shè)計階段的主體，當然，只要已經(jīng)做出了充分的準備工作，那么接下來的事情也不算太難。 建設(shè)網(wǎng)站就像是在建造一座房子，先是設(shè)計方案和圖紙以及準備材料和工具，然后便開始緊鑼密鼓的施工了。而在建造的過程中，建筑工人也是從基礎(chǔ)到建樓一步一步來的。正如我們在設(shè)計網(wǎng)站的時候也是從首頁到分頁，從前臺到后臺，逐步完成的。 首頁設(shè)計 過程 網(wǎng)站的整體形象的體現(xiàn)在于首頁，一個網(wǎng)站給人的第一印象就是主頁，但是也絕不是說，只要主頁做好了，網(wǎng)站的整體形象就好，因為在用戶對整個網(wǎng)站的瀏覽的過程中，會自然而然的形成一種對網(wǎng)站的看法，這種看法是附帶有感情色彩的，比如喜歡、不喜歡、沒有什么感覺等，這就是整體形象的體現(xiàn)，這是靠主頁和其它的頁面相配合來完成的，所以在制作網(wǎng)頁的時候要考慮怎么將自己網(wǎng)站好的一面體現(xiàn)給自己的用戶，又要考慮體現(xiàn)的方式，側(cè)重點，不能一鍋端，都放在主頁上，造成雜亂的形象。而要給人以好的可以信賴的形象就必須從許多細節(jié)上入手，同時規(guī)范整 個網(wǎng)站的外在表現(xiàn)，具體在于標志的設(shè)計、標準色彩的表達以及標準字體的設(shè)計。這些都是很重要的，有一個統(tǒng)一的、標準的形象是贏得自己用戶信賴的條件。 首頁框架設(shè)計 設(shè)計首頁，要表現(xiàn)其首頁的特點和作用。首先，首頁是一個網(wǎng)站給人的第一印象，這也正是瀏覽者對網(wǎng)站評價優(yōu)劣的最主要因素。那么我們所要表現(xiàn)的不是花哨，不是冗雜，而是簡潔明了，能夠體現(xiàn)我們計算機人的特色的風(fēng)格。要明確的是，我們不是藝術(shù)家，不是附庸風(fēng)雅的浪漫主義者，而是扎扎實實的工作者。我們所設(shè)計的簡潔樸素的首頁風(fēng)格正體現(xiàn)了這種思想，使人們在瀏覽的時候 感到的不是眼花繚亂，而是清楚方便。這些從后面展示的界面便可看出，不再多說。 其次，首頁是整個網(wǎng)站的索引，可以這么比喻，整個網(wǎng)站是一個線路網(wǎng)，那么首頁便是這個線路的主干道，其他分頁則是分支。于是首頁框架設(shè)計所要體現(xiàn)的另一個重要點在于它的索引功能，也就是方便的鏈接。 然后，首頁所要體現(xiàn)的另一個重要功能就是提供醒目的新聞及介紹。當然，這些內(nèi)容可以在相應(yīng)的副業(yè)里介紹，但首頁位置可以給作為重要的最新的新聞內(nèi)容一個給人最直接的映像。 綜上所述，可以得到這樣的結(jié)論：首頁 =簡潔的風(fēng)格 +健全方便的鏈接 +最新的新聞重要的介紹。 這只是一個簡單的公式，但設(shè)計起來卻不是那么簡單。下面就討論一下首頁頁面的設(shè)計吧。 畢業(yè)論文：計算機工程系網(wǎng)站建設(shè) 15 首頁頁面設(shè)計 由于上一節(jié)介紹的首頁框架，接下來便只剩下給這個框架實施了；首頁最醒目的位置是最新的新聞通告和最新動態(tài)，用 ASP 動態(tài)添加，這為新聞的更新提供了很大的方便。在此的下面是工程系的幾位老師的介紹以及個人網(wǎng)址鏈接。在首頁的右上方（當然也是醒目的位置），是滾動的留言板，這也是動態(tài)更新的。在留言板的下面是工程系的介紹和網(wǎng)站鏈接。首頁的最下面和其他一些網(wǎng)站一樣，放著聯(lián)系方法和申明。所有的動態(tài)資料都交給后臺管理吧，那也 是非常方便簡潔的，后面將有敘述。 在設(shè)計網(wǎng)站首頁時，我們遵從了以下規(guī)范： 1．盡量精簡 首頁的作用好比一本書的封面，是為了吸引用戶瀏覽你的網(wǎng)址內(nèi)容。因此，首頁的設(shè)汁應(yīng)以醒目為上、令人一目了然。切勿堆砌太多不必要的細節(jié)，或使畫面過于復(fù)雜。在首頁上清楚列出幾項要點以及主頁內(nèi)容即可。頁面給人的第一觀感最為重要，盡管這是一個學(xué)院的網(wǎng)站，首頁的好壞直接影響師生們對整個網(wǎng)站的感受。 2．盡量簡樸 首頁上的圖形應(yīng)力求簡樸，避免耽擱用戶的時間。不要忘了，這個網(wǎng)站設(shè)計出的目的是為了師生的網(wǎng)上交流和學(xué)習(xí)，而不是娛樂或 其它一些目的。圖像愈大、顏色愈深，傳送頁面的時間愈長。這也并不是說要完全略去圖像不用，只是要注意使用圖像所引起的效果。首頁上的顏色最好不超過六十四種，頁頂圖像最好保持在大約 10KB(千字節(jié) )以下。切勿禁不住誘惑 ,覺得非要放入大幅的圖畫不可；應(yīng)考慮只用三兩幅短小精悍的圖像。首頁整體上要能夠迅速傳送。如果載入的時間超過五至十秒，很多用戶就會等得不耐煩。 3．使首頁易于漫游 首頁的其中一個主要功能是作為漫游工具，指引用戶查閱你存儲在網(wǎng)址或其他地點的信息，盡量使漫游過程不費吹灰之力。基于清晰明確和速度的考慮，首 頁上的鏈接項目應(yīng)只限于幾個高級的類別。另外，所提供的信息不應(yīng)埋藏在重重疊疊的頁面之下。穿越五個以上的聯(lián)接項目已足以令人厭煩。因此，必須在廣度和深度之間求取平衡。 4．提綱挈領(lǐng) 首頁作為用戶瀏覽網(wǎng)站的入口，除了包含重要的新聞信息之外，還應(yīng)該起著提綱挈領(lǐng)的作用，因此 — 般須載有以下事項： 標題，新聞，鏈接，電子郵件地址，版權(quán)資料，聯(lián)絡(luò)信息，等等。 說了這些，不如直接看的明了，圖表 5 就是用 Dreamweaver MX2020 設(shè)計的首頁。 畢業(yè)論文：計算機工程系網(wǎng)站建設(shè) 16 圖表 5 首頁頁面設(shè) 計 首頁 ASP 程序設(shè)計 看到了上面的頁面設(shè)計，我們所設(shè)計的網(wǎng)站基本上已經(jīng)成型，那些有 asp 標記的便是插入的 ASP 腳本語言，現(xiàn)在簡要介紹一下： 1．自動彈出頁面 這在首頁的設(shè)計中沒有顯示。在打開網(wǎng)站時彈出的新聞頁面及時發(fā)布最新的通知，給人以深刻的感覺。 ASP 代碼如下： script language=JavaScript function openwin(page,size) { (page,newuser,toolbar=no,location=no,directories=no,status=no,menubar=yes,scrollbars=yes,resizable=no,+ size)。 } // /script 代碼前面的 是 ASP 腳本語言插入的格式，以下介紹時便不再給出。 這是一個簡單的語句 ，表示彈出一個窗口（ window），其里面的各參數(shù)給明窗口的屬性，不再詳細敘述。 2．最新動態(tài)部分 畢業(yè)論文：計算機工程系網(wǎng)站建設(shè) 17 % select top 3 id,name,addtime from anounce where isUse order by addtime desc,conn,1,1 do while not li amp。rs(name)amp。brbr loop % 這里是利用 語句來訪問打開數(shù)據(jù)庫，通過語句控制顯示最新的三條新聞，包括最新添加的消息、文章以及其他文本資料。 3．滾動留言部分 % select top 8 id,name,content,addate,author from news where isUse order by id desc,conn,1,1 //從數(shù)據(jù)庫讀取數(shù)據(jù)，下同 do while not a href=javascript:openwin(39。?id=amp。rs(id)amp。39。,39。top=20,left=360,width=410,height=25039。)amp。rs(content)amp。rs(author)amp。/a (amp。month(rs(addate))amp。 月 amp。day(rs(addate))amp。日 )brhr loop % //循環(huán)讀取數(shù)據(jù)庫前 3 條符合條件的內(nèi)容 也是讀取數(shù)據(jù)庫中的內(nèi)容顯示最新的 8 條留言，并顯示留言人和日期。 4．友情鏈接部分 SELECT name=site onChange=([].value) size=1 style=fontfamily: 宋體 。 fontsize: 9pt。 option友情鏈接 /option% select name,url,click,addate from friendsite where isUse,conn,1,1 do while not OPTION value=amp。rs(url)amp。amp。rs(name)amp。/OPTION loop % /select 其他頁面設(shè)計過程 由于首頁已經(jīng)設(shè)計完成，接下來的便是按部就班的設(shè)計余下的部分了。 畢業(yè)論文：計算機工程系網(wǎng)站建設(shè) 18 分頁頁面設(shè)計 1．分頁基本框架頁面 如圖表 6 所示的就是分頁的框架設(shè)計，左邊是頁面的主體部分，展示重要內(nèi)容信息，右上方是站內(nèi)搜索，跟著下面是站內(nèi)導(dǎo)航，這是為了 提供方便快捷的搜索必要。 圖表 6 分頁基本框架 2．新聞框架頁面 這個界面相對簡單，動態(tài)鏈接到數(shù)據(jù)庫的新聞以及 ASP 動態(tài)統(tǒng)計閱讀人數(shù)。 圖表 7 新聞框架 分頁 ASP 程序設(shè)計 () 頁面的主要功能是將文章按每頁指定數(shù)量顯示出來，并實現(xiàn)上下頁翻頁功能進行查找，這在文章總數(shù)達到一點數(shù)字的時候非常使用 % const MaxPerPage=10 //定義每頁顯示文章 數(shù) if not isempty(request(p)) then currentPage=cint(request(p)) else currentPage=1 end if ％ 以上代碼定義每頁顯示的文章總數(shù)，如果帶 request 參數(shù) p 時從第 p*MaxPerPage 篇開始顯示，否則從最后添加一篇開始顯示 畢業(yè)論文：計算機工程系網(wǎng)站建設(shè) 19 % sql,conn,1,1 if and then p align=39。center39。沒 找 到 或 本 類 別 還 沒 有 任 何 內(nèi) 容！ /p else totalPut= if currentpage1 then currentpage=1 end if if (currentpage1)*MaxPerPagetotalput then if (totalPut mod MaxPerPage)=0 then currentpage= totalPut \ MaxPerPage else currentpage= totalPut \ MaxPerPage + 1 end if end if if currentPage=1 then showpage totalput,MaxPerPage, showContent showpage totalput,MaxPerPage, else if (currentPage1)*MaxPerPagetotalPut then (currentPage1)*MaxPerPage dim bookmark bookmark= showpage totalput,MaxPerPage, showContent showpage totalput,MaxPerPage, else currentPage=1 showpage totalput,MaxPerPage, showContent showpage totalput,MaxPerPage, end if end if end if % 以上代碼實現(xiàn)了翻頁功能，當點擊下一頁時會從數(shù)據(jù)庫中讀取下面 10 個文章標題 欄目內(nèi)容顯示 ASP 設(shè)計（ ） % dim o,r,m,i,title 畢業(yè)論文：計算機工程系網(wǎng)站建設(shè) 20 dim folder(15) //定義欄目數(shù)組 o=Request(o) i=0 If o0 And o100 Then //判斷主欄目 sql=select distinct m,rtype from type where r=amp。oamp。 order by m asc sql,conn,