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

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

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

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

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

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

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

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

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

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

10、切換廣告圖片。公司新聞與公司動態(tài)模塊頁面效果： 主頁廣告切換代碼：<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/滾動周期 ); $('#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留言板設計留言板的設計采用簡單的框架模式，內(nèi)容包括姓名，郵箱，聯(lián)系電話，留言內(nèi)容。在留言發(fā)布下面可以顯示之前的留言。綁定ACCESS中的liuyanban表！頁面效果：數(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("請不要站外提交。","./")Select Case Request.Form("action")Case "Comments"Set Guest = New Ok3w_GuestCall

14、 Guest.Add()Set Rs = NothingCall CloseConn()Call MessageBox("非常感謝！你的評論已經(jīng)成功提交；管理員審核后，才會顯示出來。","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子頁設計 除了后臺，所有的頁面都保留了菜單欄和logo部分。除了首頁，其他頁面均為此樣式，左邊為當前欄目的所有子鏈接。內(nèi)容均是鏈接數(shù)據(jù)庫顯示，然后用模板做出此效果。內(nèi)容可以在后臺更改。子頁的內(nèi)容除關于公司的內(nèi)容在數(shù)據(jù)庫的qiyexinwen表外，其他的內(nèi)容均在數(shù)據(jù)庫的xinwenb表中！子頁的設計均綁定了數(shù)據(jù)庫，并通過修改模板制作出效果！頁面效果：數(shù)據(jù)庫綁定代碼： <!-#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后臺登陸設計后臺登陸綁定了Access數(shù)據(jù)庫的 admin表，通過數(shù)據(jù)表信息登陸后臺。賬戶為：admin密碼：admin.失敗則彈出口框：用戶名不存在或

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

19、value.trim()="") ShowErrMsg("驗證碼不能為空，請輸入"); 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 = "驗證碼錯誤" ElseSet Admin = New Admin_InfoSelect Case Admin.AdminLogin(Request.Form("username"),MD5(Request.Form("userpwd"),"IsLogin")Case 1ErrMsg = "用戶名或密碼錯誤"Case 2ErrMsg = "用戶被鎖定&qu

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

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

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

24、bgcolor="#FFFFFF">&nbsp;服務器類型：<%=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;站點物理路徑：<%=Request.ServerVariables("APPL_PHYSICAL_PATH")%><

26、;/td> <td height="25" bgcolor="#FFFFFF">&nbsp;FSO文本讀寫：<%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ù)庫使用：<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("回復/開通/關閉留言，ID=" & ID)Call ActionOk("Guest_List.asp?IsPass=" & Request.QueryString("

33、;IsPass")End IfEnd If%>新聞發(fā)布頁面效果：代碼如下：<%'讀記錄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'點擊數(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