網(wǎng)站規(guī)劃與設(shè)計(jì)

1、企業(yè)網(wǎng)站規(guī)劃與設(shè)計(jì)目錄1 項(xiàng)目背景11.1 功能及應(yīng)用背景11.2 網(wǎng)站建設(shè)的目的和定位12 網(wǎng)站開(kāi)發(fā)技術(shù)簡(jiǎn)介22.1 Photoshop的簡(jiǎn)單介紹22.2 Flash的簡(jiǎn)單介紹22.4 IIS的簡(jiǎn)單介紹23 網(wǎng)站建設(shè)日程表34 網(wǎng)站總體設(shè)計(jì)44.1 網(wǎng)站設(shè)計(jì)目標(biāo)與原則44.2 網(wǎng)站的總體結(jié)構(gòu)44.3 網(wǎng)站總體結(jié)構(gòu)圖54.4網(wǎng)站框線圖55.主要網(wǎng)頁(yè)的設(shè)計(jì)65.1首頁(yè)設(shè)計(jì)65.2 公司簡(jiǎn)介的設(shè)計(jì)75.3 公司新聞的設(shè)計(jì)85.4 領(lǐng)導(dǎo)致辭的設(shè)計(jì)96 網(wǎng)站調(diào)試117 用戶使用說(shuō)明111 項(xiàng)目背景1.1 功能及應(yīng)用背景隨著互聯(lián)網(wǎng)的發(fā)展，其信息傳播效率逐步為人們所關(guān)注。越來(lái)越多的企業(yè)走向網(wǎng)絡(luò)，以期通過(guò)網(wǎng)

2、絡(luò)加大對(duì)自己的宣傳力度，從而擴(kuò)展銷售渠道，增加銷售量?，F(xiàn)在互聯(lián)網(wǎng)已經(jīng)成為人們快速獲取、發(fā)布和傳遞信息的重要渠道，它在人們政治、經(jīng)濟(jì)、生活等各個(gè)方面發(fā)揮著重要的作用。目前商務(wù)網(wǎng)站正如雨后春筍般的大量涌現(xiàn)，企業(yè)網(wǎng)絡(luò)化已經(jīng)成為一種時(shí)尚。本設(shè)計(jì)利用Dreamweaver cs3制作靜態(tài)網(wǎng)頁(yè)，利用Photoshop cs3處理圖形和制作圖像。通過(guò)網(wǎng)站，全面宣傳，展示企業(yè)的風(fēng)采、優(yōu)點(diǎn)與特色，發(fā)布企業(yè)的重大活動(dòng)安排與最新消息，增強(qiáng)企業(yè)與客戶之間的聯(lián)系，在Internet上實(shí)現(xiàn)完成部分業(yè)務(wù)，提高辦事效率。1.2 網(wǎng)站建設(shè)的目的和定位1) 幫助企業(yè)建立有效的企業(yè)形象宣傳、企業(yè)風(fēng)采展示、公司產(chǎn)品宣傳，打造XX集團(tuán)

3、新形象。2) 充分利用網(wǎng)絡(luò)快捷、跨地域優(yōu)勢(shì)進(jìn)行信息傳遞，對(duì)公司的新聞進(jìn)行及時(shí)的報(bào)道。3) 通過(guò)在線供求系統(tǒng)實(shí)現(xiàn)網(wǎng)上的供求信息的查詢、訂購(gòu)、交易聯(lián)系，優(yōu)化信息的流通渠道。2 網(wǎng)站開(kāi)發(fā)技術(shù)簡(jiǎn)介2.1 Photoshop的簡(jiǎn)單介紹Photoshop是專業(yè)網(wǎng)絡(luò)圖形設(shè)計(jì)和處理的軟件，使用Photoshop來(lái)創(chuàng)建、編輯、處理網(wǎng)頁(yè)圖片，可以為網(wǎng)頁(yè)增加先進(jìn)的互動(dòng)性，在專業(yè)環(huán)境中優(yōu)化圖像。在網(wǎng)站開(kāi)發(fā)的前期，需要使用Photoshop來(lái)繪出網(wǎng)站的輪廓，將繪制好的首頁(yè)切片冰儲(chǔ)存為Web格式，以便在Dreamweaver中的使用。2.2 Flash的簡(jiǎn)單介紹隨著網(wǎng)絡(luò)技術(shù)的發(fā)展，網(wǎng)頁(yè)上出現(xiàn)了越來(lái)越多的Flash動(dòng)畫(huà)。一

4、個(gè)優(yōu)秀的網(wǎng)站是離不開(kāi)動(dòng)畫(huà)的，無(wú)論是Banner、按鈕、網(wǎng)站宣傳動(dòng)畫(huà)還是整個(gè)網(wǎng)站的首頁(yè)等，都需要使用Flash來(lái)完成所有的操作。Flash動(dòng)畫(huà)已經(jīng)成為當(dāng)今網(wǎng)站必不可少的部分，美觀的動(dòng)畫(huà)能夠?yàn)榫W(wǎng)頁(yè)增色不少，從而吸引更多的瀏覽者。2.4 IIS的簡(jiǎn)單介紹IIS（Internet Information Services）是一個(gè)集成了多種Internet服務(wù)（WWW服務(wù)、FTP服務(wù)等）的服務(wù)器軟件。 IIS能發(fā)布網(wǎng)頁(yè)，并且有ASP（Active Server Pages）、JAVA、VBscript產(chǎn)生頁(yè)面，有著一些擴(kuò)展功能。IIS支持一些有趣的東西，象有編輯環(huán)境的界面（FRONTPAGE）、有全文檢

5、索功能的（INDEX SERVER）、有多媒體功能的（NET SHOW） 其次，IIS是隨Windows NT Server 4.0一起提供的文件和應(yīng)用程序服務(wù)器，是在Windows NT Server上建立Internet服務(wù)器的基本組件。它與Windows NT Server完全集成，允許使用Windows NT Server內(nèi)置的安全性以及NTFS文件系統(tǒng)建立強(qiáng)大靈活的InternetIntranet站點(diǎn)。IIS（Internet Information Server，互聯(lián)網(wǎng)信息服務(wù)）是一種Web（網(wǎng)頁(yè)）服務(wù)組件，其中包括Web服務(wù)器、FTP服務(wù)器、NNTP服務(wù)器和SMTP服務(wù)器，分別用

6、于網(wǎng)頁(yè)瀏覽、文件傳輸、新聞服務(wù)和郵件發(fā)送等方面，它使得在網(wǎng)絡(luò)（包括互聯(lián)網(wǎng)和局域網(wǎng)）上發(fā)布信息成了一件很容易的事。3 網(wǎng)站建設(shè)日程表完成整個(gè)項(xiàng)目所需時(shí)間為三個(gè)月，其中各項(xiàng)規(guī)劃任務(wù)如下表所示：時(shí)間任務(wù)內(nèi)容3月9日-16日擬定項(xiàng)目3月17日-23日制定初步項(xiàng)目計(jì)劃4月6日-19日網(wǎng)站初步框架4月20日-5月1日網(wǎng)站內(nèi)容具體豐富5月2日-5月10日總結(jié)反思，網(wǎng)站細(xì)節(jié)完善5月11日-24日計(jì)劃微調(diào)，網(wǎng)站用戶體驗(yàn)感測(cè)試5月25日-6月7日網(wǎng)站裝飾再加工，CSS布局，JS語(yǔ)言6月8日-6月15日最終測(cè)試4 網(wǎng)站總體設(shè)計(jì)4.1 網(wǎng)站設(shè)計(jì)原則打開(kāi)一個(gè)網(wǎng)站，給用戶留下第一印象的既不是網(wǎng)站豐富的內(nèi)容，也不是網(wǎng)站合理

7、的版面布局，而是網(wǎng)站的色彩。色彩對(duì)人的視覺(jué)效果非常明顯，一個(gè)網(wǎng)站設(shè)計(jì)成功與否，在某種程度上取決于設(shè)計(jì)者對(duì)色彩的運(yùn)用和搭配。因?yàn)榫W(wǎng)頁(yè)設(shè)計(jì)屬于一種平面效果設(shè)計(jì)，在排除立體圖形、動(dòng)畫(huà)效果之外，在平面圖上，色彩的沖擊力是最強(qiáng)的，它很容易給用戶留下深刻的印象。因此，在設(shè)計(jì)網(wǎng)頁(yè)時(shí)，必須要高度重視色彩的搭配。本網(wǎng)站的搭配主色為：白、淡藍(lán)、黑、三種顏色。白色代表純潔、純真、樸素、神圣、明快。淡藍(lán)色代表熱情、活潑、熱鬧、溫暖、幸福、吉祥。黑色代表崇高、堅(jiān)實(shí)、嚴(yán)肅、剛健、端莊，充分代表了一個(gè)企業(yè)應(yīng)有的氣質(zhì)和形象。給客戶留下深刻的印象。根據(jù) 瀏覽者在閱讀時(shí)經(jīng)常采用從上到下，從左到右的習(xí)慣，主體內(nèi)容中，將“優(yōu)秀網(wǎng)站案

8、例”靠左邊放，這樣能更好地吸引瀏覽者的眼球，同時(shí)也體現(xiàn)公司的專業(yè)、能力等。優(yōu)秀網(wǎng)站案例采用網(wǎng)頁(yè)圖片切換的形式展現(xiàn)在首頁(yè)中，使整個(gè)首頁(yè)處于于靜于動(dòng)的畫(huà)面。右邊則是創(chuàng)意設(shè)計(jì)公司的設(shè)計(jì)理念。4.2 網(wǎng)站的總體結(jié)構(gòu)本網(wǎng)站主要包括網(wǎng)站前臺(tái)、網(wǎng)站后臺(tái)兩大部分組成。 網(wǎng)站前臺(tái)包括公司簡(jiǎn)介、公司新聞、領(lǐng)導(dǎo)致辭、行業(yè)信息、留言薄、榮譽(yù)，6個(gè)功能欄目。網(wǎng)站的總體結(jié)構(gòu)如圖4.3 網(wǎng)站總體結(jié)構(gòu)圖公司簡(jiǎn)介公司新聞?lì)I(lǐng)導(dǎo)致辭行業(yè)信息留言薄沈煤榮譽(yù)網(wǎng)站4.4網(wǎng)站框線圖5.主要網(wǎng)頁(yè)的設(shè)計(jì)5.1首頁(yè)設(shè)計(jì)首頁(yè)是全站內(nèi)容的目錄和索引。所以在首頁(yè)設(shè)計(jì)這些模塊一般情況都是需要設(shè)計(jì)上去的。網(wǎng)站設(shè)計(jì)的色到必須符合主題，需要根據(jù)一個(gè)企業(yè)的類型

9、來(lái)定義整個(gè)界面的色調(diào)。首頁(yè)的設(shè)計(jì)還必須遵循快捷，簡(jiǎn)潔的原則，能概括全站的內(nèi)容。各模塊的設(shè)計(jì)所占的比例也必須要合理，瀏覽量或者重要的模塊應(yīng)適當(dāng)增加其在整個(gè)界面中的比例。設(shè)計(jì)的過(guò)程還需要合理安排文字和圖片的協(xié)調(diào)搭配，要讓視覺(jué)效果不單調(diào)。經(jīng)過(guò)對(duì)網(wǎng)站的總的合理的布局分析，該企業(yè)導(dǎo)航主要有6個(gè)欄目，分別為：首頁(yè)、公司簡(jiǎn)介、公司新聞、領(lǐng)導(dǎo)致辭、行業(yè)信息和留言薄。首頁(yè)上還分布有4個(gè)模塊，分別為：政策法規(guī)、XX榮譽(yù)、市場(chǎng)信息和企業(yè)文化。其結(jié)構(gòu)如圖5.1所示。5.2 公司簡(jiǎn)介的設(shè)計(jì)公司簡(jiǎn)介主要從公司的規(guī)模、公司主營(yíng)產(chǎn)品、公司發(fā)展優(yōu)勢(shì)等幾個(gè)方面來(lái)介紹XX集團(tuán)。包括企業(yè)文化、公司理念，主要對(duì)公司企業(yè)文化進(jìn)行詳細(xì)介紹

10、，讓人們能更深入的了解XX集團(tuán)。其結(jié)構(gòu)如圖5.2所示。圖5.2 公司簡(jiǎn)介頁(yè)面5.3 公司新聞的設(shè)計(jì)公司新聞主要是公司的各項(xiàng)工程的和一些項(xiàng)目定期發(fā)布公司的重要新聞，充分利用網(wǎng)絡(luò)快捷、跨地域優(yōu)勢(shì)進(jìn)行信息傳遞，對(duì)公司的新聞進(jìn)行及時(shí)的報(bào)道。其結(jié)構(gòu)如圖5.3所示。圖5.3 公司新聞頁(yè)面5.4 領(lǐng)導(dǎo)致辭的設(shè)計(jì)領(lǐng)導(dǎo)致辭主要由公司董司長(zhǎng)，對(duì)長(zhǎng)期以來(lái)關(guān)注和支持公司發(fā)展的各界人士表示感謝，同時(shí)對(duì)與XX集團(tuán)的現(xiàn)況做了一定的介紹，對(duì)未來(lái)做了一定的規(guī)劃。其結(jié)構(gòu)如圖5.4所示。圖5.4 領(lǐng)導(dǎo)致辭頁(yè)面 6 網(wǎng)站調(diào)試1）測(cè)試準(zhǔn)備測(cè)試前對(duì)被測(cè)系統(tǒng)做好以下準(zhǔn)備：系統(tǒng)的全面?zhèn)浞?，包括?yīng)用程序備份、數(shù)據(jù)備份等；記錄測(cè)試前系統(tǒng)狀態(tài)；制定應(yīng)急措施，確保在測(cè)試中發(fā)生問(wèn)題時(shí)系統(tǒng)可恢復(fù)。測(cè)試員應(yīng)在測(cè)試開(kāi)始前了解網(wǎng)頁(yè)的相關(guān)情況，對(duì)測(cè)試的預(yù)期結(jié)果應(yīng)進(jìn)行準(zhǔn)備和預(yù)測(cè)。測(cè)試前要做好真實(shí)數(shù)據(jù)的準(zhǔn)備工作，并進(jìn)行系統(tǒng)的數(shù)據(jù)初始化。（2）用戶界面測(cè)試主要測(cè)試導(dǎo)航條、內(nèi)容、顏色、背景、圖像、返回等。（3）功能測(cè)試主要測(cè)試站點(diǎn)中的鏈接等。鏈接測(cè)試：目的是檢查各個(gè)URL所聯(lián)