PAGEPAGE8 揚州職業大學課程設計報告設計題目：論“沐乃衣”時尚女裝網站系別：管理學院專業：電子商務班級：商務112姓名：王忍學號：110902148指導教師：陳君完成時間：13年6月24日目錄1.前言 21.1課題意義 21.2課題目的 21.3課題研究范圍 21.4要解決的主要問題 22.網頁開發技術 32.1網頁開發技術 33.網頁制作 43.1網頁整體布局設計 43.3開發環境的配置 53.4接口設計 54.網頁模塊功能介紹 65.實訓過程 65.1收集有關流行女性服裝最新消息，與此同時，收集網站建設的資料和信息 65.2確定每個頁面的布局 65.3超鏈接 65.4代碼找資料 75.5整理 75.6美工 75.7前后臺 75.8功能實現 76.關鍵技術突破 77.總結 81.前言1.1課題意義初步了解軟件的功能布局和一些基本操作，并自己熟悉實踐用幾種網頁開發技術HTML，PHP，flash，photoshop，dreamweaver等制作一個網站。掌握對網頁內容排版，網頁顏色搭配的操作，做到網頁內容將來在瀏覽器中顯示效果美觀；初步了解并可以使用腳本語言對網頁內容的控制，了解其基本語法結構。熟悉一個網站設計的流程圖。1.2課題目的1.2.1了解dreamwarve網站的制作流程和基本方法。1.2.2學會站點的規劃與創建，能自己創建個人網站和簡單的企業網站。1.2.3掌握靜態網頁的制作技術。1.2.4掌握動態網頁的制作技術，了解與數據庫的鏈接及簡單的數據處理。1.2.5掌握Photoshop制作平面圖像的基本技巧。1.2.6培訓動手能力、綜合應用能力和團隊合作能力。1.2.7通過實訓技能訓練，應達到以下能力目標。1.3課題研究范圍1.3.1：HTML網頁制作：要求制作一個“沐乃衣”年輕女性服裝html網頁，可以將導航分為熱門的話題，同時網頁對輸入的內容應該有糾錯檢驗機制。1.3.2：軟件的使用：熟悉軟件的基本布局，會用它制作html網頁，并且應該會對網頁布局進行調整，使其簡潔、美觀。1.3.3：腳本語言：了解腳本語言的基本語法，明白其工作機制，并且會用一些簡單腳本實現對網頁內容的控制。1.3.4：網頁內容：該網頁主要針對年輕愛美、時尚的女性，年齡階段為20—40歲，所以在內容選材時，盡量選取與年輕女性有關的信息，包括時尚服裝、服裝搭配。購買優惠活動等，以吸引關注。1.4要解決的主要問題1.4.1：調整好網頁布局，使其各表格應盡可能對齊，整體界面美觀，具有時尚感。1.4.2：網頁應實現對輸入內容的糾錯檢驗，實現上傳照片的功能。1.4.3：在主頁添加flash動畫，發布網站更多的時裝最新信息。2.網頁開發技術2.1網頁開發技術幾種網頁開發技術介紹——HTML、ASP、JSP、CGI、PHP、DREAMWEAVER。HTML（HyperTextMark-upLanguage）即超文本標記語言，是WWW的描述語言。嚴格的來講，HTML不能算做一門編程語言，因為它沒有自己的數據類型，也沒有分支、循環等控制結構。它的設計簡單，結構靈活，允許在Web瀏覽器及其它兼容的應用程序中顯示文本和圖像，并且文檔的某些部分可以成為超鏈接。完成后把這些文檔保存為*.html文件，然后用瀏覽器打開。

HTML是網絡的通用語言,一種簡單、通用的全置標記語言。它允許網頁制作人建立文本與圖片相結合的復雜頁面，這些頁面可以被網上任何其他人瀏覽到，無論使用的是什么類型的電腦或瀏覽器。ASP全名ActiveServerPages，是一個WEB服務器端的開發環境，利用它可以產生和運行動態的、交互的、高性能的WEB服務應用程序。ASP采用腳本語言VBScript（Javascript）作為自己的開發語言。ASP更精確的說是一個中間件，這個中間件將Web上的請求轉入到一個解釋器中，在這個解釋器中將所有的ASP的Script進行分析，再進行執行，而這時可以在這個中間件中去創建一個PHP是一種跨平臺的服務器端的嵌入式腳本語言.它大量地借用C,Java和Perl語言的語法,并耦合PHP自己的特性,使WEB開發者能夠快速地寫出動態生成頁面.它支持目前絕大多數數據庫。還有一點，PHP是完全免費的。JSP是Sun公司推出的新一代站點開發語言，他完全解決了目前ASP,PHP的一個通病－－腳本級執行（據說PHP4也已經在Zend的支持下，實現編譯運行）。Sun公司借助自己在Java上的不凡造詣，將Java從Java應用程序和JavaApplet之外，又有新的碩果，就是Jsp－－JavaServerPage。Jsp可以在Serverlet和JavaBean的支持下，完成功能強大的站點程序。DREAMWEAVER是一個可視化的網頁設計和網站管理工具，支持最新的Web技術，包含HTML檢查、HTML格式控制、HTML格式化選項、HomeSite/BBEdit捆綁、可視化網頁設計、圖像編輯、全局查找替換、全FTP功能、處理Flash和Shockwave等富媒體格式和動態HTML、基于團隊的Web創作。在編輯上你可以選擇可視化方式或者你喜歡的源碼編輯方式。由于水平所限，此次網頁開發使用的是HTML技術，因為它相對簡單，容易上手，適合初學者進行基本的練習操作。3.網頁制作3.1網頁整體布局設計3.1.1網站主要包括：首頁→春秋裝→夏裝→冬裝→特惠賣場→特號服裝→聯系我們七大頁面以及后臺收據庫組成。3.1.2首頁：對于首頁，中間版面分為三個大板塊，分別為服裝動態展示區、公司簡介和新品推薦；左邊版面分為四個小板塊，分別為會員登錄、產品分類、100天退換貨保障、全國所有城市快遞送貨上門。3.1.3服裝動態展示：向年輕女性展示本店所出售當季最時尚的服裝和搭配。3.1.4公司簡介：向顧客簡單介紹本公司的簡介等信息。3.1.5新品推薦：向顧客推薦新上市服裝。3.1.6產品分類：將本網站全部商品進行分類，以便顧客查看和購買。3.1.7會員登錄：注冊網站會員，可享受網站優惠活動。3.2以下是首頁頁面的圖形布局搜索—搜索全部—輸入關鍵字網站logo產品搜索：網站logo首頁春秋裝夏裝冬裝特惠賣場特號服裝聯系我們⊙會員登錄用戶名：密碼：登錄注冊忘記密碼服裝圖片動態展示區公司簡介產品分類休閑女裝……..女運動裝新品推薦時裝……100天退換貨保障全國所有城市快遞送貨上門關于沐乃衣走進沐乃衣2013沐乃衣有限公司，保留所有版權12345678號首頁簡介圖3.3開發環境的配置3.3.1語言環境：HTMLPHPMySQLJavaScript3.3.2服務器環境：WindowsApacheMysqlPHP3.3.3客戶機環境：WINxp以上系統+IE6以上或其他瀏覽器3.3.4環境安裝：我們這次使用的編輯器為phpnow，服務器使用的是phpnow集成環境，即Windows+Apache+Mysql+PHP，phpnow的特點是安裝簡單，無需進行繁瑣的配置，安裝后即可使用，但他會使用到80端口，所以，如果安裝了IIS服務需要在控制面板服務管理，對IIS服務進行關閉。Phpnow安裝：點擊安裝程序進行安裝。3.4接口設計用戶接口設計：首頁主要運用了8個用戶控件，分別為：導航控件、圖片動態控件、會員登錄控件、產品分類控件、搜索商品控件、靜態圖片控件。外部接口：系統瀏覽器、Apache服務器、PHP、MySQL語句內部接口：Index.html首頁包含了網頁的基本框架Guestbook.html會員注冊登錄News.html公司簡介信息Products.html展示流行服裝4.網頁模塊功能介紹4.1產品搜索方便顧客快捷搜索自己所需要的產品。4.2會員登錄采用實名制注冊本網站會員，可享受網站優惠活動等。4.3產品分類將網站所有服裝分類，方便查看和購買。4.4服裝動態展示區采用鼠標經過圖像停止的方式，展示最新時裝、優惠活動、服裝搭配等網站信息。4.5公司簡介展示區隨時向顧客簡單介紹本公司信息，提高網站的信譽度。4.6新品推薦區向顧客推薦新上市服裝。4.7特惠賣場網站節假日、反季會服裝優惠專區。4.8特號服裝針對過于肥胖的愛美女性設置的專區，可找到一些大碼的服裝。5.實訓過程5.1收集有關流行女性服裝最新消息，與此同時，收集網站建設的資料和信息5.2確定每個頁面的布局5.2.1網站主題和網頁主體顏色協調，網頁美觀、時尚感十足。5.2.2處理好圖片和文本的位置和一致性。5.3超鏈接5.3.1網站LOGO鏈接、會員登錄、網站底部“走進沐乃衣”均鏈接本網站主頁5.3.2“春秋裝”、“夏裝”、“冬裝”分別鏈接各季節服裝頁面5.3.3“特惠賣場”鏈接網站優惠的所有產品頁面5.3.4“特號服裝”鏈接網站有大碼型號的所有服裝頁面5.3.5“會員注冊”鏈接網站注冊頁面5.3.6“公司簡介”鏈接本公司頁面，包括公司發展歷程，公司地址等內容5.3.7服裝圖片鏈接服裝具體信息頁面，包括價格，型號，顏色選擇，購買方法等5.4代碼找資料利用互聯網找相應javacript的代碼，實現我們預想的效果。就是中間那個可以動態的圖片頁面，這個用到了js頁面技術。將其放置在css樣式表中，得以實現。5.5整理待到所有頁面被制作好后，整合在一起用超鏈接相互連接起來。5.6美工本網站的消費群體主要是年輕愛美的女士，網頁顏色以粉紅和淺黃色搭配為主，給人清新自然感覺，且不顯單調；網站LOGO中包含網站標題和網址，字體采用網絡字體模版，顯得時尚，右下角的鉛筆，字體上的“心”圖案增添幾分活力。5.7前后臺前臺頁面制作完成后著手處理后臺數據庫。建立留言板，鏈接數據庫。在網站的首頁設計一個會員登錄。5.8功能實現找一個后臺管理的模板，使網站能實現后臺管理的功能。6.關鍵技術突破6.1有完整的策劃報告。6.2有標題的網站以及有相應的自己的創意設計的logo圖像。LOGO圖像：6.3有自己創作輸入的文字內容并通過排列整理。6.4不允許出現鏈接錯誤。6.5有版權聲明、網站信息更新。根據課堂所學，充分利用相關技術要點制作網站，制作完成后反復檢查，使用IETester檢查網頁的布局是否沒有問題。發現問題、及時的解決問題。7.總結此次設計的是簡單的靜態網站結構圖，網站欲設計成簡單的靜態網站，因此打算在開發靜態網頁方面使用比較普遍的HTML開發語言，另外輔以java腳本語言。網站的制作前期可能會出現各種各樣的問題，包括：網頁的糾錯校驗機制顯得比較低級，不夠智能；在IE中一