【正文】
ive features dynamic pages. Site design analysis and discussion on the development of the whole process of a Web site and site design of the new ideas put forward. Web site design it is necessary to stress the art of visual aesthetic interface, the user operation in the process of easytouse, but also pay attention to the process control puter network. Only by succeeding in the design of art, science and the mechanic were the perfect bination of puter technology in order to develop distinctive characteristics, a certain cultural content and artistic quality of the site.Key words: web design ASP technology website development畢業(yè)設(shè)計(jì)(論文)原創(chuàng)性聲明和使用授權(quán)說明原創(chuàng)性聲明本人鄭重承諾:所呈交的畢業(yè)設(shè)計(jì)(論文),是我個(gè)人在指導(dǎo)教師的指導(dǎo)下進(jìn)行的研究工作及取得的成果。在網(wǎng)站設(shè)計(jì)中既要講求視覺界面上的藝術(shù)美感,用戶操作過程中的簡單易用,又要注重計(jì)算機(jī)網(wǎng)絡(luò)方面的程序控制。畢業(yè)論文題 目 校園信息交流網(wǎng)站的建設(shè)校園信息交流網(wǎng)站建設(shè)摘要:本文圍繞網(wǎng)站的項(xiàng)目分析、網(wǎng)站構(gòu)思、整體設(shè)計(jì)、效果圖設(shè)計(jì)、頁面生成、數(shù)據(jù)庫設(shè)計(jì)、運(yùn)用程序設(shè)計(jì)、網(wǎng)站的測試、發(fā)布、推廣各個(gè)重要環(huán)節(jié),運(yùn)用數(shù)據(jù)庫與ASP整合的開發(fā)技術(shù),實(shí)現(xiàn)了網(wǎng)站動(dòng)態(tài)菜單、信息更新、后臺登錄、在線留言、站內(nèi)調(diào)查等動(dòng)態(tài)網(wǎng)頁的交互功能。對網(wǎng)站設(shè)計(jì)進(jìn)行分析和討論,闡述了開發(fā)一個(gè)網(wǎng)站的全過程,并提出網(wǎng)站設(shè)計(jì)的新思想。只有做到設(shè)計(jì)藝術(shù)、人機(jī)工學(xué)與計(jì)算機(jī)技術(shù)的完美結(jié)合,才能開發(fā)出特色鮮明、具有一定文化內(nèi)涵和藝術(shù)品位的網(wǎng)站。盡我所知,除文中特別加以標(biāo)注和致謝的地方外,不包含其他人或組織已經(jīng)發(fā)表或公布過的研究成果,也不包含我為獲得 及其它教育機(jī)構(gòu)的學(xué)位或?qū)W歷而使用過的材料。作 者 簽 名: 日 期: 指導(dǎo)教師簽名: 日 期: 使用授權(quán)說明本人完全了解XX大學(xué)關(guān)于收集、保存、使用畢業(yè)設(shè)計(jì)(論文)的規(guī)定,即:按照學(xué)校要求提交畢業(yè)設(shè)計(jì)(論文)的印刷本和電子版本;學(xué)校有權(quán)保存畢業(yè)設(shè)計(jì)(論文)的印刷本和電子版,并提供目錄檢索與閱覽服務(wù);學(xué)??梢圆捎糜坝?、縮印、數(shù)字化或其它復(fù)制手段保存論文;在不以贏利為目的前提下,學(xué)??梢怨颊撐牡牟糠只蛉績?nèi)容。因特網(wǎng)正逐步改變?nèi)虻耐ㄓ嵎绞?,并成為繼印刷媒介(報(bào)紙、書刊、雜志等)、廣播、電視后的第四傳媒。一個(gè)嶄新的、前景無限的設(shè)計(jì)領(lǐng)域——網(wǎng)頁設(shè)計(jì)順勢而生,并飛速發(fā)展著。網(wǎng)頁不僅擁有傳統(tǒng)媒體的特點(diǎn),同時(shí)又超越了傳統(tǒng)媒體,具有傳播更為直接、省力、有效的優(yōu)點(diǎn)。如今網(wǎng)絡(luò)的高速發(fā)展,及教育體制改革的深入,通過網(wǎng)絡(luò)自主學(xué)習(xí)與搜集信息,已經(jīng)成為每個(gè)人所必須做的事情。2 網(wǎng)站構(gòu)思 設(shè)計(jì)定位綜合國內(nèi)外優(yōu)秀網(wǎng)站的特點(diǎn),界面簡潔、美觀,采用CSS標(biāo)準(zhǔn)構(gòu)建網(wǎng)站,并融入FLASH動(dòng)畫元素,實(shí)現(xiàn)設(shè)計(jì)藝術(shù)與網(wǎng)絡(luò)技術(shù)的完美結(jié)合。 網(wǎng)站策劃分析網(wǎng)站采用居中的形式,并把所有頁面都分為頭部—中部—底部三部分組成。留言板塊建立鑒寫留言,查看留言。網(wǎng)站的設(shè)計(jì)選用動(dòng)中有靜、靜中有動(dòng)的設(shè)計(jì)風(fēng)格,同時(shí)把導(dǎo)航嵌入到圖片與Flash動(dòng)畫之中,更加突出網(wǎng)站的吸引力。 功能設(shè)置整個(gè)網(wǎng)站的功能結(jié)構(gòu)主要有數(shù)據(jù)庫、后臺管理系統(tǒng)、前臺顯示模塊三部分組成,功能模塊結(jié)構(gòu)圖如21所示。網(wǎng)站前臺:導(dǎo)航應(yīng)該層次清晰,簡單直白,讓瀏覽者輕松找到想要的東西,使網(wǎng)站的瀏覽過程輕松愉快。調(diào)查內(nèi)容要有一定的意義。管理的操作流程要通俗易懂,讓沒有專業(yè)基礎(chǔ)的人也可以使用。首頁要和其他文件分開放置。在整個(gè)網(wǎng)站布局中,建立十個(gè)文件夾,分別以“Admin、CSS、Data、dongimg、Guestbook、Img、NewsFocus、Scripts、Templates、Vote、Webs”命名,并把網(wǎng)站的所有文件分門別類的放到相應(yīng)文件夾里面。網(wǎng)站結(jié)構(gòu)如圖223所示。善于利用開發(fā)工具才能達(dá)到事半功倍的效果。并做如下分工:Photoshop負(fù)責(zé)網(wǎng)站的風(fēng)格設(shè)計(jì),包括頁面以及頁面中所需的各種元素的制作;Dreamweaver利用Photoshop制作的版面及元素進(jìn)行網(wǎng)頁的生成;Flash負(fù)責(zé)網(wǎng)站上所有的Flash動(dòng)畫設(shè)計(jì)。Adobe Photoshop在電腦美術(shù)的二維平面領(lǐng)域里,是最具代表性的軟件。因此,運(yùn)用它進(jìn)行網(wǎng)頁設(shè)計(jì),將會達(dá)到事半功倍的效果。Dreamweaver采用的是蘋果機(jī)浮動(dòng)面版的設(shè)計(jì)風(fēng)格,具有超強(qiáng)的直觀性與高效性。插件式的程序設(shè)計(jì)使得其功能可以無限的擴(kuò)展。Dreamweaver最新的版本為:Adobe Dreamweaver 。 Flash Flash是一款非常優(yōu)秀的多媒體制作軟件,利用Flash可以做出很出色的卡通動(dòng)漫、MTV(音樂電視)短片等?,F(xiàn)在網(wǎng)絡(luò)已經(jīng)涌現(xiàn)出不計(jì)其數(shù)的Flash站點(diǎn)。在韓國的網(wǎng)站設(shè)計(jì)界,由于擁有足夠的帶寬和出色的Flash動(dòng)畫制作技術(shù),使得很多制作精美、絢麗動(dòng)感的Flash網(wǎng)站在網(wǎng)絡(luò)世界里脫穎而出,成為眾人喜愛和模仿的對象。 Microsoft Office Access軟件簡介Microsoft Office Access軟件是辦公軟件自帶的一款簡單方便的數(shù)據(jù)庫開發(fā)軟件,利用Microsoft Office Access開發(fā)的數(shù)據(jù)庫使用起來非常方便,在沒有安裝辦公軟件的服務(wù)器上也可以使用,是普通網(wǎng)站數(shù)據(jù)庫的最佳選擇。在網(wǎng)站設(shè)計(jì)開始前,要安裝IIS (Internet Information Server的縮寫)互聯(lián)網(wǎng)信息服務(wù)器,構(gòu)建網(wǎng)站的開發(fā)環(huán)境。Windows Vista系統(tǒng)中包含有IIS最新版本——IIS7,但默認(rèn)是不安裝的。安裝的步驟為:開始→控制面板→程序→打開或關(guān)閉Windows功能。+Access開發(fā)環(huán)境IIS7安裝完成后,還需要配置ASP+Access開發(fā)環(huán)境。應(yīng)用程序池默認(rèn)值的設(shè)置步驟如下:開始→控制面板→管理工具→Internet信息服務(wù)管理器,打開設(shè)置選項(xiàng)卡。把應(yīng)用程序池設(shè)置為“Classic .NET AppPool”(默認(rèn)是“Default AppPool”)。右鍵打開“Temp”目錄屬性選項(xiàng)卡,再依次打開安全→編輯選項(xiàng)卡。返回到“Temp 的權(quán)限”,將Authenticated Users的權(quán)限中的完全控制給勾上,確定。 在Dreamweaver8中建立網(wǎng)站測試站點(diǎn)啟動(dòng)Dreamweaver 8,然后依次選擇主菜單中的“站點(diǎn)”、“新建站點(diǎn)”命令,打開站點(diǎn)定義設(shè)置窗口,輸入站點(diǎn)名;單擊下一步,進(jìn)入服務(wù)器技術(shù)選舉窗口,這里選擇ASP VBScript服務(wù)器技術(shù),單擊下一步,選擇本地編輯和測試,并選擇站點(diǎn)存儲位置;單擊下一步,輸入測試URL的地址,單擊測試,顯示測試成功;單擊下一步下一步至完成。網(wǎng)站LOGO以“一張主題圖片”作為設(shè)計(jì)元素,如圖31所示的最終效果圖。這些元素的設(shè)計(jì)要保留透明背景的源文件,以便在網(wǎng)頁和FLASH的設(shè)計(jì)中用到。圖 32 網(wǎng)站元素效果圖 網(wǎng)站的界面設(shè)計(jì)本網(wǎng)站所有前臺和留言頁面采用“頭部導(dǎo)航內(nèi)容版權(quán)”三部分組成,模版如圖33所示:標(biāo)題+導(dǎo)航()內(nèi)容(相關(guān)功能文件)版權(quán)信息()圖 33 網(wǎng)站模板效果圖,以及動(dòng)態(tài)菜單鏈接的實(shí)現(xiàn);;在主文件中代碼標(biāo)識body首部以!include file=,同理在代碼標(biāo)識body尾部以!include file=。圖 34 圖 35 界面設(shè)計(jì)主要是運(yùn)用Dreamweaver軟件,按照網(wǎng)站構(gòu)思和風(fēng)格,把上面已經(jīng)設(shè)計(jì)好的網(wǎng)站元素進(jìn)行組合設(shè)計(jì),構(gòu)成最終的網(wǎng)站的平面效果圖。如圖36所示。打開Microsoft Office Access軟件,新建數(shù)據(jù)庫文件。如圖41所示。其中一個(gè)網(wǎng)站主要用到的DML語句有Insert(插入數(shù)據(jù))用于向表中插入數(shù)據(jù);Update(更新數(shù)據(jù))用于更新表中現(xiàn)存數(shù)據(jù);Delete(刪除數(shù)據(jù))用于刪除表中現(xiàn)存數(shù)據(jù);Select(查詢數(shù)據(jù))用于查詢表中所有行和若干列數(shù)據(jù); 連接數(shù)據(jù)庫程序設(shè)計(jì)連接數(shù)據(jù)庫的程序?qū)懗梢粋€(gè)獨(dú)立的腳本,打開記事本進(jìn)行編寫,然后在每個(gè)前臺頁面中調(diào)用該程序即可。數(shù)據(jù)庫連接程序代碼如下。DRIVER={Microsoft Access Driver (*.mdb)}。其中二級欄目的儲存與調(diào)用是居于一級欄目的編號之下,具體實(shí)現(xiàn)見后臺菜單管理。首先要編寫連接數(shù)據(jù)庫程序,然后要編寫數(shù)據(jù)顯示程序。(一)網(wǎng)站首頁信息顯示是先編寫一段打開數(shù)據(jù)庫的代碼,然后編寫顯示信息的代碼與轉(zhuǎn)到詳細(xì)頁面的代碼循環(huán)執(zhí)行,最后關(guān)閉數(shù)據(jù)庫。stringamp。100%39。lineheight:130% 39。1539。/tdtd style=39。a href=39。 rs(id) amp。 target=39。 title=39。 rs(title) amp。 rs(newstime)amp。 39。rs(title)if len(trim(rs(title)))=15 then left(trim(rs(title)),15)else left(trim(rs(title)),15) amp。img/39。WIDTH:480px。alpha(opacity=100)39。 imgtext1=圖片說明imgLink1=escape(../webs/?id=2)。 imgtext2=圖片說明imgLink2=escape(../webs/?id=2)。 cstr(yiid) amp。 cstr(yiid) amp。cstr(erid)a