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

揚州職業(yè)大學(xué)課程設(shè)計報告設(shè)計題目：論“沐乃衣”潮流女裝網(wǎng)站系別：管理學(xué)院專業(yè)：電子商務(wù)班級：商務(wù)112姓名：王忍學(xué)號：指導(dǎo)教師：陳君完畢時間：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è)計 43.3開發(fā)環(huán)境的配備 53.4接口設(shè)計 54.網(wǎng)頁模塊功效介紹 65.實訓(xùn)過程 65.1收集有關(guān)流行女性服裝最新消息，與此同時，收集網(wǎng)站建設(shè)的資料和信息 65.2擬定每個頁面的布局 65.3超鏈接 65.4代碼找資料 75.5整頓 75.6美工 75.7前后臺 75.8功效實現(xiàn) 76.核心技術(shù)突破 77.總結(jié) 81.前言1.1課題意義初步理解軟件的功效布局和某些基本操作，并自己熟悉實踐用幾個網(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)容的控制，理解其基本語法構(gòu)造。熟悉一種網(wǎng)站設(shè)計的流程圖。1.2課題目的1.2.1理解dreamwarve網(wǎng)站的制作流程和基本辦法。1.2.2學(xué)會站點的規(guī)劃與創(chuàng)立，能自己創(chuàng)立個人網(wǎng)站和簡樸的公司網(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)用能力和團體合作能力。1.2.7通過實訓(xùn)技能訓(xùn)練，應(yīng)達成下列能力目的。1.3課題研究范疇1.3.1：HTML網(wǎng)頁制作：規(guī)定制作一種“沐乃衣”年輕女性服裝html網(wǎng)頁，能夠?qū)?dǎo)航分為熱門的話題，同時網(wǎng)頁對輸入的內(nèi)容應(yīng)當(dāng)有糾錯檢查機制。1.3.2：軟件的使用：熟悉軟件的基本布局，會用它制作html網(wǎng)頁，并且應(yīng)當(dāng)會對網(wǎng)頁布局進行調(diào)節(jié)，使其簡潔、美觀。1.3.3：腳本語言：理解腳本語言的基本語法，明白其工作機制，并且會用某些簡樸腳本實現(xiàn)對網(wǎng)頁內(nèi)容的控制。1.3.4：網(wǎng)頁內(nèi)容：該網(wǎng)頁重要針對年輕愛美、潮流的女性，年紀(jì)階段為20—40歲，因此在內(nèi)容選材時，盡量選用與年輕女性有關(guān)的信息，涉及潮流服裝、服裝搭配。購置優(yōu)惠活動等，以吸引關(guān)注。1.4要解決的重要問題1.4.1：調(diào)節(jié)好網(wǎng)頁布局，使其各表格應(yīng)盡量對齊，整體界面美觀，含有潮流感。1.4.2：網(wǎng)頁應(yīng)實現(xiàn)對輸入內(nèi)容的糾錯檢查，實現(xiàn)上傳照片的功效。1.4.3：在主頁添加flash動畫，公布網(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不能算做一門編程語言，由于它沒有自己的數(shù)據(jù)類型，也沒有分支、循環(huán)等控制構(gòu)造。它的設(shè)計簡樸，構(gòu)造靈活，允許在Web瀏覽器及其它兼容的應(yīng)用程序中顯示文本和圖像，并且文檔的某些部分能夠成為超鏈接。完畢后把這些文檔保存為*.html文獻，然后用瀏覽器打開。

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