網(wǎng)頁設(shè)計課程設(shè)計報告書1

沈陽航空航天大學(xué)北方科技學(xué)院課程設(shè)計說明書學(xué)生姓名專班學(xué)業(yè)信息管理與信息系統(tǒng)級號B943201B94320107指導(dǎo)教師孟繁宇呂榮鑫成績沈陽航空航天大學(xué)北方科技學(xué)院課程設(shè)計任務(wù)書課程設(shè)計題目教學(xué)部旅游俱樂部網(wǎng)站設(shè)計經(jīng)管教學(xué)部專業(yè)信息管理與信息系統(tǒng)班級B243211學(xué)號B24321104姓名高英課程設(shè)計時間:2011年12月19日至2011年12月30日課程設(shè)計的內(nèi)容及要求：1、強(qiáng)化網(wǎng)頁設(shè)計的基本技能,設(shè)計出簡單的網(wǎng)站。2、熟練應(yīng)用網(wǎng)頁表格布局方法、超鏈接、樣式CSS、框架Frame和組件等的操作方法進(jìn)行頁面設(shè)計。3、掌握用Dreamweaver或Photoshop軟件工具的使用。4、具體內(nèi)容：本網(wǎng)站專為化妝品設(shè)計。主要分為護(hù)膚、彩妝、染發(fā)、護(hù)發(fā)、會員專區(qū)、留言板、電子商城、品牌故事共八個板塊。為網(wǎng)站提供對內(nèi)部會員發(fā)布最新納會員，招聘人員等。要求如下：（1）請同學(xué)們根據(jù)課程設(shè)計題目通過查閱資料、調(diào)研等方式做好需求分析，要求設(shè)計合理，功能完善。（2）網(wǎng)頁設(shè)計要求：網(wǎng)頁編輯與超鏈接，網(wǎng)頁的定位技術(shù)，行為與時間軸及應(yīng)用，層疊樣式、模板與庫，表單及應(yīng)用等核心知識設(shè)計。增加FLASH動畫內(nèi)容,以及應(yīng)用圖象編輯軟件（Photoshop,Firework）修改設(shè)計圖片。（3Photoshop的切片技術(shù)、DIV+CSS的網(wǎng)頁構(gòu)架技術(shù)、Javascript動態(tài)網(wǎng)頁設(shè)計技術(shù)等。（4）界面美觀、布局合理、風(fēng)格獨特、內(nèi)容完整，無非法鏈接。（5）設(shè)計功能完整的網(wǎng)站。（6）嚴(yán)禁上網(wǎng)下載。（7）設(shè)計原則上要求一人一題，如果學(xué)生過多，題目可重復(fù)，但學(xué)生必須獨立II完成系統(tǒng)設(shè)計。設(shè)計的系統(tǒng)程序必須在機(jī)器上演示驗收。5、要求：課設(shè)結(jié)束后，上交電子文檔（在課程設(shè)計主頁中有此網(wǎng)頁）和設(shè)計任務(wù)書(課設(shè)專用紙打印)。課程設(shè)計報告應(yīng)包括：網(wǎng)站規(guī)劃、網(wǎng)站結(jié)構(gòu)圖、工具簡介、網(wǎng)站模塊劃分及其功能說明、業(yè)務(wù)流程圖等部分。報告應(yīng)按照統(tǒng)一的規(guī)范撰寫，格式正確。除課程設(shè)計報告外，還應(yīng)該上交電子文檔和電子作品。指導(dǎo)教師孟繁宇呂榮鑫2011年12月19日III課程設(shè)計成績評定單課程名稱教學(xué)部務(wù)方向）課程設(shè)計題目Internet網(wǎng)頁設(shè)計經(jīng)管教學(xué)部專業(yè)信息管理與信息系統(tǒng)（電子商化妝品網(wǎng)站設(shè)計學(xué)號B24321104姓名高英課程設(shè)計成績指導(dǎo)教師（答辯組）簽字年月日IV目錄1需求分析...........................................................................................................................12應(yīng)用軟件和工具................................................................................................................32.1D.............................................................................................................32.2...................................................................................................................3PHOTOSHOP3網(wǎng)站總體設(shè)計....................................................................................................................43.1網(wǎng)站主要功能模塊......................................................................................................43.2網(wǎng)站功能結(jié)構(gòu)圖..........................................................................................................44網(wǎng)站功能模塊詳細(xì)介紹....................................................................................................54.1護(hù)膚頁面......................................................................................................................54.2彩妝頁面....................................................................................................................124.3品牌故事....................................................................................................................134.4留言板........................................................................................................................144.5會員登錄....................................................................................................................154.9加入我們....................................................................................................................165結(jié)束語..............................................................................................................................19V1需求分析首先仔細(xì)地看了現(xiàn)在網(wǎng)上的各種化妝品的網(wǎng)站，發(fā)現(xiàn)有以下幾個特點：1、信息很全面。包括該化妝品分類信息、最新推出產(chǎn)品信息、會員專區(qū)、電子商城等等應(yīng)有盡有；2會員專區(qū)又分為試用體驗和會員特價等等吸引顧客；3、這些網(wǎng)站有自己的特色與優(yōu)勢，當(dāng)然也存在著一些問題，具體的有以下幾點：1、化妝品網(wǎng)站作為一個多數(shù)化妝品網(wǎng)站都沒有注意而到自己產(chǎn)品公司文化的傳播；2、隨著品牌推出的市場些，很容易漏掉一些重要信息。同時很少有網(wǎng)站關(guān)注記錄會員們試用過哪些該產(chǎn)品；3、很多化妝品網(wǎng)站忽略了對顧客適合什么樣的產(chǎn)品；4、同時隨著智能手機(jī)的推出，很少化妝品公司會關(guān)注到微信等的推廣。關(guān)該化妝品的各方面的信息，了解該市場上化妝品的信息，需求方向、推銷方式、吸塊內(nèi)容等等。比如：對化妝品需求不同分類，具體分為護(hù)膚，彩妝，護(hù)發(fā)，染發(fā)，品牌故事，會員專區(qū)，留言板和電子商城。然后再由這些大的板塊再適合部位，顏色細(xì)碼掃一掃，隨時隨地體驗掌上皮膚診斷！品牌故事這一欄設(shè)有關(guān)于品牌，品牌歷程，APP這個模塊要突出及時、簡潔、準(zhǔn)確的特點，讓會員們不會遺漏任何相關(guān)的信息。俱樂1分析，需要本網(wǎng)站的設(shè)計基本具有一下幾點：■突出化妝品的特色和對顧客專業(yè)性的護(hù)理■能夠讓會員和非會員及時準(zhǔn)確地獲取相關(guān)信息■具有全面、合理的功能模塊■具有登陸、用戶注冊等用戶權(quán)限功能■界面友好，簡潔大方，色彩鮮艷22應(yīng)用軟件和工具2.1Dreamweaver是一款有著多年歷史和良好口碑的可視化網(wǎng)頁編輯工具（簡稱DWW3CHTML檢查、HTML格式控制、HTML格式化選項、HomeSite/BBEdit捆綁、圖像編輯、全局查找替換、全FTP功能、處理Flash和Shockwave等富媒體格式和動態(tài)HTML，而且還支持ASPJSPPHPASP.NETXML等程序語言的編寫與調(diào)試。本網(wǎng)站設(shè)計運用的版本是：MacromediaDreamweaverCS6MacromediaDreamweaver是建立Web站引人的基于標(biāo)準(zhǔn)的網(wǎng)站和應(yīng)用程序。從對基于CSS的設(shè)計的領(lǐng)先支持到手工編碼功能，Dreamweaver可以使用Dreamweaver及所選擇的服務(wù)器技術(shù)來創(chuàng)建功能強(qiáng)大的Internet應(yīng)用程序，從而使用戶能連接到數(shù)據(jù)庫、Web服務(wù)和舊式系統(tǒng)。2.2photoshopPhotoshop主要處理以像素（Pixels）所構(gòu)成的數(shù)字圖像。利用其廣泛的編修與Photoshop也正在被更多的用于處理網(wǎng)絡(luò)圖片。Photoshop的幾個后續(xù)版本中捆綁了一個獨立的軟件ImageReady，加強(qiáng)了Photoshop對網(wǎng)絡(luò)圖像（主要是GIF圖像文件）的支持功能。而在CS6中ImageReady被Fireworks所代替。PhotoshopCS6允許用戶更容易升級到最新的硬件平臺，支持蘋果的Intel為內(nèi)Adobe.Photoshop.CS6.其中主要運用到的技術(shù)有：切片技術(shù)、圖像合成技術(shù)、平面圖設(shè)計技術(shù)等。33網(wǎng)站總體設(shè)計3.1網(wǎng)站主要功能模塊◆會員專區(qū)用裝和優(yōu)惠裝?！粼谶@個模塊下，將對該品牌的成立、發(fā)展、發(fā)展方向、規(guī)章制度和創(chuàng)立人成就進(jìn)行展示。讓俱樂部的會員和非會員都可以對該化妝品品牌有一定的了解?！糇o(hù)膚、彩妝、染發(fā)、護(hù)發(fā)通道可與專業(yè)美容師進(jìn)行了解來選取適合自己的產(chǎn)品?！綦娮由坛俏镉淇臁裘缞y手冊線顧客和會員分享。◆微博互動這是一個類似于博客的模塊。所有的會員都可以開通自己的BLOG。和大家分享一下自己在活動中的快樂與收獲?！艏尤胛覀兞?，經(jīng)過后天管理員的審核，就成為該品牌關(guān)注的會員了。3.2網(wǎng)站功能結(jié)構(gòu)圖4染發(fā)電子商城圖4網(wǎng)站功能模塊詳細(xì)介紹4.1護(hù)膚頁面主頁面主要是提供本網(wǎng)站的其他各個功能模塊的鏈接，因此要求主頁簡單直觀，美觀大方。頂部LOGO和底部二維碼宣傳運用了photoshop的切片技術(shù)以及繪圖5技術(shù)。效果如圖4-1所示。圖67891011圖頂部鏈接的代碼是：<tablewidth="420px"height="35"border="0"align="center"class="toper"cellpadding=0cellspace=0><tr><tdalign="center"><ahref="hufu.html">評測中心</a></td><tdalign="center"><a視頻直播</a></td><tdalign="center"><ahref="">微博互動</a></td><tdalign="center"><ahref="caizhuang.html">美妝手冊</a></td></tr></table>4.2彩妝頁面在這個模塊，發(fā)布關(guān)于彩妝的信息。12圖4.3品牌故事向的四個信息內(nèi)容。效果如圖4-5所示。13圖4.4留言板這個模塊主要是會員登錄后留言與工作人員相互交流的平臺。效果如圖4-6所示。14圖"4.5會員登錄名參加。效果如圖4-7所示。圖<tablewidth="100%"border="0"class="denglu"><tr><td>  會員登錄</td>15</tr></table></td></tr><tr><td><formaction="aogin.asp"method="post"enctype="multipart/form-data"name="form1"target="_blank"dir="ltr"lang="zh"><p>   用戶名：<inputname="user"id="xm"type="text"size="15"/></p><p>   密   碼：<inputname="pw"type="password"size="15"/></p><p>      <inputtype="submit"name="Submit"value="提交"/>                     <inputtype="submit"name="Submit"value="退出"/></p></form></td>4.9加入我們?nèi)鐖D4-12所示。表單代碼：<formaction=/cgi-bin/post-querymethod=POST><spanclass="STYLE2"> 你的昵稱:</span><inputtype=textname=姓名><br><formaction=/cgi-bin/post-querymethod=POST>16<spanclass="STYLE2">   密碼：</span><inputtype=passwordname=密碼><formaction=/cgi-bin/post-querymethod=POST><spanclass="STYLE2">確認(rèn)密碼：</span><inputtype=passwordname=密碼><br><formaction=/cgi-bin/post-querymethod=POST><spanclass="STYLE2">你主頁的網(wǎng)址:</span><inputtype=textname=網(wǎng)址value=http://><br><formaction=/cgi-bin/post-querymethod=POST><spanclass="STYLE2">聯(lián)系方式:</span><inputtype=textname=聯(lián)系><br><formaction=/cgi-bin/post-querymethod=POST><inputtype=radioname=性別1><spanclass="STYLE2">男</span><inputtype=radioname=性別2><spanclass="STYLE2">女</span><formaction=/cgi-bin/post-querymethod=POST><selectname=citysize=6><option>北京<option上海<optionvalue=My_Favorite>成都<option>沈陽<option>大連<option>天津<option>河南<option>綿陽<option>廈門<option>深圳<option>重慶</select><p></form><tablewidth="337"height="28"border="0"cellpadding="0"cellspacing="0"><tr><tdclass="STYLE2STYLE3">你的愛好：</td></tr></table><formaction=/cgi-bin/post-querymethod=POST><inputtype=checkboxname=愛好1>旅游<p><inputtype=checkboxname=愛好2>看書<p><inputtype=checkboxname=愛好3>聽音樂<p>17<inputtype=checkboxname=愛好4>寫作<p><inputtype=checkbox