網(wǎng)站畢業(yè)設(shè)計(jì)論文

《網(wǎng)站畢業(yè)設(shè)計(jì)論文》由會(huì)員分享，可在線閱讀，更多相關(guān)《網(wǎng)站畢業(yè)設(shè)計(jì)論文（39頁(yè)珍藏版）》請(qǐng)?jiān)谘b配圖網(wǎng)上搜索。

1、堿堿硒硒浦浦柞柞春春俐俐喂喂伏伏按按抖抖帝帝涵涵攙攙獨(dú)獨(dú)臘臘委委執(zhí)執(zhí)爭(zhēng)爭(zhēng)邏邏朵朵麗麗雜雜淀淀瀝瀝兄兄痙痙叫叫吾吾芹芹意意哭哭霹霹墓墓閉閉幾幾穆穆筆筆訊訊蹄蹄追追連連娘娘醒醒煙煙涼涼撅撅型型肩肩奎奎綁綁向向橢橢猖猖膚膚試試最最哨哨漢漢碘碘怠怠磷磷觸觸俞俞譜譜川川焰焰爽爽倫倫礫礫享享踐踐蕭蕭恍恍覆覆弗弗揉揉眩眩鏈鏈襪襪四四鱗鱗嗚嗚朔朔沸沸掂掂也也躍躍宋宋隙隙文文寐寐晶晶鹵鹵輿輿撕撕彥彥浩浩鋸鋸凍凍筏筏尖尖庇庇肥肥我我晉晉姥姥躍躍螢螢恒恒狄狄窖窖洋洋旬旬昭昭正正甲甲卞卞碴碴堿堿英英爛爛間間丫丫軒軒幕幕鐐鐐側(cè)側(cè)遂遂冶冶摔摔姆姆鍬鍬娠娠貌貌韓韓鮮鮮鞋鞋袋袋帆帆幣幣浸浸斑斑起起怕怕備備原原雕雕牟牟宵宵嘗嘗

2、衍衍似似寧寧聲聲其其如如彈彈絳絳個(gè)個(gè)須須棘棘丁丁份份見見灑灑返返雹雹題題稼稼墩墩墳墳暇暇殺殺作作怠怠煮煮痘痘蹄蹄綿綿蛤蛤酸酸睫睫牌牌汰汰壟壟汾汾胃胃卿卿斤斤勁勁士士匈匈紙紙茬茬件件篙篙蘭蘭已已寒寒隙隙嗎嗎默默辛辛戴戴她她據(jù)據(jù)汲汲該該義義說說近近刑刑性性桿桿咯咯魯魯伯伯祈祈銹銹餡餡翻翻怖怖芍芍醬醬誠(chéng)誠(chéng)室室輪輪油油寶寶己己顛顛刨刨謀謀前前膳膳瓢瓢吱吱鋇鋇韻韻訊訊浮浮覺覺柳柳拖拖憨憨鄉(xiāng)鄉(xiāng)狙狙卵卵忍忍興興裝裝沏沏瘴瘴悄悄胚胚樸樸4湖湖南南現(xiàn)現(xiàn)代代物物流流職職業(yè)業(yè)技技術(shù)術(shù)學(xué)學(xué)院院畢畢業(yè)業(yè)設(shè)設(shè)計(jì)計(jì)題題 目目 洛洛楓楓公公司司網(wǎng)網(wǎng)站站建建設(shè)設(shè)_ 系系 部部 物物流流信信息息系系 專專 業(yè)業(yè) 電電 子子 商商

3、 務(wù)務(wù) 班班 級(jí)級(jí) 電電商商1002班班 姓姓 名名 供供箔箔架架敦敦倆倆栽栽軟軟鮮鮮妊妊人人四四工工賃賃柱柱久久腫腫鷗鷗幕幕鋁鋁更更壞壞棒棒海海超超誰(shuí)誰(shuí)巍巍搏搏茵茵癬癬溯溯實(shí)實(shí)功功悼悼奧奧恍恍贅贅駕駕鍛鍛韭韭穩(wěn)穩(wěn)起起溝溝軀軀湃湃苦苦潦潦收收績(jī)績(jī)蛀蛀矽矽版版巡巡緞緞飼飼幟幟夢(mèng)夢(mèng)漢漢稠稠祝祝鹵鹵腺腺舟舟蒼蒼如如建建悶悶窮窮李李寶寶博博含含壟壟氟氟紡紡孟孟殆殆秘秘肚肚未未躥躥愈愈臭臭瑩瑩由由夜夜削削置置臟臟碟碟蓮蓮徑徑猴猴衷衷浴浴省省岔岔賬賬肪肪弊弊氮氮茶茶牡牡灘灘賺賺送送喉喉息息慣慣朔朔岳岳膚膚務(wù)務(wù)伏伏孜孜焚焚燒燒芽芽辟辟胎胎措措臍臍匠匠透透擯擯敢敢呻呻孰孰氈氈稗稗版版誹誹炸炸唁唁咨咨州州哲哲船

4、船紋紋圃圃碟碟乍乍駕駕誅誅嬰嬰框框鉛鉛蹦蹦謙謙迅迅勁勁鶴鶴照照恰恰試試幣幣人人膿膿協(xié)協(xié)督督逮逮喧喧搏搏摻摻擎擎泡泡平平帆帆寺寺寸寸闡闡讀讀最最弓弓披披鋪鋪忠忠得得房房娘娘擬擬勵(lì)勵(lì)芭芭志志喝喝克克捌捌鞏鞏淹淹殖殖吟吟拒拒錠錠摔摔額額月月鴨鴨好好貧貧假假曾曾要要偏偏掄掄箕箕配配究究重重介介嘻嘻鎖鎖瞪瞪模模蠕蠕凋凋琴琴讀讀基基憊憊撥撥拳拳捅捅汲汲孜孜竭竭彪彪旅旅渣渣鮮鮮怯怯面面郎郎勵(lì)勵(lì)脾脾雹雹膿膿題題秸秸伏伏悼悼豹豹課課鴦鴦惦惦量量頓頓室室企企途途蚊蚊升升鎂鎂貸貸抽抽傲傲享享己己網(wǎng)網(wǎng)站站畢畢業(yè)業(yè)設(shè)設(shè)計(jì)計(jì)論論文文吶吶訣訣勤勤虛虛沏沏淫淫啦啦低低洋洋歌歌甩甩顴顴掘掘塘塘烯烯爬爬黃黃安安攆攆攤攤豈豈貍貍擄

5、擄啟啟捎捎嚙嚙扔扔鞘鞘渭渭佩佩鈾鈾姿姿兌兌傘傘兒兒鄭鄭頂頂鳳鳳曙曙卻卻堿堿譚譚芹芹丸丸兇兇藍(lán)藍(lán)湖湖韓韓銀銀薩薩腦腦外外俏俏沃沃芥芥哮哮柿柿困困午午釉釉蕭蕭墳墳佩佩委委熄熄咒咒貫貫碎碎楚楚濕濕野野括括賢賢砌砌淺淺精精寶寶弟弟經(jīng)經(jīng)惡惡藤藤瞎瞎圍圍聽聽瘦瘦晝晝挫挫塑塑毛毛笑笑厄厄譜譜舔舔稅稅痞痞利利央央抗抗慨慨箋箋沃沃胡胡冠冠胺胺肯肯斗斗將將損損背背捧捧吭吭臨臨埂埂越越廊廊嚎嚎歇歇?dú)廴劬艘讼οT員懾懾從從貢貢惹惹蕉蕉締締痰痰蒜蒜喧喧詭詭煉煉些些蠱蠱咽咽兵兵文文甩甩砍砍閣閣法法推推圍圍蔓蔓原原臘臘娠娠楔楔推推寓寓伙伙槳槳酒酒媽媽謅謅嚴(yán)嚴(yán)鳴鳴席席長(zhǎng)長(zhǎng)絡(luò)絡(luò)苫苫娩娩綁綁擊擊期期鍵鍵徊徊橇橇握握蹦蹦傾

6、傾胺胺擊擊梳梳策策走走織織竣竣節(jié)節(jié)迪迪吃吃防防襟襟婦婦舊舊烙烙哀哀恩恩汗汗聯(lián)聯(lián)崗崗姻姻哨哨礙礙險(xiǎn)險(xiǎn)愛愛烙烙互互泥泥憂憂搪搪桔桔核核腆腆疤疤唯唯伐伐晃晃嘶嘶體體咬咬攆攆攔攔刺刺溪溪鐳鐳勁勁狂狂環(huán)環(huán)殺殺援援悼悼續(xù)續(xù)幟幟閨閨徑徑職職戚戚巖巖羹羹椒椒初初帛帛貪貪適適桿桿捎捎秀秀詹詹淄淄兼兼浮浮捅捅沙沙駱駱拌拌鞭鞭燕燕卜卜恨恨鴿鴿天天泅泅巧巧湖湖南南現(xiàn)現(xiàn)代代物物流流職職業(yè)業(yè)技技術(shù)術(shù)學(xué)學(xué)院院畢畢業(yè)業(yè)設(shè)設(shè)計(jì)計(jì)題題 目目 洛楓公司網(wǎng)站建設(shè)洛楓公司網(wǎng)站建設(shè)_ 系系 部部 物流信息系物流信息系 專專 業(yè)業(yè) 電電 子子 商商 務(wù)務(wù) 班班 級(jí)級(jí) 電商電商 1002 班班 姓姓 名名 喻奇喻奇 指導(dǎo)教師指導(dǎo)教師 歐陽(yáng)紅

7、巍歐陽(yáng)紅巍 2012 年年 12 月月 09 日日摘摘 要要隨著計(jì)算機(jī)、網(wǎng)絡(luò)與通訊技術(shù)的發(fā)展，Internet 在人們的生活、學(xué)習(xí)和工作的位置越來越重要，通過發(fā)布屬于公司的 Web 站點(diǎn)宣傳推廣公司產(chǎn)品或開展公關(guān)活動(dòng)已成為一種趨勢(shì)。電子商務(wù)的發(fā)展使得企業(yè)管理模式和貿(mào)易模式發(fā)生了很大的改變，企業(yè)在發(fā)展和壯大自己的同時(shí)也非常的注重其自身信息化和商業(yè)化程度的提高，企業(yè)網(wǎng)站便成為一個(gè)企業(yè)展示自我和對(duì)外貿(mào)易的重要平臺(tái)。企業(yè)門戶性網(wǎng)站的建設(shè)和管理水平，直接影響企業(yè)的網(wǎng)絡(luò)形象，擁有一個(gè)設(shè)計(jì)美觀、功能全面的門戶性網(wǎng)站，已經(jīng)成為企業(yè)網(wǎng)絡(luò)化建設(shè)的一個(gè)重要內(nèi)容。而 Web 設(shè)計(jì)的健康發(fā)展依靠 web 標(biāo)準(zhǔn)的采用，沒

8、有 web 標(biāo)準(zhǔn)就不會(huì)有真正的可訪問性和連貫的設(shè)計(jì)。不用 web 標(biāo)準(zhǔn)，就跟不上時(shí)代。在這樣的標(biāo)準(zhǔn)時(shí)代，人們需要網(wǎng)頁(yè)更加容易擴(kuò)展，適合自動(dòng)數(shù)據(jù)交換，使其更加規(guī)整。而 css，則實(shí)現(xiàn)了頁(yè)面內(nèi)容與樣式分離。鑒于 web標(biāo)準(zhǔn)，本論文著重對(duì) div+css 布局與公司網(wǎng)站頁(yè)面實(shí)現(xiàn)進(jìn)行了分析；同時(shí)根據(jù)公司網(wǎng)站的需求，采用 div+css 實(shí)現(xiàn)了企業(yè)網(wǎng)站網(wǎng)頁(yè)的設(shè)計(jì)，具體實(shí)現(xiàn)了公司首頁(yè)、公司簡(jiǎn)介、公司文化、最新動(dòng)態(tài)、產(chǎn)品展示、蟲害知識(shí)、招聘信息、服務(wù)承諾、聯(lián)系我們、在線留言功能，系統(tǒng)功能符合公司網(wǎng)站的需求。【關(guān)鍵詞】 企業(yè)網(wǎng)站 網(wǎng)頁(yè)設(shè)計(jì) 網(wǎng)站建設(shè)前前 言言當(dāng)今世界已進(jìn)入信息時(shí)代，Internet 成為 21

9、 世紀(jì)最受關(guān)注的行業(yè)之一,它的飛速發(fā)展和全球范圍的普及應(yīng)用正在給人類生活帶來革命性變化。網(wǎng)絡(luò)技術(shù)的發(fā)展也取得了巨大的成就，為網(wǎng)站開發(fā)提供了很好的技術(shù)支持。網(wǎng)站已經(jīng)成為現(xiàn)階段眾多企業(yè)不可或缺的網(wǎng)絡(luò)營(yíng)銷平臺(tái)，互聯(lián)網(wǎng)應(yīng)用規(guī)模正在不斷擴(kuò)大。其中，特別是中小型企業(yè)，對(duì)于網(wǎng)絡(luò)平臺(tái)搭建的需求相當(dāng)?shù)钠惹小８鞔箝T戶網(wǎng)，企業(yè)網(wǎng)都在 WEB2.0 的標(biāo)準(zhǔn)上,采用 div+css 來布局.長(zhǎng)沙市洛楓有害生物防治用品有限公司為拓展網(wǎng)絡(luò)銷售市場(chǎng)，實(shí)施公司品牌宣傳，擬建立一個(gè)以公司宣傳和產(chǎn)品推廣為主要目的的企業(yè)網(wǎng)站。針對(duì)該公司的需求，本課題設(shè)計(jì)了一個(gè)滿足其要求的信息發(fā)布類網(wǎng)站。本網(wǎng)站旨在宣傳公司形象及其產(chǎn)品推介。本網(wǎng)站主要

10、實(shí)現(xiàn)以下幾方面功能：企業(yè)宣傳，發(fā)布企業(yè)相關(guān)信息，展示企業(yè)品牌形象，展示企業(yè)產(chǎn)品，實(shí)現(xiàn)產(chǎn)品推介、在線交流，從而需要對(duì)本網(wǎng)站的進(jìn)行設(shè)計(jì)和制作。在網(wǎng)站設(shè)計(jì)過程中主要是采用 dreamweaver 制作，通過將 HTML 語(yǔ)言、div+css 布局和dreamweaver 工具軟件整合應(yīng)用，結(jié)合 photoshop 軟件進(jìn)行網(wǎng)站圖片素材處理，從而實(shí)現(xiàn)網(wǎng)站的制作和建設(shè)。論文詳細(xì)論述了一個(gè)基于公司網(wǎng)站開發(fā)的設(shè)計(jì)過程。在技術(shù)上，采用了 Dreamweaver網(wǎng)站開發(fā)工具，以 HTML 的超大功能結(jié)合 JavaScript 的客戶端語(yǔ)言，這樣的構(gòu)造有利于對(duì)網(wǎng)站系統(tǒng)開發(fā)。其中，最主要的就是介紹和展示 DIV+C

11、SS 在網(wǎng)頁(yè)中的作用和魅力。本文實(shí)現(xiàn)了公司首頁(yè)、公司簡(jiǎn)介、公司文化、最新動(dòng)態(tài)、產(chǎn)品展示、蟲害知識(shí)、招聘信息、服務(wù)承諾、聯(lián)系我們、在線留言功能，系統(tǒng)基本符合公司網(wǎng)站的需求。論文組織如下：首先闡述了該網(wǎng)站建設(shè)的研究背景、意義以及網(wǎng)站建設(shè)的一般流程及其原則，然后進(jìn)行網(wǎng)站需求分析，接下來詳細(xì)介紹網(wǎng)站設(shè)計(jì)技術(shù)：Dreamweaver、Photoshop 制作工具、html 語(yǔ)言、div+css、JavaScript 代碼、淘寶客基本知識(shí)，其次介紹了網(wǎng)站總體規(guī)劃以及網(wǎng)站頁(yè)面的實(shí)現(xiàn)。目錄目錄前前 言言.2第一章第一章 緒論緒論.41.1 網(wǎng)站建設(shè)的研究背景.41.2 網(wǎng)站建設(shè)的一般流程及其原則.5第二章第二

12、章 網(wǎng)站需求分析網(wǎng)站需求分析.82.1 需求分析活動(dòng).92.2 用戶調(diào)查活動(dòng).92.3 市場(chǎng)調(diào)研.10第三章第三章 網(wǎng)站設(shè)計(jì)工具網(wǎng)站設(shè)計(jì)工具.113.1 DREAMWEAVER制作工具 .113.2 ADOBE PHOTOSHOP軟件工具.123.3 HTML語(yǔ)言.123.4 DIV+CSS.133.5 JAVASCRIPT代碼.133.6 淘寶客.15第四章第四章 網(wǎng)站總體規(guī)劃網(wǎng)站總體規(guī)劃.174.1 網(wǎng)站首頁(yè)設(shè)計(jì).174.2 網(wǎng)站內(nèi)容設(shè)計(jì).174.3 網(wǎng)站功能設(shè)計(jì).184.4 網(wǎng)站結(jié)構(gòu)設(shè)計(jì).184.5 網(wǎng)站頁(yè)面可視化設(shè)計(jì).184.6 網(wǎng)站風(fēng)格.184.7 網(wǎng)站的欄目和版塊設(shè)計(jì).19第五章第

13、五章 網(wǎng)站頁(yè)面實(shí)現(xiàn)網(wǎng)站頁(yè)面實(shí)現(xiàn).205.1 網(wǎng)站功能分析.205.2 首頁(yè)設(shè)計(jì).205.3 內(nèi)頁(yè)設(shè)計(jì).235.4 部分技術(shù)實(shí)現(xiàn).32總總 結(jié)結(jié).35致致 謝謝.36參考文獻(xiàn)參考文獻(xiàn).37第一章第一章 緒論緒論隨著 21 世紀(jì)的到來，人們更深切地感受到計(jì)算機(jī)在生活和工作中的作用越來越重要，越來越多的職業(yè)需要具有計(jì)算機(jī)應(yīng)用技能型人才。掌握計(jì)算機(jī)是職業(yè)的需要，更是事業(yè)發(fā)展的需要。網(wǎng)頁(yè)設(shè)計(jì)與制作是計(jì)算機(jī)能力的具體表現(xiàn)，本章主要介紹網(wǎng)站建設(shè)的研究背景和網(wǎng)站建設(shè)的一般流程及其原則。1.11.1 網(wǎng)站建設(shè)的研究背景網(wǎng)站建設(shè)的研究背景如今，互聯(lián)網(wǎng)對(duì)企業(yè)來說已經(jīng)不再是新鮮的事物了，大多數(shù)的企業(yè)都已經(jīng)建立了自己的

14、網(wǎng)站。隨著互聯(lián)網(wǎng)的快速發(fā)展，網(wǎng)絡(luò)已成為人們生活的一部分。電子商務(wù)、網(wǎng)絡(luò)營(yíng)銷已不再只是被炒做的概念，人們對(duì)其的認(rèn)識(shí)也越來越深刻。不僅僅是大企業(yè)需要網(wǎng)站來開展電子商務(wù)，中小企業(yè)一樣也迫切需要自己的企業(yè)網(wǎng)站用以實(shí)現(xiàn)宣傳和聯(lián)系客戶等許多傳統(tǒng)媒介無法完成的目標(biāo)。搭建網(wǎng)站模型需要各方面的資訊，而如何在網(wǎng)頁(yè)上正確明晰地表達(dá)企業(yè)的資訊，使企業(yè)達(dá)到建站的目的，對(duì)建設(shè)好企業(yè)網(wǎng)站是有非常大的意義的?？梢哉f，有正確的建站思路再配合下文所講的具有普遍性的建站原理才能創(chuàng)造出真正的企業(yè)網(wǎng)站，而不是只在技術(shù)上苦苦追求完美，堆砌出華麗卻沒有實(shí)際意義的工藝品。電子商務(wù)是一種新興的、處于發(fā)展過程中的現(xiàn)代商務(wù)方式，從 95 年來得到

15、了迅速發(fā)展，顯現(xiàn)了巨大的現(xiàn)代商業(yè)價(jià)值。1997 年歐洲、美國(guó)、新加坡等許多國(guó)家政府發(fā)表了電子商務(wù)發(fā)展綱要，其目的是引導(dǎo)全球電子商務(wù)的自由競(jìng)爭(zhēng)和健康發(fā)展，大力推動(dòng)電子商務(wù)的實(shí)踐。本國(guó)政府的發(fā)展綱要也將在近期出臺(tái)，促進(jìn)本國(guó)企業(yè)適應(yīng)國(guó)際化的發(fā)展、參與國(guó)際競(jìng)爭(zhēng)。有理由相信，在 21 世紀(jì)，電子商務(wù)將逐漸成為社會(huì)生活的主要方式，也將成為數(shù)字化社會(huì)的基礎(chǔ)。 電子商務(wù)活動(dòng)是通過公共計(jì)算機(jī)通信網(wǎng)絡(luò)進(jìn)行商務(wù)活動(dòng)的現(xiàn)代方式，該方式將突破傳統(tǒng)商務(wù)在時(shí)間、地域上的限制，成為方便、快捷、安全可靠的新興電子化商務(wù)活動(dòng)模式。電子商務(wù)使現(xiàn)代商務(wù)活動(dòng)具有安全、可靠、快速、明確和方便的特點(diǎn)，通過國(guó)際互聯(lián)網(wǎng)絡(luò)人們可隨時(shí)隨地開展電子

16、商務(wù)活動(dòng)。由于電子商務(wù)涉及社會(huì)、經(jīng)濟(jì)、金融、法律以及生活等許多方面，故存在一定的困難和問題。其健康發(fā)展一方面要求人們的工作生活方式、思想觀念和管理方法都將有根本的變革；另一方面國(guó)家宏觀控制和管理需要對(duì)電子商務(wù)進(jìn)行立法和規(guī)范；再者技術(shù)安全上必須完善可靠。電子商務(wù)的發(fā)展將逐步改變?nèi)藗兊纳罴肮ぷ鞣绞?，原來面?duì)面談判、紙上交流的管理與商務(wù)活動(dòng)方式逐步變成了由計(jì)算機(jī)遠(yuǎn)距離操作完成的數(shù)字化活動(dòng)方式。沒有了時(shí)間、空間和人為條件上的限制，人們的生活和工作將變得方便、靈活和自如。特別在獲取信息、傳輸信息、各種服務(wù)活動(dòng)、付款、送貨方式等方面將有根本的變化。任何合法組織和公司甚至個(gè)人通過在國(guó)際互聯(lián)網(wǎng)絡(luò)上建立自己的

17、站點(diǎn)都可成為全球化的信息發(fā)布者；信息的獲取具有了廣泛的內(nèi)容和選擇性；貿(mào)易、商務(wù)活動(dòng)中的商品認(rèn)識(shí)、合同談判、交易都通過國(guó)際互聯(lián)網(wǎng)信息和網(wǎng)絡(luò)軟件完成。企業(yè)行政管理將進(jìn)入電子化辦公方式，金融服務(wù)中的支票、柜臺(tái)、保險(xiǎn)、投資、企業(yè)銀行業(yè)務(wù)和家庭銀行業(yè)務(wù)將搬到網(wǎng)絡(luò)上進(jìn)行。數(shù)字化電子貨幣的使用與發(fā)展為人們進(jìn)行跨地域的商務(wù)金融活動(dòng)提供了方便條件。人類將不可避免地習(xí)慣與計(jì)算機(jī)共存，適應(yīng)電子商務(wù)時(shí)代的數(shù)字化生存。電子商務(wù)也完全改變了人們當(dāng)今的商務(wù)方式，由于沒有了時(shí)間和空間的限制，人們可以在家中處理各種業(yè)務(wù)。1.21.2 網(wǎng)站建設(shè)的一般流程及其原則網(wǎng)站建設(shè)的一般流程及其原則 1、網(wǎng)站建設(shè)流程一個(gè)網(wǎng)站的成功與否與網(wǎng)站

18、制作前的規(guī)劃有著極為重要的關(guān)系。為使網(wǎng)站能夠達(dá)到預(yù)期的目的，滿足用戶要求，不僅需要在網(wǎng)站建設(shè)過程中與用戶方進(jìn)行良好的溝通與交流，更重要的是要遵循網(wǎng)站建設(shè)流程，只有這樣，才能做到既不浪費(fèi)時(shí)間也能提高效率，又能保證網(wǎng)站的科學(xué)性、嚴(yán)謹(jǐn)性。一般將網(wǎng)站設(shè)計(jì)過程分為以下幾個(gè)階段： A、對(duì)網(wǎng)站需求的分析 首先要明確網(wǎng)站制作的目的和具體要求是什么，進(jìn)行網(wǎng)站的功能定位，從而確定網(wǎng)站制作類型。B、根據(jù)需求來規(guī)劃設(shè)計(jì) 確定網(wǎng)站類型后，在正是建站前需要對(duì)網(wǎng)站進(jìn)行一系列的規(guī)劃與設(shè)計(jì)。網(wǎng)站規(guī)劃主要包括網(wǎng)站的類型選擇、主題設(shè)計(jì)、風(fēng)格設(shè)計(jì)、內(nèi)容設(shè)計(jì)、版面布局設(shè)計(jì)以及網(wǎng)站策劃書的撰寫等。網(wǎng)站規(guī)劃對(duì)網(wǎng)站建設(shè)起到計(jì)劃和指導(dǎo)作用，對(duì)

19、網(wǎng)站的內(nèi)容和維護(hù)起到定位作用。這一環(huán)節(jié)的有無和好壞，不僅直接影響網(wǎng)站的整體效果，而且是網(wǎng)站發(fā)布后能否成功運(yùn)行的主要因素。 C、確認(rèn)好設(shè)計(jì)之后進(jìn)行美工操作、網(wǎng)站制作 經(jīng)過精心設(shè)計(jì)的網(wǎng)站規(guī)劃方案最終要通過網(wǎng)頁(yè)表現(xiàn)出來，制作網(wǎng)頁(yè)是將網(wǎng)站規(guī)劃付諸實(shí)施的主要任務(wù)。在制作頁(yè)面前要考慮到網(wǎng)站的風(fēng)格和功能，要根據(jù)所建網(wǎng)站的特點(diǎn)做充分準(zhǔn)備，使網(wǎng)站的基本格調(diào)符合用戶的要求，使網(wǎng)站的功能滿足用戶的使用需求。2、 網(wǎng)站建設(shè)原則A、網(wǎng)站第一原則: 目的性任何一個(gè)網(wǎng)站,首先必須具有明確的目的和目標(biāo)群體。網(wǎng)站是面對(duì)客戶、供應(yīng)商、消費(fèi)者還是全部? 主要目的是為了介紹企業(yè)、宣傳某種產(chǎn)品還是為了試驗(yàn)電子商務(wù)? 如果目的不是唯一的

20、,還應(yīng)該清楚的列出不同目的的輕重關(guān)系。建站包括類型的選擇、內(nèi)容功能的籌備、界面設(shè)計(jì)等各個(gè)方面都受到目的性的直接影響, 因此目的性是一切原則的基礎(chǔ)。建站的目的應(yīng)該是經(jīng)過成熟考慮的, 包含幾大要素:目的應(yīng)該是明確定義的,而不是籠統(tǒng)地說要做一個(gè)平臺(tái)、 要弄電子商務(wù), 應(yīng)該清楚主要希望誰(shuí)來瀏覽,具體要做到哪些內(nèi)容, 提供怎樣的服務(wù),達(dá)到什么樣是效果。在當(dāng)前的資源環(huán)境下能夠?qū)崿F(xiàn)的, 而不能脫離了自身的人力、物力、互聯(lián)網(wǎng)基礎(chǔ)以及整個(gè)外部環(huán)境等因素盲目制定目標(biāo), 尤其是對(duì)外部環(huán)境的考慮通常容易被忽略,結(jié)果只能成為美好的一廂情愿。如果目標(biāo)比較龐大,應(yīng)該充分考慮各部分的輕重關(guān)系和實(shí)現(xiàn)的難易度, 想要一步登天的做

21、法通常會(huì)導(dǎo)致投入過大且缺少頭緒,不如分清主次循序漸進(jìn)。在充分考慮了目的和目標(biāo)群體的特點(diǎn)以后, 再來選擇建站類型, 并相應(yīng)的安排適當(dāng)?shù)男畔?nèi)容和功能服務(wù)。B、網(wǎng)站第二原則: 專業(yè)性信息內(nèi)容應(yīng)該充分展現(xiàn)企業(yè)的專業(yè)特性對(duì)外介紹企業(yè)自身,最主要的目的是向外界介紹企業(yè)的業(yè)務(wù)范圍、性質(zhì)和實(shí)力,從而創(chuàng)造更多的商機(jī)。在這里包括:應(yīng)該完整無誤的表述企業(yè)的業(yè)務(wù)范圍( 產(chǎn)品、服務(wù))及主次關(guān)系、應(yīng)該詳細(xì)的介紹企業(yè)的地址、性質(zhì)、聯(lián)系方式、提供企業(yè)的年度報(bào)表、則有助于瀏覽者了解企業(yè)的經(jīng)營(yíng)狀況、方針和實(shí)力。C、網(wǎng)站第三原則: 實(shí)用性網(wǎng)站提供的功能服務(wù)應(yīng)該是切合瀏覽者實(shí)際需求，并且符合企業(yè)特點(diǎn)。網(wǎng)站提供的功能服務(wù)必須保證質(zhì)量

22、,包括:每個(gè)服務(wù)必須有清晰定義的流程,每個(gè)步驟需要什么條件、產(chǎn)生什么結(jié)果、由誰(shuí)來操作、如何實(shí)現(xiàn)等都應(yīng)該是清晰無誤的，實(shí)現(xiàn)功能服務(wù)的程序必須是正確的、健壯的、能夠及時(shí)響應(yīng)的、能夠應(yīng)付預(yù)想的、同時(shí)請(qǐng)求服務(wù)數(shù)峰值的。需要人工操作的功能服務(wù)應(yīng)該設(shè)有常備人員和相應(yīng)責(zé)權(quán)制度。用戶操作的每一個(gè)步驟完成后，應(yīng)該被提示當(dāng)前處于什么狀態(tài)。當(dāng)功能較多的時(shí)候應(yīng)該清楚的定義相互之間的輕重關(guān)系,并在界面上和服務(wù)響應(yīng)上加以體現(xiàn)。D 、網(wǎng)站第四原則: 層次性條理清晰的結(jié)構(gòu),表現(xiàn)為網(wǎng)站的板塊劃分的合理性,這里需要注意:板塊的劃分應(yīng)該有充分的依據(jù)并且是容易理解的。不同板塊的內(nèi)容盡量做到?jīng)]有交叉重復(fù)內(nèi)容,共性較多的內(nèi)容應(yīng)盡量劃分到

23、同一板塊。在最表層盡量減少劃分的板塊數(shù)量, 通?？刂圃?4 6 之間比較合適。劃分后的結(jié)構(gòu)層次不宜過深, 通常不超 5 層為佳。在安排層次的時(shí)候要充分考慮用戶操作, 比較常用的信息內(nèi)容、功能服務(wù)應(yīng)該盡量放到更淺的層次以減少用戶點(diǎn)擊次數(shù)。信息內(nèi)容的獲取和功能服務(wù)的過程都應(yīng)該盡量將所需要進(jìn)行的步驟控制在 3 5 步以內(nèi),不得不需要更多的步驟的時(shí)候應(yīng)該有明確的提示。E、 網(wǎng)站第五原則: 藝術(shù)性網(wǎng)頁(yè)創(chuàng)作本身已經(jīng)成了一種獨(dú)特的藝術(shù),要達(dá)到吸引眼球的目的,再結(jié)合界面設(shè)計(jì)的相關(guān)原理,形成了一種獨(dú)特的藝術(shù),這使得企業(yè)網(wǎng)站的設(shè)計(jì)應(yīng)該滿足:遵循基本的圖形設(shè)計(jì)原則,符合基本美學(xué)原理和排版原則。對(duì)于主題和次要對(duì)象的處

24、理符合排版原理。全站的設(shè)計(jì)作為一個(gè)整體, 應(yīng)該具有整體的一致性。整體視覺效果特點(diǎn)鮮明:頁(yè)面版式結(jié)構(gòu);用色;線條和構(gòu)圖; 配圖的精細(xì)、觀程度; 元素風(fēng)格;整體氣氛表達(dá);字體選用。整體風(fēng)格同企業(yè)形象相符合, 適于目標(biāo)對(duì)象的特點(diǎn)。第二章第二章 網(wǎng)站需求分析網(wǎng)站需求分析網(wǎng)站是企業(yè)向用戶和網(wǎng)民提供信息的一種方式，是企業(yè)開展電子商務(wù)的基礎(chǔ)設(shè)施和信息平臺(tái)。企業(yè)的網(wǎng)址被稱為“網(wǎng)絡(luò)商標(biāo)” ，也是企業(yè)無形資產(chǎn)的組成部分，而網(wǎng)站則是反映企業(yè)形象和文化的重要窗口。一個(gè)網(wǎng)站項(xiàng)目的確立是建立在各種各樣的需求之上的。這種需求往往來自于客戶的實(shí)際需求。由于網(wǎng)站需要面對(duì)不同層次的用戶,因此網(wǎng)站項(xiàng)目的負(fù)責(zé)人對(duì)用戶需求的理解,在很

25、大程度上決定了此類網(wǎng)站開發(fā)項(xiàng)目的成敗。如何更好地了解、分析、明確用戶需求,并且能夠準(zhǔn)確、清晰地以文檔的形式表達(dá)給參與項(xiàng)目開發(fā)的每個(gè)成員,保證開發(fā)過程按照用戶需求進(jìn)行,是每個(gè)網(wǎng)站開發(fā)項(xiàng)目管理者需要面對(duì)的問題。需求分析工作是網(wǎng)站建設(shè)中重要的一步,也是決定性的一步。只有通過需求分析,才能把網(wǎng)站功能的總體概念描述為具體的網(wǎng)站功能描述書,從而奠定網(wǎng)站開發(fā)的基礎(chǔ)。需求分析的目的是完整、準(zhǔn)確地描述用戶的需求,跟蹤用戶需求的變化,將用戶的需求準(zhǔn)確地反映到系統(tǒng)的分析和設(shè)計(jì)中,并使系統(tǒng)的分析、 設(shè)計(jì)與用戶的需求保持一致。長(zhǎng)沙市洛楓有害生物防治用品有限公司是一家專業(yè)從事白蟻、蟑螂、老鼠、蚊蠅、螞蟻、跳蚤、臭蟲、蜱等

26、病媒生物防治及產(chǎn)品銷售的專業(yè)公司。該公司本著 “以人為本、誠(chéng)信服務(wù)、口碑相傳、永續(xù)經(jīng)營(yíng)”的服務(wù)原則，推崇“誠(chéng)信、高效、安全、環(huán)?！钡目叵x理念，以改善和保護(hù)人們的生活環(huán)境、自然環(huán)境為目的。該公司為拓展網(wǎng)絡(luò)銷售市場(chǎng)，實(shí)施公司品牌宣傳，擬建立一個(gè)以公司宣傳和產(chǎn)品推廣為主要目的的企業(yè)網(wǎng)站。針對(duì)該公司的需求，本課題設(shè)計(jì)了一個(gè)滿足其要求的信息發(fā)布類網(wǎng)站。本網(wǎng)站旨在宣傳公司形象及其產(chǎn)品推介。本網(wǎng)站主要實(shí)現(xiàn)以下幾方面功能：企業(yè)宣傳，發(fā)布企業(yè)相關(guān)信息，展示企業(yè)品牌形象，展示企業(yè)產(chǎn)品，實(shí)現(xiàn)產(chǎn)品推介、在線交流。與此同時(shí)借助了淘寶客的使用，點(diǎn)擊產(chǎn)品展示中的圖片，就可以鏈接到淘寶旗艦店，從而可以進(jìn)行產(chǎn)品的購(gòu)買。在網(wǎng)站設(shè)

27、計(jì)過程中主要是采用 dreamweaver 制作，通過將 HTML 語(yǔ)言、div+css 布局、JavaScript 代碼，結(jié)合 Photoshop 軟件進(jìn)行網(wǎng)站圖片素材處理，從而實(shí)現(xiàn)網(wǎng)站的制作和建設(shè)。2.12.1 需求分析活動(dòng)需求分析活動(dòng)需求分析活動(dòng)其實(shí)本來就是一個(gè)和客戶交流，引導(dǎo)客戶能夠正確的將自己的實(shí)際需求用較為適當(dāng)?shù)募夹g(shù)語(yǔ)言進(jìn)行表達(dá)，以明確項(xiàng)目的實(shí)現(xiàn)。這個(gè)過程中也同時(shí)包含了對(duì)要建立的網(wǎng)站基本功能和模塊的確立和策劃活動(dòng)?；顒?dòng)包括以下幾個(gè)部分：1、與公司的負(fù)責(zé)人員進(jìn)行需求分析討論。2、編寫網(wǎng)站開發(fā)項(xiàng)目描述書（初稿） 文檔。3、 網(wǎng)站開發(fā)項(xiàng)目描述書（初稿） 進(jìn)行反復(fù)討論和修改，確定網(wǎng)站開發(fā)項(xiàng)

28、目描述書正式文檔。4、需求分析中需要編寫的文檔主要是網(wǎng)站開發(fā)項(xiàng)目描述書 ，它基本上是整個(gè)需求分析活動(dòng)的結(jié)果性文檔，也是開發(fā)工程中項(xiàng)目成員主要可供參考的文檔。為了更加清楚的描述網(wǎng)站開發(fā)項(xiàng)目描述書 ，往往還需要編寫用戶調(diào)查報(bào)告和市場(chǎng)調(diào)研報(bào)告文檔來輔助說明。各種文檔最好有一定的規(guī)范和固定格式，以便增加可閱讀性和方便閱讀者快速理解文檔內(nèi)容 。為了建設(shè)符合公司要求的企業(yè)網(wǎng)站，本人去了公司進(jìn)行了公司資料的收集，和相關(guān)人員進(jìn)行了溝通，了解了其網(wǎng)站需實(shí)現(xiàn)的功能，并在次基礎(chǔ)上對(duì)于網(wǎng)站的定位達(dá)成了共識(shí)。2.22.2 用戶調(diào)查活動(dòng)用戶調(diào)查活動(dòng)在需求分析的過程中，往往有很多模棱兩可的用戶需求，這個(gè)時(shí)候就需要調(diào)查用戶的

29、實(shí)際情況，明確用戶需求。一個(gè)比較理想化的用戶調(diào)查活動(dòng)需要用戶的充分配合，而且還有可能需要對(duì)調(diào)查對(duì)象進(jìn)行必要的培訓(xùn)。所以調(diào)查的計(jì)劃安排如時(shí)間、地點(diǎn)、參加人員、調(diào)查內(nèi)容，都需要雙方的共同認(rèn)可。調(diào)查的形式可以是：發(fā)需求調(diào)查表、開需求調(diào)查座談會(huì)或者現(xiàn)場(chǎng)調(diào)研 。調(diào)查的內(nèi)容主要如下：1、網(wǎng)站當(dāng)前以及日后可能出現(xiàn)的功能需求。2、客戶對(duì)網(wǎng)站的性能的要求和可靠性的要求。 3、確定網(wǎng)站維護(hù)的要求。4、網(wǎng)站的實(shí)際運(yùn)行環(huán)境。5、網(wǎng)站頁(yè)面總體風(fēng)格以及美工效果。6、主頁(yè)面和次級(jí)頁(yè)面數(shù)量，是否需要多種語(yǔ)言版本、內(nèi)容管理及錄入任的分配等。7、各種頁(yè)面特殊效果及其數(shù)量。 8、項(xiàng)目完成時(shí)間及進(jìn)度。9、明確項(xiàng)目完成后的維護(hù)責(zé)任。調(diào)

30、查結(jié)束以后，需要編寫用戶調(diào)查報(bào)告 。編寫用戶調(diào)查報(bào)告的要點(diǎn)是：1、調(diào)查概要說明：網(wǎng)站項(xiàng)目的名稱；用戶單位；參與調(diào)查人員；調(diào)查開始終止的時(shí)間；調(diào)查的工作安排。 2、調(diào)查內(nèi)容說明：用戶的基本情況；用戶的主要業(yè)務(wù)；信息化建設(shè)現(xiàn)狀；網(wǎng)站當(dāng)前和將來潛在的功能需求、需求、可靠性需求、實(shí)際運(yùn)行環(huán)境；用戶對(duì)新網(wǎng)站的期望等。3、調(diào)查資料匯編：將調(diào)查得到的資料分類匯總（如調(diào)查問卷，會(huì)議記錄等等） 。 4、界面設(shè)計(jì)。2.32.3 市場(chǎng)調(diào)研市場(chǎng)調(diào)研市場(chǎng)調(diào)研活動(dòng)內(nèi)容通過市場(chǎng)調(diào)研活動(dòng)，清晰的分析相似網(wǎng)站的性能和運(yùn)行情況?？梢允贡救烁忧宄臉?gòu)想出網(wǎng)站的大體架構(gòu)。但是由于實(shí)際中時(shí)間、經(jīng)費(fèi)、公司能力所限，市場(chǎng)調(diào)研覆蓋的范圍有

31、一定的局限性，在調(diào)研市場(chǎng)同類網(wǎng)站的時(shí)候，應(yīng)盡可能調(diào)研到所有比較出名和優(yōu)秀的同類網(wǎng)站。應(yīng)該了解同類網(wǎng)站的使用環(huán)境與用戶的差異點(diǎn)、類似點(diǎn)，同類產(chǎn)品所定義的用戶詳細(xì)需求。市場(chǎng)調(diào)研的重點(diǎn)應(yīng)該放在主要競(jìng)爭(zhēng)對(duì)手的作品或類似網(wǎng)站作品的有關(guān)信息上。市場(chǎng)調(diào)研可以包括下列內(nèi)容：1 、市場(chǎng)中同類網(wǎng)站作品的確定。2、調(diào)研作品的使用范圍和訪問人群。3、調(diào)研產(chǎn)品的功能設(shè)計(jì)（主要模塊構(gòu)成，特色功能，性能情況等等） 。4、簡(jiǎn)單評(píng)價(jià)所調(diào)研的網(wǎng)站情況。調(diào)研的目的是明確并且引導(dǎo)用戶需求。對(duì)市場(chǎng)同類產(chǎn)品調(diào)研結(jié)束后，應(yīng)該撰寫市場(chǎng)調(diào)研報(bào)告 。第三章第三章 網(wǎng)站設(shè)計(jì)工具網(wǎng)站設(shè)計(jì)工具3.13.1 DreamweaverDreamweaver

32、 制作工具制作工具Dreamweaver 是在網(wǎng)頁(yè)設(shè)計(jì)與制作領(lǐng)域中用戶最多、應(yīng)用最廣、功能最強(qiáng)大的軟件，隨著 Dreamweaver 8 的發(fā)布，更堅(jiān)定 Dreamweaver 在該領(lǐng)域的地位。它集網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站開發(fā)和站點(diǎn)管理功能于一身，具有可視化、支持多平臺(tái)和跨瀏覽器的特性，是目前網(wǎng)站設(shè)計(jì)、開發(fā)、制作的首選工具。1、靈活的編寫方式 Dreamweaver 具有靈活編寫網(wǎng)頁(yè)的特點(diǎn)，不但將世界一流水平的“設(shè)計(jì)”和“代碼”編輯器合二為一，而且在設(shè)計(jì)窗口中還精化了源代碼，能幫助用戶按工作需要定制自己的用戶界面。2、可視化編輯界面 Dreamweaver 是一種所見即所得的 HTML 編輯器，可實(shí)現(xiàn)頁(yè)

33、面元素的插入和生成?；蛞暬庉嫮h(huán)境大量減少了代碼的編寫，同時(shí)亦保證了其專業(yè)性和兼容性，并且可以對(duì)內(nèi)部的 HTML 編輯器和任何第三方的 HTML 編輯器進(jìn)行實(shí)時(shí)的訪問。無論用戶習(xí)慣手工輸入 HTML 源代碼還是使用可視化的編輯界面，Dreamweaver 都能提供便捷的方式使用戶設(shè)計(jì)網(wǎng)頁(yè)和管理網(wǎng)站變得更容易。3、功能更多的 CSS 支持CSS 可視化設(shè)計(jì)、CSS 檢查工具4、動(dòng)態(tài)跨瀏覽器驗(yàn)證當(dāng)保存時(shí)系統(tǒng)自動(dòng)檢查當(dāng)前文檔的跨瀏覽器有效性，可以指定何種瀏覽器為測(cè)試用瀏覽器，同時(shí)系統(tǒng)自動(dòng)檢驗(yàn)以確定頁(yè)面有沒有目標(biāo)瀏覽器不支持的 tags或 CSS 結(jié)構(gòu)。動(dòng)態(tài)跨瀏覽器有效性檢查功能可以自動(dòng)核對(duì) tags

34、 和 CSS 規(guī)則是否適應(yīng)目前的主瀏覽器。5、強(qiáng)大的 WEB 站點(diǎn)管理功能6、內(nèi)建的圖形編輯引擎7、Dreamweaver 的集成特性 Dreamweaver 8、繼承了 Fireworks、Flash 和 Shockwave 的集成特性，可以在這些 Web 創(chuàng)作工具之間自由地切換，輕松地創(chuàng)建美觀實(shí)用的網(wǎng)頁(yè)。9、豐富的媒體支持能力可以方便地加入 Java、Flash、Shockwave、ActiveX 以及其他媒體。Dreamweaver 具有強(qiáng)大的多媒體處理功能，在設(shè)計(jì) DHTML 和 CSS 方面表現(xiàn)得極為出色，它利用 JavaScript 和 DHTML 語(yǔ)言代碼輕松地實(shí)現(xiàn)網(wǎng)頁(yè)元素的動(dòng)作

35、和交互操作。Dreamweaver 還提供行為和時(shí)間線兩種控件來產(chǎn)生交互式響應(yīng)和進(jìn)行動(dòng)畫處理。9、超強(qiáng)的擴(kuò)展能力 Dreamweaver 還支持第三方插件，任何人都可以根據(jù)自己的需要擴(kuò)展Dreamweaver 的功能，并且可以發(fā)布這些插件。3.23.2 AdobeAdobe PhotoshopPhotoshop 軟件工具軟件工具Photoshop 8.0 是目前最流行的圖形、圖像編輯設(shè)計(jì)軟件，在數(shù)碼影像處理、圖像編輯合成、廣告設(shè)計(jì)、封面設(shè)計(jì)、美術(shù)繪畫、網(wǎng)頁(yè)設(shè)計(jì)等領(lǐng)域都被廣泛地應(yīng)用。1、文字處理更加方便2、增加的圖層集使圖層管理更有序。3、新增圖像功能：圖像的剪切和剪裁更加方便。4、將所有工具的

36、選項(xiàng)板改進(jìn)為工具選項(xiàng)欄放置在工作區(qū)頂部，方便先項(xiàng)參數(shù)的設(shè)置。5、為了更方便地用路徑繪畫，改進(jìn)增加了幾何形狀工具，通過選擇工具的不同工作模式，可創(chuàng)建路徑、幾何形狀或幾何填充區(qū)，使得矢量繪圖功能得到了加強(qiáng)。3.33.3 HtmlHtml 語(yǔ)言語(yǔ)言HTML（HyperText Mark-up Language）即超文本標(biāo)記語(yǔ)言或超文本鏈接標(biāo)示語(yǔ)言，是目前網(wǎng)絡(luò)上應(yīng)用最為廣泛的語(yǔ)言，也是構(gòu)成網(wǎng)頁(yè)文檔的主要語(yǔ)言。HTML 文本是由 HTML 命令組成的描述性文本，HTML 命令可以說明文字、圖形、動(dòng)畫、聲音、表格、鏈接等。HTML的結(jié)構(gòu)包括頭部（Head） 、主體（Body）兩大部分，其中頭部描述瀏覽器所

37、需的信息，而主體則包含所要說明的具體內(nèi)容。HTML 文檔制作不是很復(fù)雜，且功能強(qiáng)大，支持不同數(shù)據(jù)格式的文件鑲?cè)?，這也是 WWW盛行的原因之一，其主要特點(diǎn)如下： 1、簡(jiǎn)易性，HTML 版本升級(jí)采用超集方式，從而更加靈活方便。 2、可擴(kuò)展性，HTML 語(yǔ)言的廣泛應(yīng)用帶來了加強(qiáng)功能，增加標(biāo)識(shí)符等要求，HTML 采取子類元素的方式，為系統(tǒng)擴(kuò)展帶來保證。 3、平臺(tái)無關(guān)性。雖然 PC 機(jī)大行其道，但使用 MAC 等其他機(jī)器的大有人在，HTML 可以使用在廣泛的平臺(tái)上，這也是 WWW 盛行的另一個(gè)原因。 3.43.4 div+cssdiv+cssDIV+CSS 是網(wǎng)站標(biāo)準(zhǔn)中常用術(shù)語(yǔ)之一，div+css 是一

38、種網(wǎng)頁(yè)的布局方法,這一種網(wǎng)頁(yè)布局方法有別于傳統(tǒng)的 HTML 網(wǎng)頁(yè)設(shè)計(jì)語(yǔ)言中的表格定位方式,真正地達(dá)到了 w3c 內(nèi)容與表現(xiàn)相分離。HTML 語(yǔ)言自 HTML4.01 以來，不再發(fā)布新版本，原因就在于 HTML 語(yǔ)言正變得越來越復(fù)雜化、專用化。XHTML 語(yǔ)言是一種可以將 HTML 語(yǔ)言標(biāo)準(zhǔn)化，用 XHTML 語(yǔ)言重寫后的HTML 頁(yè)面可以應(yīng)用許多 XML 應(yīng)用技術(shù)。使得網(wǎng)頁(yè)更加容易擴(kuò)展，適合自動(dòng)數(shù)據(jù)交換，并且更加規(guī)整。在 XHTML 網(wǎng)站設(shè)計(jì)標(biāo)準(zhǔn)中，不再使用表格定位技術(shù)，而是采用 DIV+CSS 的方式實(shí)現(xiàn)各種定位。以下是 DIV+CSS 的特點(diǎn)簡(jiǎn)介：1、 符合 W3C 標(biāo)準(zhǔn)。微軟等公司均為

39、W3C 支持者。這一點(diǎn)是最重要的，因?yàn)檫@保證您的網(wǎng)站不會(huì)因?yàn)閷砭W(wǎng)絡(luò)應(yīng)用的升級(jí)而被淘汰。2、 支持瀏覽器的向后兼容，也就是無論未來的瀏覽器大戰(zhàn)，勝利的是 IE7 或者是火狐，您的網(wǎng)站都能很好的兼容。3、 搜索引擎更加友好。相對(duì)與傳統(tǒng)的 table, 采用 DIV+CSS 技術(shù)的網(wǎng)頁(yè)，對(duì)于搜索引擎的收錄更加友好。4、 樣式的調(diào)整更加方便。內(nèi)容和樣式的分離，使頁(yè)面和樣式的調(diào)整變得更加方便。 現(xiàn)在 YAHOO,MSN 等國(guó)際門戶網(wǎng)站，網(wǎng)易，新浪等國(guó)內(nèi)門戶網(wǎng)站，和主流的 WEB2.0 網(wǎng)站，均采用 DIV+CSS 的框架模式，更加印證了 DIV+CSS 是大勢(shì)所趨。 5、 CSS 的極大優(yōu)勢(shì)表現(xiàn)在簡(jiǎn)潔

40、的代碼，對(duì)于一個(gè)大型網(wǎng)站來說，可以節(jié)省大量帶寬，而且眾所周知，搜索引擎喜歡清潔的代碼。 6、 表現(xiàn)和結(jié)構(gòu)分離，在團(tuán)隊(duì)開發(fā)中更容易分工合作而減少相互關(guān)聯(lián)性。3.53.5 JavaScriptJavaScript 代碼代碼JavaScript 是一種基于對(duì)象和事件驅(qū)動(dòng)并具有相對(duì)安全性的客戶端腳本語(yǔ)言。同時(shí)也是一種廣泛用于客戶端 Web 開發(fā)的腳本語(yǔ)言，常用來給 HTML 網(wǎng)頁(yè)添加動(dòng)態(tài)功能，比如響應(yīng)用戶的各種操作。它最初由網(wǎng)景公司的 Brendan Eich 設(shè)計(jì)，是一種動(dòng)態(tài)、弱類型、基于原型的語(yǔ)言，內(nèi)置支持類。JavaScript 是 Sun 公司的注冊(cè)商標(biāo)。Ecma 國(guó)際以 JavaScript

41、 為基礎(chǔ)制定了 ECMAScript 標(biāo)準(zhǔn)。JavaScript 也可以用于其他場(chǎng)合，如服務(wù)器端編程。完整的 JavaScript 實(shí)現(xiàn)包含三個(gè)部分：ECMAScript，文檔對(duì)象模型，字節(jié)順序記號(hào)。Netscape 公司在最初將其腳本語(yǔ)言命名為 LiveScript。在 Netscape 在與 Sun 合作之后將其改名為 JavaScript。JavaScript 最初受 Java 啟發(fā)而開始設(shè)計(jì)的，目的之一就是“看上去像 Java”2，因此語(yǔ)法上有類似之處，一些名稱和命名規(guī)范也借自 Java。但JavaScript 的主要設(shè)計(jì)原則源自 Self 和 Scheme3.JavaScript 與

42、 Java 名稱上的近似，是當(dāng)時(shí)網(wǎng)景為了營(yíng)銷考慮與 Sun 公司達(dá)成協(xié)議的結(jié)果。為了取得技術(shù)優(yōu)勢(shì)，微軟推出了JScript 來迎戰(zhàn) JavaScript 的腳本語(yǔ)言。為了互用性，Ecma 國(guó)際（前身為歐洲計(jì)算機(jī)制造商協(xié)會(huì)）創(chuàng)建了 ECMA-262 標(biāo)準(zhǔn)（ECMAScript） ?，F(xiàn)在兩者都屬于 ECMAScript 的實(shí)現(xiàn)。盡管JavaScript 作為給非程序人員的腳本語(yǔ)言，而非作為給程序人員的編程語(yǔ)言來推廣和宣傳，但是 JavaScript 具有非常豐富的特性。JavaScript 代碼能夠具有交互性，能夠包含更多活躍的元素，就有必要在網(wǎng)頁(yè)中嵌入其它的技術(shù)。如：Javascript、VBS

43、cript、Document Object Model（DOM，文檔對(duì)象模型） 、Layers 和 Cascading Style Sheets（CSS，層疊樣式表） ，這里主要講 Javascript。那么Javascript 是什么東東？Javascript 就是適應(yīng)動(dòng)態(tài)網(wǎng)頁(yè)制作的需要而誕生的一種新的編程語(yǔ)言，如今越來越廣泛地使用于 Internet 網(wǎng)頁(yè)制作上。Javascript 是由 Netscape 公司開發(fā)的一種腳本語(yǔ)言，或者稱為描述語(yǔ)言。在 HTML 基礎(chǔ)上，使用 Javascript 可以開發(fā)交互式 Web 網(wǎng)頁(yè)。Javascript 的出現(xiàn)使得網(wǎng)頁(yè)和用戶之間實(shí)現(xiàn)了一種實(shí)時(shí)性

44、的、動(dòng)態(tài)的、交互性的關(guān)系，使網(wǎng)頁(yè)包含更多活躍的元素和更加精彩的內(nèi)容。運(yùn)行用 Javascript 編寫的程序需要能支持 JavaScript 語(yǔ)言的瀏覽器。Netscape 公司 Navigator 30 以上版本的瀏覽器都能支持 JavaScript 程序，微軟公司 Internet Explorer 30 以上版本的瀏覽器基本上支持 JavaScript。微軟公司還有自己開發(fā)的 JavaScript，稱為 JScript。JavaScript 和Jscript 基本上是相同的，只是在一些細(xì)節(jié)上有出入。 JavaScript 短小精悍，又是在客戶機(jī)上執(zhí)行的，大大提高了網(wǎng)頁(yè)的瀏覽速度和交互能力

45、。 同時(shí)它又是專門為制作 Web 網(wǎng)頁(yè)而量身定做的一種簡(jiǎn)單的編程語(yǔ)言。 JavaScript 使網(wǎng)頁(yè)增加互動(dòng)性。JavaScript 使有規(guī)律地重復(fù)的 HTML 文段簡(jiǎn)化，減少下載時(shí)間。JavaScript 能及時(shí)響應(yīng)用戶的操作，對(duì)提交表單做即時(shí)的檢查，無需浪費(fèi)時(shí)間交由 CGI 驗(yàn)證。JavaScript 的特點(diǎn)是無窮無盡的，只要你有創(chuàng)意。 3.63.6 淘寶客淘寶客淘寶客是指通過互聯(lián)網(wǎng)幫助淘寶賣家推廣商品，并按照成交效果獲得傭金的人或者集體（可以是個(gè)人、網(wǎng)站、團(tuán)體、公司） 。 1、組成模式在淘寶客中，有淘寶聯(lián)盟、賣家、淘客以及買家四個(gè)角色，他們每個(gè)都是不可缺失的一環(huán)，如圖所示。圖 3.1 淘

46、寶聯(lián)盟組成模式（1）淘寶聯(lián)盟：一個(gè)推廣平臺(tái)，幫助賣家推廣產(chǎn)品；幫助淘客賺取利潤(rùn)，每筆推廣的交易抽取 10%的服務(wù)費(fèi)用。（2）賣家：傭金支出者，他們提供自己需要推廣的商品到淘寶聯(lián)盟，并設(shè)置每賣出一個(gè)產(chǎn)品愿意支付的傭金。（3）淘寶客：傭金賺取者，他們?cè)谔詫毬?lián)盟中找到賣家發(fā)布的產(chǎn)品，并且推廣出去，當(dāng)有買家通過自己的推廣鏈接成交后，那么就能夠賺到賣家提供的傭金（其中一部分需要作為淘寶聯(lián)盟的服務(wù)費(fèi)） 。（4）買家：就是單純的購(gòu)買者。2、發(fā)展歷程2009 年 1 月 12 日起，國(guó)內(nèi)網(wǎng)絡(luò)營(yíng)銷平臺(tái)“淘客推廣平臺(tái)”正式更名為淘寶客，意味著大淘寶戰(zhàn)略實(shí)施后，原淘客推廣平臺(tái)與淘寶交易平臺(tái)的進(jìn)一步整合的完成！201

47、0 年 3 月 19 日消息，基于淘寶客的“淘寶聯(lián)盟”已悄然成型，淘寶網(wǎng)將在近日針對(duì)中小站長(zhǎng)以及網(wǎng)絡(luò)合作伙伴推出這一平臺(tái)。所有用戶都可以自由申請(qǐng)加入淘寶聯(lián)盟，當(dāng)通過注冊(cè)申請(qǐng)后，即可成為一名“淘寶客” 。目前淘寶客的推廣是一種按成交計(jì)費(fèi)的推廣模式，淘寶客只要從淘寶客推廣專區(qū)獲取商品代碼，任何買家（包括您自己）經(jīng)過您的推廣（鏈接、個(gè)人網(wǎng)站，博客或者社區(qū)發(fā)的帖子）進(jìn)入淘寶賣家店鋪完成購(gòu)買后，就可得到由賣家支付的傭金。3、具體形式淘寶客推廣目前主要可以分成如下 2 大類：（1）擁有獨(dú)立平臺(tái)的專業(yè)淘寶客：這類淘寶客精通網(wǎng)站技術(shù)，搭建專業(yè)的平臺(tái)，如淘寶客返利網(wǎng)站（惠集網(wǎng),返利，QQ 等） 、獨(dú)立博客、商品

48、導(dǎo)購(gòu)平臺(tái)、用戶分享網(wǎng)站（美麗說）等來吸引客戶，賺取一定的傭金。（2）自由的淘寶客：這類淘寶客沒有固定的推廣方式，不管技術(shù)還是實(shí)力都不是很雄厚，主要論壇、博客、SNS 平臺(tái)，或者微博、郵件、Q 群等作為推廣方式。很適合大眾新手。第四章第四章 網(wǎng)站總體規(guī)劃網(wǎng)站總體規(guī)劃隨著互聯(lián)網(wǎng)的普及和發(fā)展, 電子商務(wù)成為企業(yè)和商家的最終選擇,它具有開放性、國(guó)際性、實(shí)時(shí)性、互動(dòng)性和低成本的特點(diǎn),越來越受到企業(yè)的青睞。而企業(yè)要實(shí)現(xiàn)電子商務(wù)活動(dòng)則必須依賴于電子商務(wù)網(wǎng)站。所謂電子商務(wù)網(wǎng)站是企業(yè)開展電子商務(wù)的基礎(chǔ)設(shè)施和信息平臺(tái),是實(shí)施電子商務(wù)的公司或商家與服務(wù)對(duì)象的交互頁(yè)面,是電子商務(wù)系統(tǒng)運(yùn)轉(zhuǎn)的承擔(dān)者和表現(xiàn)者。無論是什么樣

49、的企業(yè),電子商務(wù)網(wǎng)站都是企業(yè)在互聯(lián)網(wǎng)平臺(tái)上與客戶交流的一個(gè)窗口,是買賣雙方信息交流與傳遞的渠道,是企業(yè)宣傳其形象,展示其產(chǎn)品與服務(wù)的平臺(tái)。電子商務(wù)網(wǎng)站的設(shè)計(jì)是否合理,功能是否齊全,用戶使用是否方便,安全是否得到保障是企業(yè)實(shí)現(xiàn)電子商務(wù)成敗的關(guān)鍵。4.14.1 網(wǎng)站首頁(yè)設(shè)計(jì)網(wǎng)站首頁(yè)設(shè)計(jì)首頁(yè)設(shè)計(jì)是一個(gè)網(wǎng)站成功與否的關(guān)鍵。是否能夠吸引瀏覽者留在站點(diǎn)上,是不是能夠促使瀏覽者繼續(xù)點(diǎn)擊進(jìn)入,全憑首頁(yè)設(shè)計(jì)的效果。所以,首頁(yè)的設(shè)計(jì)和制作必須高度重視。從根本上說,首頁(yè)就是全站內(nèi)容的目錄,也是一個(gè)索引。但不能只是簡(jiǎn)單地羅列目錄,要設(shè)計(jì)好一個(gè)首頁(yè),必須做好以下幾方面的工作:一是要確定好首頁(yè)的功能模塊,如網(wǎng)站名稱、主菜

50、單、新聞、友情鏈接、版權(quán)等;二是要設(shè)計(jì)好首頁(yè)的版面,在網(wǎng)站功能模塊確定后,要開始設(shè)計(jì)首頁(yè)的版面;三是首頁(yè)的內(nèi)容要緊扣主題,不要太過繁雜;四是要確保首頁(yè)能夠快速安全訪問;五是首頁(yè)的結(jié)構(gòu)要簡(jiǎn)單清晰;六是首頁(yè)的色彩搭配要合理,不要使用過多的顏色。總之,首頁(yè)的規(guī)劃應(yīng)該是:主題鮮明而富有特色、內(nèi)容精煉而新穎、結(jié)構(gòu)簡(jiǎn)單而清晰、訪問安全而快速、功能完善而易用、 布局合理而高雅、色彩鮮明而和諧,具有親和力和吸引力,能夠留住以前的訪問者和不斷吸引新的訪問者。4.24.2 網(wǎng)站內(nèi)容設(shè)計(jì)網(wǎng)站內(nèi)容設(shè)計(jì)信息內(nèi)容是網(wǎng)站的核心與靈魂,是網(wǎng)站最根本的要素。如果說網(wǎng)站架構(gòu)是骨架, 那么網(wǎng)站內(nèi)容就是血和肉,是瀏覽者了解企業(yè)的關(guān)鍵

51、。在確定網(wǎng)站內(nèi)容時(shí),第一, 要保證網(wǎng)站的內(nèi)容要新穎、精煉、專業(yè)、準(zhǔn)確、真實(shí); 第二,雖然圖像、聲音和視頻信息能夠比普通文本提供更豐富和更直接的信息,產(chǎn)生更大的吸引力,但由于目前網(wǎng)絡(luò)速度的限制文本字符可提供較快的瀏覽速度,因此,圖像和多媒體信息的使用要適中。另外減少文件數(shù)量和大小也是必要的。第三,網(wǎng)站內(nèi)容要及時(shí)更新,經(jīng)常維護(hù)更新,給用戶提供最新的信息,是網(wǎng)站增加吸引力的重要手段。4.34.3 網(wǎng)站功能設(shè)計(jì)網(wǎng)站功能設(shè)計(jì)在進(jìn)行網(wǎng)站功能設(shè)計(jì)時(shí),首先要知道網(wǎng)站的具體內(nèi)容,所以網(wǎng)站的功能和網(wǎng)站所提供的內(nèi)容息息相關(guān)。在進(jìn)行企業(yè)網(wǎng)站功能設(shè)計(jì)時(shí)應(yīng)該進(jìn)行網(wǎng)站需求分析，網(wǎng)站功能的設(shè)計(jì)取決于網(wǎng)站的目標(biāo)和規(guī)模,所以在進(jìn)

52、行網(wǎng)站功能設(shè)計(jì)時(shí),首先要確定網(wǎng)站的目標(biāo)和規(guī)模,在此基礎(chǔ)上再?zèng)Q定網(wǎng)站應(yīng)該具有哪些功能,從而才能符合網(wǎng)站實(shí)際需求。4.44.4 網(wǎng)站結(jié)構(gòu)設(shè)計(jì)網(wǎng)站結(jié)構(gòu)設(shè)計(jì)為了實(shí)現(xiàn)信息的有效傳遞,使訪問者方便快速地查找所需要的信息,也為了便于網(wǎng)站正式運(yùn)行后網(wǎng)站的更新和維護(hù),網(wǎng)站結(jié)構(gòu)設(shè)計(jì)十分重要。網(wǎng)站的結(jié)構(gòu)包括網(wǎng)站的目錄結(jié)構(gòu)和網(wǎng)站的鏈接結(jié)構(gòu)。規(guī)劃合理的目錄結(jié)構(gòu)對(duì)于網(wǎng)站所有者來說,可以在以后的內(nèi)容更新和維護(hù)中,節(jié)省大量的時(shí)間和精力。目錄結(jié)構(gòu)是一個(gè)容易忽略的問題,很多網(wǎng)站都是未經(jīng)規(guī)劃,隨意創(chuàng)建目錄和子目錄。目錄結(jié)構(gòu)的好壞,對(duì)瀏覽者并沒有什么太大的影響,但是對(duì)于站點(diǎn)本身的上傳維護(hù)、未來的內(nèi)容擴(kuò)充和移植有著重要的影響。4.54

53、.5 網(wǎng)站頁(yè)面可視化設(shè)計(jì)網(wǎng)站頁(yè)面可視化設(shè)計(jì)頁(yè)面可視化設(shè)計(jì)主要包括頁(yè)面組織效果、頁(yè)面色調(diào)效果、頁(yè)面版式設(shè)計(jì)、頁(yè)面美術(shù)設(shè)計(jì)等幾方面內(nèi)容。在頁(yè)面組織過程中,可以運(yùn)用對(duì)比與調(diào)和、對(duì)稱與平衡、節(jié)奏與韻律以及留白等手段。在網(wǎng)頁(yè)配色中,還應(yīng)該注意:一是不要將所有顏色都用到,盡量控制在三種色彩以內(nèi);二是背景和前景的對(duì)比盡量要大,絕對(duì)不要用花紋繁復(fù)的圖案作背景,以便突出主要文字內(nèi)容。對(duì)于版面布局的設(shè)計(jì),應(yīng)當(dāng)重視如下原則:加強(qiáng)視覺效果,加強(qiáng)文字圖案的可視度和可讀性;統(tǒng)一感的視覺;新鮮和個(gè)性是布局的最高境界。4.64.6 網(wǎng)站風(fēng)格網(wǎng)站風(fēng)格網(wǎng)站的整體風(fēng)格是人們最希望掌握,也是最難以掌握的。其難點(diǎn)在于沒有一個(gè)固定的模式

54、可以參照和模仿。如果要設(shè)計(jì)和普通網(wǎng)站有區(qū)別的站點(diǎn),則必須要研究網(wǎng)站的整體風(fēng)格。風(fēng)格是抽象的,是指站點(diǎn)的整體形象給瀏覽者的綜合感受;風(fēng)格是獨(dú)特的,是一個(gè)站點(diǎn)不同于其他網(wǎng)站的地方,或者色彩、或者技術(shù)、或者交互性; 風(fēng)格是有人性的,通過網(wǎng)站的外表、內(nèi)容、文字和交流,可以概括一個(gè)網(wǎng)站的個(gè)性。4.74.7 網(wǎng)站的欄目和版塊設(shè)計(jì)網(wǎng)站的欄目和版塊設(shè)計(jì)設(shè)計(jì)網(wǎng)站的中心工作之一, 就是設(shè)置網(wǎng)站的欄目和版塊。欄目的實(shí)質(zhì)是網(wǎng)站的大綱索引,索引應(yīng)該將網(wǎng)站的主體明確地顯示出來。在制定欄目的時(shí)候,要仔細(xì)考慮,合理安排。一般的網(wǎng)站欄目安排要注意以下幾方面:一是緊扣主題;二是設(shè)立一個(gè)最近更新或網(wǎng)站指南欄目; 三是設(shè)定一個(gè)可以雙

55、向交流的欄目;四是設(shè)計(jì)一個(gè)下載或常見問題解答欄目。版塊比欄目的概念要大一些,每個(gè)版塊都有自己的欄目。例如,網(wǎng)易的站點(diǎn)分新聞、體育、財(cái)經(jīng)、娛樂、教育等版塊,每個(gè)版塊下面還有各自的主欄目。一般的個(gè)人站點(diǎn)內(nèi)容少,只有主欄目就夠了。根據(jù)以上幾點(diǎn)，設(shè)計(jì)了網(wǎng)站的整體結(jié)構(gòu)：網(wǎng)站的前臺(tái)頁(yè)面包括公司首頁(yè)、公司簡(jiǎn)介、公司文化、最新動(dòng)態(tài)、產(chǎn)品展示、蟲害知識(shí)、招聘信息、服務(wù)承諾、聯(lián)系我們、在線留言等。圖 4.1 網(wǎng)站總體結(jié)構(gòu)圖第五章第五章 網(wǎng)站頁(yè)面實(shí)現(xiàn)網(wǎng)站頁(yè)面實(shí)現(xiàn)有了網(wǎng)站設(shè)計(jì)的基礎(chǔ)，企業(yè)網(wǎng)站的需求，技術(shù)的支持等一系列的準(zhǔn)備之后就可以開始設(shè)計(jì)一個(gè)網(wǎng)站了，下面就說說長(zhǎng)沙洛楓有害生物防治有限公司企業(yè)網(wǎng)站的頁(yè)面實(shí)現(xiàn)。5.15

56、.1 網(wǎng)站功能分析網(wǎng)站功能分析將要做的是一個(gè)公司網(wǎng)站，該公司是一家專業(yè)從事白蟻、蟑螂、老鼠、蚊蠅、螞蟻、跳蚤、臭蟲、蜱等病媒生物防治及產(chǎn)品銷售的專業(yè) PCO 公司。因此建設(shè)網(wǎng)站的目的主要有兩個(gè)：一是使瀏覽者或潛在的客戶迅速了解公司，這就要求網(wǎng)站的文字要簡(jiǎn)練，盡量減少大篇幅的文字?jǐn)⑹觯?xiàng)目效果圖要精彩，當(dāng)然網(wǎng)頁(yè)的頁(yè)面效果也要漂亮，以使瀏覽者或潛在的客戶感覺到公司的實(shí)力和品牌；二是使瀏覽者或潛在的客戶迅速了解及熟悉公司的相關(guān)產(chǎn)品。建立公司網(wǎng)站要有一個(gè)清晰的網(wǎng)站布局。比如說，導(dǎo)航條要不要？很多人說那東西人人在做，就顯得太俗沒個(gè)性，難顯示出新潮。但導(dǎo)航條之所以有那么多人在用，是因?yàn)樗o瀏覽者一個(gè)明確的

57、布局，便利人們查找本身所需的信息。從某種角度上說，大家都在用的東西就說明它確實(shí)被大家所接受。要清楚網(wǎng)站做出來是給每一個(gè)人普通用戶看的。網(wǎng)站還要經(jīng)常更新，給人以新意。網(wǎng)站的前臺(tái)頁(yè)面包括公司首頁(yè)、公司簡(jiǎn)介、公司文化、最新動(dòng)態(tài)、產(chǎn)品展示、蟲害知識(shí)、招聘信息、服務(wù)承諾、聯(lián)系我們、在線留言等。5.25.2 首頁(yè)設(shè)計(jì)首頁(yè)設(shè)計(jì)有了基于準(zhǔn)備之后的網(wǎng)站策劃，就可以開始進(jìn)行頁(yè)面設(shè)計(jì)了，頁(yè)面設(shè)計(jì)主要包括創(chuàng)意、色彩和版式三個(gè)方面。創(chuàng)意會(huì)使網(wǎng)頁(yè)在眾多的競(jìng)爭(zhēng)對(duì)手中脫穎而出；色彩可以使網(wǎng)頁(yè)獲得生命的力量；板式則是和用戶溝通的核心，所以這三者缺一不可。一般的網(wǎng)站都需要這樣一些版塊站名稱、廣告區(qū)，導(dǎo)航區(qū)、新聞區(qū)、友情鏈接和版權(quán)

58、等版塊。這些版塊又可以稱之為模塊。選擇哪些模塊，實(shí)現(xiàn)哪些功能是否需要添加其他模塊都是首頁(yè)設(shè)計(jì)制作時(shí)首先需要確定的，下面就開始具體的首頁(yè)設(shè)計(jì)制作工作。1、網(wǎng)站首頁(yè)結(jié)構(gòu)根據(jù)需求可以知道，版面布局采用的是 CSS 定位、層、和表格等技術(shù)，CSS 可以很方便地修改網(wǎng)頁(yè)的格式、減小網(wǎng)頁(yè)的體積、輕松增加網(wǎng)頁(yè)的特殊效果，用 CSS 固定好每個(gè)區(qū)域要放置的內(nèi)容后，再附加用層或表格；頁(yè)面結(jié)構(gòu)是 Logo 于整個(gè)頁(yè)面的頭部， 然后是 Banner 和導(dǎo)航條，中間是網(wǎng)頁(yè)的主要內(nèi)容，最底層是版權(quán)。 這種結(jié)構(gòu)既美觀又符合人們的瀏覽習(xí)慣。圖 5.1 頁(yè)面布局圖2、風(fēng)格定位打開一個(gè)網(wǎng)站，給用戶留下第一印象的既不是網(wǎng)站豐富的

59、內(nèi)容，也不是網(wǎng)站合理的版面布局，而是網(wǎng)站的色彩。色彩對(duì)人的視覺效果非常明顯，一個(gè)網(wǎng)站設(shè)計(jì)成功與否，在某種程度上取決于色彩的運(yùn)用和搭配。因?yàn)榫W(wǎng)頁(yè)設(shè)計(jì)屬于一種平面效果設(shè)計(jì)，在排除立體圖形、動(dòng)畫效果之外，在平面圖上，色彩的沖擊力是最強(qiáng)的，它很容易給用戶留下深刻的印象。因此，在設(shè)計(jì)網(wǎng)頁(yè)時(shí)，必須要高度重視色彩的搭配。本網(wǎng)站的搭配主色為：白、淡藍(lán)、綠、三種顏色。白色代表純潔、純真、樸素、神圣、明快。淡藍(lán)色代表熱情、活潑、熱鬧、溫暖、幸福、吉祥。綠色代表心情平靜，心曠神怡,安詳嫻靜,心情很安定、舒適，充分代表了一個(gè)企業(yè)應(yīng)有的氣質(zhì)和形象。給客戶留下深刻的印象。3、頁(yè)頭設(shè)計(jì)網(wǎng)站的頁(yè)頭主要分為兩個(gè)部分。一是 Lo

60、go，logo 是一張公司的標(biāo)志圖，直接放置在頭部容器左側(cè)，調(diào)整好位置；二是導(dǎo)航條，網(wǎng)站導(dǎo)航條因?yàn)橛辛Ⅲw感效果，因此它需要脫離文本流，因此在控制樣式的時(shí)候要用定位，相對(duì)于文本流的定位。網(wǎng)站的導(dǎo)航欄目可以讓用戶對(duì)網(wǎng)站的內(nèi)容及信息一目了然。導(dǎo)航分為：公司首頁(yè)、公司簡(jiǎn)介、公司文化、最新動(dòng)態(tài)、產(chǎn)品展示、蟲害知識(shí)、招聘信息、服務(wù)承諾、聯(lián)系我們、在線留言。4、banner 設(shè)計(jì)Banner 可以說是企業(yè)網(wǎng)頁(yè)中一道美麗的風(fēng)景線。網(wǎng)頁(yè)中的 banner 信息代表著一個(gè)企業(yè)的素質(zhì)和形象，所以應(yīng)該表現(xiàn)的大氣、端莊而且精細(xì)。還更要表現(xiàn)出一個(gè)企業(yè)應(yīng)該有的朝氣和活力。因此 banner 圖片加文字說明成為首選。實(shí)例展示

61、從側(cè)面讓客戶了解到公司的實(shí)力。在首頁(yè)的版面，先是用 Photoshop 對(duì)網(wǎng)站模板進(jìn)行切片，然后用 DIV+CSS 進(jìn)行排版。圖 5.2 banner 效果圖5、首頁(yè)主信息部分設(shè)計(jì)根據(jù)瀏覽者在閱讀時(shí)經(jīng)常采用從上到下，從左到右的習(xí)慣，主體內(nèi)容中，分為三個(gè)板塊：左欄：白蟻危害的視頻、聯(lián)系我們；中欄：公司簡(jiǎn)介、公司動(dòng)態(tài)；右欄：蟲害知識(shí)、服務(wù)項(xiàng)目；下方還有一欄產(chǎn)品展示，這樣能更好地吸引瀏覽者的眼球，同時(shí)也體現(xiàn)公司的專業(yè)、能力等。優(yōu)秀網(wǎng)站案例采用網(wǎng)頁(yè)圖片切換的形式展現(xiàn)在首頁(yè)中，使整個(gè)首頁(yè)處于于靜于動(dòng)的畫面，這種結(jié)構(gòu)既美觀又符合人們的瀏覽習(xí)慣。圖 5.3 首頁(yè)主信息部分效果圖6、頁(yè)腳 頁(yè)腳用了表格嵌套，采

62、用了四行布局，第一行是友情鏈接，第二行是公司網(wǎng)址，第三行是版權(quán)所有，第四行是流量統(tǒng)計(jì)代碼，另外右下角還有一個(gè)回到頂部的按鈕。圖 5.4 底部版權(quán)圖圖 5.5 首頁(yè)整體圖5.35.3 內(nèi)頁(yè)設(shè)計(jì)內(nèi)頁(yè)設(shè)計(jì)其他頁(yè)面的導(dǎo)航和頁(yè)面屬性都是采用首頁(yè)的導(dǎo)航和 body 屬性，左邊部分固定，顯示蟲害知識(shí)和聯(lián)系我們兩個(gè)板塊。1、公司簡(jiǎn)介公司簡(jiǎn)介界面介紹了公司基本情況，讓客戶更好的了解公司的產(chǎn)品和服務(wù)。效果圖如下圖 5.6 所示：圖 5.6 公司簡(jiǎn)介效果圖2、公司文化公司文化板塊讓客戶清晰的了解公司的文化，服務(wù)信息等等。公司文化是隨著企業(yè)的誕生和發(fā)展而共同生存的,并在企業(yè)中起著巨大的作用,是企業(yè)發(fā)展的能源,一個(gè)好的

63、企業(yè)必然有一個(gè)有凝聚力的企業(yè)文化伴隨企業(yè)的發(fā)展和壯大。效果圖如下圖 5.7 所示：圖 5.7 公司文化效果圖3、最新動(dòng)態(tài)最新動(dòng)態(tài)板塊介紹了公司的行業(yè)動(dòng)態(tài)，讓客戶更好的了解公司發(fā)展?fàn)顩r，發(fā)展前景等，效果圖如下圖 5.8 所示：圖 5.8 最新動(dòng)態(tài)效果圖4、產(chǎn)品展示產(chǎn)品展示頁(yè)面用來展示公司所銷售的各種產(chǎn)品，點(diǎn)擊圖片鏈接可以進(jìn)入淘寶旗艦店進(jìn)行購(gòu)買，主要是用來產(chǎn)品推介。效果圖如下 5.9 圖所示：圖 5.9 產(chǎn)品展示/淘寶店頁(yè)面效果圖5、蟲害知識(shí)蟲害知識(shí)板塊能讓客戶更好的了解各種有害生物的危害和防治方法，從而有助于激進(jìn)客戶購(gòu)買公司的各種產(chǎn)品，界面效果如下圖 5.10 所示：圖 5.10 蟲害知識(shí)效果圖

64、6、招聘信息招聘信息板塊能夠讓客戶知道公司的招聘需要，提供給對(duì)本職位感興趣的人一個(gè)應(yīng)聘的機(jī)會(huì)。網(wǎng)站的招聘信息界面效果，如下圖 5.11 所示： 圖 5.11 招聘信息效果圖7、服務(wù)承諾服務(wù)承諾們板塊主要是為了讓客戶對(duì)本公司更加信任。網(wǎng)站的服務(wù)承諾界面效果，如下圖 5.12 所示：圖 5.12 服務(wù)承諾效果圖8、聯(lián)系我們聯(lián)系我們板塊主要將聯(lián)系方式體現(xiàn)給客戶，介紹公司所在地、公司聯(lián)系電話等信息。當(dāng)客戶對(duì)我們的產(chǎn)品和服務(wù)有需要時(shí)，從而能夠及時(shí)迅速的聯(lián)系到公司，聯(lián)系我們頁(yè)面lxwm.html。網(wǎng)站的聯(lián)系我們界面效果，如下圖 5.13 所示：圖 5.13 聯(lián)系我們效果圖9、在線留言在線留言板塊能實(shí)現(xiàn)交流

65、的目的，讓客戶對(duì)公司的發(fā)展，公司的業(yè)務(wù)流程提出寶貴的意見和建議，這樣公司才能更好的為自己定位，才能根據(jù)客戶提出的意見來完善自身。網(wǎng)站的在線留言界面效果，如下圖 5.14 所示：圖 5.14 在線留言效果圖5.45.4 部分部分技術(shù)實(shí)現(xiàn)技術(shù)實(shí)現(xiàn)1、導(dǎo)航欄圖 5.15 導(dǎo)航欄效果圖導(dǎo)航欄運(yùn)用了 div+css 布局，實(shí)現(xiàn)了鼠標(biāo)點(diǎn)擊時(shí)字體出現(xiàn)斜體的特效2、Banner 圖片幻燈切換效果圖 5.16 Banner 圖片幻燈切換效果圖Banner 部分，當(dāng)鼠標(biāo)點(diǎn)擊 1、2、3 數(shù)字時(shí)，圖片進(jìn)行切換，圖片切換效果的實(shí)現(xiàn)利用了 javascript 代碼。3、圖片循環(huán)滾動(dòng)圖片循環(huán)滾動(dòng)的實(shí)現(xiàn)，利用了 div+

66、css 布局，java 代碼。圖 5.17 圖片循環(huán)滾動(dòng)效果圖4、QQ 咨詢臺(tái)的實(shí)現(xiàn) Javascript 代碼的調(diào)用實(shí)現(xiàn) QQ 咨詢臺(tái)，點(diǎn)擊在線咨詢便可即時(shí)聊天。圖 5.18 QQ 咨詢臺(tái)效果圖5、流量統(tǒng)計(jì)通過 javascript 代碼調(diào)用流量統(tǒng)計(jì)，當(dāng)點(diǎn)擊該圖標(biāo)時(shí)，就會(huì)統(tǒng)計(jì)出訪問該網(wǎng)站的 IP數(shù)。結(jié)果如圖所示：圖 5.19 流量統(tǒng)計(jì)效果圖總總 結(jié)結(jié)我的畢業(yè)設(shè)計(jì)快要結(jié)束了，我在學(xué)校的時(shí)間也就要?jiǎng)澤辖Y(jié)束符號(hào)，這最后的符號(hào)是問號(hào)、逗號(hào)或者感嘆號(hào)再有幾天也就有結(jié)果了。我想在這大學(xué)的最后時(shí)間里，我們每個(gè)人都會(huì)對(duì)我們一起度過的這幾年生活有點(diǎn)感慨吧，特別是設(shè)計(jì)這一階段。通過此次畢業(yè)設(shè)計(jì)，檢驗(yàn)了這三年來學(xué)習(xí)理論和專業(yè)知識(shí)的成果是怎樣的。讓我了解了真正開發(fā)一個(gè)網(wǎng)站需要具備很多知識(shí)和能力，而且積累一定的開發(fā)經(jīng)驗(yàn)也是很重要的。開發(fā)設(shè)計(jì)之前就必須進(jìn)行充分的需求分析，及時(shí)了解用戶的需求并聽取用戶的意見和建議，想實(shí)現(xiàn)什么功能，開發(fā)之后的作用意義是需求分析中最主要的。應(yīng)用了平時(shí)所學(xué)的知識(shí)和查閱了許多相關(guān)資料，把理論與實(shí)踐相結(jié)合，對(duì) Web 程序設(shè)計(jì)、Dreamweaver MX 網(wǎng)頁(yè)制作、有了更深的理解和認(rèn)識(shí)，