化妝品網(wǎng)頁(yè)設(shè)計(jì)與制作報(bào)告

1、網(wǎng)頁(yè)設(shè)計(jì)與制作報(bào)告學(xué) 號(hào)武 漢 科 技 大 學(xué) 城 市 學(xué) 院課 程 設(shè) 計(jì) 報(bào) 告 課程名稱 網(wǎng)頁(yè)設(shè)計(jì)與制作 題 目 化妝品公司網(wǎng)站設(shè)計(jì) 學(xué) 部 信息工程學(xué)部 專 業(yè) 班 級(jí) 姓 名 指導(dǎo)教師 2013年6月8日編號(hào)001網(wǎng)頁(yè)設(shè)計(jì)課程設(shè)計(jì)任務(wù)書課程設(shè)計(jì)項(xiàng)目名稱：化妝品公司網(wǎng)站設(shè)計(jì)課程設(shè)計(jì)開(kāi)發(fā)平臺(tái)與工具：dreamweaver/editplus + ie 7.0以上版本/firefox1.課程設(shè)計(jì)任務(wù)為某化妝品公司設(shè)計(jì)一個(gè)靜態(tài)網(wǎng)站，該網(wǎng)站用于宣傳公司的經(jīng)營(yíng)理念及品牌產(chǎn)品，客戶也可通過(guò)該網(wǎng)站與化妝品公司進(jìn)行適當(dāng)?shù)姆答伣涣鳌?.課程設(shè)計(jì)任務(wù)功能模塊（1）公司簡(jiǎn)介：包括董事長(zhǎng)致辭、公司介紹、企業(yè)文化

2、等多個(gè)子頁(yè)面。（2）品牌介紹：用于展示化妝品公司的各種品牌產(chǎn)品。（3）化妝知識(shí)：從化妝品和化妝道具兩個(gè)方面介紹化妝知識(shí)。（4）誠(chéng)招代理：用于招聘代理與業(yè)務(wù)協(xié)商，公告企業(yè)聯(lián)系方式。（5）客戶反饋：通過(guò)表單建立客戶與公司的交流平臺(tái)。3. 站點(diǎn)結(jié)構(gòu)導(dǎo)航圖首頁(yè)index客戶反饋誠(chéng)招代理公司簡(jiǎn)介品牌系列子頁(yè)子頁(yè)子頁(yè)子頁(yè)子頁(yè)子頁(yè)化妝知識(shí)4. 站點(diǎn)上交注意事項(xiàng)及考核標(biāo)準(zhǔn)（1）網(wǎng)頁(yè)設(shè)計(jì)作品須嚴(yán)格按照網(wǎng)頁(yè)設(shè)計(jì)與制作課程考試要求按時(shí)獨(dú)立完成，嚴(yán)禁無(wú)故拖延上交時(shí)間，杜絕請(qǐng)人代做或剽竊他人作品行為。（2）站點(diǎn)文件夾名稱必須采用學(xué)號(hào)+姓名形式（如201110137226zhangjing），網(wǎng)頁(yè)中須特別注明版權(quán)及作者的

3、有效聯(lián)系方式等相關(guān)資料，必要時(shí)可創(chuàng)建站點(diǎn)瀏覽說(shuō)明文檔。（3）網(wǎng)站的評(píng)價(jià)標(biāo)準(zhǔn)及分值分布為：主題和內(nèi)容（30分），導(dǎo)航、結(jié)構(gòu)和鏈接（20分），藝術(shù)性（30分），創(chuàng)造性（20分）。（4）學(xué)生的最終成績(jī)由網(wǎng)站和平時(shí)成績(jī)兩部分組成，其中網(wǎng)站成績(jī)70%，平時(shí)成績(jī)30%。目 錄1 網(wǎng)頁(yè)設(shè)計(jì)相關(guān)技術(shù)介紹11.1 html11.2 css11.3 javascript12 化妝品公司網(wǎng)站網(wǎng)站設(shè)計(jì)規(guī)劃22.1 網(wǎng)站介紹22.2 欄目設(shè)計(jì)32.2.1首頁(yè)欄目說(shuō)明32.2.2公司簡(jiǎn)介欄目說(shuō)明32.2.3品牌系列欄目說(shuō)明32.2.4化妝知識(shí)欄目說(shuō)明32.2.5誠(chéng)招代理欄目說(shuō)明32.2.6客戶反饋欄目說(shuō)明42.3 站點(diǎn)分

4、析及站點(diǎn)地圖42.3.1站點(diǎn)分析42.3.2站點(diǎn)地圖42.4 主頁(yè)面布局53 個(gè)人體會(huì)和感受74 參考文獻(xiàn)和網(wǎng)址85附圖91 網(wǎng)頁(yè)設(shè)計(jì)相關(guān)技術(shù)介紹1.1 html超級(jí)文本標(biāo)記語(yǔ)言（英文縮寫：html）是標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言下的一個(gè)應(yīng)用，也是一種規(guī)范，一種標(biāo)準(zhǔn)，它通過(guò)標(biāo)記符號(hào)來(lái)標(biāo)記要顯示的網(wǎng)頁(yè)中的各個(gè)部分。網(wǎng)頁(yè)文件本身是一種文本文件，通過(guò)在文本文件中添加標(biāo)記符，可以告訴瀏覽器如何顯示其中的內(nèi)容（如：文字如何處理，畫面如何安排，圖片如何顯示等）。瀏覽器按順序閱讀網(wǎng)頁(yè)文件，然后根據(jù)標(biāo)記符解釋和顯示其標(biāo)記的內(nèi)容，對(duì)書寫出錯(cuò)的標(biāo)記將不指出其錯(cuò)誤，且不停止其解釋執(zhí)行過(guò)程，編制者只能通過(guò)顯示效果來(lái)分析出錯(cuò)原因和

5、出錯(cuò)部位。1.2 css級(jí)聯(lián)樣式表（cascading style sheet）簡(jiǎn)稱“css”，通常又稱為“風(fēng)格樣式表（style sheet）”，它是用來(lái)進(jìn)行網(wǎng)頁(yè)風(fēng)格設(shè)計(jì)的。比如，如果想讓鏈接字未點(diǎn)擊時(shí)是藍(lán)色的，當(dāng)鼠標(biāo)移上去后字變成紅色的且有下劃線，這就是一種風(fēng)格。通過(guò)設(shè)立 樣式表，可以統(tǒng)一地控制html中各標(biāo)志的顯示屬性。級(jí)聯(lián)樣式表可以使人更能有效地控制網(wǎng)頁(yè)外觀。使用級(jí)聯(lián)樣式表，可以擴(kuò)充精確指定網(wǎng)頁(yè)元素位置，外觀以及創(chuàng)建特殊效果的能力。1.3 javascriptjavascript是一種基于對(duì)象和事件驅(qū)動(dòng)并具有相對(duì)安全性的客戶端腳本語(yǔ)言。同時(shí)也是一種廣泛用于客戶端web開(kāi)發(fā)的腳本語(yǔ)言，常

6、用來(lái)給html網(wǎng)頁(yè)添加動(dòng)態(tài)功能，比如響應(yīng)用戶的各種操作。它最初由網(wǎng)景公司（netscape）的brendan eich設(shè)計(jì)，是一種動(dòng)態(tài)、弱類型、基于原型的語(yǔ)言，內(nèi)置支持類。javascript是sun公司的注冊(cè)商標(biāo)。ecma國(guó)際以javascript為基礎(chǔ)制定了ecmascript標(biāo)準(zhǔn)。javascript也可以用于其他場(chǎng)合，如服務(wù)器端編程。完整的javascript實(shí)現(xiàn)包含三個(gè)部分：ecmascript，文檔對(duì)象模型，字節(jié)順序記號(hào)。2 化妝品公司網(wǎng)站網(wǎng)站設(shè)計(jì)規(guī)劃2.1 網(wǎng)站介紹對(duì)于一個(gè)以化妝品行業(yè)企業(yè)而言，企業(yè)的品牌形象至關(guān)重要。 特別是對(duì)于互聯(lián)網(wǎng)技術(shù)高度發(fā)展的今天，大多客戶都是通過(guò)網(wǎng)絡(luò)來(lái)了

7、解企業(yè)產(chǎn)品、企業(yè)形象及企業(yè)實(shí)力，因此，企業(yè)網(wǎng)站的形象往往決定了客戶對(duì)企業(yè)產(chǎn)品的信心。建立具有國(guó)際水準(zhǔn)的網(wǎng)站能夠極大的提升企業(yè)的整體形象。企業(yè)網(wǎng)站的建設(shè)將會(huì)為企業(yè)內(nèi)部管理帶來(lái)一種全新的模式。網(wǎng)站是實(shí)現(xiàn)這一模式的平臺(tái)。在降低企業(yè)內(nèi)部資源損耗、減低成本、加強(qiáng)企業(yè)員工與員工，企業(yè)與員工之間的聯(lián)系和溝通等方面發(fā)揮巨大作用，最終使企業(yè)的運(yùn)營(yíng)和運(yùn)作達(dá)到最大的優(yōu)化。銷售力指的是，產(chǎn)品的綜合素質(zhì)優(yōu)勢(shì)在銷售上的體現(xiàn)?，F(xiàn)代營(yíng)銷理論認(rèn)為，銷售亦即是傳播。銷售的成功與否，除了決定于能否將產(chǎn)品的各項(xiàng)優(yōu)勢(shì)充分地傳播出去之外，還要看目標(biāo)對(duì)象從中得到的有效信息有多少。由于互聯(lián)網(wǎng)所具有的“一對(duì)一”的特性，目標(biāo)對(duì)象能自主地選擇對(duì)自

8、己有用的信息。這本身已經(jīng)決定了消費(fèi)者對(duì)信息已經(jīng)有了一個(gè)感興趣的前提。使信息的傳播不在是主觀加給消費(fèi)者，而是由消費(fèi)者有選擇地主動(dòng)吸收。 同時(shí)，產(chǎn)品信息通過(guò)網(wǎng)站的先進(jìn)設(shè)計(jì)，既有報(bào)紙信息量大的優(yōu)點(diǎn)，又結(jié)合了電視聲、光、電的綜合刺激優(yōu)勢(shì)，可以牢牢地吸引住目標(biāo)對(duì)象。因此，產(chǎn)品信息傳播的有效性將遠(yuǎn)遠(yuǎn)提高，同時(shí)亦即是提高了產(chǎn)品的銷售力。許多人知道，購(gòu)買產(chǎn)品不僅買的是那些看得見(jiàn)的實(shí)物，還有那些看不見(jiàn)的售后服務(wù)。這也就是產(chǎn)品的附加值。產(chǎn)品的附加值越高，在市場(chǎng)上就越有競(jìng)爭(zhēng)力，就越受消費(fèi)者歡迎。因此，企業(yè)要贏得市場(chǎng)就要千方百計(jì)地提高產(chǎn)品的附加值。在現(xiàn)階段，傳統(tǒng)的售后服務(wù)手段已經(jīng)遠(yuǎn)遠(yuǎn)不能滿足客戶的需要，為消費(fèi)者提供便

9、捷、有效、即時(shí)的24小時(shí)網(wǎng)上服務(wù)，是一個(gè)全新體現(xiàn)項(xiàng)目附加值的方向。世界各地的客戶在任何時(shí)刻都可以通過(guò)網(wǎng)站下載自己需要的資料，在線獲得疑難的解答，在線提交自己的問(wèn)題。2.2 欄目設(shè)計(jì)2.2.1首頁(yè)欄目說(shuō)明1、 首頁(yè)風(fēng)格門戶型首頁(yè)風(fēng)格，集中大量的信息與資訊，給人以更具可讀性2、 公司新聞發(fā)布公司最近的新聞動(dòng)態(tài)3、 近期優(yōu)惠以圖片形式，表現(xiàn)公司最近的優(yōu)惠銷售，可鏈接進(jìn)入查看詳情4、 公司優(yōu)勢(shì)展現(xiàn)公司的各項(xiàng)優(yōu)勢(shì)，突出公司的賣點(diǎn)5、 合作伙伴以圖片形式，介紹公司的各個(gè)合作伙伴，鏈接進(jìn)入看全文2.2.2公司簡(jiǎn)介欄目說(shuō)明1、公司簡(jiǎn)介公司圖片、名稱解釋、公司簡(jiǎn)介、發(fā)展歷程、企業(yè)規(guī)劃等2、企業(yè)文化企業(yè)理念、企業(yè)

10、形象推廣、公司文化生活3、董事致辭企業(yè)管理、企業(yè)的發(fā)展方向2.2.3品牌系列欄目說(shuō)明1、各類化妝品展示公司所有的化妝品2、省錢分析對(duì)具體參考團(tuán)購(gòu)的客戶進(jìn)行省錢分析3、套餐說(shuō)明以列表形式將套餐的訂購(gòu)流程4、團(tuán)購(gòu)新聞近期公司開(kāi)展團(tuán)購(gòu)的新聞回顧，以圖片、標(biāo)題鏈接進(jìn)入5、網(wǎng)上商城客戶可以直接在商城上訂購(gòu)套餐2.2.4化妝知識(shí)欄目說(shuō)明1、 介紹兩個(gè)方面化妝知識(shí)2、 通過(guò)這個(gè)欄目長(zhǎng)期引導(dǎo)客戶正確的認(rèn)識(shí)與使用化妝品2.2.5誠(chéng)招代理欄目說(shuō)明內(nèi)容：公司地址、聯(lián)系方式、在線qq2.2.6客戶反饋欄目說(shuō)明1、 客戶與企業(yè)之間互動(dòng)2、 反映客戶疑問(wèn)平臺(tái)2.3 站點(diǎn)分析及站點(diǎn)地圖2.3.1站點(diǎn)分析 1、網(wǎng)站的設(shè)計(jì)：是

11、用于實(shí)現(xiàn)為有需求的客戶了解品牌與購(gòu)買，更靈活的進(jìn)行銷售與交流。2、網(wǎng)站的主題：用大理石的花紋作為背景，顯得更為大氣，頁(yè)面主要為淡灰色，使得網(wǎng)站的美觀大方，結(jié)構(gòu)清晰，內(nèi)容鮮明。3、logo標(biāo)志：logo圖標(biāo)放在網(wǎng)站最顯眼的地方，色彩一定要符合頁(yè)面整體的風(fēng)格。4、網(wǎng)站的風(fēng)格：站點(diǎn)層次分明，內(nèi)容顯而易見(jiàn)，要適合年輕的人群的審美官。5、功能分析：使用js實(shí)現(xiàn)圖片交互，把本站設(shè)為首頁(yè)，加入收藏功能，實(shí)現(xiàn)表單動(dòng)態(tài)驗(yàn)證和彈性回頂部功能，在商品展示中會(huì)用到大量的圖片，使用隨滾動(dòng)加載圖片的功能，可以降低對(duì)網(wǎng)速影響；打開(kāi)首頁(yè)使會(huì)彈出一個(gè)公告欄，它有著更好的動(dòng)畫性，關(guān)閉時(shí)自動(dòng)縮小左上角。2.3.2站點(diǎn)地圖圖2-1

12、站點(diǎn)地圖2.4 主頁(yè)面布局圖2-2 頁(yè)面布局1圖2-3 頁(yè)面布局21、 采用“國(guó)”字形的div+css構(gòu)架進(jìn)行首頁(yè)的排版，這樣簡(jiǎn)潔，美觀。2、 頭部是網(wǎng)站的收藏、換膚功能；導(dǎo)航是一組橫向?qū)Ш綏l；main為主體內(nèi)容；底部是友情鏈接與版權(quán)信息。3、 由于將大部分頁(yè)面代碼寫在了css當(dāng)中，使得頁(yè)面體積容量變得更小。相對(duì)于表格嵌套的方式，div+css將頁(yè)面獨(dú)立成更多的區(qū)域，在打開(kāi)頁(yè)面的時(shí)候，逐層加載。而不像表格嵌套那樣將整個(gè)頁(yè)面圈在一個(gè)大表格里，使得加載速度很慢。4、 由于使用了div+css制作方法，在修改頁(yè)面的時(shí)候更加容易省時(shí)。根據(jù)區(qū)域內(nèi)容標(biāo)記，到css里找到相應(yīng)的id，使得修改頁(yè)面的時(shí)候更加方

13、便，也不會(huì)破壞頁(yè)面其他部分的布局樣式。5、 使用 div+css的制作方法，將所有頁(yè)面，或所有區(qū)域統(tǒng)一用css文件控制，就避免了不同區(qū)域或不同頁(yè)面體現(xiàn)出的效果偏差。6、css可以輕松的解決各個(gè)瀏覽器之間的兼容性 。3 個(gè)人體會(huì)和感受“書到用時(shí)方恨少”，從這次實(shí)訓(xùn)當(dāng)中我深刻的體會(huì)到理論知識(shí)的重要性，理論結(jié)合實(shí)際才能將知識(shí)掌握牢固。為了使自己的網(wǎng)頁(yè)風(fēng)格統(tǒng)一，是自己在設(shè)計(jì)過(guò)程中更加省時(shí)省力，我使用了較多的模板，這使我的工作效率大大提高。在設(shè)計(jì)的過(guò)程中遇到了很多問(wèn)題，有些知識(shí)理解得不夠深刻，掌握得不夠牢固，操作不夠熟練，沒(méi)有能完全達(dá)到自己預(yù)期的效果，還好通過(guò)老師的細(xì)心指導(dǎo)和同學(xué)們的幫助才能達(dá)到最終效果

14、。實(shí)訓(xùn)期間上網(wǎng)查看了一些知名的網(wǎng)站開(kāi)發(fā)出的網(wǎng)頁(yè)，不僅欄目?jī)?nèi)容豐富，信息量大，而且頁(yè)面圖文并茂，五彩繽紛，使得網(wǎng)民贊嘆不已，流連忘返。當(dāng)前的軟件的功能日趨復(fù)雜，不學(xué)到一定的深度和廣度是難以在實(shí)際工作中應(yīng)付自如的。因此反映出自己學(xué)習(xí)的還不夠，存在許多缺點(diǎn)疏漏，需要更加刻苦鉆研及學(xué)習(xí)，不斷開(kāi)拓視野，增強(qiáng)自己的實(shí)踐操作技能，為以后能做出出色的網(wǎng)頁(yè)而努力。當(dāng)然也深刻認(rèn)識(shí)了一點(diǎn)，那就是我們所學(xué)的知識(shí)雖說(shuō)是很基礎(chǔ)很根本，但沒(méi)有根基怎么能建好別墅呢?所以說(shuō)基礎(chǔ)知識(shí)是很重要的，我們?cè)趯W(xué)習(xí)過(guò)程中不能小看而去忽略它，它是一筆財(cái)富，能引導(dǎo)我們看得更遠(yuǎn)飛得更高。我覺(jué)得這次確實(shí)是很有意義的一次檢測(cè)，本來(lái)自我感覺(jué)良好的，結(jié)

15、果實(shí)戰(zhàn)時(shí)還是存在很多問(wèn)題的，平時(shí)學(xué)起來(lái)覺(jué)得很輕松就以為掌握了所學(xué)知識(shí)，但現(xiàn)在都忘記很多細(xì)節(jié)是怎么樣的了，因此開(kāi)始著手時(shí)有些障礙，但我下定決心把以前的實(shí)驗(yàn)內(nèi)容都溫習(xí)一遍，遇到不懂的就及時(shí)查資料，比如翻閱資料書，百度，也可以請(qǐng)教同學(xué)，一起討論，相互學(xué)習(xí)，于是最后也如魚得水，水到渠成，因此得到一個(gè)非常重要的結(jié)論只要自己想學(xué)只要自己有那份執(zhí)著與毅力，虛心的請(qǐng)教，勤于查閱相關(guān)資料就一定會(huì)有收獲的，真的當(dāng)今沒(méi)有什么知識(shí)是用不著的，在哪，哪里都是知識(shí)，只要自己持有高度的學(xué)習(xí)熱忱。不過(guò)最終，經(jīng)過(guò)長(zhǎng)久的堅(jiān)持與不斷的琢磨，看到了自己辛苦后的成果，盡管這還有很多不足，但看著它我心里充滿著喜悅，一分耕耘一分收獲，這永

16、遠(yuǎn)是真理。4 參考文獻(xiàn)和網(wǎng)址參考書籍：1劉西杰，柳林html、css、javascript網(wǎng)頁(yè)制作從入門到精通m北京：人民郵電出版社，20132祁瑞華dreamweaver網(wǎng)頁(yè)設(shè)計(jì)與制作（html+css+javascript）m北京：清華大學(xué)出版社，20133 趙鋒等著.網(wǎng)頁(yè)制作教程.北京：清華大學(xué)出版社，2009參考網(wǎng)站：1 w3school在線教程23 北大天網(wǎng)5附圖圖5-1站點(diǎn)首頁(yè)截圖圖5-2站點(diǎn)公司簡(jiǎn)介截圖圖5-3站點(diǎn)品牌系列截圖圖5-4站點(diǎn)化妝知識(shí)截圖圖5-5站點(diǎn)化妝誠(chéng)招代理圖5-6站點(diǎn)客戶反饋截圖11網(wǎng)頁(yè)制作課程設(shè)計(jì)評(píng)價(jià)標(biāo)準(zhǔn)評(píng)比指標(biāo)評(píng)比標(biāo)準(zhǔn)分值主題和內(nèi)容(30分)l 內(nèi)容豐富、完整、健康，主題突出，l 用多種表現(xiàn)形式突出重點(diǎn)l 文章行文流暢、易于理解，語(yǔ)言通順、文字簡(jiǎn)練l 嚴(yán)禁抄襲他人作品，允許但不提倡使用模版l 至少4個(gè)欄目、10個(gè)頁(yè)面以上l 有一定的社會(huì)價(jià)值和實(shí)際意義導(dǎo)航、結(jié)構(gòu)和鏈接(20分)l 界面親切友好，網(wǎng)站結(jié)構(gòu)清晰，方便用戶使用l 利用div+css進(jìn)行合理的排版布局l 每一頁(yè)都有明確清晰的導(dǎo)航，能很方便地在各個(gè)頁(yè)面之間切換l 沒(méi)有無(wú)效鏈接，不會(huì)丟失圖片、