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

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

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

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

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

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

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

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

8、己有用的信息。這本身已經(jīng)決定了消費(fèi)者對信息已經(jīng)有了一個(gè)感興趣的前提。使信息的傳播不在是主觀加給消費(fèi)者，而是由消費(fèi)者有選擇地主動吸收。 同時(shí)，產(chǎn)品信息通過網(wǎng)站的先進(jìn)設(shè)計(jì)，既有報(bào)紙信息量大的優(yōu)點(diǎn)，又結(jié)合了電視聲、光、電的綜合刺激優(yōu)勢，可以牢牢地吸引住目標(biāo)對象。因此，產(chǎn)品信息傳播的有效性將遠(yuǎn)遠(yuǎn)提高，同時(shí)亦即是提高了產(chǎn)品的銷售力。許多人知道，購買產(chǎn)品不僅買的是那些看得見的實(shí)物，還有那些看不見的售后服務(wù)。這也就是產(chǎn)品的附加值。產(chǎn)品的附加值越高，在市場上就越有競爭力，就越受消費(fèi)者歡迎。因此，企業(yè)要贏得市場就要千方百計(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í)刻都可以通過網(wǎng)站下載自己需要的資料，在線獲得疑難的解答，在線提交自己的問題。2.2 欄目設(shè)計(jì)2.2.1首頁欄目說明1、 首頁風(fēng)格門戶型首頁風(fēng)格，集中大量的信息與資訊，給人以更具可讀性2、 公司新聞發(fā)布公司最近的新聞動態(tài)3、 近期優(yōu)惠以圖片形式，表現(xiàn)公司最近的優(yōu)惠銷售，可鏈接進(jìn)入查看詳情4、 公司優(yōu)勢展現(xiàn)公司的各項(xiàng)優(yōu)勢，突出公司的賣點(diǎn)5、 合作伙伴以圖片形式，介紹公司的各個(gè)合作伙伴，鏈接進(jìn)入看全文2.2.2公司簡介欄目說明1、公司簡介公司圖片、名稱解釋、公司簡介、發(fā)展歷程、企業(yè)規(guī)劃等2、企業(yè)文化企業(yè)理念、企業(yè)

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

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

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

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

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

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

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