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

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

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