大作業(yè)報(bào)告

學(xué)院：**學(xué)院

姓名：

學(xué)號(hào)：

專業(yè):

摘要：宮崎駿（Miyazaki Hayao，1941年1月5日-），日本知名動(dòng)畫導(dǎo)演、動(dòng)畫師及漫畫家， 出生于東京都文京區(qū)，1963年進(jìn)入東映動(dòng)畫公司，1985年與高煙勛共同創(chuàng)立古卜力工作案，其出品的動(dòng)漫電影以精湛的技術(shù)、動(dòng)人的故事和溫暖的風(fēng)格在世界動(dòng)漫界獨(dú)樹一幟，能與美國(guó)迪士尼、 夢(mèng)工廠的作品相比肩，受到全世界不分種族、不分國(guó)籍、不分文化的各類觀眾的一致好評(píng)。其動(dòng)國(guó)作品大多涉及人類與自然之間的關(guān)系、和平主義及女權(quán)運(yùn)動(dòng)。宮崎駿在日本動(dòng)畫界占有超重里級(jí) 的地位，更在全球動(dòng)畫界具有無(wú)可替代的地位，迪士尼稱他為“動(dòng)畫界的黑澤明，《時(shí)代周刊》評(píng)價(jià)他為全球最具影響力的人物。

下面是我對(duì)web簡(jiǎn)單的一個(gè)應(yīng)用，利用dreamwave工具，和photoshop軟件設(shè)計(jì)了一個(gè)具有個(gè)人風(fēng)格的個(gè)人網(wǎng)站，首先我先從網(wǎng)站設(shè)計(jì)的方向和目的、網(wǎng)站設(shè)計(jì)中涉及的知識(shí)點(diǎn)、網(wǎng)站設(shè)計(jì)的整個(gè)流程出發(fā)，然后通過(guò)自己設(shè)計(jì)的這個(gè)個(gè)人網(wǎng)站作品來(lái)說(shuō)明并演示一個(gè)完整的網(wǎng)站制作過(guò)程。本論文詳細(xì)的介紹了整個(gè)網(wǎng)站設(shè)計(jì)的全過(guò)程。雖然還有一些不足之處，但頁(yè)面整體比較美觀大方，具有音樂(lè)網(wǎng)站風(fēng)格，效果良好。

設(shè)計(jì)主要包括以下幾個(gè)版塊：

1.首頁(yè)板塊

2.推薦板塊

3.榜單板塊

4.分類板塊

5.音樂(lè)詳情頁(yè)

網(wǎng)站規(guī)劃思想

小眾音樂(lè)，顧名思義，就是聽眾比較少的音樂(lè)。但并不是指那些少有人喜歡的音樂(lè)，相反，是指那些少有人發(fā)現(xiàn)的好音樂(lè)。

一些低調(diào)的獨(dú)立歌手創(chuàng)作出很棒的音樂(lè)，但傳播的范圍受限，所以只能是一小部分人可以聽到，這些應(yīng)該就是屬于小眾音樂(lè)的一種。

小眾音樂(lè)和非主流音樂(lè)不一樣，小眾音樂(lè)具有良好的流行性，與大眾音樂(lè)的比較是在一個(gè)有限范圍內(nèi)的相互作用，沒(méi)有絕對(duì)性。

可以理解小眾音樂(lè)就是暫時(shí)被埋沒(méi)了的大眾音樂(lè)。

我是一名小眾音樂(lè)愛好者，平時(shí)喜歡聽各種小眾音樂(lè)，所以趁著這個(gè)作業(yè)機(jī)會(huì)用心做了一個(gè)小眾音樂(lè)歸納分類的網(wǎng)頁(yè)，便于幫助同樣喜歡小眾音樂(lè)的朋友發(fā)現(xiàn)更多寶藏神曲。

網(wǎng)站的目錄結(jié)構(gòu)如下：

assets/css ------存放CSS文件

assets/imgs ------存放圖片文件

assets/js -------存放js文件

music ------------------存放單曲詳情頁(yè)

index.html ---------------首頁(yè)

tuijian.html -----------推薦頁(yè)面

rank.html --------------榜單頁(yè)面

category.html-----------分類頁(yè)面

綜合知識(shí)的運(yùn)用情況

1、層的使用：在這次網(wǎng)頁(yè)設(shè)計(jì)過(guò)程中，使用了大量div層來(lái)實(shí)現(xiàn)圖文混排和列表布局。

2、使用鏈接：為方便讀者的查閱，在頂部導(dǎo)航欄設(shè)置了頁(yè)面鏈接。

3、插入跳轉(zhuǎn)菜單為了使讀者能快捷的回到自己感興趣的頁(yè)面，于是在各個(gè)頁(yè)面都插入了跳轉(zhuǎn)菜單。

4、設(shè)置水平循環(huán)滾動(dòng)的圖片:首頁(yè)通過(guò)js實(shí)現(xiàn)了輪播圖

5、使用彈出信息行為:無(wú)

6、框架的使用：無(wú)

網(wǎng)頁(yè)中涉及的知識(shí)點(diǎn)

1、可視化網(wǎng)站設(shè)計(jì)制作軟件dreamweaver的熟練使用，站點(diǎn)的創(chuàng)建、導(dǎo)入以及管理；

　　2、主頁(yè)的創(chuàng)建和設(shè)置，模塊的保存與應(yīng)用和子網(wǎng)頁(yè)的創(chuàng)建、完成；

　　3、用photoshop軟件對(duì)圖片素材進(jìn)行必要的處理；

　　4、網(wǎng)站整體布局和超鏈接的添加；

遇到的問(wèn)題及解決辦法

難點(diǎn):

頁(yè)面美觀度不夠高，Dreamewver CS6軟件應(yīng)用不夠熟練，軟件中所涉及得制作方法以及工具沒(méi)有更好的應(yīng)用。
輪播圖片實(shí)現(xiàn)技術(shù)難度大
解決辦法：

合適調(diào)整網(wǎng)站配色、字體，避免網(wǎng)頁(yè)雜、養(yǎng)成良好的開發(fā)習(xí)慣
學(xué)習(xí)通過(guò)js來(lái)實(shí)現(xiàn)圖片輪播效果
網(wǎng)頁(yè)截圖

首頁(yè)（index.html）:使用div綜合布局，實(shí)現(xiàn)圖片輪播和規(guī)則的圖文布局。

頭部:一個(gè)logo和一個(gè)nav頂部導(dǎo)航，一個(gè)使用js實(shí)現(xiàn)的圖片輪播

中間:一個(gè)使用js實(shí)現(xiàn)的圖片輪播，和一個(gè)div實(shí)現(xiàn)的列表布局

尾部:

2 推薦:使用div實(shí)現(xiàn)的圖文列表布局

3分類板塊:使用div+css布局實(shí)現(xiàn)的多列表榜單布局

4 分類板塊：也使用div綜合布局實(shí)現(xiàn)的動(dòng)漫、電子、吉他、鋼琴四類音樂(lè)的曲目的展示。

5 單曲詳情頁(yè)：音樂(lè)圖文介紹上面通過(guò)audio標(biāo)簽插入了音樂(lè)，可以一邊看歌曲介紹一邊聽音樂(lè)

內(nèi)容是整個(gè)網(wǎng)站的核心。在網(wǎng)站設(shè)計(jì)之前必須明確網(wǎng)站的內(nèi)容安排。

優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì)是要建立在平凡的`基礎(chǔ)上的。然后在具體的規(guī)劃一個(gè)網(wǎng)站時(shí)，可以用樹狀結(jié)構(gòu)先把每個(gè)頁(yè)面的內(nèi)容大綱列出來(lái)，尤其要制作一個(gè)大的網(wǎng)站 (有很多頁(yè)面) 的時(shí)候，特別需要把這個(gè)架構(gòu)規(guī)劃好，也要考慮到以后可能的擴(kuò)充性，免得做好以后又要一改再改整個(gè)網(wǎng)站的架構(gòu)，很浪費(fèi)時(shí)間和財(cái)力。

大綱列出來(lái)后，還必須考慮每個(gè)頁(yè)面之間的鏈接關(guān)系。是星形，樹形，或是網(wǎng)形鏈接。這也是判別一個(gè)網(wǎng)站優(yōu)劣的重要標(biāo)志。鏈接混亂，層次不清的站點(diǎn)會(huì)造成瀏覽困難，影響內(nèi)容的發(fā)揮。

框架定下來(lái)了，然后開始一步一步有條理，有次序地做來(lái)，就胸有成竹得多，也會(huì)為主頁(yè)將來(lái)發(fā)展打下良好的基礎(chǔ)。

下一步，就以動(dòng)手制作具體內(nèi)容了，題材選定，框架選定，接下來(lái)就開始往主頁(yè)里面填內(nèi)容。我們稱作資料收集

如果是個(gè)人主頁(yè)，有能力的人完全可以靠自己來(lái)創(chuàng)作所有的內(nèi)容。大部分人的方法是：從報(bào)紙，雜志，光盤等媒體中把相關(guān)的資料收集整理，再加上一定的編輯后就可以了。另外一個(gè)好的方法是從網(wǎng)絡(luò)上收集，您只要到搜索引擎上查找相應(yīng)的關(guān)鍵字，就可以找到一大堆的資料。

在準(zhǔn)備材料的時(shí)候我們可以用到學(xué)習(xí)的flash知識(shí)來(lái)制作一些小的動(dòng)畫和動(dòng)態(tài)圖片，flash 提供了功能齊全的繪圖和編輯圖形工具?？梢灾苯釉诰庉媴^(qū)里繪畫，編輯修改非常靈活，它的另一大特點(diǎn)是“交互性”強(qiáng)。在動(dòng)畫播放時(shí)，可以用鼠標(biāo)或鍵盤對(duì)動(dòng)畫的播放進(jìn)行控制，效果可以很直觀的反映出來(lái)。

然后是開始正式制作主頁(yè)。通過(guò)dreamweaver作為制作軟件，只需要用到軟件中的一些基本的功能：圖片插入和對(duì)齊設(shè)置;文字的格式、顏色、背景顏色的設(shè)置等就可以制作出一個(gè)簡(jiǎn)單的網(wǎng)頁(yè)。

通過(guò)個(gè)人網(wǎng)頁(yè)的制作最終把自己的網(wǎng)頁(yè)上傳到互聯(lián)網(wǎng)上，那種成就感是無(wú)法用語(yǔ)言形容的。在今后的閑余時(shí)間，我將會(huì)學(xué)習(xí)制作網(wǎng)頁(yè)的更多知識(shí)，使它成為自己的一項(xiàng)技能。