網(wǎng)頁設(shè)計(jì)實(shí)習(xí)報告

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

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