博祺商品展示有限公司網(wǎng)站設(shè)計(jì)畢業(yè)設(shè)計(jì)論文

1、.清遠(yuǎn)職業(yè)技術(shù)學(xué)院信息科技系清遠(yuǎn)職業(yè)技術(shù)學(xué)院信息科技系計(jì)算機(jī)網(wǎng)絡(luò)技術(shù)專業(yè)畢業(yè)論文 姓 名： 學(xué) 號(hào)： 指 導(dǎo) 老 師 ： 黃 華 2012年4月25日 博祺商品展示有限公司網(wǎng)站設(shè)計(jì)摘要：在已跨入21世紀(jì)的今天，隨著時(shí)代的飛速發(fā)展，計(jì)算機(jī)網(wǎng)絡(luò)也在飛速的發(fā)展和普及，人們也越來(lái)越多的在網(wǎng)上交流、交易、通訊等等。網(wǎng)絡(luò)正向人們展示出一片不同于傳統(tǒng)交流互動(dòng)的新天地。在互聯(lián)網(wǎng)技術(shù)不斷進(jìn)步的時(shí)代，人們不只可以在網(wǎng)上得到各項(xiàng)資訊，更可以享受網(wǎng)上視聽(tīng)娛樂(lè)，令互聯(lián)網(wǎng)逐漸成為生活中不可缺少的一部分。網(wǎng)站的迷人之處在于綜合使用文本、圖像、聲音、動(dòng)畫(huà)等信息和內(nèi)容，具有豐富的多媒體表現(xiàn)和互動(dòng)特點(diǎn)。本網(wǎng)站主要是利用asp制作

2、而成，充分利用了Dreamweaver的一些基本功能，超鏈接等頁(yè)面元素。網(wǎng)站的布局均由dreamweaver完成，基本模塊完成后再進(jìn)行與Access數(shù)據(jù)庫(kù)的結(jié)合，最終完成整個(gè)網(wǎng)站的制作。此網(wǎng)站結(jié)合了網(wǎng)頁(yè)設(shè)計(jì)及數(shù)據(jù)庫(kù)等一些所學(xué)的知識(shí)，制作出這個(gè)具體基礎(chǔ)功能的企業(yè)網(wǎng)站。 目 錄第一章：緒論31.1網(wǎng)站開(kāi)發(fā)背景：31.2 技術(shù)可行性分析31.2.1 靜態(tài)網(wǎng)頁(yè)技術(shù)31.2.2 Access數(shù)據(jù)庫(kù)41.2.3 .ASP動(dòng)態(tài)網(wǎng)頁(yè)技術(shù)4第二章:網(wǎng)站設(shè)計(jì)52.1主頁(yè)頁(yè)面設(shè)計(jì)52.2留言板設(shè)計(jì)82.3子頁(yè)設(shè)計(jì)92.4后臺(tái)登陸設(shè)計(jì)102.5 后臺(tái)管理設(shè)計(jì)12總結(jié)20致謝20第一章：緒論 1.1網(wǎng)站開(kāi)發(fā)背景： 隨著

3、Internet在中國(guó)的迅速發(fā)展,人們?nèi)粘Ｉ钪性絹?lái)越多地使用這項(xiàng)新的技術(shù)來(lái)為自己的工作和學(xué)習(xí)服務(wù).由于WEB頁(yè)面能把文本、圖像、聲音、動(dòng)畫(huà)、視像等多種媒體信息集于一體，不但使信息的顯示更加生動(dòng)，而且使信息的瀏覽更為方便,同時(shí)WEB頁(yè)能實(shí)現(xiàn)網(wǎng)上交易平臺(tái)、客戶信息反饋方便了企業(yè)與客戶之間信息交流，因此許多企業(yè)紛紛建設(shè)網(wǎng)站以增強(qiáng)企業(yè)知名度.1.2 技術(shù)可行性分析本網(wǎng)站運(yùn)用Dreamweaver靜態(tài)網(wǎng)頁(yè)與asp動(dòng)態(tài)網(wǎng)頁(yè)結(jié)合，才用Access數(shù)據(jù)庫(kù)做后臺(tái)，來(lái)實(shí)現(xiàn)留言發(fā)布與管理和文章發(fā)布與管理功能。1.2.1 靜態(tài)網(wǎng)頁(yè)技術(shù)靜態(tài)網(wǎng)頁(yè)是相對(duì)于動(dòng)態(tài)網(wǎng)頁(yè)而言，是指沒(méi)有后臺(tái)數(shù)據(jù)庫(kù)、不含程序和不可交互的網(wǎng)頁(yè)。你編的

4、是什么它顯示的就是什么、不會(huì)有任何改變。靜態(tài)網(wǎng)頁(yè)相對(duì)更新起來(lái)比較麻煩，適用于一般更新較少的展示型網(wǎng)站。在網(wǎng)站設(shè)計(jì)中，純粹HTML格式的網(wǎng)頁(yè)通常被稱為“靜態(tài)網(wǎng)頁(yè)”，早期的網(wǎng)站一般都是由靜態(tài)網(wǎng)頁(yè)制作的。靜態(tài)網(wǎng)頁(yè)的網(wǎng)址形式通常為:靜態(tài)網(wǎng)頁(yè)的特點(diǎn)簡(jiǎn)要?dú)w納如下：:(1)靜態(tài)網(wǎng)頁(yè)每個(gè)網(wǎng)頁(yè)都有一個(gè)固定的URL，且網(wǎng)頁(yè)URL以.htm、.html、.shtml等常見(jiàn)形式為后綴，而不含有“?”;(2)網(wǎng)頁(yè)內(nèi)容一經(jīng)發(fā)布到網(wǎng)站服務(wù)器上，無(wú)論是否有用戶訪問(wèn)，每個(gè)靜態(tài)網(wǎng)頁(yè)的內(nèi)容都是保存在網(wǎng)站服務(wù)器上的，也就是說(shuō)，靜態(tài)網(wǎng)頁(yè)是實(shí)實(shí)在在保存在服務(wù)器上的文件，每個(gè)網(wǎng)頁(yè)都是一個(gè)獨(dú)立的文件;(3)靜態(tài)網(wǎng)頁(yè)的內(nèi)容相對(duì)穩(wěn)定，因此容易被

5、搜索引擎檢索;(4)靜態(tài)網(wǎng)頁(yè)沒(méi)有數(shù)據(jù)庫(kù)的支持，在網(wǎng)站制作和維護(hù)方面工作量較大，因此當(dāng)網(wǎng)站信息量很大時(shí)完全依靠靜態(tài)網(wǎng)頁(yè)制作方式比較困難;(5)靜態(tài)網(wǎng)頁(yè)的交互性較差，在功能方面有較大的限制。1.2.2 Access數(shù)據(jù)庫(kù)Access 是微軟公司推出的基于Windows的桌面關(guān)系數(shù)據(jù)庫(kù)管理系統(tǒng)（RDBMS，即Relational Database Management System），是Office系列應(yīng)用軟件之一。它提供了表、查詢、窗體、報(bào)表、頁(yè)、宏、模塊7種用來(lái)建立數(shù)據(jù)庫(kù)系統(tǒng)的對(duì)象；提供了多種向?qū)?、生成器、模板，把?shù)據(jù)存儲(chǔ)、數(shù)據(jù)查詢、界面設(shè)計(jì)、報(bào)表生成等操作規(guī)范化；為建立功能完善的數(shù)據(jù)庫(kù)管理系統(tǒng)

6、提供了方便，也使得普通用戶不必編寫(xiě)代碼，就可以完成大部分?jǐn)?shù)據(jù)管理的任務(wù)。 Access能夠存取 Access/Jet、Microsoft SQL Server、Oracle(甲骨文軟件公司)，或者任何 ODBC 兼容數(shù)據(jù)庫(kù)內(nèi)的資料。熟練的軟件設(shè)計(jì)師和資料分析師利用它來(lái)開(kāi)發(fā)應(yīng)用軟件，而一些不熟練的程序員和非程序員的"進(jìn)階用戶"則能使用它來(lái)開(kāi)發(fā)簡(jiǎn)單的應(yīng)用軟件。雖然它支援部分面向?qū)ο螅∣OP）技術(shù)，但是未能成為一種完整的面向?qū)ο箝_(kāi)發(fā)工具。1.2.3 .ASP動(dòng)態(tài)網(wǎng)頁(yè)技術(shù)ASP 即Active Server Pages，它是微軟開(kāi)發(fā)的一種類似HTML(超文本標(biāo)識(shí)語(yǔ)言)、Script

7、(腳本)與CGI(公用網(wǎng)關(guān)接口)的結(jié)合體，它沒(méi)有提供自己專門(mén)的編程語(yǔ)言，而是允許用戶使用許多已有的腳本語(yǔ)言編寫(xiě)ASP的應(yīng)用程序。ASP的程序編制比HTML更方便且更有靈活性。它是在Web服務(wù)器端運(yùn)行，運(yùn)行后再將運(yùn)行結(jié)果以HTML格式傳送至客戶端的瀏覽器。因此ASP與一般的腳本語(yǔ)言相比，要安全得多。ASP的最大好處是可以包含HTML標(biāo)簽，也可以直接存取數(shù)據(jù)庫(kù)及使用無(wú)限擴(kuò)充的ActiveX控件，因此在程序編制上要比HTML方便而且更富有靈活性。通過(guò)使用ASP的組件和對(duì)象技術(shù)，用戶可以直接使用ActiveX控件，調(diào)用對(duì)象方法和屬性，以簡(jiǎn)單的方式實(shí)現(xiàn)強(qiáng)大的交互功能。我們將動(dòng)態(tài)網(wǎng)頁(yè)的一般特點(diǎn)簡(jiǎn)要?dú)w納如下

8、：（1）動(dòng)態(tài)網(wǎng)頁(yè)以數(shù)據(jù)庫(kù)技術(shù)為基礎(chǔ)，可以大大降低網(wǎng)站維護(hù)的工作量；（2）采用動(dòng)態(tài)網(wǎng)頁(yè)技術(shù)的網(wǎng)站可以實(shí)現(xiàn)更多的功能，如用戶注冊(cè)、用戶登錄、在線調(diào)查、用戶管理、訂單管理等等；（3）動(dòng)態(tài)網(wǎng)頁(yè)實(shí)際上并不是獨(dú)立存在于服務(wù)器上的網(wǎng)頁(yè)文件，只有當(dāng)用戶請(qǐng)求時(shí)服務(wù)器才返回一個(gè)完整的網(wǎng)頁(yè)；（4）動(dòng)態(tài)網(wǎng)頁(yè)中的“？”對(duì)搜索引擎檢索存在一定的問(wèn)題，搜索引擎一般不可能從一個(gè)網(wǎng)站的數(shù)據(jù)庫(kù)中訪問(wèn)全部網(wǎng)頁(yè)，或者出于技術(shù)方面的考慮，搜索蜘蛛不去抓取網(wǎng)址中“？”后面的內(nèi)容，因此采用動(dòng)態(tài)網(wǎng)頁(yè)的網(wǎng)站在進(jìn)行搜索引擎推廣時(shí)需要做一定的技術(shù)處理才能適應(yīng)搜索引擎的要求第二章:網(wǎng)站設(shè)計(jì)此網(wǎng)站主要用于客戶瀏覽和了解公司概況，可進(jìn)行簡(jiǎn)單的留言。涉及

9、到的有登陸，留言，信息發(fā)布，更改留言和信息，內(nèi)容調(diào)用，子菜單的顯示，鏈接ACCESS，和ACCESS的簡(jiǎn)單運(yùn)用。網(wǎng)站沒(méi)有具體的公司內(nèi)容，只做了簡(jiǎn)單的模塊和實(shí)現(xiàn)了網(wǎng)站的基本功能。2.1主頁(yè)頁(yè)面設(shè)計(jì)主頁(yè)利用Dreamweaver排版。一級(jí)菜單欄內(nèi)容有首頁(yè)，公司概況，服務(wù)體系，經(jīng)典案例，客戶留言，人力資源，聯(lián)系我們。二級(jí)菜單有：公司概況：公司簡(jiǎn)介，經(jīng)營(yíng)哲學(xué)，發(fā)展歷程，榮譽(yù)資質(zhì)，生產(chǎn)基地服務(wù)體系：服務(wù)內(nèi)容，服務(wù)承諾，服務(wù)流程，投訴流程，預(yù)警措施，合作品牌經(jīng)典案例：內(nèi)衣類，女裝/男裝/童裝類，鞋/提包類,化妝品/珠寶首飾類客戶留言：客戶留言人力資源：人力資源 聯(lián)系我們：聯(lián)系我們菜單欄下方是JS特效，自動(dòng)

10、切換廣告圖片。公司新聞與公司動(dòng)態(tài)模塊頁(yè)面效果： 主頁(yè)廣告切換代碼：<script type="text/javascript" src="Ind_Flash/cycle.js"></script><SCRIPT type=text/javascript>$(function()$('#ad_img').cycle( fx: 'fade',pager: '#ad_btns', cleartype:1,timeout:5000); if($("#values_lis

11、t ul li").size()>=4) $("#values_list").jCarouselLite( visible: 4, vertical: true, scroll:2, auto:7000/滾動(dòng)周期 ); $('#notice').cycle(fx: 'fade',timeout:3000);$("#flash").jCarouselLite( btnNext: "#control_left", btnPrev: "#control_right", vi

12、sible: 1, auto:10000, speed:500)</SCRIPT>2.2留言板設(shè)計(jì)留言板的設(shè)計(jì)采用簡(jiǎn)單的框架模式，內(nèi)容包括姓名，郵箱，聯(lián)系電話，留言內(nèi)容。在留言發(fā)布下面可以顯示之前的留言。綁定ACCESS中的liuyanban表！頁(yè)面效果：數(shù)據(jù)插入代碼：<%LANGUAGE="VBSCRIPT" CODEPAGE="936"%><%Const dbdns=""%><!-#include file="AppCode/Conn.asp"-><!-#i

13、nclude file="AppCode/fun/function.asp"-><!-#include file="AppCode/Class/Ok3w_Guest.asp"-><%If Not IsSelfRefer() Then Call MessageBox("請(qǐng)不要站外提交。","./")Select Case Request.Form("action")Case "Comments"Set Guest = New Ok3w_GuestCall

14、 Guest.Add()Set Rs = NothingCall CloseConn()Call MessageBox("非常感謝！你的評(píng)論已經(jīng)成功提交；管理員審核后，才會(huì)顯示出來(lái)。","show.asp?id=" & Guest.TableID)Case "Message"Set Guest = New Ok3w_GuestCall Guest.Add()Set Rs = NothingCall CloseConn()Call MessageBox("留言成功！","guestbook.asp&

15、quot;)End Select%> 2.3子頁(yè)設(shè)計(jì) 除了后臺(tái)，所有的頁(yè)面都保留了菜單欄和logo部分。除了首頁(yè)，其他頁(yè)面均為此樣式，左邊為當(dāng)前欄目的所有子鏈接。內(nèi)容均是鏈接數(shù)據(jù)庫(kù)顯示，然后用模板做出此效果。內(nèi)容可以在后臺(tái)更改。子頁(yè)的內(nèi)容除關(guān)于公司的內(nèi)容在數(shù)據(jù)庫(kù)的qiyexinwen表外，其他的內(nèi)容均在數(shù)據(jù)庫(kù)的xinwenb表中！子頁(yè)的設(shè)計(jì)均綁定了數(shù)據(jù)庫(kù)，并通過(guò)修改模板制作出效果！頁(yè)面效果：數(shù)據(jù)庫(kù)綁定代碼： <!-#include file="SysConfig.asp"-><%If SysSiteIsClose = "1" Th

16、enIf InStr(Lcase(Request.ServerVariables("URL"),Lcase(SysSiteAdminPath)=0 ThenResponse.Write(SysSiteCloseNote)Response.End()End IfEnd IfDim Conn,ConnStr,RsConnStr = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" & Server.MapPath(dbdns & SysSiteDbPath)Call OpenConn()Set R

17、s = Server.CreateObject("Adodb.RecordSet")Private Sub CloseConn()Conn.CloseSet Conn = NothingEnd SubPrivate Sub OpenConn()Set Conn = Server.CreateObject("ADODB.Connection")Conn.Open ConnStrEnd Sub%>2.4后臺(tái)登陸設(shè)計(jì)后臺(tái)登陸綁定了Access數(shù)據(jù)庫(kù)的 admin表，通過(guò)數(shù)據(jù)表信息登陸后臺(tái)。賬戶為：admin密碼：admin.失敗則彈出口框：用戶名不存在或

18、密碼錯(cuò)誤，成功就顯示登錄成功，跳轉(zhuǎn)到后臺(tái)管理。效果顯示：登陸控件代碼：function submitfrm(frm)if(frm.username.value.trim()="") ShowErrMsg("用戶名不能為空，請(qǐng)輸入"); frm.username.focus(); return false;if(frm.userpwd.value.trim()="") ShowErrMsg("密碼不能為空，請(qǐng)輸入"); frm.userpwd.focus(); return false;if(frm.getcode.

19、value.trim()="") ShowErrMsg("驗(yàn)證碼不能為空，請(qǐng)輸入"); frm.getcode.focus(); return false;return true;</script> <%action = Trim(Request.Form("action")If action = "login" ThensGetCode = Request.Form("getcode")If Session("GetCode") = ""

20、; Or Session("GetCode") <> sGetCode Then ErrMsg = "驗(yàn)證碼錯(cuò)誤" ElseSet Admin = New Admin_InfoSelect Case Admin.AdminLogin(Request.Form("username"),MD5(Request.Form("userpwd"),"IsLogin")Case 1ErrMsg = "用戶名或密碼錯(cuò)誤"Case 2ErrMsg = "用戶被鎖定&qu

21、ot;Case -1Call CloseConn()Response.Redirect("ad_index.html")End SelectSet Admin = NothingEnd IfEnd IfCall CloseConn()%>2.5 后臺(tái)管理設(shè)計(jì)后臺(tái)管理主要包括常規(guī)操作，公司概況，服務(wù)體系等項(xiàng)目的管理。主要是信息的編輯修改和刪除。還有留言板管理頁(yè)面進(jìn)行留言回復(fù)和留言刪除。后臺(tái)主頁(yè)效果： 代碼如下：<table width="100%" cellpadding="0" cellspacing="0&qu

22、ot;> <tr> <td height="100"><span class="STYLE1">&gt;&gt;歡迎您使用 <%=SysSiteName%> 網(wǎng)站后臺(tái)管理系統(tǒng)&lt;&lt;</span><br /> <br /> <br /> <span class="STYLE2">為了數(shù)據(jù)的安全，操作完成后，請(qǐng)點(diǎn)“安全退出”！</span></td> </

23、tr> </table></fieldset> <br /><fieldset style="padding:10px;"><legend>服務(wù)器信息</legend><br /><table border="0" cellpadding="0" cellspacing="1" bgcolor="#CCCCCC"> <tr> <td height="25"

24、bgcolor="#FFFFFF">&nbsp;服務(wù)器類型：<%=Request.ServerVariables("OS")%>(IP:<%=Request.ServerVariables("LOCAL_ADDR")%>)</td> <td height="25" bgcolor="#FFFFFF">&nbsp;腳本解釋引擎：<%=ScriptEngine & "/"& ScriptE

25、ngineMajorVersion &"."&ScriptEngineMinorVersion&"."& ScriptEngineBuildVersion %></td> </tr> <tr> <td height="25" bgcolor="#FFFFFF">&nbsp;站點(diǎn)物理路徑：<%=Request.ServerVariables("APPL_PHYSICAL_PATH")%><

26、;/td> <td height="25" bgcolor="#FFFFFF">&nbsp;FSO文本讀寫(xiě)：<%If Not IsObjInstalled("Scripting.FileSystemObject") Then%><font color="#FF0066"><b>×</b></font><%else%><b></b><%end if%></td>

27、</tr> <tr> <td height="25" bgcolor="#FFFFFF">&nbsp;Jmail組件支持：<%If Not IsObjInstalled("JMail.SMTPMail") Then%><font color="#FF0066"><b>×</b></font><%else%><b></b><%end if%></td&

28、gt; <td height="25" bgcolor="#FFFFFF">&nbsp;CDONTS組件支持：<%If Not IsObjInstalled("CDONTS.NewMail") Then%><font color="#FF0066"><b>×</b></font><%else%><b></b><%end if%></td> </tr> &l

29、t;tr> <td height="25" bgcolor="#FFFFFF">&nbsp;數(shù)據(jù)庫(kù)使用：<b style="color:blue">ACCESS(<font color="red"><%=Round(DbSize()/10242,2)%>M</font>)</b></td> <td height="25" bgcolor="#FFFFFF">&

30、nbsp;</td> </tr></table></fieldset>留言板管理效果：代碼如下：<%IsPass = Request.QueryString("IsPass")Set Guest = New Ok3w_GuestIf Request.Form("action")="ok" ThenIf Request.Form("IsDel")="1" ThenID = Trim(Request.QueryString("ID&qu

31、ot;)Call Guest.Del(ID)Set Guest = NothingCall SaveAdminLog("刪除留言，ID=" & Request.QueryString("IsPass")Call ActionOk("Guest_List.asp?IsPass=" & IsPass)ElseID = Trim(Request.QueryString("ID")IsPass = Trim(Request.Form("IsPass")If IsPass="&q

32、uot; Then IsPass = 0Cask = Trim(Request.Form("ask")Content = Trim(Request.Form("Content")Call Guest.Ask(Cask,Content,IsPass,ID)Set Guest = NothingCall SaveAdminLog("回復(fù)/開(kāi)通/關(guān)閉留言，ID=" & ID)Call ActionOk("Guest_List.asp?IsPass=" & Request.QueryString("

33、;IsPass")End IfEnd If%>新聞發(fā)布頁(yè)面效果：代碼如下：<%'讀記錄Public Sub Load(Id)Set clsRs = Server.CreateObject("Adodb.RecordSet")Sql = "select * from Ok3w_Article where Id=" & Id clsRs.Open Sql,Conn,1,1If clsRs.Eof And clsRs.Bof ThenResponse.Write("資源不存在")Response.End

34、()End If Call GetRs(clsRs) clsRs.Close() Set clsRs = NothingEnd Sub'點(diǎn)擊數(shù)加1Public Sub HitsAdd(Id)Sql = "update Ok3w_Article set Hits = Hits + 1 where Id=" & IdConn.Execute SqlEnd Sub '添加記錄 Public Sub Add() Call GetFormData() Set clsRs = Server.CreateObject("Adodb.RecordSet") Sql = "select * from Ok3w_Article where 1=2" clsRs.Open Sql,Conn,1,3 clsRs.AddNew() Call UpdateRs(clsRs) clsRs.Update() clsRs.Close() Set clsRs = Nothing End Sub '修改記錄 Public Sub Edit() Call GetFormData() Set clsRs = Server.CreateObject