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

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

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

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

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

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

6、op對圖片進(jìn)行美化 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-styl

7、e-type: none;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: 7

8、10px;background-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: "

9、;微軟雅黑"font-size: 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;marg

10、in-bottom: 5px;margin-right: 40px;margin-left: 50px;首頁代碼：五、網(wǎng)站設(shè)計日志設(shè)計制作過程中出現(xiàn)的疑難問題，以及如何解決方法？本次網(wǎng)站設(shè)計，還是出現(xiàn)了很多讓我頭疼的問題。最先面臨的，網(wǎng)頁結(jié)構(gòu)的布局版式的構(gòu)造。因為想做的與眾不同和具有自己的風(fēng)格，所以我在腦海里構(gòu)造了很久也沒有滿意的，最后參考了QQ音樂和網(wǎng)易云音樂的優(yōu)秀布局版式，在結(jié)合自己的想法，做出了現(xiàn)在的布局。無奈想象和顯示還是有很大差距的，做出來的效果遠(yuǎn)遠(yuǎn)沒達(dá)到我的預(yù)期。再說說制作過程中的遇到的問題吧。由于經(jīng)過之前幾次的制作，基本的Div插入還是掌握了，但是在制作過程中還是出現(xiàn)了很多小問題

11、，讓我差點(diǎn)腦袋炸裂。舉例來說，在插入一個Menu之后再插入其他Div就很難對齊了，我試過了很多方法都沒用，最后關(guān)了重做；又比如說CSS的應(yīng)用，我新建一個html制作，可做好了之后保存發(fā)現(xiàn)前面幾個網(wǎng)頁格式也變了。這樣的小問題還有很多，雖然小，但真的很讓人頭疼，很難發(fā)現(xiàn)錯誤。最后就是網(wǎng)站細(xì)節(jié)的優(yōu)化，毫不夸張的說這比制作網(wǎng)頁還難。細(xì)節(jié)的優(yōu)化需要好費(fèi)廢你大量的精力，且難度不小，總而言之，想要做一個精美的網(wǎng)站真的是難上加難，一個小小的問題也許就會耗費(fèi)你幾個小時。六、作品自我評價寫出對自已做出的網(wǎng)站后，個人感想或看法？關(guān)于本次網(wǎng)頁的制作，我的第一感受是做網(wǎng)頁太辛苦了，做一個精美讓自己滿意的網(wǎng)頁需要耗費(fèi)大量

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