小型企業(yè)網(wǎng)站設(shè)計(jì)

1、作品制作說明課題小型企業(yè)網(wǎng)站設(shè)計(jì)學(xué) 院電子信息工程學(xué)院專業(yè)（方向）計(jì)算機(jī)應(yīng)用技術(shù)專業(yè)（信息管理方向）班 級(jí)微機(jī)094學(xué) 號(hào)姓 名完成日期2013年12月9日指導(dǎo)教師 小型企業(yè)網(wǎng)站設(shè)計(jì)作品簡(jiǎn)介21世紀(jì)將是電子商務(wù)飛速發(fā)展的時(shí)代，越來越多的企業(yè)建立了自己的網(wǎng)站，越來越多的人開始習(xí)慣從互聯(lián)網(wǎng)上獲取各種各樣的信息，尤其是利用互聯(lián)網(wǎng)來尋覓各種商業(yè)機(jī)會(huì)早已成為眾多商業(yè)贏家的首選。網(wǎng)絡(luò)可以給企業(yè)不分地域，不分國(guó)別的大量客戶，帶來無限商機(jī)，為了獲得本行業(yè)的領(lǐng)先地位，抓住不斷涌現(xiàn)的機(jī)會(huì)，企業(yè)建立一個(gè)具有特色的、集多功能為一體的企業(yè)網(wǎng)站就顯得十分必要了。本網(wǎng)站通過互聯(lián)網(wǎng)向社會(huì)展示自己的網(wǎng)站，從而吸引投資者前來投資

2、，擴(kuò)大企業(yè)品牌知名度，增加企業(yè)的綜合競(jìng)爭(zhēng)力，從而獲得更多的商業(yè)利潤(rùn)。本網(wǎng)站主要由首頁、企業(yè)介紹、產(chǎn)品展示、新聞中心、家紡加盟、人才招聘、聯(lián)系我們七大模塊組成。首頁主要展示了企業(yè)的情況：新聞中心，產(chǎn)品展示等，以黑色作為企業(yè)網(wǎng)站的背景色，顯得企業(yè)成熟穩(wěn)重，值得投資者信賴，企業(yè)logo由英文“bluesky”和中文組成“藍(lán)天家紡”，以藍(lán)色為底色，顯示了藍(lán)天家紡擁有如天空廣闊般的胸懷。企業(yè)介紹主要企業(yè)的發(fā)展歷程和主要經(jīng)營(yíng)的項(xiàng)目，讓投資者更進(jìn)一步的的了解我們的網(wǎng)站。產(chǎn)品展示主要向大眾展示我們企業(yè)的產(chǎn)品，讓顧客能夠深入了解我們產(chǎn)品的特點(diǎn)和優(yōu)勢(shì)，從而對(duì)我們的產(chǎn)品產(chǎn)生信心，購買我們的產(chǎn)品。新聞中心主要向客戶展

3、示我們企業(yè)最新的企業(yè)動(dòng)態(tài)，讓客戶了解我們企業(yè)最新的情況，展示企業(yè)文化，拉近客戶與企業(yè)的距離，讓客戶感覺企業(yè)就在他的身邊。家紡加盟主要向客戶介紹成為企業(yè)經(jīng)銷商的要求和具體流程，并提供了企業(yè)的聯(lián)系方式。人才招聘主要面向社會(huì)向各界精英提供一個(gè)成為我們企業(yè)人才的平臺(tái)，為企業(yè)招賢納士，源源不斷為企業(yè)輸送新鮮血液。聯(lián)系我們主要給企業(yè)和客戶提供一座溝通的橋梁，客戶和游客如果對(duì)我們企業(yè)有任何意見和建議都可以通過留言的方式聯(lián)系我們。一個(gè)界面友好、互動(dòng)性強(qiáng)的頁面往往能在企業(yè)推廣中起到事半功倍的效果，本網(wǎng)站恰恰也遵循這一原則。l 明確建立網(wǎng)站的目標(biāo)和用戶需求 企業(yè)網(wǎng)站的設(shè)計(jì)是展現(xiàn)企業(yè)形象、介紹產(chǎn)品和服務(wù)、體現(xiàn)企業(yè)發(fā)

4、展戰(zhàn)略的重要途徑，因此必須明確設(shè)計(jì)站點(diǎn)的目的和用戶需求，從而做出切實(shí)可行的設(shè)計(jì)計(jì)劃。要根據(jù)消費(fèi)者的需求、市場(chǎng)的狀況、企業(yè)自身的情況等進(jìn)行綜合分析，牢記以消費(fèi)者為中心，而不是以美術(shù)為中心進(jìn)行設(shè)計(jì)規(guī)劃。在設(shè)計(jì)規(guī)劃之初同樣考慮：建設(shè)網(wǎng)站的目的是什么?為誰提供服務(wù)和產(chǎn)品?企業(yè)能提供什么樣的產(chǎn)品和服務(wù)?網(wǎng)站的客戶的特點(diǎn)是什么?企業(yè)產(chǎn)品和服務(wù)適合什么樣的表現(xiàn)方式? l 網(wǎng)頁形式與內(nèi)容相統(tǒng)一 要將豐富的意義和多樣的形式組織成統(tǒng)一的頁面結(jié)構(gòu)，形式語言必須符合頁面的內(nèi)容，體現(xiàn)內(nèi)容的豐富含義。 運(yùn)用對(duì)比與調(diào)和、對(duì)稱與平衡、節(jié)奏與韻律以及留白等手段，通過空間、文字、圖形之間的相互關(guān)系建立整體的均衡狀態(tài)，產(chǎn)生和諧的美

5、感。如對(duì)稱原則在頁面設(shè)計(jì)中， 它的均衡有時(shí)會(huì)使頁面顯得呆板，但如果加入一些富有動(dòng)感的文字、圖案，或采用夸張的手法來表現(xiàn)內(nèi)容往往會(huì)達(dá)到比較好的效果。 點(diǎn)、線、面作為視覺語言中的基本元素，要使用點(diǎn)、線、面的互相穿插、互相襯托、互相補(bǔ)充構(gòu)成最佳的頁面效果。網(wǎng)頁設(shè)計(jì)中點(diǎn)、線、面的運(yùn)用并不是孤立的，很多時(shí)候都需要將它們結(jié)合起來，表達(dá)完美的設(shè)計(jì)意境。l 多媒體功能的利用 網(wǎng)絡(luò)資源的優(yōu)勢(shì)之一是多媒體功能。要吸引瀏覽者注意力，頁面的內(nèi)容可以用三維動(dòng)畫、flash等來表現(xiàn)。但要注意頁面加載的速度。本網(wǎng)站主要運(yùn)用了dreamwaver、access、fireworks等軟件，使用了asp動(dòng)態(tài)網(wǎng)頁技術(shù)，access

6、作為后臺(tái)數(shù)據(jù)庫，制作了一個(gè)小型的企業(yè)網(wǎng)站，實(shí)現(xiàn)了企業(yè)網(wǎng)站的動(dòng)態(tài)交互的基本功能。1 開發(fā)工具介紹本網(wǎng)站主要使用了macromedia dreamweaver8、macromedia fireworks8和access 2003等軟件。dreamweaver與其他腳本語言組合使用提供各種面向?qū)ο蟮拈_發(fā)工具，能較好的完成網(wǎng)頁的設(shè)計(jì)、布局及asp程序。利用access的方便性、快捷性來建設(shè)數(shù)據(jù)庫。1.1 macromedia dreamweaver 8介紹macromedia dreamweaver8是由macromedia公司設(shè)計(jì)開發(fā)的一款可視化的網(wǎng)頁設(shè)計(jì)和網(wǎng)站管理工具，支持最新的web技術(shù)，包含h

7、tml檢查、html格式控制、html格式化選項(xiàng)、可視化網(wǎng)頁設(shè)計(jì)、圖像編輯、全局查找替換、全ftp 功能、處理flash等富媒體格式和動(dòng)態(tài)html、基于團(tuán)隊(duì)的web創(chuàng)作。1.2 macromedia fireworks 8 介紹fireworks是macromedia公司發(fā)布的一款專為網(wǎng)絡(luò)圖形設(shè)計(jì)的圖形編輯軟件，它大大簡(jiǎn)化了網(wǎng)絡(luò)圖形設(shè)計(jì)的工作難度，無論是專業(yè)設(shè)計(jì)家還是業(yè)余愛好者，使用fireworks都不僅可以輕松地制作出十分動(dòng)感的gif動(dòng)畫，還可以輕易地完成大圖切割、動(dòng)態(tài)按鈕、動(dòng)態(tài)翻轉(zhuǎn)圖等，因此，對(duì)于輔助網(wǎng)頁編輯來說，fireworks將是最大的功臣。1.3 microsoft office

8、 access介紹microsoft office access是由微軟發(fā)布的關(guān)聯(lián)式數(shù)據(jù)庫管理系統(tǒng)。它結(jié)合了 microsoft jet database engine 和 圖形用戶界面兩項(xiàng)特點(diǎn)，是 microsoft office 的系統(tǒng)程式之一。2 iis的安裝與配置要實(shí)現(xiàn)所建的網(wǎng)站的發(fā)布，就必須建立iis(互聯(lián)網(wǎng)信息服務(wù))，安裝配置完成iis后在瀏覽器地址欄中輸入“”即可實(shí)現(xiàn)網(wǎng)頁的瀏覽。2.1安裝iis打開”控制面板”，然后單擊啟動(dòng)“程序和功能”，單擊打開“打開或關(guān)閉windows功能”，選中internet信息服務(wù)，如圖2.1所示: 圖2.1 安裝iis單擊“完成”等

9、待幾分鐘后完成iis的安裝。2.2 iis的配置右擊“計(jì)算機(jī)”，單擊“管理”-“服務(wù)和應(yīng)用程序”-“internet信息服務(wù)管理器”-“網(wǎng)站”如圖2.2所示:圖2.2 配置iis右擊“default web site”-單擊“高級(jí)設(shè)置”，如圖2.3設(shè)置，單擊“確定”完成iis配置:圖2.3 iis配置3 主頁的設(shè)計(jì)本網(wǎng)站主頁由logo與導(dǎo)航欄、正文內(nèi)容和版權(quán)內(nèi)容三大部分組成。3.1 logo與導(dǎo)航欄本網(wǎng)站logo由本人利用fireworks制作完成, 企業(yè)logo由英文“bluesky”和中文組成“藍(lán)天家紡”，以藍(lán)色為底色，顯示了藍(lán)天家紡擁有如天空廣闊般的胸懷。logo與導(dǎo)航欄如圖3.1所示:

10、 圖3.1 logo與導(dǎo)航欄3.2 正文內(nèi)容正文部分由新聞?wù)故?、產(chǎn)品展示、家紡加盟三部分組成，為瀏覽者展示了企也的最近動(dòng)態(tài)，了解了企業(yè)的主要產(chǎn)品等一系列信息，正文部分如圖3.2所示:圖3.2正文內(nèi)容3.3 版權(quán)部分在網(wǎng)頁的底部插入如圖3.3所示的版權(quán)部分，版權(quán)部分由企業(yè)的電話、傳真、郵箱組成，體現(xiàn)了一個(gè)網(wǎng)站的完整性: 圖3.3版權(quán)部分4 關(guān)于藍(lán)天關(guān)于藍(lán)天頁面主要向?yàn)g覽者介紹企業(yè)的發(fā)展歷程，以及企業(yè)的主營(yíng)產(chǎn)品和企業(yè)產(chǎn)品的設(shè)計(jì)理念，通過應(yīng)用已經(jīng)建立好的模板構(gòu)成頁面的主體框架，然后再插入層，在層里輸入介紹企業(yè)的文本，見附圖: 附圖 關(guān)于藍(lán)天5 家紡產(chǎn)品 產(chǎn)品展示主要向大眾展示我們企業(yè)的產(chǎn)品，讓顧客能

11、夠深入了解我們產(chǎn)品的特點(diǎn)和優(yōu)勢(shì)，從而對(duì)我們的產(chǎn)品產(chǎn)生信心，購買我們的產(chǎn)品。通過已建立好的模板建立頁面的大體框架，通過插入層來插入圖片，如圖5.1、5.2所示: 圖5.1家紡產(chǎn)品展示 圖5.2家紡產(chǎn)品6 新聞中心 新聞中心主要向客戶展示我們企業(yè)最新的企業(yè)動(dòng)態(tài)，讓客戶了解我們企業(yè)最新的情況，展示企業(yè)文化，拉近客戶與企業(yè)的距離。通過已建立好的模板建立頁面的大體框架，新建幾個(gè)層，在層中插入圖片和文本，如圖6.1所示: 圖6.1 新聞中心新聞頁面主要由圖片和文字組成，通過應(yīng)用建立好的模版，完成網(wǎng)頁大體框架的建設(shè)，再插入幾個(gè)層來插入圖片和文本，如圖6.2所示: 圖6.2新聞頁面 7 家紡加盟家紡加盟主要向

12、客戶介紹成為企業(yè)經(jīng)銷商的要求和具體流程，并提供了企業(yè)的聯(lián)系方式。通過已建立好的模板建立頁面的大體框架，新建幾個(gè)層，在層中插入圖片和文本，見附圖: 附圖 家紡加盟8 精英人才 人才招聘主要面向社會(huì)向各界精英提供一個(gè)成為我們企業(yè)人才的平臺(tái)，為企業(yè)招賢納士，源源不斷為企業(yè)輸送新鮮血液。通過已建立好的模板建立頁面的大體框架，新建幾個(gè)層，在層中插入圖片和文本，見附圖: 附圖 精英人才9 留言板的實(shí)現(xiàn)和顯示留言板主要給企業(yè)和客戶提供一座溝通的橋梁，客戶和游客如果對(duì)我們企業(yè)有任何意見和建議都可以通過留言的方式聯(lián)系我們，企業(yè)會(huì)認(rèn)真聽取這些要求和建議，從而改正企業(yè)發(fā)展過程中的不足。留言板主要包括留言頁面liuy

13、an.asp和留言顯示頁面liuyanxianshi.asp，數(shù)據(jù)庫liuyan.mdb用來存儲(chǔ)留言信息。9.1 留言板的實(shí)現(xiàn) 通過應(yīng)用已經(jīng)建立好的模板建立頁面的主要框架，然后在頁面中插入一個(gè)686*326的層，在層里面插入一個(gè)9行4列的表格，在表格中輸入您的姓名、聯(lián)系電話等信息，如圖9.1如示: 圖9.1留言板頁面在表格最下面插入“表單”-“按鈕”提交，動(dòng)作為提交表單，執(zhí)行菜單欄“窗口”-“服務(wù)器”命令，打開“服務(wù)器命令”面板。單擊“+”按鈕。選擇“插入記錄”命令，則打開“”輸入記錄對(duì)話框，進(jìn)行如圖9.2設(shè)置: 圖9.2插入記錄建立數(shù)據(jù)庫連接，執(zhí)行菜單欄“窗口”-“數(shù)據(jù)庫”命令，打開“數(shù)據(jù)庫

14、”面板，單擊該對(duì)話框中的“+”按鈕，選擇“數(shù)據(jù)源名稱(dns)”命令。打開“數(shù)據(jù)源名稱(dns)”，進(jìn)行如圖9.3進(jìn)行設(shè)置: 圖9.3數(shù)據(jù)庫連接9.2 建立liuyan.mdb數(shù)據(jù)庫數(shù)據(jù)庫用來存儲(chǔ)留言信息，通過asp實(shí)現(xiàn)與網(wǎng)頁連接，數(shù)據(jù)庫結(jié)構(gòu)設(shè)計(jì)如圖9.4所示: 圖9.4數(shù)據(jù)庫設(shè)置9.3 留言板的實(shí)現(xiàn) 此動(dòng)態(tài)頁面主要實(shí)現(xiàn)留言的實(shí)現(xiàn)，通過應(yīng)用已經(jīng)建立好的模板建立頁面的主要框架，然后在頁面中插入一個(gè)678*409的層，在層里面插入一個(gè)8行2列的表格，在表格中輸入游客姓名、聯(lián)系電話等信息，執(zhí)行菜單欄上的“窗口“-”綁定“命令，打開“綁定”面板，單擊該對(duì)話框中的“+”按鈕，選擇“記錄集查詢命令”命令。

15、打開“記錄集”對(duì)話框，如圖9.5,設(shè)置成如圖9.6如示: 圖9.5記錄集 圖9.6 留言顯示設(shè)置通過本次專題網(wǎng)站的制作自己對(duì)dreamweaver有了進(jìn)一步的深入了解，覺得自己學(xué)到了許多知識(shí)，在制作網(wǎng)站技術(shù)上也有了一定的提高。滿懷信心的開始了本次的項(xiàng)目設(shè)計(jì)，在設(shè)計(jì)的過程中真的是問題不斷，大大小小的問題全有，不過我并沒有放棄，通過了自己的努力學(xué)習(xí)以及向老師同學(xué)請(qǐng)教，幾乎都一一解決了這些問題。有句話說得好，問題并不可怕，可怕的是你在遇到這些問題時(shí)選擇了放棄。通過不斷地學(xué)習(xí)，不斷地努力，在制作網(wǎng)頁時(shí)為讓我的網(wǎng)頁更加豐富多彩，在網(wǎng)頁中插入圖像、動(dòng)態(tài)特效等，讓瀏覽者更加直接，方便地了解我們的網(wǎng)站，同時(shí)在

16、視覺上給人一種賞心悅目的感受。在制作網(wǎng)站中，我使用了fireworks圖片處理軟件、dreamweaver及css處理樣式等。以前也只是掌握了些基礎(chǔ)的知識(shí)，現(xiàn)在對(duì)這些已經(jīng)有了進(jìn)一步的了解，也比以前更能熟練地運(yùn)用這些軟件了。通過這次制作網(wǎng)站的過程，我個(gè)人有以下幾點(diǎn)心得體會(huì)：(1)在制作網(wǎng)站的前期工作也很重要，這是我們?nèi)菀缀雎缘?。一個(gè)好的計(jì)劃可以詳細(xì)制定網(wǎng)站的相關(guān)內(nèi)容，為后期的制作節(jié)省不少時(shí)間，同時(shí)也使網(wǎng)頁的結(jié)構(gòu)，主題更加清晰。(2)在制作網(wǎng)站時(shí)，不能隨心所欲，要有一個(gè)大體的構(gòu)思，使整個(gè)網(wǎng)頁層次分明，使人看了一目了然。(3)在內(nèi)容選取上要全面、可靠、嚴(yán)謹(jǐn)。(4)要有自己的獨(dú)特風(fēng)格，不能一味地去借鑒別人的網(wǎng)站，結(jié)構(gòu)要新穎，有創(chuàng)意。雖然我的網(wǎng)站并不