1、沈陽航空航天大學北方科技學院沈陽航空航天大學北方科技學院 課程設計說明書課程設計說明書 課程名稱課程名稱 InternetInternet 網頁設計網頁設計 學學 生生 姓姓 名名 專專 業(yè)業(yè) 信息管理與信息系統(tǒng)信息管理與信息系統(tǒng) 班班 級級 B B 學學 號號 B B 指指 導導 教教 師師 孟繁宇孟繁宇 呂榮鑫呂榮鑫 成成 績績 沈陽航空航天大學北方科技學院 課課 程程 設設 計計 任任 務務 書書 課程設計題目 旅游俱樂部網站設計 教 學 部 經管教學部 專業(yè) 信息管理與信息系統(tǒng) 班級 B 學號 B 姓名 高英 課程設計時間: 2011 年 12 月 19 日至 2011 年 12 月

2、30 日 課程設計的內容及要求： 1、強化網頁設計的基本技能,設計出簡單的網站。 2、熟練應用網頁表格布局方法、超鏈接、樣式 CSS、框架 Frame 和組件等的操 作方法進行頁面設計。 3、掌握用 Dreamweaver 或 Photoshop 軟件工具的使用。 4、具體內容：本網站專為化妝品設計。主要分為護膚、彩妝、染發(fā)、護發(fā)、會 員專區(qū)、留言板、電子商城、品牌故事共八個板塊。為網站提供對內部會員發(fā)布最 新訊息、收取會員意見和建議，以及和會員做一定的互動的平臺，同時可以通過網 絡吸納會員，招聘人員等。 要求如下： （1）請同學們根據課程設計題目通過查閱資料、調研等方式做好需求分析，要 求設

3、計合理，功能完善。 （2）網頁設計要求：網頁編輯與超鏈接，網頁的定位技術，行為與時間軸及應 用，層疊樣式、模板與庫，表單及應用等核心知識設計。增加 FLASH 動畫內容,以及 應用圖象編輯軟件（Photoshop,Firework）修改設計圖片。 （3）應用相關技術對網頁進行優(yōu)化與再編輯，如 Photoshop 的切片技術、 DIV+CSS 的網頁構架技術、Javascript 動態(tài)網頁設計技術等。 （4）界面美觀、布局合理、風格獨特、內容完整，無非法鏈接。 （5）設計功能完整的網站。 （6）嚴禁上網下載。 （7）設計原則上要求一人一題，如果學生過多，題目可重復，但學生必須獨立 完成系統(tǒng)設計。

4、設計的系統(tǒng)程序必須在機器上演示驗收。 5、要求：課設結束后，上交電子文檔（在課程設計主頁中有此網頁）和設計任 務書(課設專用紙打印)。 課程設計報告應包括：網站規(guī)劃、網站結構圖、工具簡介、網站模塊劃分及其 功能說明、業(yè)務流程圖等部分。報告應按照統(tǒng)一的規(guī)范撰寫，格式正確。除課程設 計報告外，還應該上交電子文檔和電子作品。 指導教師 孟繁宇 呂榮鑫 2011 年 12 月 19 日 課課 程程 設設 計計 成成 績績 評評 定定 單單 課 程 名 稱 Internet 網頁設計 教 學 部 經管教學部 專業(yè) 信息管理與信息系統(tǒng)（電子商 務方向） 課程設計題目 化妝品網站設計 學號 B 姓名 高英

5、課程設計成績 指導教師（答辯組）簽字 年 月 日 目 錄 1 需求分析.1 2 應用軟件和工具.3 2.1DREAMWEAVER.3 2.2 PHOTOSHOP.3 3 網站總體設計.4 3.1 網站主要功能模塊 .4 3.2 網站功能結構圖 .4 4 網站功能模塊詳細介紹.5 4.1 護膚頁面 .5 4.2 彩妝頁面 .12 4.3 品牌故事 .13 4.4 留言板 .14 4.5 會員登錄 .15 4.9 加入我們 .16 5 結束語.19 1 需求分析 首先仔細地看了現(xiàn)在網上的各種化妝品的網站，發(fā)現(xiàn)有以下幾個特點：1、信息 很全面。包括該化妝品分類信息、最新推出產品信息、會員專區(qū)、電子商

6、城等等應 有盡有；2 會員專區(qū)又分為試用體驗和會員特價等等吸引顧客；3、這些網站有自己 的特色與優(yōu)勢，當然也存在著一些問題，具體的有以下幾點：1、化妝品網站作為一 個面向個體和集體的特色網站不僅要突出產品的特點還要突出自己產品公司的文化， 大多數化妝品網站都沒有注意而到自己產品公司文化的傳播；2、隨著品牌推出的市 場的時間，會員的信息逐漸增多，對網站的信息發(fā)布的及時性、準確性的要求越來 越高，很多的化妝品網站內容過于繁多，頁面顯得凌亂，對于會員們查找信息就相 對麻煩一些，很容易漏掉一些重要信息。同時很少有網站關注記錄會員們試用過哪 些該產品；3、很多化妝品網站忽略了對顧客適合什么樣的產品；4、

7、同時隨著智能 手機的推出，很少化妝品公司會關注到微信等的推廣。 因此對于我設計的這個化妝品網站，做了如下的分析。通過各種渠道收集整理 有關該化妝品的各方面的信息，了解該市場上化妝品的信息，需求方向、推銷方式、 吸收會員的方式等等。掌握了設計該化妝品的網站需要具備的功能模塊，界面風格， 模塊內容等等。比如：對化妝品需求不同分類，具體分為護膚，彩妝，護發(fā)，染發(fā)， 品牌故事，會員專區(qū)，留言板和電子商城。然后再由這些大的板塊再適合部位，顏 色細分。在細節(jié)上讓顧客感到被關懷和溫馨的感覺，同時方便顧客的瀏覽！在護膚 等板塊中都設有美容師在線為顧客分析皮膚問題，為顧客挑選更適合的產品。讓顧 客在該網站購物也

8、可以享受到線下的服務。讓顧客更加信賴該產品！該板塊的下方 都設有二維碼掃一掃，隨時隨地體驗掌上皮膚診斷！品牌故事這一欄設有關于品牌， 品牌歷程，公司簡介，未來方向等。會員模塊將會使用一個專門的頁面來體現(xiàn)，應 該使會員們對該化妝品最近將要推出的新產品，或是該化妝品節(jié)日推出什么優(yōu)惠活 動，有什么樣的新的發(fā)展決策，與會員息息相關的一些信息會員能在第一時間通過 手機 APP 獲得，在這個模塊要突出及時、簡潔、準確的特點，讓會員們不會遺漏任 何相關的信息。俱樂部對非會員的信息發(fā)布（包括吸收會員、招聘人才、一些新產 品的推薦等） ，這個模塊要突出該產品自己的特色，以此來吸引更多的會員和工作人 員。營銷部和

9、會員一定程度上的互動比如論壇、留言，尤其添加博客板塊，每個會 員都可以自己發(fā)布日志和大家分享自己參加俱樂部活動的心得體會，以及便于俱樂 部的工作人員從中獲取一些會員的建議和意見，相對于留言板這種互動模式，博客 更顯得親切主動。綜合以上的分析，需要本網站的設計基本具有一下幾點： 突出化妝品的特色和對顧客專業(yè)性的護理 能夠讓會員和非會員及時準確地獲取相關信息 具有全面、合理的功能模塊 具有登陸、用戶注冊等用戶權限功能 界面友好，簡潔大方，色彩鮮艷 2 應用軟件和工具 2.1Dreamweaver 是一款有著多年歷史和良好口碑的可視化網頁編輯工具（簡稱 DW） ，他最大的 優(yōu)點就是所見即所得，對 W

10、3C 網頁標準化支持十分到位，同時它還支持網站管理， 包含 HTML 檢查、HTML 格式控制、HTML 格式化選項、HomeSite/BBEdit 捆綁、圖像 編輯、全局查找替換、全 FTP 功能、處理 Flash 和 Shockwave 等富媒體格式和動態(tài) HTML，而且還支持 ASP、JSP、PHP、ASP.NET、XML 等程序語言的編寫與調試。本網 站設計運用的版本是：Macromedia Dreamweaver CS6。Macromedia Dreamweaver 是 建立 Web 站點和應用程序的專業(yè)工具。它將可視布局工具、應用程序開發(fā)功能和代 碼編輯支持組合在一起，其功能強大，

11、使得各個層次的開發(fā)人員和設計人員都能夠 快速創(chuàng)建界面吸引人的基于標準的網站和應用程序。從對基于 CSS 的設計的領先支 持到手工編碼功能，Dreamweaver 提供了專業(yè)人員在一個集成、高效的環(huán)境中所需 的工具。開發(fā)人員可以使用 Dreamweaver 及所選擇的服務器技術來創(chuàng)建功能強大的 Internet 應用程序，從而使用戶能連接到數據庫、Web 服務和舊式系統(tǒng)。 2.2 photoshop Photoshop 主要處理以像素（Pixels）所構成的數字圖像。利用其廣泛的編修 與繪圖工具，可以更有效的進行圖片編輯工作。獨特的歷史紀錄浮動窗口和可編輯 的圖層效果功能使用戶可以方便的測試效果

12、。對各種濾鏡的支持更令使用戶能夠輕 松創(chuàng)造出各種奇幻的效果。目前，Photoshop 也正在被更多的用于處理網絡圖片。 Photoshop 的幾個后續(xù)版本中捆綁了一個獨立的軟件 ImageReady，加強了 Photoshop 對網絡圖像（主要是 GIF 圖像文件）的支持功能。而在 CS6 中 ImageReady 被 Fireworks 所代替。Photoshop CS6 允許用戶更容易升級到最新的硬 件平臺，支持蘋果的 Intel 為內核的系統(tǒng)。本網站設計運用到的是： Adobe.Photoshop.CS6.其中主要運用到的技術有：切片技術、圖像合成技術、平面 圖設計技術等。 3 網站總體

13、設計 3.1 網站主要功能模塊 會員專區(qū) 在這個模塊下主要是用于發(fā)布化妝品最新的活動信息，和一些正在進行的活動 的詳細情況，會員們可以通過這個窗口的留言板給俱樂部留言和通過會員渠道來領 取試用裝和優(yōu)惠裝。 品牌故事 在這個模塊下，將對該品牌的成立、發(fā)展、發(fā)展方向、規(guī)章制度和創(chuàng)立人成 就進行展示。讓俱樂部的會員和非會員都可以對該化妝品品牌有一定的了解。 護膚、彩妝、染發(fā)、護發(fā) 這個模塊下，瀏覽人員可以通過該平臺了解各種化妝品的特點和用途。通過在 線通道可與專業(yè)美容師進行了解來選取適合自己的產品。 電子商城 在這個模塊，顧客將可以進入到各種商城來選取需要的產品。體驗轉移空間的 購物愉快 美妝手冊

14、這個模塊是一個錄像展示模塊。該品牌聘請專業(yè)美容師現(xiàn)場錄制的美容技巧與 在線顧客和會員分享。 微博互動 這是一個類似于博客的模塊。所有的會員都可以開通自己的 BLOG。和大家分享 一下自己在活動中的快樂與收獲。 加入我們 這個模塊就是針對非會員注冊成為會員的平臺。非會員在這里填寫相關的信息 資料，經過后天管理員的審核，就成為該品牌關注的會員了。 3.2 網站功能結構圖 化妝品網站 護 膚 彩 妝 護 發(fā) 染 發(fā) 品 牌 故 事 會 員 專 區(qū) 電 子 商 城 圖 3-1 網站功能結構圖 4 網站功能模塊詳細介紹 4.1 護膚頁面 主頁面主要是提供本網站的其他各個功能模塊的鏈接，因此要求主頁簡單直

15、 觀，美觀大方。頂部 LOGO 和底部二維碼宣傳運用了 photoshop 的切片技術以及繪圖 技術。效果如圖 4-1 所示。 圖 4-1 護膚 此頁面導航下拉菜單代碼是： 首頁 護膚 鎖水保濕 美白淡斑 深沉護理 防曬隔離 改善肌底 復顏抗皺 金致臻顏 清潤肌膚 肌底護膚 雪顏美白 潔面乳 彩妝 眼線 護唇膏 唇部卸妝 粉底 睫毛 眉筆 護發(fā) 精油營養(yǎng) 精油營養(yǎng) 精油營養(yǎng) 精油營養(yǎng) 精油營養(yǎng) 精油營養(yǎng) 精油營養(yǎng) 精油營養(yǎng) 精油營養(yǎng) 精油營養(yǎng) 精油營養(yǎng) 精油營養(yǎng) 精油營養(yǎng) 精油營養(yǎng) 精油營養(yǎng) 精油營養(yǎng) 染發(fā) 色系選擇 棕色系 棕色系 棕色系 棕色系 棕色系 棕色系 棕色系 棕色系 棕色系 棕色

16、系 棕色系 棕色系 棕色系 棕色系 棕色系 棕色系 棕色系 棕色系 品牌故事 品牌簡介 品牌代言人 會員專區(qū) 試用體驗 積分換禮 貴賓特價 電子商城 天貓商城 沈陽店鋪 北京店鋪 上海店鋪 red fox 留言板 右部表格代碼 護膚 需求 鎖水保濕 美白保濕 鎖水淡斑 產品分類 洗面奶 爽膚水 鎖水淡斑 鎖水淡斑 鎖水淡斑 產品系列 鎖水淡斑 鎖水淡斑 圖 4-2 頂部鏈接 頂部鏈接的代碼是： 評測中心 視頻直播 微博互動 美妝手冊 4.2 彩妝頁面 在這個模塊，發(fā)布關于彩妝的信息。 圖 4-4 彩妝 4.3 品牌故事 這個模塊主要是發(fā)布一些關于品牌的介紹，品牌創(chuàng)始人故事，公司簡介，未來 方向

17、的四個信息內容。效果如圖 4-5 所示。 圖 4-5 關于品牌 4.4 留言板 這個模塊主要是會員登錄后留言與工作人員相互交流的平臺。效果如圖 4-6 所 示。 圖 4-6 俱樂部新 留言板代碼 你有什么好的建議請留言 4.5 會員登錄 這個模塊主要供會員登錄領取會員禮品和相關優(yōu)惠政策，會員可以通過此窗口 報名參加。效果如圖 4-7 所示。 圖 4-7 會員登錄 會員登錄 用戶名： 密碼： 4.9 加入我們 這個模塊是會員注冊的頁面，非會員人士在此填寫相關信息后注冊為會員。效 果如圖 4-12 所示。 表單代碼： 你的昵稱: 密 碼： 確認密碼： 你主頁的網址: 聯(lián)系方式: 男 女 北京 上海 成都 沈陽 大連 天津 河南 綿陽 廈門 深圳 重慶 你的愛好： 旅游 看書 聽音樂 寫作 上網 看電影 玩游戲 購物 工作 睡覺 你的個人簡介： 5 結束語 經過這次的課程設計，我學會了 Macromedia Dreamweaver 8 和 Adobe.Photoshop.CS3 兩種軟件的基本運用，基本能熟練地制作一個較成熟的有一 定主題的網站。但在實際課程設計過程中還有以下幾點問題：1、現(xiàn)在所學的的知識 技術水平有限，做出來的效果達不到自己理想中的效果；2、DIV+CSS 的網頁構架技 術、Javas