1、河南經(jīng)貿(mào)職業(yè)學(xué)院畢業(yè)論文網(wǎng)頁設(shè)計與制作論文作者：_王聰_專 業(yè)：_計算機(jī)多媒體技術(shù)_學(xué) 號：_130603801237_班 級：_13多媒體_指導(dǎo)教師:_ 王艷霞_答辯委員會主席_ 評閱人_論文答辯日期_獨(dú)創(chuàng)性聲明 本人聲明所呈交的畢業(yè)論文是我個人在導(dǎo)師指導(dǎo)下進(jìn)行的研究工作及取得的成果。盡我所知，除文中已經(jīng)標(biāo)明引用的內(nèi)容外，本論文不包含任何其他個人或集體已經(jīng)發(fā)表或撰寫過的研究成果。對本文的研究做出貢獻(xiàn)的個人和集體，均已在文中以明確方式標(biāo)明。本人完全意識到本聲明的法律結(jié)果由本人承擔(dān)。論文作者簽名： 日期： 年 月 日畢業(yè)論文版權(quán)使用授權(quán)書 本畢業(yè)論文作者完全了解學(xué)校有關(guān)保留、使用畢業(yè)論文的規(guī)定，

2、即：學(xué)校有權(quán)保留并向有關(guān)部門或機(jī)構(gòu)送交論文的復(fù)印件和電子版，允許論文被查閱和借閱。本人授權(quán)河南經(jīng)貿(mào)職業(yè)學(xué)院要以將本論文的全部或部分內(nèi)容編入有關(guān)數(shù)據(jù)庫進(jìn)行檢索，可以采用影印、縮印或掃描等復(fù)制手段保存和匯編本論文。 保密，在_年解密后適用本授權(quán)書. 本論文屬于 不保密。（請在以上方框內(nèi)打“”）畢業(yè)論文作者簽名： 指導(dǎo)教師簽名：日期： 年 月 日 日期： 年 月 日摘要隨著網(wǎng)絡(luò)技術(shù)的迅猛發(fā)展, 當(dāng)代企業(yè)紛紛建立自己的網(wǎng)站,借助于互聯(lián)網(wǎng)擴(kuò)大自己的影響、推廣自己的產(chǎn)品,同時通過互聯(lián)網(wǎng)快速的信息傳遞加速自身的發(fā)展。因此我選擇將公司網(wǎng)頁的設(shè)計與制作作為我的項目。本論文所研究的是如何建設(shè)一個符合大眾化要求的企

3、業(yè)網(wǎng)站及前段版面設(shè)計的過程，前端的開發(fā)中，在頁面的布局時，HTML將元素進(jìn)行定義，div+css對展示的元素進(jìn)行定位，再通過JavaScript實現(xiàn)相應(yīng)的效果和交互。雖然表面看起來這些很簡單，但這里面需要掌握的東西絕對不會少。在進(jìn)行開發(fā)前，需要對這些概念弄清楚，弄明白，這樣在開發(fā)的過程中才會得心應(yīng)手通過對企業(yè)需求的了解和對其他企業(yè)網(wǎng)站的參考，最終成功完成了一個虛擬的企業(yè)網(wǎng)站。通過這次建站的過程不僅讓我對前段div+css有了更深的了解，更讓我熟練的運(yùn)用了Photoshop這個軟件，不過還有很大的提升空間，我會繼續(xù)努力。關(guān)鍵詞：網(wǎng)站設(shè)計，HTML，div+css，dreamweaver目 錄摘要

4、III目錄IV第1章 緒論V1.1 概述6第2章 企業(yè)網(wǎng)站開發(fā)相關(guān)技術(shù)及工具72.1 Dreamweaver簡介72.2 HTML語言簡介82.3 div+css簡介92.4 Photoshop簡介10第3章 網(wǎng)站整體設(shè)計123.1需求分析123.2網(wǎng)站功能結(jié)構(gòu)圖123.3前臺功能模塊設(shè)計13第4章 網(wǎng)站各項功能的實現(xiàn)及效果分析154.1網(wǎng)站功能的實現(xiàn)164.2前后臺效果分析16第五章 總結(jié)36參考文獻(xiàn)37致謝37第1章 緒論1.1 概述現(xiàn)在網(wǎng)絡(luò)的發(fā)展已呈現(xiàn)商業(yè)化、全民化、全球化的趨勢。目前，幾乎世界上所有的公司都在利用網(wǎng)絡(luò)傳遞商業(yè)信息，進(jìn)行商業(yè)活動，從宣傳企業(yè)、發(fā)布廣告、招聘雇員、傳遞商業(yè)檔

5、乃至拓展市場、網(wǎng)上銷售等，無所不能。如今網(wǎng)絡(luò)已成為企業(yè)進(jìn)行競爭的戰(zhàn)略手段。企業(yè)經(jīng)營的多元化拓展，企業(yè)規(guī)模的進(jìn)一步擴(kuò)大，對于企業(yè)的管理、業(yè)務(wù)擴(kuò)展、企業(yè)品牌形象等提供了更高的要求。在以資訊技術(shù)為支撐的新經(jīng)濟(jì)條件下，越來越多的企業(yè)利用起網(wǎng)絡(luò)這個有效的工具。網(wǎng)站早已由論證階段進(jìn)入了實質(zhì)階段，尤其為企業(yè)提供一個展示自己的舞臺、為消費(fèi)者創(chuàng)造一個了解企業(yè)的捷徑。公司可以通過建立商業(yè)平臺，實行全天候銷售服務(wù)，借助網(wǎng)絡(luò)推廣企業(yè)的形象、宣傳企業(yè)的產(chǎn)品、發(fā)布公司新聞，同時通過信息反饋使公司更加了解顧客的心理和需求，網(wǎng)站虛擬公司與實體公司的經(jīng)營運(yùn)作有機(jī)的結(jié)合，將會有利于公司產(chǎn)品銷售管道的拓展，并節(jié)省大量的廣告宣傳和經(jīng)

6、營運(yùn)營成本，更好地把握商機(jī)。隨著全球信息網(wǎng)絡(luò)的發(fā)展，Internet在世界上已不僅僅是一種技術(shù)，更重要的是它已成為一種新的經(jīng)營模式。在新經(jīng)濟(jì)條件下，商業(yè)規(guī)則已經(jīng)發(fā)生了一些改變，電子商務(wù)對企業(yè)的基本構(gòu)架在速度和效率上提出了更高的要求。電子商務(wù)的環(huán)境和競爭狀況變化如此之快，網(wǎng)上商品交易系統(tǒng)及售后服務(wù)系統(tǒng)，該系統(tǒng)提高了社會資源利用率，同時也為個人商品交易提供了方面，所以，企業(yè)建立網(wǎng)站的意義如下:一、擁有企業(yè)自己的域名，建立企業(yè)自己的網(wǎng)站，樹立企業(yè)在科技信息時代的完美形象。作為第四媒體的互聯(lián)網(wǎng)，其特點(diǎn)就是可以跨越時空，正常情況下， 網(wǎng)站無時無刻 不在工作通過企業(yè)的網(wǎng)站，用戶可以跨越時空了解企業(yè)，利用多

7、媒體技術(shù)，企業(yè)可以 向用戶展示產(chǎn)品、技術(shù)、經(jīng)營理念、企業(yè)文化、企業(yè)形象，樹立現(xiàn)代企業(yè)形象，增值 企業(yè)無形資產(chǎn)。 二、宣傳企業(yè)，創(chuàng)造銷售機(jī)會據(jù)調(diào)查，有超過30%的人是通過上網(wǎng)查詢企業(yè)的電話和地址的，這一比例和通過114查詢的比例相接近，可見企業(yè)網(wǎng)站已成為許多人首次接觸企業(yè)、了解相關(guān)信息的選擇。 三、加強(qiáng)客戶溝通宣傳企業(yè)產(chǎn)品企業(yè)可以通過網(wǎng)站建立與客戶溝通的便捷渠道，全面展示企業(yè)的所有產(chǎn)品。網(wǎng)絡(luò)科技足以令您的產(chǎn)品與品牌形象更加立體地呈現(xiàn)在用戶面前，就算企業(yè)僅僅把網(wǎng)站當(dāng)成電子宣傳冊來使用，也較傳統(tǒng)的宣傳模式更加的多姿多彩、更加地易于發(fā)布與傳播、更加的經(jīng)濟(jì)與環(huán)保。 四、豐富營銷手段，擴(kuò)大產(chǎn)品銷售渠道企業(yè)

8、網(wǎng)站可以滿足一部分客戶網(wǎng)上查詢與采購的需要，抓住網(wǎng)絡(luò)商機(jī)。企業(yè)通過網(wǎng)站可以開展電子營銷。首先，電子營銷作為傳統(tǒng)營銷的補(bǔ)充；其次， 電子營銷可以拓展新的空間，增加銷售渠道，接觸更大的消費(fèi)群體，獲得更多的新顧 客，擴(kuò)大市場；再次，電子營銷可以減少環(huán)節(jié)，減少人員，節(jié)約費(fèi)用，降低成本，有利于提高營銷效率。 五、有利于了解顧客的意見，掌握顧客的需求在不干擾顧客正常工作和生活的條件下，企業(yè)通過網(wǎng)站上的調(diào)查表、留言薄、定 制服務(wù)以及E-MAIL可以傾聽顧客的意見，了解顧客的心聲，加強(qiáng)企業(yè)與顧客間的聯(lián)系 建立良好的顧客關(guān)系。六、有利于改善服務(wù)，提高企業(yè)服務(wù)質(zhì)量利用網(wǎng)站，通過電子溝通方式，企業(yè)開展的在線服務(wù)是傳

9、統(tǒng)的溝通方式（如，郵 件、電話、傳真等）所無比擬的，在線服務(wù)能夠更加及時準(zhǔn)確地掌握用戶的需求，通過網(wǎng)站的交互式服務(wù)使得被動提供和主動獲得統(tǒng)一起來，從而實現(xiàn)售前、售中、售后的全過程和全方位的服務(wù)。我們所處的時代是高度信息化的互聯(lián)網(wǎng)時代，互聯(lián)網(wǎng)正在滲透到我們生活中的方方面面，并且在以十倍甚至百倍的速度提高著我們的工作效率?；ヂ?lián)網(wǎng)的發(fā)展帶來了一場規(guī)?？涨暗男袠I(yè)革命，他不僅改變了許多傳統(tǒng)行業(yè)的運(yùn)作模式，同時也產(chǎn)生了許多新的行業(yè)，并且可以重新排定行業(yè)內(nèi)各個企業(yè)的地位?？梢哉f互聯(lián)網(wǎng)時代是一個資源和財富再分配的時代?；ヂ?lián)網(wǎng)絡(luò)真正的內(nèi)涵在于其內(nèi)容的豐富性，幾乎無所不包。對于一個企業(yè)來說，其具有網(wǎng)絡(luò)溝通能力的標(biāo)

10、志是公司擁有自己的獨(dú)立網(wǎng)站第2章 企業(yè)網(wǎng)站開發(fā)相關(guān)技術(shù)及工具2.1 Dreamweaver簡介Adobe Dreamweaver，簡稱“DW”，中文名稱 夢想編織者，是美國MACROMEDIA公司開發(fā)的集網(wǎng)頁制作和管理網(wǎng)站于一身的所見即所得網(wǎng)頁編輯器，DW是第一套針對專業(yè)網(wǎng)頁設(shè)計師特別發(fā)展的視覺化網(wǎng)頁開發(fā)工具，利用它可以輕而易舉地制作出跨越平臺限制和跨越瀏覽器限制的充滿動感的網(wǎng)頁。Macromedia公司成立于1992年，2005年被Adobe公司收購。Adobe Dreamweaver使用所見即所得的接口，亦有HTML（標(biāo)準(zhǔn)通用標(biāo)記語言下的一個應(yīng)用）編輯的功能。它有Mac和Windows系統(tǒng)

11、的版本。Macromedia被Adobe收購后，Adobe也開始計劃開發(fā)Linux版本的Dreamweaver了。 Dreamweaver自MX版本開始，使用了Opera的排版引擎Presto 作為網(wǎng)頁預(yù)覽Dreamweaver是一個功能強(qiáng)大的網(wǎng)頁設(shè)計工具，有著方便實用的工具和所見即所得的排版功能，見面十分友好，使用方便。在不需要掌握HTML語言的情況下，即可利用其強(qiáng)大的功能開發(fā)出專業(yè)的網(wǎng)頁。Dreamweaver也是一個方便的編程工具，可以方便地編寫ASP、PHP、JSP代碼，軟件的自動提示填充功能和代碼染色功能可以有效地幫助用戶編寫和調(diào)試各種代碼。它集網(wǎng)頁設(shè)計、網(wǎng)站開發(fā)和站點(diǎn)管理功能于一身

12、，具有可視化、支持多平臺和跨瀏覽器的特性，是目前網(wǎng)站設(shè)計、開發(fā)、制作的首選工具。借助于Dreamweaver可以快速方便地開發(fā)出各種動態(tài)或靜態(tài)網(wǎng)站。發(fā)展歷程：Dreamweaver1.0發(fā)布于1997年12月，由之前的Macromedia公司發(fā)布。Dreamweaver2.0，發(fā)布于1998年12月。Dreamweaver3.0，發(fā)布于1999年12月。Dreamweaver3.0不足3M，是個經(jīng)典版本。無論是多破的機(jī)器，速度特快，功能夠用。此時的Dreamweaver已經(jīng)是一個集網(wǎng)頁創(chuàng)作和站點(diǎn)管理兩大利器于一身的超重量級的創(chuàng)作工具。功能介紹：借助共享型用戶界面設(shè)計,在AdobeCreativ

13、eSuite4的不同組件之間更快、更明智地工作。使用工作區(qū)切換器可以從一個工作環(huán)境快速切換到下一個環(huán)境。2.2 HTML語言簡介HTML（Hyper Text Markup Language 超文本置標(biāo)語言）是一種用來制作超文本文檔的簡單標(biāo)記語言。用HTML編寫的超文本文檔稱為HTML文檔，它能獨(dú)立于各種操作系統(tǒng)平臺（如UNIX，WINDOWS等）。自1990年以來HTML就一直被用作World Wide Web上的信息表示語言，用于描述Homepage的格式設(shè)計和它與WWW上其它Homepage的連結(jié)信息。HTML文檔（即Homepage的源文件）是一個放置了標(biāo)記的ASCII文本文件，通常它

14、帶有.html或.htm的文件擴(kuò)展名。生成一個HTML文檔主要有以下三種途徑：1、手工直接編寫（例如用你所喜愛的ASCII文本編輯器或其它HTML的編輯工具）。2、通過某些格式轉(zhuǎn)換工具將現(xiàn)有的其它格式文檔（如WORD文檔）轉(zhuǎn)換成HTML文檔。3、由Web服務(wù)器（或稱HTTP 服務(wù)器）一方實時動態(tài)地生成。HTML語言是通過利用各種標(biāo)記（tags）來標(biāo)識文檔的結(jié)構(gòu)以及標(biāo)識超鏈（Hyperlink）的信息。雖然HTML語言描述了文檔的結(jié)構(gòu)格式，但并不能精確地定義文檔信息必須如何顯示和排列，而只是建議Web瀏覽器（如Mosiac，Netscape等）應(yīng)該如何顯示和排列這些信息，最終在用戶面前的顯示結(jié)果

15、取決于Web瀏覽器本身的顯示風(fēng)格及其對標(biāo)記的解釋能力。這就是為什么同一文檔在不同的瀏覽器中展示的效果會不一樣。目前HTML語言的版本是2.0，它是基于SGML（Standard Generalized Markup Language）標(biāo)準(zhǔn)廣義置標(biāo)語言，是一套用來描述數(shù)字化文檔的結(jié)構(gòu)并管理其內(nèi)容的復(fù)雜的規(guī)范）中的一個子集演變而來的。雖然下一版本的標(biāo)準(zhǔn)HTML3.0（也稱為HTML+）正在制訂之中，但其中某些部分的實驗性標(biāo)準(zhǔn)草案已被廣泛采用，大多優(yōu)秀的Web瀏覽器（如Netscape等）都能解釋HTML3.0中的部分新標(biāo)記，因此在本章中介紹的一些HTML3.0新標(biāo)記均已被多數(shù)瀏覽器所接受。 2.3

16、 div+css簡介HTML（Hyper Text Markup Language 超文本置標(biāo)語言）是一種用來制作超文本文檔的簡單標(biāo)記語言。用HTML編寫的超文本文檔稱為HTML文檔，它能獨(dú)立于各種操作系統(tǒng)平臺（如UNIX，WINDOWS等）。自1990年以來HTML就一直被用作World Wide Web上的信息表示語言，用于描述Homepage的格式設(shè)計和它與WWW上其它Homepage的連結(jié)信息。HTML文檔（即Homepage的源文件）是一個放置了標(biāo)記的ASCII文本文件，通常它帶有.html或.htm的文件擴(kuò)展名。生成一個HTML文檔主要有以下三種途徑：1、手工直接編寫（例如用你所喜

17、愛的ASCII文本編輯器或其它HTML的編輯工具）。2、通過某些格式轉(zhuǎn)換工具將現(xiàn)有的其它格式文檔（如WORD文檔）轉(zhuǎn)換成HTML文檔。3、由Web服務(wù)器（或稱HTTP 服務(wù)器）一方實時動態(tài)地生成。HTML語言是通過利用各種標(biāo)記（tags）來標(biāo)識文檔的結(jié)構(gòu)以及標(biāo)識超鏈（Hyperlink）的信息。雖然HTML語言描述了文檔的結(jié)構(gòu)格式，但并不能精確地定義文檔信息必須如何顯示和排列，而只是建議Web瀏覽器（如Mosiac，Netscape等）應(yīng)該如何顯示和排列這些信息，最終在用戶面前的顯示結(jié)果取決于Web瀏覽器本身的顯示風(fēng)格及其對標(biāo)記的解釋能力。這就是為什么同一文檔在不同的瀏覽器中展示的效果會不一樣

18、。目前HTML語言的版本是2.0，它是基于SGML（Standard Generalized Markup Language）標(biāo)準(zhǔn)廣義置標(biāo)語言，是一套用來描述數(shù)字化文檔的結(jié)構(gòu)并管理其內(nèi)容的復(fù)雜的規(guī)范）中的一個子集演變而來的。雖然下一版本的標(biāo)準(zhǔn)HTML3.0（也稱為HTML+）正在制訂之中，但其中某些部分的實驗性標(biāo)準(zhǔn)草案已被廣泛采用，大多優(yōu)秀的Web瀏覽器（如Netscape等）都能解釋HTML3.0中的部分新標(biāo)記，因此在本章中介紹的一些HTML3.0新標(biāo)記均已被多數(shù)瀏覽器所接受。2.4 Photoshop簡介Adobe Photoshop是一個由Adobe Systems出品的專業(yè)圖像處理軟件

19、。與該公司的其它軟件一樣，Photoshop適用于Mac OS及Microsoft Windows兩個操作系統(tǒng)，同時公司也發(fā)布了Unix操作系統(tǒng)上的版本。Google也正在透過Wine資助Linux版Photoshop的研究。Photoshop最初是由托馬斯諾爾（Thomas Knoll）和約翰諾爾（John Knoll）這對兄弟于1987年制作的，但直到1990年后，這個軟件才由Adobe公司首次發(fā)布。Photoshop最初用于處理那些在當(dāng)時價格不菲的掃描儀掃描下來的圖像。特性：Photoshop主要處理以像素（Pixels）所構(gòu)成的數(shù)字圖像。利用其廣泛的編修與繪圖工具，可以更有效的進(jìn)行圖片

20、編輯工作。獨(dú)特的歷史紀(jì)錄浮動視窗和可編輯的圖層效果功能使用戶可以方便的測試效果。對各種濾鏡的支持更令使用者能夠輕松創(chuàng)造出各種奇幻的效果。目前，Photoshop也正在被更多的用于處理網(wǎng)絡(luò)圖片。Photoshop的幾個后續(xù)版本中捆綁了一個獨(dú)立的軟件ImageReady，加強(qiáng)了Photoshop對網(wǎng)絡(luò)圖像（主要是GIF圖像文件）的支持功能。而在CS3中ImageReady被Fireworks所代替。Photoshop CS3允許用戶更容易升級到最新的硬件平臺，支持蘋果的Intel為內(nèi)核的系統(tǒng)。Photoshop被人們認(rèn)為是最好的圖像處理軟件，但與著名的3D Studio Max一樣，昂貴的價格使其

21、難以普及。這也令Jasc Software公司的Paint Shop Pro，GIMP小組的GIMP和友立信息的Ulead PhotoImpact占領(lǐng)了相當(dāng)?shù)氖袌龇蓊~。為了爭奪市場，Adobe發(fā)布了一個Photoshop的簡易版本Photoshop Elements。雖然它對很多功能都作了限定，但繼承了原軟件的多數(shù)優(yōu)秀功能，價格比Photoshop便宜不少。Photoshop CS是一款圖形、圖像編輯軟件，在網(wǎng)頁設(shè)計領(lǐng)域被廣泛得應(yīng)用。以下是其10大最新功能：1、改進(jìn)的文件瀏覽器使用功能強(qiáng)大文件瀏覽器的可以快速預(yù)覽、標(biāo)注和排序圖片；搜索或編輯圖像的數(shù)據(jù)元或關(guān)鍵詞；并且可以自動批量共享文件。2、匹

22、配顏色命令可以迅速從一張圖片的顏色校正另外一張圖像的顏色。3、直方圖調(diào)色板隨時根據(jù)對圖像的調(diào)整更新直方圖調(diào)色板(Histogram Palette)。4、陰影/加亮區(qū)修正使用“陰影/加亮區(qū)修正(hadow/Highlight correction)”可以快速調(diào)整照片中曝光過渡或欠缺的區(qū)域。5、沿路徑放置文本可以像在Illustrator中一樣把文本沿著路徑放置，并且你還可以在Illustrator直接編輯文本。6、支持?jǐn)?shù)碼相機(jī)的raw模式支持多款數(shù)碼相機(jī)得raw模式，讓用戶可以得到更真實的圖像輸入。7、全面支持16位圖像可以在主要功能、層、比刷、文字、圖形等中精確的編輯、潤飾16位的圖像。8、

23、Layer Comps可以在一個文件中保存不同層的合并效果，以便對各種效果進(jìn)行快速察看。9、輸入Flash文件使用ImageReady可以創(chuàng)建flash矢量文件。10、自定義快捷鍵用戶可以按照自己的習(xí)慣定義Photoshop的快捷鍵。第3章 網(wǎng)站整體設(shè)計3.1需求分析如今，互連網(wǎng)對企業(yè)來說已經(jīng)不再是新鮮的事物了，大多數(shù)的企業(yè)都已經(jīng)建立了自己的網(wǎng)站。隨著互連網(wǎng)的快速發(fā)展，網(wǎng)路已成為人們生活的一部分。電子商務(wù)、網(wǎng)路行銷已不在只是被炒做的概念，人們對其的認(rèn)識也在深入。不僅僅是大企業(yè)需要網(wǎng)站來開展電子商務(wù)，中小企業(yè)一樣也迫切需要自己的企業(yè)網(wǎng)站用以實現(xiàn)宣傳和聯(lián)系客戶等許多傳統(tǒng)媒介無法完成的目標(biāo)3.2網(wǎng)站

24、功能結(jié)構(gòu)圖根據(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)圖如圖首 頁聯(lián)系我們客戶留言新聞中心產(chǎn)品展示公司簡介戶客臺前系統(tǒng)設(shè)置單頁管理產(chǎn)品管理新聞管理理管臺后留言管理圖3-1 網(wǎng)站整體結(jié)構(gòu)圖由于中小型企業(yè)網(wǎng)站的目標(biāo)重點(diǎn)在于展示企業(yè)的信息。因此系統(tǒng)的功能模塊相對單一，就是提供信息的顯示。前臺功能主要包括首頁、產(chǎn)品展示、新聞中心、技術(shù)討論、客戶留言這五個主要模塊；后臺包括：系統(tǒng)配置、公司簡介、產(chǎn)品管理、新聞管理、

25、留言管理這五個主要模塊。各主要模塊包括幾個子模塊，如下：(1)新聞公告：標(biāo)題、公告時間、公告內(nèi)容。(2)產(chǎn)品展示：產(chǎn)品名稱、產(chǎn)品介紹、產(chǎn)品特點(diǎn)、圖像檔、發(fā)布時間。(3)客戶留言：姓名、性別、電話、通訊地址Email、主題、留言內(nèi)容。3.3前臺功能模塊設(shè)計首頁公司簡介產(chǎn)品展示行業(yè)資訊客戶留言聯(lián)系我們新聞中心容圖3-2 前臺功能結(jié)構(gòu)圖網(wǎng)站前臺是面向網(wǎng)站訪問用戶的，通俗的說也就是給訪問網(wǎng)站的人看的內(nèi)和頁面，網(wǎng)站前臺訪問可以瀏覽公開發(fā)布的內(nèi)容，如產(chǎn)品信息、公告信息、企業(yè)介紹、企業(yè)聯(lián)系方式、提交留言等操作，管理可以通過密碼進(jìn)到后臺的網(wǎng)頁，來發(fā)布新聞、查看留言等操作。主要功能模塊介紹（1）首頁功能模塊 企

26、業(yè)簡介，主要包括企業(yè)背景、發(fā)展歷史、主要業(yè)績及組織結(jié)構(gòu)等，讓訪問者對企業(yè)的情況有一個概括的了解。（2）產(chǎn)品展示產(chǎn)品展示是指對產(chǎn)品進(jìn)行詳細(xì)展示，包括規(guī)格，產(chǎn)品的款式顏色等所有產(chǎn)品詳細(xì)的信息。做到讓網(wǎng)站的產(chǎn)品展示能讓顧客更直觀的去了解網(wǎng)站上所展示的產(chǎn)品，讓顧客在看到產(chǎn)品的同時對產(chǎn)品的每一個信息都有一定的了解。（3）新聞模塊通過最新的新聞信息，發(fā)布企業(yè)動態(tài)信息，可以讓用戶了解公司的發(fā)展動向加深對公司的印象，從而達(dá)到展示企業(yè)實力和形象的目的。也可以達(dá)到宣傳公司的目的。（4）招聘界面公司在某一部門需要發(fā)展壯大,或者有員工離開時,可以在這里發(fā)布招聘信息,然后通過應(yīng)聘者打電話給公司,選擇其中合適的人員通知其

27、到公司面試.（5）客戶留言模塊 留言板是一個商務(wù)網(wǎng)站中不可缺少的組成部分，它可以增進(jìn)用戶與網(wǎng)站之間的交流?？蛻袅粞苑答亴镜囊庖姾驮u價，根據(jù)客戶對公司的意見和評價，來修改或是制定公司的發(fā)展方向。第4章 網(wǎng)站各項功能的實現(xiàn)及效果分析4.1網(wǎng)站功能的實現(xiàn)首頁： 圖4-1 首頁詳細(xì)制作過程：（1） Title 如圖： 圖4-2 網(wǎng)站標(biāo)題 歡迎光臨鄭州公衛(wèi)環(huán)?？萍加邢薰窘裉焓牵?（2）導(dǎo)航欄 如圖：圖4-3 導(dǎo)航欄 網(wǎng)站首頁 公司簡介 產(chǎn)品展示 行業(yè)資訊 技術(shù)討論 新聞中心 客戶留言 聯(lián)系我們 .略（3）flash滾動功能首頁菜單目錄下方的圖片滾動效果是通過SCRIPT 腳本語言來實現(xiàn)的。如圖所示

28、(三張圖進(jìn)行滾動)： 圖4-4 flash滾動效果 linkarr = new Array();picarr = new Array();textarr = new Array();var swf_width=1002;var swf_height=342;/文字顏色|文字位置|文字背景顏色|文字背景透明度|按鍵文字顏色|按鍵默認(rèn)顏色|按鍵當(dāng)前顏色|自動播放時間|圖片過渡效果|是否顯示按鈕|打開方式var configtg=0xffffff|0|0x3FA61F|5|0xffffff|0xC5DDBC|0x000033|2|3|1|_blank;var files = ;var links =

29、 ;var texts = ;/這里設(shè)置調(diào)用標(biāo)記linkarr1 = ;picarr1 = images/d1.jpg;textarr1 = ;linkarr2 = ;picarr2 = images/d2.jpg;textarr2 = ;linkarr3 = ;picarr3 = images/d3.jpg;textarr3 = ;for(i=1;ipicarr.length;i+)if(files=) files = picarri;else files += |+picarri;for(i=1;ilinkarr.length;i+)if(links=) links = linkarri;

30、else links += |+linkarri;for(i=1;itextarr.length;i+)if(texts=) texts = textarri;else texts += |+textarri;document.write();document.write();document.write();document.write();document.write(); document.write(); （1） 底部 如圖：圖4-5底部導(dǎo)航欄（友情鏈接部分代碼：） （公司簡介部分代碼：（后面也是此方法） 公司簡介 關(guān)于我們 企業(yè)文化 發(fā)展愿景 發(fā)展戰(zhàn)略 （底部導(dǎo)航部分代碼）網(wǎng)站首頁    |    公司