計算機網(wǎng)站設(shè)計畢業(yè)論文--網(wǎng)頁設(shè)計與制作

1、<p><b>　　畢業(yè)論文</b></p><p><b>　　網(wǎng)頁設(shè)計與制作</b></p><p>　　論文作者：______ _____________</p><p>　　專 業(yè)：______計算機多媒體技術(shù)_________</p><p>　　學 號：__

2、____ _________</p><p>　　班 級：_____ ____________</p><p>　　指導(dǎo)教師:_______ _________________</p><p>　　答辯委員會主席____________ 評閱人______________</p><p>　　論

3、文答辯日期______________</p><p><b>　　摘要</b></p><p>　　隨著網(wǎng)絡(luò)技術(shù)的迅猛發(fā)展, 當代企業(yè)紛紛建立自己的網(wǎng)站,借助于互聯(lián)網(wǎng)擴大自己的影響、推廣自己的產(chǎn)品,同時通過互聯(lián)網(wǎng)快速的信息傳遞加速自身的發(fā)展。因此我選擇將公司網(wǎng)頁的設(shè)計與制作作為我的項目。</p><p>　　本論文所研究的是如何建設(shè)一個符合大

4、眾化要求的企業(yè)網(wǎng)站及前段版面設(shè)計的過程，前端的開發(fā)中，在頁面的布局時，HTML將元素進行定義，div+css對展示的元素進行定位，再通過JavaScript實現(xiàn)相應(yīng)的效果和交互。雖然表面看起來這些很簡單，但這里面需要掌握的東西絕對不會少。在進行開發(fā)前，需要對這些概念弄清楚，弄明白，這樣在開發(fā)的過程中才會得心應(yīng)手</p><p>　　通過對企業(yè)需求的了解和對其他企業(yè)網(wǎng)站的參考，最終成功完成了一個虛擬的企業(yè)網(wǎng)站。通過

5、這次建站的過程不僅讓我對前段div+css有了更深的了解，更讓我熟練的運用了Photoshop這個軟件，不過還有很大的提升空間，我會繼續(xù)努力。</p><p>　　關(guān)鍵詞：網(wǎng)站設(shè)計，HTML，div+css，dreamweaver</p><p><b>　　目 錄</b></p><p><b>　　摘要III</b>

6、;</p><p><b>　　目錄IV</b></p><p><b>　　第1章 緒論V</b></p><p><b>　　1.1 概述6</b></p><p>　　第2章 企業(yè)網(wǎng)站開發(fā)相關(guān)技術(shù)及工具7</p><p>　　2.1 Dr

7、eamweaver簡介7</p><p>　　2.2 HTML語言簡介8</p><p>　　2.3 div+css簡介9</p><p>　　2.4 Photoshop簡介10</p><p>　　第3章 網(wǎng)站整體設(shè)計12</p><p>　　3.1需求分析12</p><p>　

8、　3.2網(wǎng)站功能結(jié)構(gòu)圖12</p><p>　　3.3前臺功能模塊設(shè)計13</p><p>　　第4章 網(wǎng)站各項功能的實現(xiàn)及效果分析15</p><p>　　4.1網(wǎng)站功能的實現(xiàn)16</p><p>　　4.2前后臺效果分析16</p><p><b>　　第五章 總結(jié)36</b>&l

9、t;/p><p><b>　　參考文獻37</b></p><p><b>　　致謝37</b></p><p><b>　　第1章 緒論</b></p><p><b>　　1.1 概述</b></p><p>　　現(xiàn)在網(wǎng)絡(luò)的發(fā)

10、展已呈現(xiàn)商業(yè)化、全民化、全球化的趨勢。目前，幾乎世界上所有的公司都在利用網(wǎng)絡(luò)傳遞商業(yè)信息，進行商業(yè)活動，從宣傳企業(yè)、發(fā)布廣告、招聘雇員、傳遞商業(yè)檔乃至拓展市場、網(wǎng)上銷售等，無所不能。如今網(wǎng)絡(luò)已成為企業(yè)進行競爭的戰(zhàn)略手段。企業(yè)經(jīng)營的多元化拓展，企業(yè)規(guī)模的進一步擴大，對于企業(yè)的管理、業(yè)務(wù)擴展、企業(yè)品牌形象等提供了更高的要求。在以資訊技術(shù)為支撐的新經(jīng)濟條件下，越來越多的企業(yè)利用起網(wǎng)絡(luò)這個有效的工具。網(wǎng)站早已由論證階段進入了實質(zhì)階段，尤其為企業(yè)

11、提供一個展示自己的舞臺、為消費者創(chuàng)造一個了解企業(yè)的捷徑。公司可以通過建立商業(yè)平臺，實行全天候銷售服務(wù)，借助網(wǎng)絡(luò)推廣企業(yè)的形象、宣傳企業(yè)的產(chǎn)品、發(fā)布公司新聞，同時通過信息反饋使公司更加了解顧客的心理和需求，網(wǎng)站虛擬公司與實體公司的經(jīng)營運作有機的結(jié)合，將會有利于公司產(chǎn)品銷售管道的拓展，并節(jié)省大量的廣告宣傳和經(jīng)營運營成本，更好地把握商機。隨著全球信息網(wǎng)絡(luò)的發(fā)展，Internet在世界上已不僅僅是一種技術(shù)，更重要的是它已成為一種新的經(jīng)營模式。&

12、lt;/p><p>　　在新經(jīng)濟條件下，商業(yè)規(guī)則已經(jīng)發(fā)生了一些改變，電子商務(wù)對企業(yè)的基本構(gòu)架在速度和效率上提出了更高的要求。電子商務(wù)的環(huán)境和競爭狀況變化如此之快，網(wǎng)上商品交易系統(tǒng)及售后服務(wù)系統(tǒng)，該系統(tǒng)提高了社會資源利用率，同時也為個人商品交易提供了方面，所以，企業(yè)建立網(wǎng)站的意義如下:</p><p>　　一、擁有企業(yè)自己的域名，建立企業(yè)自己的網(wǎng)站，樹立企業(yè)在科技信息時代的完美形象。作為第四媒體

13、的互聯(lián)網(wǎng)，其特點就是可以跨越時空，正常情況下， 網(wǎng)站無時無刻 不在工作通過企業(yè)的網(wǎng)站，用戶可以跨越時空了解企業(yè)，利用多媒體技術(shù)，企業(yè)可以 向用戶展示產(chǎn)品、技術(shù)、經(jīng)營理念、企業(yè)文化、企業(yè)形象，樹立現(xiàn)代企業(yè)形象，增值 企業(yè)無形資產(chǎn)。 </p><p>　　二、宣傳企業(yè)，創(chuàng)造銷售機會據(jù)調(diào)查，有超過30%的人是通過上網(wǎng)查詢企業(yè)的電話和地址的，這一比例和通過114查詢的比例相接近，可見企業(yè)網(wǎng)站已成為許多人首次接觸企業(yè)

14、、了解相關(guān)信息的選擇。 </p><p>　　三、加強客戶溝通宣傳企業(yè)產(chǎn)品企業(yè)可以通過網(wǎng)站建立與客戶溝通的便捷渠道，全面展示企業(yè)的所有產(chǎn)品。網(wǎng)絡(luò)科技足以令您的產(chǎn)品與品牌形象更加立體地</p><p>　　呈現(xiàn)在用戶面前，就算企業(yè)僅僅把網(wǎng)站當成電子宣傳冊來使用，也較傳統(tǒng)的宣傳模式更加的多姿多彩、更加地易于發(fā)布與傳播、更加的經(jīng)濟與環(huán)保。 '</p><p>

15、　　四、豐富營銷手段，擴大產(chǎn)品銷售渠道企業(yè)網(wǎng)站可以滿足一部分客戶網(wǎng)上查詢與采購的需要，抓住網(wǎng)絡(luò)商機。企業(yè)通過網(wǎng)站可以開展電子營銷。首先，電子營銷作為傳統(tǒng)營銷的補充；其次， 電子營銷可以拓展新的空間，增加銷售渠道，接觸更大的消費群體，獲得更多的新顧 客，擴大市場；再次，電子營銷可以減少環(huán)節(jié)，減少人員，節(jié)約費用，降低成本，有利于提高營銷效率。 </p><p>　　五、有利于了解顧客的意見，掌握顧客的需求在不干擾顧

16、客正常工作和生活的條件下，企業(yè)通過網(wǎng)站上的調(diào)查表、留言薄、定 制服務(wù)以及E-MAIL可以傾聽顧客的意見，了解顧客的心聲，加強企業(yè)與顧客間的聯(lián)系 建立良好的顧客關(guān)系。</p><p>　　六、有利于改善服務(wù)，提高企業(yè)服務(wù)質(zhì)量利用網(wǎng)站，通過電子溝通方式，企業(yè)開展的在線服務(wù)是傳統(tǒng)的溝通方式（如，郵 件、電話、傳真等）所無比擬的，在線服務(wù)能夠更加及時準確地掌握用戶的需求，通過網(wǎng)站的交互式服務(wù)使得被動提供和主動獲得統(tǒng)一起來

17、，從而實現(xiàn)售前、售中、售后的全過程和全方位的服務(wù)。</p><p>　　我們所處的時代是高度信息化的互聯(lián)網(wǎng)時代，互聯(lián)網(wǎng)正在滲透到我們生活中的方方面面，并且在以十倍甚至百倍的速度提高著我們的工作效率?；ヂ?lián)網(wǎng)的發(fā)展帶來了一場規(guī)模空前的行業(yè)革命，他不僅改變了許多傳統(tǒng)行業(yè)的運作模式，同時也產(chǎn)生了許多新的行業(yè)，并且可以重新排定行業(yè)內(nèi)各個企業(yè)的地位?？梢哉f互聯(lián)網(wǎng)時代是一個資源和財富再分配的時代?；ヂ?lián)網(wǎng)絡(luò)真正的內(nèi)涵在于其內(nèi)容的

18、豐富性，幾乎無所不包。對于一個企業(yè)來說，其具有網(wǎng)絡(luò)溝通能力的標志是公司擁有自己的獨立網(wǎng)站</p><p>　　第2章 企業(yè)網(wǎng)站開發(fā)相關(guān)技術(shù)及工具</p><p>　　2.1 Dreamweaver簡介</p><p>　　Adobe Dreamweaver，簡稱“DW”，中文名稱 "夢想編織者"，是美國MACROMEDIA公司開發(fā)的集網(wǎng)頁制作和管

19、理網(wǎng)站于一身的所見即所得網(wǎng)頁編輯器，DW是第一套針對專業(yè)網(wǎng)頁設(shè)計師特別發(fā)展的視覺化網(wǎng)頁開發(fā)工具，利用它可以輕而易舉地制作出跨越平臺限制和跨越瀏覽器限制的充滿動感的網(wǎng)頁。Macromedia公司成立于1992年，2005年被Adobe公司收購。Adobe Dreamweaver使用所見即所得的接口，亦有HTML（標準通用標記語言下的一個應(yīng)用）編輯的功能。它有Mac和Windows系統(tǒng)的版本。Macromedia被Adobe收購后，Ado

20、be也開始計劃開發(fā)Linux版本的Dreamweaver了。 Dreamweaver自MX版本開始，使用了Opera的排版引擎"Presto" 作為網(wǎng)頁預(yù)覽</p><p>　　Dreamweaver是一個功能強大的網(wǎng)頁設(shè)計工具，有著方便實用的工具和所見即所得的排版功能，見面十分友好，使用方便。在不需要掌握HTML語言的情況下，即可利用其強大的功能開發(fā)出專業(yè)的網(wǎng)頁。Dreamweaver也是一

21、個方便的編程工具，可以方便地編寫ASP、PHP、JSP代碼，軟件的自動提示填充功能和代碼染色功能可以有效地幫助用戶編寫和調(diào)試各種代碼。它集網(wǎng)頁設(shè)計、網(wǎng)站開發(fā)和站點管理功能于一身，具有可視化、支持多平臺和跨瀏覽器的特性，是目前網(wǎng)站設(shè)計、開發(fā)、制作的首選工具。借助于Dreamweaver可以快速方便地開發(fā)出各種動態(tài)或靜態(tài)網(wǎng)站。。</p><p><b>　　發(fā)展歷程：</b></p>

22、<p>　　Dreamweaver1.0發(fā)布于1997年12月，由之前的Macromedia公司發(fā)布。</p><p>　　Dreamweaver2.0，發(fā)布于1998年12月。</p><p>　　Dreamweaver3.0，發(fā)布于1999年12月。</p><p>　　Dreamweaver3.0不足3M，是個經(jīng)典版本。無論是多破的機器，速度特快

23、，功能夠用。此時的Dreamweaver已經(jīng)是一個集網(wǎng)頁創(chuàng)作和站點管理兩大利器于一身的超重量級的創(chuàng)作工具。</p><p><b>　　功能介紹：</b></p><p>　　借助共享型用戶界面設(shè)計,在AdobeCreativeSuite4的不同組件之間更快、更明智地工作。使用工作區(qū)切換器可以從一個工作環(huán)境快速切換到下一個環(huán)境。</p><p>

24、;　　2.2 HTML語言簡介</p><p>　　HTML（Hyper Text Markup Language 超文本置標語言）是一種用來制作超文本文檔的簡單標記語言。用HTML編寫的超文本文檔稱為HTML文檔，它能獨立于各種操作系統(tǒng)平臺（如UNIX，WINDOWS等）。自1990年以來HTML就一直被用作World Wide Web上的信息表示語言，用于描述Homepage的格式設(shè)計和它與WWW上其它Hom

25、epage的連結(jié)信息。</p><p>　　HTML文檔（即Homepage的源文件）是一個放置了標記的ASCII文本文件，通常它帶有.html或.htm的文件擴展名。生成一個HTML文檔主要有以下三種途徑：</p><p>　　1、手工直接編寫（例如用你所喜愛的ASCII文本編輯器或其它HTML的編輯工具）。</p><p>　　2、通過某些格式轉(zhuǎn)換工具將現(xiàn)有的其

26、它格式文檔（如WORD文檔）轉(zhuǎn)換成HTML文檔。</p><p>　　3、由Web服務(wù)器（或稱HTTP 服務(wù)器）一方實時動態(tài)地生成。</p><p>　　HTML語言是通過利用各種標記（tags）來標識文檔的結(jié)構(gòu)以及標識超鏈（Hyperlink）的信息。雖然HTML語言描述了文檔的結(jié)構(gòu)格式，但并不能精確地定義文檔信息必須如何顯示和排列，而只是建議Web瀏覽器（如Mosiac，Netscap

27、e等）應(yīng)該如何顯示和排列這些信息，最終在用戶面前的顯示結(jié)果取決于Web瀏覽器本身的顯示風格及其對標記的解釋能力。這就是為什么同一文檔在不同的瀏覽器中展示的效果會不一樣。</p><p>　　目前HTML語言的版本是2.0，它是基于SGML（Standard Generalized Markup Language）標準廣義置標語言，是一套用來描述數(shù)字化文檔的結(jié)構(gòu)并管理其內(nèi)容的復(fù)雜的規(guī)范）中的一個子集演變而來的。雖然

28、下一版本的標準HTML3.0（也稱為HTML+）正在制訂之中，但其中某些部分的實驗性標準草案已被廣泛采用，大多優(yōu)秀的Web瀏覽器（如Netscape等）都能解釋HTML3.0中的部分新標記，因此在本章中介紹的一些HTML3.0新標記均已被多數(shù)瀏覽器所接受。</p><p>　　2.3 div+css簡介</p><p>　　HTML（Hyper Text Markup Language 超

29、文本置標語言）是一種用來制作超文本文檔的簡單標記語言。用HTML編寫的超文本文檔稱為HTML文檔，它能獨立于各種操作系統(tǒng)平臺（如UNIX，WINDOWS等）。自1990年以來HTML就一直被用作World Wide Web上的信息表示語言，用于描述Homepage的格式設(shè)計和它與WWW上其它Homepage的連結(jié)信息。</p><p>　　HTML文檔（即Homepage的源文件）是一個放置了標記的ASCII文本

30、文件，通常它帶有.html或.htm的文件擴展名。生成一個HTML文檔主要有以下三種途徑：</p><p>　　1、手工直接編寫（例如用你所喜愛的ASCII文本編輯器或其它HTML的編輯工具）。</p><p>　　2、通過某些格式轉(zhuǎn)換工具將現(xiàn)有的其它格式文檔（如WORD文檔）轉(zhuǎn)換成HTML文檔。</p><p>　　3、由Web服務(wù)器（或稱HTTP 服務(wù)器）一方實

31、時動態(tài)地生成。</p><p>　　HTML語言是通過利用各種標記（tags）來標識文檔的結(jié)構(gòu)以及標識超鏈（Hyperlink）的信息。雖然HTML語言描述了文檔的結(jié)構(gòu)格式，但并不能精確地定義文檔信息必須如何顯示和排列，而只是建議Web瀏覽器（如Mosiac，Netscape等）應(yīng)該如何顯示和排列這些信息，最終在用戶面前的顯示結(jié)果取決于Web瀏覽器本身的顯示風格及其對標記的解釋能力。這就是為什么同一文檔在不同的瀏

32、覽器中展示的效果會不一樣。</p><p>　　目前HTML語言的版本是2.0，它是基于SGML（Standard Generalized Markup Language）標準廣義置標語言，是一套用來描述數(shù)字化文檔的結(jié)構(gòu)并管理其內(nèi)容的復(fù)雜的規(guī)范）中的一個子集演變而來的。雖然下一版本的標準HTML3.0（也稱為HTML+）正在制訂之中，但其中某些部分的實驗性標準草案已被廣泛采用，大多優(yōu)秀的Web瀏覽器（如Netsc

33、ape等）都能解釋HTML3.0中的部分新標記，因此在本章中介紹的一些HTML3.0新標記均已被多數(shù)瀏覽器所接受。</p><p>　　2.4 Photoshop簡介</p><p>　　Adobe Photoshop是一個由Adobe Systems出品的專業(yè)圖像處理軟件。與該公司的其它軟件一樣，Photoshop適用于Mac OS及Microsoft Windows兩個操作系統(tǒng)，同時公

34、司也發(fā)布了Unix操作系統(tǒng)上的版本。Google也正在透過Wine資助Linux版Photoshop的研究。</p><p>　　Photoshop最初是由托馬斯·諾爾（Thomas Knoll）和約翰·諾爾（John Knoll）這對兄弟于1987年制作的，但直到1990年后，這個軟件才由Adobe公司首次發(fā)布。Photoshop最初用于處理那些在當時價格不菲的掃描儀掃描下來的圖像。<

35、/p><p><b>　　特性：</b></p><p>　　Photoshop主要處理以像素（Pixels）所構(gòu)成的數(shù)字圖像。利用其廣泛的編修與繪圖工具，可以更有效的進行圖片編輯工作。獨特的歷史紀錄浮動視窗和可編輯的圖層效果功能使用戶可以方便的測試效果。對各種濾鏡的支持更令使用者能夠輕松創(chuàng)造出各種奇幻的效果。目前，Photoshop也正在被更多的用于處理網(wǎng)絡(luò)圖片。Pho

36、toshop的幾個后續(xù)版本中捆綁了一個獨立的軟件ImageReady，加強了Photoshop對網(wǎng)絡(luò)圖像（主要是GIF圖像文件）的支持功能。而在CS3中ImageReady被Fireworks所代替。Photoshop CS3允許用戶更容易升級到最新的硬件平臺，支持蘋果的Intel為內(nèi)核的系統(tǒng)。</p><p>　　Photoshop被人們認為是最好的圖像處理軟件，但與著名的3D Studio Max一樣，昂貴的

37、價格使其難以普及。這也令Jasc Software公司的Paint Shop Pro，GIMP小組的GIMP和友立信息的Ulead PhotoImpact占領(lǐng)了相當?shù)氖袌龇蓊~。為了爭奪市場，Adobe發(fā)布了一個Photoshop的簡易版本Photoshop Elements。雖然它對很多功能都作了限定，但繼承了原軟件的多數(shù)優(yōu)秀功能，價格比Photoshop便宜不少。</p><p>　　Photoshop CS是

38、一款圖形、圖像編輯軟件，在網(wǎng)頁設(shè)計領(lǐng)域被廣泛得應(yīng)用。以下是其10大最新功能：</p><p>　　1、改進的文件瀏覽器</p><p>　　使用功能強大文件瀏覽器的可以快速預(yù)覽、標注和排序圖片；搜索或編輯圖像的數(shù)據(jù)元或關(guān)鍵詞；并且可以自動批量共享文件。</p><p><b>　　2、匹配顏色命令</b></p><p>

39、;　　可以迅速從一張圖片的顏色校正另外一張圖像的顏色。</p><p><b>　　3、直方圖調(diào)色板</b></p><p>　　隨時根據(jù)對圖像的調(diào)整更新直方圖調(diào)色板(Histogram Palette)。</p><p>　　4、陰影/加亮區(qū)修正</p><p>　　使用“陰影/加亮區(qū)修正(hadow/Highligh

40、t correction)”可以快速調(diào)整照片中曝光過渡或欠缺的區(qū)域。</p><p><b>　　5、沿路徑放置文本</b></p><p>　　可以像在Illustrator中一樣把文本沿著路徑放置，并且你還可以在Illustrator直接編輯文本。</p><p>　　6、支持數(shù)碼相機的raw模式</p><p>　

41、　支持多款數(shù)碼相機得raw模式，讓用戶可以得到更真實的圖像輸入。</p><p>　　7、全面支持16位圖像</p><p>　　可以在主要功能、層、比刷、文字、圖形等中精確的編輯、潤飾16位的圖像。</p><p>　　8、Layer Comps</p><p>　　可以在一個文件中保存不同層的合并效果，以便對各種效果進行快速察看。<

42、/p><p>　　9、輸入Flash文件</p><p>　　使用ImageReady可以創(chuàng)建flash矢量文件。</p><p><b>　　10、自定義快捷鍵</b></p><p>　　用戶可以按照自己的習慣定義Photoshop的快捷鍵。</p><p>　　第3章 網(wǎng)站整體設(shè)計</p&

43、gt;<p><b>　　3.1需求分析</b></p><p>　　如今，互連網(wǎng)對企業(yè)來說已經(jīng)不再是新鮮的事物了，大多數(shù)的企業(yè)都已經(jīng)建立了自己的網(wǎng)站。隨著互連網(wǎng)的快速發(fā)展，網(wǎng)路已成為人們生活的一部分。電子商務(wù)、網(wǎng)路行銷已不在只是被炒做的概念，人們對其的認識也在深入。不僅僅是大企業(yè)需要網(wǎng)站來開展電子商務(wù)，中小企業(yè)一樣也迫切需要自己的企業(yè)網(wǎng)站用以實現(xiàn)宣傳和聯(lián)系客戶等許多傳統(tǒng)媒介無

44、法完成的目標</p><p>　　3.2網(wǎng)站功能結(jié)構(gòu)圖</p><p>　　根據(jù)業(yè)務(wù)流程，需要將網(wǎng)站劃分為前臺、后臺和數(shù)據(jù)庫。前臺中，客戶在登錄網(wǎng)站主頁后即可鏈接查看到產(chǎn)品信息等，還可以給企業(yè)留言。數(shù)據(jù)庫將要作為網(wǎng)站后臺重要的組成部分，管理員的主要操作幾乎全部圍繞數(shù)據(jù)庫，最后將更新的數(shù)據(jù)要顯示給前臺網(wǎng)站總體結(jié)構(gòu)圖如圖</p><p>　　圖3-1 網(wǎng)站整體結(jié)構(gòu)圖&

45、lt;/p><p>　　由于中小型企業(yè)網(wǎng)站的目標重點在于展示企業(yè)的信息。因此系統(tǒng)的功能模塊相對單一，就是提供信息的顯示。前臺功能主要包括首頁、產(chǎn)品展示、新聞中心、技術(shù)討論、客戶留言這五個主要模塊；后臺包括：系統(tǒng)配置、公司簡介、產(chǎn)品管理、新聞管理、留言管理這五個主要模塊。各主要模塊包括幾個子模塊，如下：</p><p>　　(1)新聞公告：標題、公告時間、公告內(nèi)容。</p><

46、;p>　　(2)產(chǎn)品展示：產(chǎn)品名稱、產(chǎn)品介紹、產(chǎn)品特點、圖像檔、發(fā)布時間。</p><p>　　(3)客戶留言：姓名、性別、電話、通訊地址Email、主題、留言內(nèi)容。</p><p>　　3.3前臺功能模塊設(shè)計</p><p>　　容圖3-2 前臺功能結(jié)構(gòu)圖</p><p>　　網(wǎng)站前臺是面向網(wǎng)站訪問用戶的，通俗的說也就是給訪問網(wǎng)站的

47、人看的內(nèi)和頁面，網(wǎng)站前臺訪問可以瀏覽公開發(fā)布的內(nèi)容，如產(chǎn)品信息、公告信息、企業(yè)介紹、企業(yè)聯(lián)系方式、提交留言等操作，管理可以通過密碼進到后臺的網(wǎng)頁，來發(fā)布新聞、查看留言等操作。</p><p><b>　　主要功能模塊介紹</b></p><p><b>　?。?）首頁功能模塊</b></p><p>　　企業(yè)簡介，主要包括

48、企業(yè)背景、發(fā)展歷史、主要業(yè)績及組織結(jié)構(gòu)等，讓訪問者對企業(yè)的情況有一個概括的了解。</p><p><b>　?。?）產(chǎn)品展示</b></p><p>　　產(chǎn)品展示是指對產(chǎn)品進行詳細展示，包括規(guī)格，產(chǎn)品的款式顏色等所有產(chǎn)品詳細的信息。做到讓網(wǎng)站的產(chǎn)品展示能讓顧客更直觀的去了解網(wǎng)站上所展示的產(chǎn)品，讓顧客在看到產(chǎn)品的同時對產(chǎn)品的每一個信息都有一定的了解。</p>

49、<p><b>　　（3）新聞模塊</b></p><p>　　通過最新的新聞信息，發(fā)布企業(yè)動態(tài)信息，可以讓用戶了解公司的發(fā)展動向</p><p>　　加深對公司的印象，從而達到展示企業(yè)實力和形象的目的。也可以達到宣傳公司的目的。</p><p><b>　?。?）招聘界面</b></p>&l

50、t;p>　　公司在某一部門需要發(fā)展壯大,或者有員工離開時,可以在這里發(fā)布招聘信息,然后通過應(yīng)聘者打電話給公司,選擇其中合適的人員通知其到公司面試.</p><p><b>　?。?）客戶留言模塊</b></p><p>　　留言板是一個商務(wù)網(wǎng)站中不可缺少的組成部分，它可以增進用戶與網(wǎng)站之間的交流?？蛻袅粞苑答亴镜囊庖姾驮u價，根據(jù)客戶對公司的意見和評價，來修改

51、或是制定公司的發(fā)展方向。</p><p>　　第4章 網(wǎng)站各項功能的實現(xiàn)及效果分析</p><p>　　4.1網(wǎng)站功能的實現(xiàn)</p><p><b>　　首頁：</b></p><p><b>　　圖4-1 首頁</b></p><p><b>　　詳細制作過程：&

52、lt;/b></p><p>　　Title 如圖：</p><p><b>　　圖4-2 網(wǎng)站標題</b></p><p><b>　　<tr></b></p><p>　　<td width="1002" height="43"

53、background="images/index_01.jpg" style="background-repeat:no-repeat" valign="top"></p><p>　　<table width="100%" border="0" cellspacing="0" ce

54、llpadding="0"></p><p><b>　　<tr></b></p><p>　　<td height="43"><div style="margin-top:3px; margin-left:20px; color:#333333;">歡迎光臨鄭州公衛(wèi)

55、環(huán)?？萍加邢薰?lt;/div></td></p><p>　　<td height="43" align="right"><font color="#333333">今天是：<% response.Write year(date())&"年"&month(date()

56、)&"月"&day(date())&"日"&" "&WeekdayName(Weekday(date())) %></font></td></p><p><b>　　</tr></b></p><p><b>　　&

57、lt;/table></b></p><p><b>　　</td></b></p><p><b>　　</tr></b></p><p>　?。?）導(dǎo)航欄 如圖：</p><p><b>　　圖4-3 導(dǎo)航欄 </b></p

58、><p><b>　　<tr></b></p><p>　　<td height="40" align="center"><a href="index.asp" class="dh" style="font-size:14px;">網(wǎng)站首

59、頁</a></td></p><p>　　<td height="40" align="center"><img src="images/dhf.jpg" width="6" height="40" /></td></p><p>

60、　　<td height="40" align="center"><a href="about.asp?id=1" class="dh" style="font-size:14px;">公司簡介</a></td></p><p>　　<td height=&qu

61、ot;40" align="center"><img src="images/dhf.jpg" width="6" height="40" /></td></p><p>　　<td height="40" align="center"><

62、;a href="prolist.asp?bid=24" class="dh" style="font-size:14px;">產(chǎn)品展示</a></td></p><p>　　<td height="40" align="center"><img src="

63、images/dhf.jpg" width="6" height="40" /></td></p><p>　　<td height="40" align="center"><a href="newslist.asp?bid=20" class="dh&quo

64、t; style="font-size:14px;">行業(yè)資訊</a></td></p><p>　　<td height="40" align="center"><img src="images/dhf.jpg" width="6" height="40&

65、quot; /></td></p><p>　　<td height="40" align="center"><a href="newslist.asp?bid=28" class="dh" style="font-size:14px;">技術(shù)討論</a><

66、;/td></p><p>　　<td height="40" align="center"><img src="images/dhf.jpg" width="6" height="40" /></td></p><p>　　<td heigh

67、t="40" align="center"><a href="newslist.asp?bid=1" class="dh" style="font-size:14px;">新聞中心</a></td></p><p>　　<td height="40"

68、; align="center"><img src="images/dhf.jpg" width="6" height="40" /></td></p><p>　　<td height="40" align="center"><a href=&q

69、uot;feedback.asp" class="dh" style="font-size:14px;">客戶留言</a></td></p><p>　　<td height="40" align="center"><img src="images/dhf.jpg&q

70、uot; width="6" height="40" /></td></p><p>　　<td height="40" align="center"><a href="about.asp?id=85" class="dh" style="font-

71、size:14px;">聯(lián)系我們</a></td></p><p><b>　　</tr></b></p><p><b>　　…….略</b></p><p>　?。?）flash滾動功能</p><p>　　首頁菜單目錄下方的圖片滾動效果是通過

72、SCRIPT 腳本語言來實現(xiàn)的。如圖所示(三張圖進行滾動)：</p><p>　　圖4-4 flash滾動效果</p><p><b>　　………</b></p><p>　　<script language='javascript'> </p><p>　　linkarr = new Arr

73、ay();</p><p>　　picarr = new Array();</p><p>　　textarr = new Array();</p><p>　　var swf_width=1002;</p><p>　　var swf_height=342;</p><p>　　//文字顏色|文字位置|文字背景顏色|

74、文字背景透明度|按鍵文字顏色|按鍵默認顏色|按鍵當前顏色|自動播放時間|圖片過渡效果|是否顯示按鈕|打開方式</p><p>　　var configtg='0xffffff|0|0x3FA61F|5|0xffffff|0xC5DDBC|0x000033|2|3|1|_blank';</p><p>　　var files = "";</p>

75、<p>　　var links = "";</p><p>　　var texts = "";</p><p>　　//這里設(shè)置調(diào)用標記</p><p>　　linkarr[1] = "";</p><p>　　picarr[1] = "images/d1.

76、jpg";</p><p>　　textarr[1] = "";</p><p>　　linkarr[2] = "";</p><p>　　picarr[2] = "images/d2.jpg";</p><p>　　textarr[2] = "";&

77、lt;/p><p>　　linkarr[3] = "";</p><p>　　picarr[3] = "images/d3.jpg";</p><p>　　textarr[3] = "";</p><p>　　for(i=1;i<picarr.length;i++){</p

78、><p>　　if(files=="") files = picarr[i];</p><p>　　else files += "|"+picarr[i];</p><p><b>　　}</b></p><p>　　for(i=1;i<linkarr.length;i++){&

79、lt;/p><p>　　if(links=="") links = linkarr[i];</p><p>　　else links += "|"+linkarr[i];</p><p><b>　　}</b></p><p>　　for(i=1;i<textarr.length

80、;i++){</p><p>　　if(texts=="") texts = textarr[i];</p><p>　　else texts += "|"+textarr[i];</p><p><b>　　}</b></p><p>　　document.write('

81、<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" </p><p>　　codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="'

82、;+ swf_width +'" height="'+ swf_height +'">');</p><p>　　document.write('<param name="movie" value="images/bcastr3.swf"><param name="qua

83、lity" value="high">');</p><p>　　document.write('<param name="menu" value="false"><param name=wmode value="opaque">');</p><p&

84、gt;　　document.write('<param name="FlashVars" value="bcastr_file='+files+'&bcastr_link='+links+'&bcastr_title='+texts+'">');</p><p>　　document

85、.write('<embed src="images/bcastr3.swf" wmode="opaque" FlashVars="bcastr_file='+files+'&bcastr_link='+links+'&bcastr_title='+texts+'& menu="false&q

86、uot; quality="high" width="'+ swf_width +'" height="'+ swf_height +'" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashpl

87、ayer" />'); document.write('</object>'); </p><p><b>　　</script></b></p><p><b>　　底部 如圖：</b></p><p><b>　　圖4-5底部導(dǎo)航欄</b

88、></p><p>　?。ㄓ亚殒溄硬糠执a：）</p><p>　　<td width="1002" height="51" background="images/index_28.jpg" style="background-repeat:no-repeat" valign="top&q

89、uot;></p><p>　　<%call link()%></p><p><b>　　</td></b></p><p>　?。ü竞喗椴糠执a：（后面也是此方法））</p><p><b>　　<tr></b></p><p>

90、;　　<td width="164" height="174" background="images/index_30.jpg" style="background-repeat:no-repeat" valign="top"></p><p>　　<div style="margin-

91、left:50px; margin-top:30px;"></p><p>　　<div style="color:#333333; font-size:14px; font-weight:800; width:80px; margin-bottom:15px;">公司簡介</div></p><p>　　<div styl

92、e="color:#666666; width:80px; margin-top:11px;"><a href="about.asp?id=1&sid=1" class="a6">關(guān)于我們</a></div> </p><p>　　<div style="col

93、or:#666666; width:80px; margin-top:11px;"><a href="about.asp?id=24&sid=1" class="a6">企業(yè)文化</a></div> </p><p>　　<div style="color:#666666

94、; width:80px; margin-top:11px;"><a href="about.asp?id=81&sid=1" class="a6">發(fā)展愿景</a></div> </p><p>　　<div style="color:#666666; width:80

95、px; margin-top:11px;"><a href="about.asp?id=87&sid=1" class="a6">發(fā)展戰(zhàn)略</a></div> </p><p><b>　　</div></b></p><p>&

96、lt;b>　　</td></b></p><p>　?。ǖ撞繉?dǎo)航部分代碼）</p><p>　　<div style="margin-top:17px; color:#333333;"></p><p>　　<a href="index.asp">網(wǎng)站首頁</a>

97、;&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;<a href="about.asp">公司簡介</a>&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;<a h

98、ref="prolist.asp?bid=24">產(chǎn)品展示</a>&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;<a href="newslist.asp?bid=20">行業(yè)資訊</a>&nbsp;&nbsp;&nb

99、sp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;<a href="newslist.asp?bid=28">技術(shù)討論</p><p>　　</a>&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;&l

100、t;a href="newslist.asp?bid=1">新聞中心</a>&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;<a </p><p>　　href="feedback.asp">客戶留言</a>&n

101、bsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;<a href="about.asp?id=85">聯(lián)系我們</a></p><p>　　</div> </p><p>　?。?）客戶留言功能的實現(xiàn)</p&

102、gt;<p>　　<div style="margin-left:25px; line-height:20px; margin-top:10px; margin-right:15px; color:#333333"></p><p>　　<!--客戶留言 開始--></p><p><b>　　<div><

103、;/b></p><p>　　<table style="padding:5px;" border="0" cellpadding="0" cellspacing="0" width="100%" height="440" ></p><p><b

104、>　　<tr></b></p><p>　　<td valign="top" height="440" ></p><p>　　<table cellpadding="0" cellspacing="0" border="0" height=&

105、quot;500" width="100%"></p><p><b>　　<tr></b></p><p>　　<td height="10" colspan="3" style="line-height:30px;padding:10px 40px 20px 1

106、00px;"></td></p><p><b>　　</tr></b></p><p><b>　　<tr></b></p><p>　　<td width="15"></td></p><p>　　&

107、lt;td valign="top" ></p><p>　　<table width="600" > </p><p><b>　　</table></b></p><p>　　<form id=

108、"form1" name="form1" method="post" action="save.asp"></p><p>　　<table width="557" </p><p>　　height="407" align="center&quo

109、t; border="1" cellpadding="0" bordercolorlight="#c6bda2" bordercolordark="#FFFFFF" > </p><p><b>　　<tr&g

110、t;</b></p><p>　　<td width="183" height="30" align="center" >您的姓名：</td></p><p>　　<td width="367" height="30" >

111、 </p><p>　　&nbsp;<input type="text" name="Uname" class="input" id="Uname" style="border:1px #666666 solid" /></p&

112、gt;<p><b>　　</td></b></p><p><b>　　</tr></b></p><p><b>　　<tr></b></p><p>　　<td height="30" align="cente

113、r" >電話：</td></p><p>　　<td height="30" ></p><p>　　&nbsp;<input type="text" name="Uphone" class="input" id="Uphone" sty

114、le="border:1px #666666 solid" /></p><p><b>　　</td></b></p><p><b>　　</tr></b></p><p><b>　　<tr></b></p><p

115、>　　<td height="30" align="center" >QQ：</td></p><p>　　<td height="30" ></p><p>　　&nbsp;<input type="text" name="Uqq"

116、class="input" id="Uqq" style="border:1px #666666 solid" /></p><p><b>　　</td></b></p><p><b>　　</tr></b></p><p>　　

117、<tr> </p><p>　　<td height="30" align="center" >郵箱：</td></p><p>　　<td height="30" >

118、 </p><p>　　&nbsp;<input type="text" name="Uemail" class="input" id="Uemail" style="border:1px #666666 solid" /></p>

119、<p><b>　　</td></b></p><p><b>　　</tr></b></p><p><b>　　<tr></b></p><p>　　<td height="30" align="center&q

120、uot; >聯(lián)系地址：</td></p><p>　　<td height="30" ></p><p>　　&nbsp;<input type="text" name="Uaddress" class="input" id="Uaddress"

121、style="border:1px #666666 solid" /></p><p><b>　　</td></b></p><p><b>　　</tr></b></p><p><b>　　<tr></b></p>&l

122、t;p>　　<td height="30" align="center" >標題：</td></p><p>　　<td height="30" ></p><p>　　&nbsp;<input type="text" name="Utitle&

123、quot; class="input" id="Utitle" style="border:1px #666666 solid" /></p><p><b>　　</td></b></p><p><b>　　</tr></b></p>&l

124、t;p><b>　　<tr></b></p><p>　　<td height="30" align="center" >留言內(nèi)容：</td></p><p>　　<td height="30" ></p><p>　　&n

125、bsp;<textarea name="Ucontent" cols="40" rows="10" id="Ucontent" style="border:1px #666666 solid"></textarea></p><p><b>　　</td></

126、b></p><p>　　</tr> </p><p><b>　　<tr></b></p><p>　　<td height="30" >&nbsp;</td></p>

127、<p>　　<td height="30" ></p><p>　　<input name="button" type="submit" style="background-color:#999999" value=" 提 交 " />

128、 </p><p>　　&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</p><p>　　<input name="button2" type="reset" style="background-color:#999999" v

129、alue=" 重 置 " /></td></p><p><b>　　</tr></b></p><p><b>　　</table></b></p><p>　　</form></td></p><p>　　&l

130、t;td width="15"></td></p><p><b>　　</tr></b></p><p><b>　　</table></b></p><p><b>　　</td></b></p><p&

131、gt;　　</tr> </p><p><b>　　</table></b></p><p><b>　　</div></b></p><p>　　<!--客戶留言 結(jié)束--></p><p><b>　　</div&

132、gt;</b></p><p>　?。?）產(chǎn)品管理功能的實現(xiàn)</p><p>　　產(chǎn)品管理:分為圖片模式和滾動瀏覽模式。</p><p><b>　　1、列表模式：</b></p><p><b>　　部分代碼：</b></p><p>　　<div s

133、tyle="margin-left:15px; line-height:20px; margin-top:10px; </p><p>　　margin-right:15px; color:#333333"></p><p>　　<table style="padding:5px;" border="0" c

134、ellpadding="0" cellspacing="0" width="100%" height="440" > </p><p><b>　　<tr></b></p><p>　　<td valign="to

135、p" height="440" ></p><p><b>　　<div></b></p><p>　　<table cellpadding="0" cellspacing="0" width="700" align="center"

136、 height="100%" ></p><p><b>　　<%</b></p><p><b>　　num=12</b></p><p><b>　　set </b></p><p>　　rs=server.CreateObject(&qu

137、ot;adodb.recordset")</p><p>　　strsql="select * from products where 1=1 "</p><p>　　if bid<>0 then</p><p>　　strsql=strsql & " and pro_bigcid="&b

138、id&" "</p><p><b>　　end if</b></p><p>　　if sid<>0 then</p><p>　　strsql=strsql & " and pro_smallcid="&sid&" "</p>