1、網(wǎng)頁(yè)設(shè)計(jì)課程期末考試作業(yè)網(wǎng)站名稱：孤獨(dú)的探戈設(shè)計(jì)人：謝嶺班級(jí)：電子商務(wù)151學(xué)號(hào)：37評(píng)閱人：王選勇學(xué)期：20162017學(xué)年第1學(xué)期成績(jī)：麗水學(xué)院工學(xué)院2016.12誠(chéng)信承諾我謹(jǐn)在此承諾：本人所完成的網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)期末考試作品均系本人獨(dú)立完成，沒有抄襲行為，凡涉及其他作者的觀點(diǎn)和材料，均作了注釋，若有不實(shí)，后果由本人承擔(dān)。承諾人（簽名）：謝嶺2016年12月25日網(wǎng)頁(yè)設(shè)計(jì)課程期末考試作業(yè)成績(jī)?cè)u(píng)定表姓名謝嶺學(xué)號(hào)37班級(jí)電子商務(wù)151授課教師王選勇課程設(shè)計(jì)題目孤獨(dú)的探戈音樂(lè)網(wǎng)站提交日期2016.12.25評(píng)分項(xiàng)目評(píng)分成績(jī)1.網(wǎng)站設(shè)計(jì)規(guī)劃（20分）2.視覺效果（20分）3.網(wǎng)站內(nèi)容（30）4.網(wǎng)站交

2、互（10分）5.特色和創(chuàng)意（10分）6、作業(yè)態(tài)度（10分）總分（100分）最終評(píng)定成績(jī)：最終成績(jī)轉(zhuǎn)化為等級(jí)分，以優(yōu)、良、中、及格、/、及格評(píng)定孤獨(dú)的探戈設(shè)計(jì)說(shuō)明書一、選題的分析（選題的意義，針對(duì)選定的課題，打算如何展開設(shè)計(jì)，想表達(dá)什么內(nèi)容？）本次我選的網(wǎng)站主題是音樂(lè)，我平時(shí)就十分喜歡聽音樂(lè)，我覺得音樂(lè)是一種年輕人表達(dá)自我的一種方式，通過(guò)音樂(lè)我們能表現(xiàn)自己的喜怒哀樂(lè)，表現(xiàn)出自己的生活態(tài)度。音樂(lè)能夠給我們力量，給我們安慰，給我們無(wú)限的希望。我們心里總有那么一首歌，想唱給心愛的姑娘；總有那么一首歌，慰藉我們孤獨(dú)的靈魂。因此，我也想制作一個(gè)音樂(lè)網(wǎng)站，通過(guò)音樂(lè)的力量來(lái)給更多的人溫暖和安慰。針對(duì)這次選定的

3、主體，我打算制作六個(gè)網(wǎng)頁(yè)，分別為首頁(yè)，歌手，專輯，排行榜，MVffi自我簡(jiǎn)介六部分。首先制作之前，我借鑒參考了主流音樂(lè)網(wǎng)站QQT樂(lè)和網(wǎng)易云音樂(lè)的網(wǎng)頁(yè)排版布局，取其精華，為我所用。我初步確定了本次網(wǎng)頁(yè)布局為簡(jiǎn)單的上下型，簡(jiǎn)潔明了方便用戶瀏覽。網(wǎng)頁(yè)內(nèi)容為圖文并茂，以較少的文字加上多彩的圖片吸引用戶興趣?？偠灾@次網(wǎng)站設(shè)計(jì)的理念是極簡(jiǎn)主義，去除多余的文字，排版內(nèi)容簡(jiǎn)單明了，貫穿一種單純真誠(chéng)的生活態(tài)度。二、如何運(yùn)用網(wǎng)絡(luò)的優(yōu)點(diǎn)進(jìn)行更好的表達(dá)（網(wǎng)站的版面風(fēng)格、版式、顏色、互動(dòng)性、多媒體等。為什么這樣做？）首先，本次網(wǎng)站頁(yè)面的版面布局借鑒了一些優(yōu)秀的音樂(lè)網(wǎng)站的排版，版面以上下型為主，風(fēng)格偏簡(jiǎn)潔舒適自然，

4、因?yàn)檫^(guò)多的東西以及一些花俏的動(dòng)畫，會(huì)給人視覺疲勞，看來(lái)起來(lái)繁重累贅，不利于用戶的瀏覽體驗(yàn)。網(wǎng)頁(yè)的顏色以白色，灰色為主，看起來(lái)低調(diào)卻富有內(nèi)涵，同時(shí)加入多彩的圖片以至于整體不會(huì)太沉悶。色彩協(xié)調(diào)，給人以自然舒適的感覺。關(guān)于網(wǎng)站的交互性，我設(shè)置了六個(gè)頁(yè)面的相互鏈接和用戶登錄鏈接，能夠滿足網(wǎng)站必要的互動(dòng)。網(wǎng)頁(yè)的互動(dòng)性通過(guò)鏈接點(diǎn)實(shí)現(xiàn)，大部分的網(wǎng)頁(yè)都需要有很醒目的導(dǎo)航，實(shí)現(xiàn)各個(gè)頁(yè)面的跳轉(zhuǎn)。所以在網(wǎng)站的頂部加了各個(gè)網(wǎng)頁(yè)的鏈接便于用戶尋找，方便用戶使用。整個(gè)網(wǎng)頁(yè)制作過(guò)程中，采用了多媒體中的文本、圖像、鏈接、表格等內(nèi)容。通過(guò)多媒體的綜合運(yùn)用，使網(wǎng)站變得生動(dòng)有趣。、網(wǎng)頁(yè)的結(jié)構(gòu)與分解（繪制網(wǎng)站頁(yè)面結(jié)構(gòu)、網(wǎng)站地圖、鏈接

5、點(diǎn)）欄目構(gòu)成主要功能首頁(yè)首頁(yè)是網(wǎng)站的精華核心部分，好的首頁(yè)能過(guò)給用戶留下良好的印象。本首頁(yè)鏈接各個(gè)頁(yè)面，綜合推薦歌曲資訊，底部顯示有網(wǎng)站信息。歌手通過(guò)登陸后可以快速精準(zhǔn)查找你想要的歌手專輯包含所有的音樂(lè)專輯，通過(guò)搜索可以快速查找相關(guān)專輯。排行榜分為總榜，月榜，日榜，反映歌曲的熱度，為用戶收聽提供參考MV包含所有的首爾專輯MV通過(guò)搜索可以快速查找相關(guān)MV個(gè)人簡(jiǎn)介包含個(gè)人信息介紹四、網(wǎng)頁(yè)所采用的技術(shù)所采用的技術(shù)：CSS，div布局，HTML使用的軟件：Dreamweave，rPhotoshop通過(guò)Dreamweave進(jìn)行網(wǎng)頁(yè)的布局和制作，通過(guò)Photoshop對(duì)圖片進(jìn)行美化CSSC件：.bighe

6、ight:auto;width:960px;margin-right:auto;margin-left:auto;.topheight:auto;width:960px;margin-right:auto;margin-left:auto;.left1background-color:#F36;float:left;height:200px;width:250px;list-style-type:none;text-align:center;.left1ullifont-size:16px;list-style-type:none;margin-top: 0px;margin-bottom:0

7、px;background-color:#F36;height:35px;width:80px;margin-right:0px;margin-left:0px;text-align:center;color:#FFF;font-weight:bold;.content1background-image:url(./images/20.jpg);background-repeat:repeat-y;.right1float:right;height:200px;width:710px;background-image:url(./images/1.jpg);background-color:#

8、FFF;background-repeat:repeat-x;.contentheight:auto;width:960px;clear:both;background-image:none;background-repeat:repeat-y;.zhongmargin-right: 40px;background-color:#9F6;height:auto;width:360px;margin-left:300px;.contentullifont-family:"微軟雅黑"font-size:16px;float:left;height:20px;width:80px

9、;list-style-type:none;margin-left:85px;margin-top:10px;.footheight:100px;width:960px;margin-top:15px;text-align:center;.footullitext-align:center;height:25px;width:80px;list-style-type:none;float:left;margin-top:5px;margin-bottom:5px;margin-left:50px;首頁(yè)代碼:Cb3dy><dlV<diYal<div公)號(hào)5營(yíng)=.1號(hào)

10、63;：詞<ultyp-"sqjiai；e”>WLOibha.h8(T-,3.S3.Jlfl/a/1ii<1crnnt-'s"點(diǎn)天皿<八3£，11;<1i><ahrnf=，青”=現(xiàn)音樂(lè)。a></li><1i><ahref=*#irR個(gè)性電臺(tái)</a></1二><LiXa我的趾?jiǎn)?lt;/G</1£></LiD<div-1as"rih-t1">C/div>：(liv二I'ji

11、9;sr-'Cufllt*工Jt"><ul><li><ahiruf-4'indei.htnl"，首頁(yè)£f>><71<LiXaLlit>r>教手<liXahEef='&Kill、壽帽baX/li><LiXa-l&lrtKLAflr行榜</liL>pXahrgf="胃總看工力mh"im,cc/3.IP，'vidh&SO'heiffht=J184w/XfaX/p><akref

12、=tiSr0133=11111fT2E-tdn*style=*font-weigkx:bold;coldi:F30,Tont-siae:1即式.>瑪i-3推£aUlh.lh崔印”>華的<<.3<3paeLa55*JliiV5*>|</3f(an><ahirnf-'#anl口">；稀行(Fas<syajLclawa='3|</ws)<acl-'l£g3。接遍<s£pjit、iz!La/S-T1itie*|</ip:ari><3h3&

13、#163;W/耳”'LEKr>民謠"G<spancls-J11me">|</span><ahref="Wuc3"A電子/a?1口出_cJLaNH-'jiLufs/XsLlue£="il*:法國(guó)日一.9一£二3"二兔多<73%<3ilLuih/A/=""口容61物&"/)<tihl#wid'th-cqri/"h口1rli書:r"0”廣.：113rp啤匚：inw“口餐二再p.diiin

14、E03口LCtr><xh s cop m= !，q n 1' >< > "a hrM " Xing src!= " zi酒 we白m/ 4. j口巴”<p> a hHefl返端/財(cái)?shù)男琴M(fèi)鴇火詬<th tcQp#="OTl*><p><a hi«f=fixing - "w/m 八門日國(guó)徐電最一&3o</s/p></th><t.h sco?- cl", a i.ret* *1' Xing -eic- if注

15、gmf E- 1口£ .433><ahy *"?# it宜版的電告"，z0 i</th>th ocopdw"c31hrflf-u3i，><ijic -e4aBlijkcif電口JT* ia"a Ili ef = Y"：,好聽到雨同爆炸'"G</p></th></tr>«r><th sOD'el" ><p>- fi irftw，SuXiris M£*“工，"0小口士&qu

16、ot; 的>C Mef 1M)熠印詞它的古腳音千 /»,/口、03、eth scop* co l * ><p >< a hr efXing eh c鼻. 曰£19 + zin餐<p><a hi ef=一祭為H必技們沒能在一起仃3></P5 <7詬wi dt-h=" L 后啟" widtlhl W wt. dUL* L 66" widths* L6e"vn 4+七"L 66" widtll66*heietit-1* 142* h*ighl="

17、142A heifi-h."* " J 42A hQid"Wheieht-"!42- heiffht=*142'i/X/a></D> 62"/X->/X/aX/p><th stopc-*l*><p><a href-Xiag xri. iu堂 u】IL 加工“ wi.d£h-v l£fiv huagkSF*/ /X/a></p><P><0 h選甑泡 M的耳呆,、X/p 7/th><th eccpocDlXpXa

18、hr9i=A，1lwXi*e "。=*1y啜&5Qjj Mr"，140>=" heielrt=" 142" F74/X/pA 0wq hre±=*知手網(wǎng)應(yīng)稱評(píng) 西安OaX/nXGlS-。士工<AAtlfrl</D1.V>d-_-+ont'"<ul>13*hruf>.心逅回的卻/1l><liXahrLF""力eF匏啻盧瑞</&></Li><li>SLtM=rr3關(guān)于秩們din.Emhref&qu

19、ot;"''>inAft/n<LiXahref="K">用戶反渭“ax/li</liL><p7+,1ui中cwt-eli?i!ccTi+cr-?Go/tiDchftcopy:電孑所帚B17卜丁/,“亂h*E1"潮i啥<，用>J7</p></div></匕口)五、網(wǎng)站設(shè)計(jì)日志設(shè)計(jì)制作過(guò)程中出現(xiàn)的疑難問(wèn)題，以及如何解決方法？本次網(wǎng)站設(shè)計(jì)，還是出現(xiàn)了很多讓我頭疼的問(wèn)題。最先面臨的，網(wǎng)頁(yè)結(jié)構(gòu)的布局版式的構(gòu)造。因?yàn)橄胱龅呐c眾不同和具有自己的風(fēng)格，所以我在腦海里構(gòu)造了很久也

20、沒有滿意的，最后參考了QQ1樂(lè)和網(wǎng)易云音樂(lè)的優(yōu)秀布局版式，在結(jié)合自己的想法，做出了現(xiàn)在的布局。無(wú)奈想象和顯示還是有很大差距的，做出來(lái)的效果遠(yuǎn)遠(yuǎn)沒達(dá)到我的預(yù)期。再說(shuō)說(shuō)制作過(guò)程中的遇到的問(wèn)題吧。由于經(jīng)過(guò)之前幾次的制作，基本的Div插入還是掌握了，但是在制作過(guò)程中還是出現(xiàn)了很多小問(wèn)題，讓我差點(diǎn)腦袋炸裂。舉例來(lái)說(shuō)，在插入一個(gè)Menui后再插入其他Div就很難對(duì)齊了，我試過(guò)了很多方法都沒用，最后關(guān)了重做；又比如說(shuō)CSS勺應(yīng)用，我新建一個(gè)html制作，可做好了之后保存發(fā)現(xiàn)前面幾個(gè)網(wǎng)頁(yè)格式也變了。這樣的小問(wèn)題還有就多，雖然小，但真的就讓人頭疼，就難發(fā)現(xiàn)錯(cuò)誤。最后就是網(wǎng)站細(xì)節(jié)的優(yōu)化，毫不夸張的說(shuō)這比制作網(wǎng)頁(yè)還難。細(xì)節(jié)的優(yōu)化需要好費(fèi)廢你大量的精力，且難度不小，總而言之，想要做一個(gè)精美的網(wǎng)站真的是難上加難，一個(gè)小小的問(wèn)題也許就會(huì)耗費(fèi)你幾個(gè)小時(shí)。六、作品自我評(píng)價(jià)寫出對(duì)自已做出的網(wǎng)站后，個(gè)人感想或看法？關(guān)于本次網(wǎng)頁(yè)的制作，我的第一感受是做網(wǎng)頁(yè)太辛苦了，做一個(gè)精美讓自己滿意的網(wǎng)頁(yè)需要耗費(fèi)大量的時(shí)間和腦力。但當(dāng)你完成最后一個(gè)布局，敲完最后一個(gè)代碼，保存查看自己的網(wǎng)站時(shí)，內(nèi)心是無(wú)比自豪和興奮的，一個(gè)文科生和計(jì)算機(jī)基礎(chǔ)薄弱的人竟然有天能獨(dú)立制作出一個(gè)網(wǎng)站，太不可思議了