網(wǎng)頁和網(wǎng)站設(shè)計報告

《網(wǎng)頁和網(wǎng)站設(shè)計》課程設(shè)計大作業(yè)——詩韻網(wǎng)站設(shè)計報告PAGE西安石油大學(xué)經(jīng)濟(jì)管理學(xué)院信息管理與信息系統(tǒng)專業(yè)經(jīng)管1201班組號：12姓名：郭璞PAGE1《《網(wǎng)頁和網(wǎng)站設(shè)計》課程設(shè)計大作業(yè)——詩韻網(wǎng)站設(shè)計報告*******大學(xué)經(jīng)濟(jì)管理學(xué)院*******專業(yè)****班姓名：****學(xué)號：******目錄TOC\o"1-3"\h\z11679前言 45861一、作業(yè)背景 421427二、選題說明 515134三、小組任務(wù)分工 621580第一章前期準(zhǔn)備 624483第一節(jié)素材搜集 610602一、網(wǎng)上搜集 632651二、制作 629977第二節(jié)其他準(zhǔn)備 732179一、免費空間申請 728392二、8uftp使用 727311第二章網(wǎng)頁制作 724613第一節(jié)設(shè)計方案 74624第二節(jié)網(wǎng)站主頁 88023一、排版 816542二、內(nèi)容 910983第三節(jié)內(nèi)容制作 917764一、《我的主頁》制作 924275二、《About》制作 1314593三、《圖片》制作 1421362四、《Blog》制作 1529665五、《信息》制作 1617222一、《詩詞釋義》制作 1831395二、《精美視頻》制作 184547第三章設(shè)計小結(jié) 1910741制作過程中的問題及小結(jié) 196764結(jié)束語 2011279心得體會 2025474主要參考文獻(xiàn) 20前言一、作業(yè)背景本文根據(jù)《網(wǎng)頁和網(wǎng)站設(shè)計》課程要求而做。課程設(shè)計大作業(yè)要求如下：完成靜態(tài)網(wǎng)站開發(fā)報告，包括以下內(nèi)容：網(wǎng)站名稱網(wǎng)站規(guī)劃與設(shè)計網(wǎng)站類型與服務(wù)領(lǐng)域；網(wǎng)站服務(wù)對象；網(wǎng)站處理流程；網(wǎng)站所需頁面；開發(fā)平臺與工具等網(wǎng)站開發(fā)網(wǎng)頁內(nèi)容編排網(wǎng)頁美工設(shè)計等完成網(wǎng)站相關(guān)頁面與內(nèi)容的開發(fā)，要求：網(wǎng)站至少由兩級頁面構(gòu)成，網(wǎng)站內(nèi)容充實，頁面布局合理，內(nèi)容編排符合網(wǎng)站主題；使用Dreamweaver完成網(wǎng)站的頁面布局；嘗試使用Dreamweaver中的網(wǎng)頁框架和或div布局；每個頁面中至少要有一個使用Flash制作的動畫（需要包括學(xué)過的flash內(nèi)容）；設(shè)計每個頁面中的按鈕和導(dǎo)航條。網(wǎng)站功能必須包括個人簡介模塊，其他模塊可以自由擴充?？梢园亦l(xiāng)介紹、個人趣事、感悟、相冊、經(jīng)歷、所取得的成績、愛好、以及個人理想等。能方便的從每個頁面返回到首頁。人員分配本次網(wǎng)站設(shè)計要求最多2個同學(xué)為一組，完成網(wǎng)站的設(shè)計、開發(fā)以及文檔書寫。 4.最終成果（1）設(shè)計報告（電子文檔和打印的報告），格式要求見附件（2）程序源代碼二、選題說明詩詞，是指以古體詩、近體詩和格律詞為代表的中國漢族傳統(tǒng)詩歌。亦是漢字文化圈的特色之一。通常認(rèn)為，詩更適合“言志”，詞更適合“抒情”。詩詞是闡述心靈的文學(xué)藝術(shù)，而詩人、詞人則需要掌握成熟的藝術(shù)技巧，并按照嚴(yán)格韻律要求，用凝練的語言、綿密的章法、充沛的情感以及豐富的意象來高度集中地表現(xiàn)社會生活和人類精神世界。中國詩起源于先秦，鼎盛于唐代。中國詞起源于隋唐，流行于宋代。詩歌起源于上古的社會生活，因勞動生產(chǎn)、兩性相戀、原始宗教等而產(chǎn)生的一種有韻律、富有感情色彩的語言形式?！渡袝?虞書》：“詩言志，歌詠言，聲依詠，律和聲?！薄抖Y記.樂記》：“詩，言其志也；歌，詠其聲也；舞，動其容也；三者本于心，然后樂器從之?！痹缙?，詩、歌與樂是合為一體的。詩即歌詞，在實際表演中總是配合音樂、舞蹈而歌唱，后來詩、歌、樂、舞各自發(fā)展，獨立成體，詩與歌統(tǒng)稱詩歌。如今詩歌按照不同的表現(xiàn)形式分為白話詩和舊體詩詞，白話詩更多稱為新詩或自由詩，但“詩詞”連稱時一般指舊體格律詩、詞。在當(dāng)今社會生活中繼承和發(fā)展它傳統(tǒng)形式中情味意味韻味更能使人接受，它是漢語特有魅力和功能，這是其它任何語言所沒有和不能的，也是任何語言翻譯不了的。因此傳統(tǒng)詩詞文化是世界文學(xué)史上最獨特表現(xiàn)形式和文學(xué)遺產(chǎn)。今本站搜集一些古詩詞與一些對詩詞有共同愛好的朋友共同分享，希望將我們的傳統(tǒng)古詩詞發(fā)揚光大?；舅悸繁揪W(wǎng)站主要是實現(xiàn)一個個人愛好的網(wǎng)頁。相信每個人都希望在網(wǎng)上有一片分享自己愛好的空間，不管是QQ空間，還是51空間等等，很多人都想把自己的空間弄得絢麗多彩，漂漂亮亮的，希望在眾多的空間中脫穎而出，得到更多人的關(guān)注，因此此網(wǎng)站將告訴同學(xué)們我們自己去構(gòu)建完全屬于自己的一個網(wǎng)站，而且通過此網(wǎng)站可以使同學(xué)們更加的了解個人網(wǎng)站的組成。作業(yè)目標(biāo)本網(wǎng)站共分有5個板塊，分為我的主頁、About、圖片、Blog、信息，目前分別對其進(jìn)行介紹。

整個網(wǎng)站采用灰色為主色調(diào)，灰色給人以古典、優(yōu)雅的感覺，所以更能給人以視覺的沖擊。網(wǎng)頁主要有三部分組成，頭部分別為頭部鏈接和相關(guān)的圖片或Flash來體現(xiàn)主題。主題主要分為三個模塊，分別為古風(fēng)圖片，詩詞內(nèi)容和詩詞鏈接組成。底部用來添加主頁地址連接以及聯(lián)系方式，整個網(wǎng)站的設(shè)計條理清晰，層次分明。布局方面，本網(wǎng)頁主要采用表格布局頁面，因為表格布局能有效的將各個模塊分開來使其不會互相干擾，而且易于排版，這樣每個部分就好像一個獨立的，你要修改哪個地方直接修改與它相關(guān)的而不會影響其他的部分。三、小組任務(wù)分工1、組員（姓名：郭璞）（1）個人主要工作素材搜集，網(wǎng)頁排版，F(xiàn)lash制作，網(wǎng)頁制作主要收獲學(xué)會了如何制作簡單的Flash動畫，如何運用Dreamwaver工具制作基本網(wǎng)頁（3）自我評定□優(yōu)□良□中□及格□不及格第一章前期準(zhǔn)備第一節(jié)素材搜集一、網(wǎng)上搜集在正式制作我們的網(wǎng)頁之前，在確定了主題后首先我在網(wǎng)上尋找了一些手繪的古風(fēng)圖，再將這些圖片中找到適合我們主題的進(jìn)行分類。又通過百度等工具尋找了一些古詩詞網(wǎng)站和古詩詞的書籍將其收集起來并保存。以及一些需要的網(wǎng)頁鏈接，充實網(wǎng)站內(nèi)容使網(wǎng)站內(nèi)容更加豐滿。還找了一些關(guān)于古詩詞的swf格式的MV進(jìn)行下載。二、制作由于網(wǎng)頁制作需要有一部分的小圖標(biāo)以及網(wǎng)頁頭部的Flash無法在網(wǎng)上找到。所以通過Firework工具的繪畫功能制作了一些網(wǎng)頁小圖標(biāo)。又用Flash工具制作了一些動作圖片和小視頻來美化網(wǎng)頁布局，使網(wǎng)頁看起來更加美觀大方。其他準(zhǔn)備免費空間申請免費空間的申請在網(wǎng)站制作過程中是很重要的，原本申請了老師建議的一個網(wǎng)站，但是由于申請人數(shù)太多了導(dǎo)致該網(wǎng)站凍結(jié)了域名。后又看了許多國內(nèi)的網(wǎng)站，卻由于收費或是試用網(wǎng)站無法在公共網(wǎng)絡(luò)上使用等等原因無法作為個人網(wǎng)站使用，后來在同學(xué)的幫助下才申請到了一個國外的免費空間才成功。二、8uftp使用網(wǎng)頁制作完成最總要的是上傳網(wǎng)頁，這樣才能完成一個網(wǎng)站的制作。所以，我在網(wǎng)上下載了8uftp軟件，用來上傳網(wǎng)頁完成網(wǎng)站的最后制作。網(wǎng)頁制作第一節(jié)設(shè)計方案=1\*GB3①主架構(gòu)設(shè)計，結(jié)構(gòu)圖如圖1所示：網(wǎng)站布局網(wǎng)站布局個人主頁我的主頁About圖片Blog信息=2\*GB3②網(wǎng)站主頁的設(shè)計，結(jié)構(gòu)圖如圖2所示：網(wǎng)站主頁網(wǎng)站主頁主題flash站長提醒最新更新唐詩三百首航宋詞精選欄友情鏈接第二節(jié)網(wǎng)站主頁一、排版在正式制作網(wǎng)頁前，我首先進(jìn)行了網(wǎng)頁排版。網(wǎng)頁整體顏色為灰色，網(wǎng)站的頭部是由一段“歡迎”的flash影片和到達(dá)各個板塊的鏈接組成。內(nèi)容部分是個人簡介和網(wǎng)站簡介組成。底部為網(wǎng)站版權(quán)所有，介紹了我的個人信息和版權(quán)信息。二、內(nèi)容個人簡介介紹了我的主要信息，網(wǎng)站簡介則是介紹了網(wǎng)站的選題原因和它的主要功能以及內(nèi)容簡介。在這張網(wǎng)頁上我插入了一個彈出窗口，用來插入歡迎信息。制作網(wǎng)頁使用的代碼<scripttype="text/JavaScript"><!--functionMM_openBrWindow(theURL,winName,features){//v2.0window.open(theURL,winName,features);}//--></script></head><bodyonload="MM_openBrWindow('ad.html','gg','scrollbars=yes,width=300,height=200')">第三節(jié)內(nèi)容制作一、《我的主頁》制作我的主頁頭部主要是由主頁題目和一則古風(fēng)Flash動畫組成。內(nèi)容主要為五個模塊，首先是站長提醒部分，主要功能為介紹本站作用和功能。其次是最近更新模塊，這部分主要功能是介紹網(wǎng)站最新上傳和更新的詩詞。在這里，我是用了腳本代碼做了一個簡單的圖片特效。再次是唐詩三百首和宋詞精選兩個鏈接模塊，用來鏈接一些推薦詩詞的釋義網(wǎng)頁。最后是友情鏈接模塊，這里的鏈接都是站外鏈接，用來鏈接一些其它網(wǎng)站的優(yōu)秀作品供大家欣賞。底部為網(wǎng)站版權(quán)所有，介紹了我的個人信息和版權(quán)信息。本頁主要使用來介紹本站基本功能和作用，并讓來訪者對本站有基本的了解。制作網(wǎng)頁使用的代碼<DIVclass=focusImg><STYLEtype=text/css>#FocusImg_JS{ BORDER-RIGHT:#908B821pxsolid;BORDER-TOP:#908B821pxsolid;FONT-SIZE:12px;MARGIN:0pxauto;BORDER-LEFT:#908B821pxsolid;WIDTH:390px;BORDER-BOTTOM:#908B821pxsolid;HEIGHT:312px;}#FocusImg_JSIMG{}#FIJ_L{ OVERFLOW:hidden;WIDTH:390px;HEIGHT:274px}#FIJ_LSPAN{ DISPLAY:block;OVERFLOW:hidden;WIDTH:394px;HEIGHT:249px;TEXT-ALIGN:left}#FIJ_LIMG{ WIDTH:390px;HEIGHT:249px}#FIJ_LP{ FONT-WEIGHT:bold;BACKGROUND:#fdedc7;MARGIN:0px;OVERFLOW:hidden;LINE-HEIGHT:25px;BORDER-BOTTOM:#f4c7791pxsolid;HEIGHT:22px;TEXT-ALIGN:center}#FIJ_LPA{ COLOR:#000;TEXT-DECORATION:none}#FIJ_LPA:visited{ COLOR:#000;TEXT-DECORATION:none}#FIJ_LPA:hover{ COLOR:#c00;TEXT-DECORATION:underline}#FIJ_LPA:active{ COLOR:#c00;TEXT-DECORATION:underline}#FIJ_R{ DISPLAY:inline-block;MARGIN:0pxauto;OVERFLOW:hidden;WIDTH:390px}.id_FIJ_R_ImgBlkIMG{ BORDER-RIGHT:#b27c7c1pxsolid;BORDER-TOP:#b27c7c1pxsolid;BORDER-LEFT:#b27c7c1pxsolid;WIDTH:91px;BORDER-BOTTOM:#b27c7c1pxsolid;HEIGHT:58px}.id_FIJ_R_ImgBlk_OnIMG{ BORDER-RIGHT:#b27c7c1pxsolid;BORDER-TOP:#b27c7c1pxsolid;BORDER-LEFT:#b27c7c1pxsolid;WIDTH:91px;BORDER-BOTTOM:#b27c7c1pxsolid;HEIGHT:58px}.id_FIJ_R_ImgBlk{ PADDING-RIGHT:3px;PADDING-LEFT:3px;FLOAT:left;PADDING-BOTTOM:0px;OVERFLOW:hidden;WIDTH:91px;CURSOR:pointer;PADDING-TOP:0px;HEIGHT:64px}.id_FIJ_R_ImgBlk_On{ PADDING-RIGHT:3px;PADDING-LEFT:3px;FLOAT:left;PADDING-BOTTOM:0px;OVERFLOW:hidden;WIDTH:91px;CURSOR:pointer;PADDING-TOP:0px;HEIGHT:64px}.id_FIJ_R_ImgBlk_OnIMG{ FILTER:progid:DXImageTransform.Microsoft.Alpha(startX=0,startY=0,finishX=100,finishY=100,style=1,opacity=50,finishOpacity=50);moz-opacity:.5;opacity:0.5}</STYLE><!--START:焦點圖--><!--焦點圖尺寸:WIDTH:390px;HEIGHT:249px--><SCRIPTtype=text/javascript>varTimeOut=3000;//切換時間(單位毫秒);varStartType="onmouseover";//縮略圖觸發(fā)動作varimgUrl=newArray();varimgSUrl=newArray();varimgLink=newArray();varimgtext=newArray();varimgAlt=newArray();varadNum=0;imgUrl[(3+1)]='images1/23052PS026.jpg';imgSUrl[(3+1)]='images1/23052PS026.jpg';imgtext[(3+1)]='<ahref="#"target="_blank">不似接輿人不知，扭轉(zhuǎn)乾坤太瘋？</a>';imgLink[(3+1)]='#';imgAlt[(3+1)]='不似接輿人不知，扭轉(zhuǎn)乾坤太瘋？';imgUrl[(0+1)]='images1/1732091_103337026_2.jpg';imgSUrl[(0+1)]='images1/1732091_103337026_2.jpg';imgtext[(0+1)]='<ahref="#"target="_blank">可憐東風(fēng)不惜花，可嘆風(fēng)姨不作嫁</a>';imgLink[(0+1)]='#';imgAlt[(0+1)]='可憐東風(fēng)不惜花，可嘆風(fēng)姨不作嫁';imgUrl[(2+1)]='images1/7033516_154207986000_2.jpg';imgSUrl[(2+1)]='images1/7033516_154207986000_2.jpg';imgtext[(2+1)]='<ahref="#"target="_blank">君來不同，君去不同！</a>';imgLink[(2+1)]='#';imgAlt[(2+1)]='君來不同，君去不同！';imgUrl[(1+1)]='images1/20081110215517262_2.jpg';imgSUrl[(1+1)]='images1/20081110215517262_2.jpg';imgtext[(1+1)]='<ahref="#"target="_blank">才子如此閑悠，瘞無數(shù)天才競自由</a>';imgLink[(1+1)]='#';imgAlt[(1+1)]='才子如此閑悠，瘞無數(shù)天才競自由';</SCRIPT><!--END:焦點圖--><SCRIPTtype=text/javascript>functionchangeimg(n){adNum=n;window.clearInterval(theTimer);adNum=adNum-1;nextAd();}functiongoUrl(){window.open(imgLink[adNum],'_blank');}varcount=0;for(i=1;i<imgUrl.length;i++){if((imgUrl[i]!="")&&(imgLink[i]!="")&&(imgtext[i]!="")&&(imgAlt[i]!="")){count++;}else{break;}}functionplayTran(){if(document.all){imgInit.filters.revealTrans.play();}}varkey=0;functionnextAd(){if(adNum<(imgUrl.length-1)){adNum++;}else{adNum=1;}if(key==0){key=1;}elseif(document.all){imgInit.filters.revealTrans.Transition=23;imgInit.filters.revealTrans.apply();playTran();}document.images.imgInit.src=imgUrl[adNum];document.images.imgInit.alt=imgAlt[adNum];document.getElementById('FIJ_R_IB_'+adNum).className='id_FIJ_R_ImgBlk_On';for(vari=1;i<=count;i++){if(i!=adNum){document.getElementById('FIJ_R_IB_'+i).className='id_FIJ_R_ImgBlk';}}document.getElementById('focustext').innerHTML=imgtext[adNum];document.getElementById('imgLink').href=imgLink[adNum];theTimer=setTimeout("nextAd()",TimeOut);}document.write('<divid="FocusImg_JS">');document.write('<divid="FIJ_L">');document.write('<span><aid="imgLink"href="'+imgLink[1]+'"target="_blank"><imgstyle="FILTER:revealTrans(duration=1,transition=5);"src="javascript:nextAd()"name="imgInit"alt=""title="'+imgAlt[1]+'"/></a></span>');document.write('<pid="focustext">'+imgtext[1]+'</p>');document.write('</div>');document.write('<divid="FIJ_R">');for(vari=1;i<imgUrl.length;i++){document.write('<divid="FIJ_R_IB_'+i+'"class="id_FIJ_R_ImgBlk"><ahref="javascript:;"'+StartType+'="javascript:changeimg('+i+')"title="'+imgAlt[i]+'"><imgsrc="'+imgSUrl[i]+'"alt="'+imgAlt[i]+'"/></a>');document.write('</div>');}nextAd();document.write('</div>');document.write('</div>');</SCRIPT></DIV>二、《About》制作About的頭部是由各個主模塊的鏈接和標(biāo)題圖片組成。內(nèi)容是由圖片部分以及詩詞部分組成。詩詞部分含有其釋義和Flash制作的MV的鏈接。底部為網(wǎng)站版權(quán)所有，介紹了我的個人信息和版權(quán)信息。本頁主要是給人以另類的詩詞欣賞方式，讓詩詞更加貼近于我們的生活，減少詩詞的枯燥與乏味。三、《圖片》制作圖片主要由左邊的鏈接框和右邊的欣賞框以及底部的網(wǎng)站版權(quán)所有組成。鏈接框有一些推薦的古詩詞鏈接，欣賞框是一些優(yōu)美古詩詞的圖片和內(nèi)容。版權(quán)所有介紹了我的個人信息和版權(quán)信息。在這里，我用Flash工具制作了一個轉(zhuǎn)動小球的小動畫。下面的鏈接，我運用腳本語言做了一個滾動的鏈接效果使網(wǎng)頁效果更加豐富。本頁主要為欣賞頁，將圖片與詩詞結(jié)合給詩詞的內(nèi)容增加色彩，使其更加豐富。制作網(wǎng)頁使用的代碼<tdalign="left"> <MARQUEEdirectionheight=220onM0useOut=this.start()onMouseOver=this.stop()srollAmount=2scrollDelay=1><br> <ahref="huwurenxing.html">胡無人行</a><br><br><ahref="fengqiaoyebo.html">楓橋夜泊</a><br><br><ahref="hubiancailian.html">湖邊采蓮婦</a><br><br><ahref="tixilinbi.html">題西林壁</a><br><br> </MARQUEE></td>四、《Blog》制作Blog除了頭部的圖片部分和底部的版權(quán)信息以外，內(nèi)容則是通過小塊的方式將詩詞以不同的變現(xiàn)方式展現(xiàn)出來，使人看起來耳目一新增強趣味感和視覺上的感官色彩。五、《信息》制作信息的頭部是通過題目和Flash展現(xiàn)出來，內(nèi)容一方面是一些有關(guān)故事的圖片，另一方面是關(guān)于來訪本網(wǎng)站的訪客的信息。可以系統(tǒng)的了解訪客對本網(wǎng)站意見和建議，和來訪本站的訪客的個人傾向。最后是版權(quán)部分。第四節(jié)鏈接頁制作一、《詩詞釋義》制作詩詞釋義除頭部欣賞的動畫外，內(nèi)容主要分為詩詞的內(nèi)容，譯文以及詩詞賞析。還有古詩分類和古文典籍兩部分的鏈接，這部分鏈接屬于外部鏈接主要是一些與此相關(guān)的網(wǎng)站與網(wǎng)頁的鏈接。本頁主要功能是用來對《我的主頁》內(nèi)的詩詞內(nèi)容進(jìn)行進(jìn)一步了解，深層次加以詳述的網(wǎng)頁。二、《精美視頻》制作精美視頻除頭部圖片與底部版權(quán)外，內(nèi)容主要