網(wǎng)頁(yè)設(shè)計(jì)與制作期末作業(yè)

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ú)立完成，沒(méi)有抄襲行為，凡涉及其他作者的觀點(diǎn)和材料，均作了注釋，若有不實(shí)，后果由本人擔(dān)當(dāng)。 承諾人（簽名）： 謝嶺 2016 年 12 月 25日網(wǎng)頁(yè)設(shè)計(jì)課程期末考試作業(yè)成果評(píng)定表姓 名謝嶺學(xué) 號(hào)37班 級(jí)電子商務(wù)151授課老師王選勇課程設(shè)計(jì)題目孤獨(dú)的探戈音樂(lè)網(wǎng)站提交日期評(píng)分項(xiàng)目評(píng)分成果1網(wǎng)站設(shè)計(jì)規(guī)劃（20分）2視覺(jué)效果 (20分)3網(wǎng)站內(nèi)容

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

3、針對(duì)這次選定的主體，我準(zhǔn)備制作六個(gè)網(wǎng)頁(yè)，分別為首頁(yè)，歌手，專輯，排行榜，MV和自我簡(jiǎn)介六部分。首先制作之前，我借鑒參考了主流音樂(lè)網(wǎng)站QQ音樂(lè)和網(wǎng)易云音樂(lè)的網(wǎng)頁(yè)排版布局，取其精華，為我所用。我初步確定了本次網(wǎng)頁(yè)布局為簡(jiǎn)潔的上下型，簡(jiǎn)潔明白便利用戶閱讀。網(wǎng)頁(yè)內(nèi)容為圖文并茂，以較少的文字加上多彩的圖片吸引用戶愛(ài)好。總而言之，這次網(wǎng)站設(shè)計(jì)的理念是極簡(jiǎn)主義，去除多余的文字，排版內(nèi)容簡(jiǎn)潔明白，貫穿一種單純真誠(chéng)的生活看法。二、如何運(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ì)給人視覺(jué)疲憊，看來(lái)起來(lái)繁重累贅，不利于用戶的閱讀體驗(yàn)。網(wǎng)頁(yè)的顏色以白色，灰色為主，看起來(lái)低調(diào)卻富有內(nèi)涵，同時(shí)加入多彩的圖片以至于整體不會(huì)太沉悶。色調(diào)協(xié)調(diào)，給人以自然舒適的感覺(jué)。關(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è)的鏈接便于用戶找尋，便利用戶運(yùn)用。整個(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)專輯。排行榜分為總榜，月榜，日榜，反映歌曲的熱度，為用戶收聽(tīng)供應(yīng)參考MV包含全部的音樂(lè)專輯MV，通過(guò)搜尋可以快速查找相關(guān)MV。個(gè)人簡(jiǎn)介包含個(gè)人信息介紹四、網(wǎng)頁(yè)所采納的技術(shù)所采納的技術(shù)：CSS，div布局，HTML運(yùn)用的軟件：Dreamweaver，Photoshop通過(guò)Dreamweaver進(jìn)行網(wǎng)頁(yè)的布局和制作，通過(guò)Photoshop對(duì)圖片進(jìn)行美化

6、CSS文件：.big height: auto;width: 960px;margin-right: auto;margin-left: auto;.top height: auto;width: 960px;margin-right: auto;margin-left: auto;.left1 background-color: #F36;float: left;height: 200px;width: 250px;list-style-type: none;text-align: center;.left1 ul li font-size: 16px;list-style-type: no

7、ne;margin-top: 0px;margin-bottom: 0px;background-color: #F36;height: 35px;width: 80px;margin-right: 0px;margin-left: 0px;text-align: center;color: #FFF;font-weight: bold;.content1 background-image: url(./images/20.jpg);background-repeat: repeat-y;.right1 float: right;height: 200px;width: 710px;backg

8、round-image: url(./images/1.jpg);background-color: #FFF;background-repeat: repeat-x;.content height: auto;width: 960px;clear: both;background-image: none;background-repeat: repeat-y;.zhong background-color: #9F6;height: auto;width: 360px;margin-left: 300px;.content ul li font-family: 微軟雅黑;font-size:

9、 16px;float: left;height: 20px;width: 80px;list-style-type: none;margin-left: 85px;margin-top: 10px;.foot height: 100px;width: 960px;margin-top: 15px;text-align: center;.foot ul li text-align: center;height: 25px;width: 80px;list-style-type: none;float: left;margin-top: 5px;margin-bottom: 5px;margin

10、-right: 40px;margin-left: 50px;首頁(yè)代碼：五、網(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)橄胱龅暮捅姴煌途哂凶约旱娘L(fēng)格，所以我在腦海里構(gòu)造了很久也沒(méi)有滿足的，最終參考了QQ音樂(lè)和網(wǎng)易云音樂(lè)的優(yōu)秀布局版式，在結(jié)合自己的想法，做出了現(xiàn)在的布局。無(wú)奈想象和顯示還是有很大差距的，做出來(lái)的效果遠(yuǎn)遠(yuǎn)沒(méi)達(dá)到我的預(yù)期。再說(shuō)說(shuō)制作過(guò)程中的遇到的問(wèn)題吧。由于經(jīng)過(guò)之前幾次的制作，基本的Div插入還是駕馭了，但是在制作過(guò)程中還是出現(xiàn)了許多小問(wèn)題，讓我差點(diǎn)腦袋炸裂。舉例來(lái)說(shuō)，在插入一個(gè)M

11、enu之后再插入其他Div就很難對(duì)齊了，我試過(guò)了許多方法都沒(méi)用，最終關(guān)了重做；又比如說(shuō)CSS的應(yīng)用，我新建一個(gè)html制作，可做好了之后保存發(fā)覺(jué)前面幾個(gè)網(wǎng)頁(yè)格式也變了。這樣的小問(wèn)題還有許多，雖然小，但真的很讓人頭疼，很難發(fā)覺(jué)錯(cuò)誤。最終就是網(wǎng)站細(xì)微環(huán)節(jié)的優(yōu)化，毫不夸張的說(shuō)這比制作網(wǎng)頁(yè)還難。細(xì)微環(huán)節(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è)布

12、局，敲完最終一個(gè)代碼，保存查看自己的網(wǎng)站時(shí)，內(nèi)心是無(wú)比驕傲和興奮的，一個(gè)文科生和計(jì)算機(jī)基礎(chǔ)薄弱的人竟然有天能獨(dú)立制作出一個(gè)網(wǎng)站，太不行思議了！總的來(lái)說(shuō)，我對(duì)自己這次的作品還算滿足，盡管還有許多待完善的地方，但能做到這個(gè)水平我還是很滿足了。盡管說(shuō)我并不是計(jì)算機(jī)專業(yè)，對(duì)網(wǎng)頁(yè)制作的要求不那么高，以后或許也用不著，但我覺(jué)得學(xué)習(xí)制作網(wǎng)站還是很重要的。我覺(jué)得在以后工作生活當(dāng)中肯定會(huì)給我們帶來(lái)許多幫助。這門課很快就結(jié)束了，也代表著自己一個(gè)學(xué)期的結(jié)束。總的回顧下來(lái)，自己真正覺(jué)得有用的學(xué)問(wèn)，也就是網(wǎng)頁(yè)制作了。因此，我很感謝老師的辛勤教學(xué)，也希望自己以后勤加練習(xí)，能制作出更加精致的網(wǎng)頁(yè)。七、網(wǎng)站頁(yè)面打印稿全部不同風(fēng)格網(wǎng)頁(yè)頁(yè)面均截圖出來(lái)，并做簡(jiǎn)要說(shuō)明（如：該頁(yè)面所采納的技術(shù)、頁(yè)面特色等）。（用到了CSS、PS,Html,頁(yè)面特色：色調(diào)以淺色為主，給人輕快、自然舒適的感覺(jué)，整個(gè)頁(yè)面圖文并茂，提高了用戶體驗(yàn)，貫穿著極簡(jiǎn)主義，去除多余花哨的部分）(用到了css，html，頁(yè)面特色：顏色以灰色為主，顯得低調(diào)卻有內(nèi)涵）（用到了CSS，HTML，頁(yè)面特色：白色為主，白色給人以雪白、明