網(wǎng)設計方案大作業(yè)設計方案說明書

TP璃頁設計與制作工程實訓》

大作業(yè)選題名稱：__伊人網(wǎng)的制作與體會設計人：―李薇班級：—軟件工程081班學號：8000108025南昌大學軟件學院2018.元設計說明書：一.選題的分析.我是怎么想到做女性網(wǎng)站的？作業(yè)剛布置下來的時候，我心里千回百轉過很多念頭，做什么網(wǎng)站能將我們學過的知識全部都用上呢？貌似除了作為模板教案的購物網(wǎng)站就沒有其他更好的選擇了，可是繼續(xù)做教案時學的淘寶或拍拍太無新意，不和我意。想來想去，還是沒有中意的方案。可能是白天想這個想太多了，我晚上竟然夢到了我1/13要做的，就是易物網(wǎng)站。不知老師是否記得一個曲別針換一個大房子的事，這就是我要做的易物網(wǎng)。終于得到了一個讓我滿意的方案，很開心?？伤蚜俗屑氁幌胗X得還是不行，可行性不大，于是我放棄了這個方案。當時已經(jīng)是實訓最后一天了，在結束實訓的時候，我突然靈光一閃，決定做一個女性網(wǎng)站。首先，一個女性網(wǎng)站針對了我的特點，是我想做的，也是我感興趣做的。其次，一個女性網(wǎng)站可以包括購物頻道和bbs頻道，可以充分將我學到的知識運用上去而又不免于流俗。.我要表達什么內容，如何展開設計？打定主意便開始設計。這個女性網(wǎng)站是針對都市女性的網(wǎng)站，旨在在她們休閑的時候有個能讓她們放松自我，同時得到很多對自己有用的信息。為了達到放松的目的，網(wǎng)站的主色調采用暖色系，主打粉色系，看上去溫暖活潑時尚舒適，讓人有一探究竟的欲望。而為了同時達到對女性自身有益的目的，我在選擇網(wǎng)站內容版塊上下了很大的功夫。女性最關注的是什么呢？是她們的感情與魅力。Bbs能讓她們能有個訴說感情發(fā)泄心情的地方，同時能在那瀏覽別人的故事，互相鼓勵和幫助，還能交流日常生活〈美容服飾等）的小信息。購物頻道能讓滿足女性愛買東西的天性。我的購物頻道定位在價廉物美，為女性們提供質量好能讓他們放心的好寶貝。.如何運用網(wǎng)絡的優(yōu)點進行更好的表達網(wǎng)站的版面風格溫暖舒適，顏色主打暖色調，又以粉色系為主，簡潔明了，大方舒適，以達到讓平時忙碌工作和家庭的女性放松的功能，讓她們對網(wǎng)站產(chǎn)生歸屬感，一個累了能讓她們放松的地方。放松有時候也需要朋友，網(wǎng)站的論壇就提供個這樣一個讓女性們互相了解認識的場所。她們在66$里了解互相的故事，給對方提供自己的意見，交流平時美容護膚的心得，互相曬曬對方收藏的美男，不亦樂乎。因為網(wǎng)站的定義還有時尚，所以要求網(wǎng)站的多媒體強大。我決定運用flash圖像查看器，彈開窗口，浮動窗口，超鏈接等增加網(wǎng)站的多媒體化。.網(wǎng)頁的結構與分解每頁的結點如下圖。2/13

.網(wǎng)頁所采用的技術網(wǎng)頁是使用dreamweaverxm模板，JavaScript等2004制作的，采用了表單，框架集，模板，JavaScript等將設計與編寫代碼一起制作完成的。五.網(wǎng)頁設計日志3/13網(wǎng)頁設計之中出現(xiàn)了很多問題，這是我始料未及的。制作網(wǎng)站的一開始，由于我想做的是一個自己的網(wǎng)站，網(wǎng)站的10go就成了我一個心頭大石。想要制作一個動人的，能抓住別人眼球的10go要使用photoshop，可是我對Photoshop不甚了解，而要我在原本就拮據(jù)的做網(wǎng)站的時間里擠出時間來學習photoshop，這實在不是一個什么好主意。我想了很久之后，決定使用powerpoint的藝術字功能外加截圖完成我網(wǎng)站10go的制作。結果出來之后，雖然沒有達到我心目中的想象，但是相比我什么都做不出是好上千倍萬倍。解決完網(wǎng)站logo問題之后，我又碰到了網(wǎng)頁規(guī)劃的問題。我原本計劃是做一個女性門戶網(wǎng)站一一伊人網(wǎng)，包括歡迎界面，首頁，伊人購物，伊人話題〈即bbs），伊人讀書，伊人blog和登陸注冊頁面總共9個頁面的，可是我制作網(wǎng)頁的速度是在趕不上時間流逝的速度，第一天我從下午六點開始做做到凌晨2點總共8個小時里，就做了歡迎界面，一個簡陋的首頁和登錄注冊頁面，而這四個頁面還并沒有完全達到我要的功能，例如JavaScript的表單驗證。我暗暗心驚，覺得自己為自己制作的目標可能太大了點，于是我決定第二天依據(jù)進度來調整網(wǎng)站的內容。第二天我從下午三點開始一直做到凌晨三點，終于將網(wǎng)站的大體內容做出來了，由于第二天已經(jīng)是16號了，18號要交作業(yè)，17號由于考試不能一天都花在制作網(wǎng)頁上，而且17號晚上還會斷電，不能熬夜。于是我決定將伊人讀書和伊人blog的版塊刪去。此時我擁有了歡迎界面，首頁，購物頁，bbs頁面，登錄頁，注冊頁，注冊成功頁，和購物車計算頁。除去歡迎頁面，購物頁，bbs頁并未采用模板技術，其他頁面均采用。購物頁面是個框架集頁面，其中包括5個子頁面，topframe，leftframe，mainframe和兩個不同的rightframe＜被leftfrrame鏈接）。最后面臨的是頁面美化問題和功能問題，我將我們上過的課件都瀏覽了一遍，爭取將學過的技術都運用上去，結果發(fā)現(xiàn)時間顯示，表單驗證，浮動窗口等等一大批以上@丫25皿巾為首的不會做的技術不能運用，心中甚為郁悶，鑒于18號就要交上作業(yè)，內心決定在寒假里再仔細鉆研達到能運用自如的階段。自身點評這是我第一次做出有實用功能的東西，內心不可以不為激動。剛開始實訓的時候，心里不以為然，覺得怎么樣的東西要我們花整整七天不間斷的上課來4/13掌握，心里覺得肯定很累很沒意思。沒想到我們學的是制作網(wǎng)站。畢竟現(xiàn)今的世界是信息化的的世界，隨著計算機技術和通信的技術的高速發(fā)展，互聯(lián)網(wǎng)從而得到了長足的發(fā)展，同時使得互聯(lián)網(wǎng)在人們的工作生活中越顯得重要，成為了必不可少的組成部分。現(xiàn)在網(wǎng)上購物、遠程教育、遠程醫(yī)療等都是其應用的最好證明，更進一步來說互聯(lián)網(wǎng)的應用推動了生產(chǎn)力的發(fā)展，改善了人們的生活水平。互聯(lián)網(wǎng)的應用離不開形形式式的網(wǎng)頁、網(wǎng)站，要制作一個受歡迎的網(wǎng)頁不僅要內容充足、獨具特色、適合大眾的口味，更需要一個引人入勝的界面，無論從排版、文字、圖案、結構等要素都要組合成一個有機的整體，讓網(wǎng)民一進入網(wǎng)站就能引起其注意。實訓第一天，老師教的東西就引起了我們的興趣，雖然很簡單，雖然很簡樸，但是很開心，覺得自己也能做點實用性強的東西了。所以當知道實訓結束時我們每個人自己要做一個網(wǎng)站時，內心應該是雀躍的，自己也想看看自己究竟能做出一些什么東西來?！爸湟锥泻箅y”，平時在網(wǎng)上沖浪時是那么的自由、舍意，在享受上網(wǎng)樂趣時卻不知要制作出一個看似普通的網(wǎng)頁卻要付出很大的努力，無論從網(wǎng)頁設計到內容的搜集都馬虎不得，可能為了某一細微之處嘔心瀝血。以前我自己看到不是很美觀的網(wǎng)頁時內心十分不屑一顧，覺得這樣的東西實在是也好意思拿出手給大家看，這幾天我自己拼命做完我的網(wǎng)站時，雖然有一股成就感，但其中更夾雜著愧疚感，我做出來的網(wǎng)頁還不如我以前自己鄙視別人的網(wǎng)頁好看。從這次制作網(wǎng)頁的過程中可以體會到，要制作出一個完整的網(wǎng)頁首先要定好主題，我們就可以圍繞該主題取材，因為我們現(xiàn)階段只能是制作一些簡單的網(wǎng)頁，網(wǎng)頁的內容與功能不可能與一些大型的網(wǎng)站如21CN、新浪、163等比較，如果沒有了主題就變得內容空泛，根本無從著手。主題定好后就可以考慮網(wǎng)頁的結構，有一個好的、完整的架構就像一架飛機的骨干一樣，才可以保證網(wǎng)頁的正常運行。同樣，首頁設計、整體的風格很重要。跟著就是要采集素材，一個網(wǎng)頁只有內容豐富、新穎及更新較快才可留住網(wǎng)民，這是一項長期的、艱巨的任務。當你打開一個網(wǎng)站的時候，你是因為界面的美觀還是因為內5/13容的需要你收藏在你的IE中，我相信80%人是因為內容，20%中有部分是設計人員，因為界面的美觀，互聯(lián)網(wǎng)發(fā)展到今天內容為王的主題思想已經(jīng)是不可以動搖的地位，由于網(wǎng)絡發(fā)展的可復制性，內容就是決定你網(wǎng)站的一個主要發(fā)展點。對于一個網(wǎng)站來說，flash的制作也很重要，制作一個符合網(wǎng)站主題的flash，能夠起到一鳴驚人的效果。網(wǎng)頁的整體布局可以通過表格來進行實現(xiàn)。左右滾動的圖片，彈出窗口等特殊效果，能夠起到輔助的作用。網(wǎng)站整體風格的統(tǒng)一可以通過模板技術來實現(xiàn)。至此我的網(wǎng)頁可以說是“麻雀雖小但五臟俱全”。雖然說我因為時間和實力問題，刪去了我原計劃中的兩大部分，但是能做出現(xiàn)在的成果，我心里已經(jīng)很開心了。雖然首頁很簡陋，但是點擊開來的購物頻道和bbs頻道可是很豐盛的，希望老師能一起看完，不要辜負我熬了三天夜的成果。從這次制作網(wǎng)站上，我還明白了，也許看上去不怎么樣的東西，正是別人幾天的努力成果，不能妄加踐踏和鄙視，因為沒有成果也有汗水?？偠灾?，這次的實訓大作業(yè)不但讓我更加熟練的掌握了我學到的知識，豐富了我的見聞，擴大了我的視野，也讓我意識到了我的不足和可以繼續(xù)進步的空間，更加讓我明白了很多平時也許似懂非懂的人生道理。我可以很自豪地說我從中掌握了以前對我來說什么都不懂的東西。最后謝謝老師的教導，老師您也辛苦啦！網(wǎng)頁打印稿所有不同風格網(wǎng)頁頁面均截圖打印出來，并做簡要說明＜如：該頁面所采用的技術、頁面特色等）。我的網(wǎng)站包括歡迎界面，首頁，購物頁，bbs頁面，登錄頁，注冊頁，注冊成功頁，和購物車計算頁。除去歡迎頁面，購物頁，bbs頁并未采用模板技術，其他頁面均采用了模板技術。購物頁面是個框架集頁面，其中包括5個子頁面，topframe，leftframe，mainframe和兩個不同的rightframe＜被leftfrrame鏈接）。Bb5的三個鏈接均為錨點鏈接。另外每頁的“聯(lián)系我們”為電子郵件鏈接。另打開網(wǎng)站時會彈出一個如下界面懶哈瓦惚泡姍慳辭驪般葩闞略軸施癡…請老師點擊允許，否則一些效果不會出現(xiàn)，謝謝！6/13

君三3寸甘切!君三3寸甘切!W這是我的歡迎頁面，點擊enter可以進入，進入時播放音樂通敢打球,，人同"liurur^tIMiiEMtEnpli-rct金胖弟舌■1“帕ULMVHHl。?他他心戶■*e審聆同■I■址》陽口連3^,，城1口門毗'頡則修茶逅5TH冷ir.Hr伊人阿gjxlS：'PQJXI0P1苜時候只罡一用心情有時候只是一葉而濁針百%瑪讓它主辛有已身不由白管吉重I恬蜀I他在丁美至I穴曾TT幫用I審把I耒劑網(wǎng)錚I春心I情感I彘子I岫辭I美*I0P1苜時候只罡一用心情有時候只是一葉而濁針百%瑪讓它主辛有已身不由白管司空之年箕熱相逢境不舵幸里李心虹電長出和結的曲城我啥怕值一切有導頭相至目開那萬時候也許你急陪推吾爾檸艮靠tatting這是點擊歡迎頁面后的首頁，簡潔大方?！耙寥司W(wǎng)”logo是自身鏈接；“登錄”，“注冊”分別鏈接到相應頁面，“聯(lián)系我們”為電子郵件鏈接。首頁應用了模板技術。“shopping”和“talking”分別對應伊人網(wǎng)的兩大板塊，點擊圖片即可進入。7/13

中AAR受非-EB-rcuKufl:faturnizhExpLucucTOC\o"1-5"\h\zk酢*：l011帕X?>!>般 工同0MMltf! 弁..JH：?||1/?*V：相群的.--信“?■址Q3旭>談uni/碗上口已喻,癡嫻嘛歷恒?晶Mb』看 "U MB伊人網(wǎng)月［舊金伊人網(wǎng)月［舊金Tom百頁I話時I論壇|M美I五在IW,玳沙雇扉仍人同！旬夜為若MifiPA本網(wǎng)一*■，IB*JIHIJI1UMM1I帚坳I裱EI美瞽IN卦I霹曜|情盛I票子I博爵I美音I梅君I只是法一坦注冊新會員.不會坦注國叩送IQOO鈿覺.權先可以用親換購百場屏■IQ的在第，而天的典型曲田的，的軍史苗心,享受星以容戶為中心的U奔F亶好的購物伴眈點擊“登錄”時的登錄頁面汾處式用妝而=Ee-e-cukuCtJaturnizhEx^LeieucKtt'tJ??■!>吉??看W曲工信江！V^UiJ<.i］.；1/M?P.--.［75?I+址Q3愴［I跡MgiJMri+qu*■型M嘛旨逅2匕曲制hs :鼻口外到ttffiHdQi ~~>￡MTTCAMb .|lt貝I詰國I他自］珥身|文it|帚幽|寓E|「朔此卦|*「|情事|泉子|徐酢|肥*I怙在I曲tTt鼻I含同座餐鼻I含同座餐會同在， 只HE力英文名或熱干代別，。螞O女￡￡■也琳- ■H-1E*字帝俎成.英文早產(chǎn)IE分大小百瑞認則，電子蛇3手機號軌，固定電狀，匚所在他區(qū)?中——的田田|￡TH■.面■一?1TT□粒用量以下翻衣伊人阻用戶憂諛和膻孔由強伊￡閑具有耕以上扉武的景理陣陣粗I注時I也點擊“注冊”后的注冊頁面注冊新會員-特會員注瑁即送um麗分.積分司吸用素鐵中商品嗖*1口值式費，而天的退操貨保陵，兩買更st心?李梵最以客戶為中心的服務卜更好的鵝坊悻航J?*?8/13SEE寶片的Ul￡)看看切中工鼠心CTJ'I)伊人網(wǎng)

girlave皈伊人網(wǎng)

girlave皈蟀仔.前百或曾整人再1!兩謂怪人在首頁I話近lit壇丁芟憲［交流I罌鼬I幕日美客IN卦I歐是I情感I親于I震謝I恚*II*宅I只是返一逛恭喜你！你已經(jīng)成功注冊成為伊人網(wǎng)會員,

你將享受到我們?yōu)槟銕淼淖詈梅?部人括崎部人括崎注冊成功之后的頁面，可選擇跳轉到購物或bbs頁面?！鯡MT/二十世口JjMsiAkWl口UH3T8mMi:彝伊人網(wǎng)gixtSVPQJWwr,武客曜敢伸心■百貝I話逐I世運1伊人網(wǎng)gixtSVPQJWwr,武客曜敢伸心■百貝I話逐I世運1%第I交儻I幫珀I歡喟時樂只晶一甜心情有時候只是i卡在前無法百味.無法讓它主革釐師由自shoppi美芹I博mI只是讓一起福生之年狹斛相逢其不就才他豐心嘉熊弋出糾結的吃濕抖吟相傳一切有導頭相聚勒開都百時候也許驚會陪我者阻木■長福taliting首頁點擊“聯(lián)系我們”時的電子郵箱鏈接--M1QE9/13.胃苴￡t=￡口的S差客戶院HJ-9n用裝長的也就牌創(chuàng)都心IJDlUS靜佳，一__款妒昧正品全的塔馥值位黑土E妻教昔本尊出本的召史安氨HCTA保養(yǎng)nn?*JU<工工愷tRt華匿匿壬白「”砂性端聞eh;J.0.訃到5i：r伊人購物girl,shopping,com由客沏G麻誦皆■人在冏F市?■LB*I建珀J［曝侵腺fiI.*a伊人購物girl,shopping,com由客沏G麻誦皆■人在冏F市?■LB*I建珀J［曝侵腺fiI.*aMSO更解兩嫉門職MtHH 再詡St干:孔?良產(chǎn)品知其鼬雎匕&Ktvin^fili■冬冬草密囑關膚術,uia載婢■茁工n“尊*itrs法史a值fl±LBflGOLAY春牧考季■STRT-FilArflft<n俄Jg購物頁面。首頁點擊“shopping”時可進入。這是一個框架集頁面。購物窗口打開時彈出廣告窗口，頁面中間是個flash圖像查看器，圖片能變換?？谌怂揪?-ii.uE-?j-0-f1InBI'EEftEer1uefr富件?UifJ?>^i牛互GJIMOJ*的中?」?? ■ 工4 ：h需r二<- " -■和町右右愷輸.就為廉野。人的'和町右右il砧甲點擊購物頁面的“美容護膚"，mainframe改變了內容10/13:”二［JI也保啊.武可戰(zhàn)甑伊人網(wǎng)ESA［翊］［/落番nMlLAFA50Xffl?H產(chǎn)品升集舐*fl?r?+SeLbS*±r?e*?s榭W*口一4E薩揚-EE-CEUKQftI&tHFnKtEzpLuFUE總如罐莉把土?在富甘人，11用.雅可界?3WF丈長窗J?世用 TE6f**Eft-fl?拈④Xfi)E>般?電>TA^'iVHiyi0就，0國圖i小伊人購物girl,shopping,com時謂?命人心同一步山里鉀就a?r?點擊購物頁面的“彩妝香水”，右邊mainframe變化|口工牌你又芯=lifE4xaffIci:?em(EEpbaE?eJIBffiOS5E*MfS-nIKS'g，1，O-，。,@@心：戶**臺***。|向心國■伊人網(wǎng)girt"com程H.而號.哨謂世人在用F市―.■港圉纖長.蟀仔,避號球且青人用11首頁?話城?詫壇?買妻?交情n幫鼬?橫叫美容?八卦?速品?情感?灰干?旎將?桀食?博客?只走更一推點擊購物頁面的“購物車”可進入購物計算器窗口11/13

3?兒口,星-Ke-c-cuKuftl&turniEi：E.Lnuur京胖歸帕舌■g赧“gIM^iVHHi小皿▼電1R0明A** 冬地同■?■二。1蛤口FEiHMtquHar就頗陶r第逅2世乩》工眼飾?類香?美附善幼?注廉?情.感?的則造子|樂rSI看制,i田闈主莊I女人邦i讀我品用IffAW美聲護版I砒攣形I時奘風梏I樂聲百尋I親子洋園I照帝前沿I西情雍施I14屋在食I優(yōu)由戶外I北詵用M伊人話題以你就誠該這些k特立獨行3人野需N'B計劃新?夜床上胸點:.笈1的佳的護娃m晅卡?：a孑的煞舊產(chǎn)品使用心得?2.笈1的佳的護娃m晅卡?：a孑的煞舊產(chǎn)品使用心得?2?虹器11漸漱品裝理心得■.和草茁鼻1星拜畤alLenoble?共效-和每天泛江花馬江*瑜芥札杓記?sncrs背?2s省干依為-H名士正甜.雯艷”■祖衣】可以可頁.也可以用1有利杜一桿正it受?沖i￡t±明&析國的”工?-這里，讓也南力最高端的阮抵西汨盧昂|也總容除弱咒開裁平艮丸加蛔.府心臥麗!司，百盛FI育曲事.伊人美有驚克也與T'合女子?新拈.可景IX的騫日照客伊人問2啟偉版，1個讓弗后!［美碘干tk1面讓海訶燈自已的寂升一片杭式面餅同好的樂四，一個與與M源的所在?AKjljl費忙我的福JS憫IB小格指伊人網(wǎng)的bbs界面。從首頁的“talking”可進入。一行圖片可從右向左滾動■AH鑄趣―ii