化妝品網(wǎng)頁設(shè)計與制作報告

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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