網(wǎng)頁設計與制作期末大作業(yè)報告——小眾音樂網(wǎng)站

時間：2023-10-06 22:36:01 | 來源：網(wǎng)站運營

時間：2023-10-06 22:36:01 來源：網(wǎng)站運營

網(wǎng)頁設計與制作期末大作業(yè)報告——小眾音樂網(wǎng)站：《網(wǎng)頁設計與制作》

大作業(yè)報告






















學院：**學院

姓名：

學號：

專業(yè):




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

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

設計主要包括以下幾個版塊：

1.首頁板塊

2.推薦板塊

3.榜單板塊

4.分類板塊

5.音樂詳情頁




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

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

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

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

可以理解小眾音樂就是暫時被埋沒了的大眾音樂。

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






















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

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




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

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

music ------------------存放單曲詳情頁

index.html ---------------首頁




tuijian.html -----------推薦頁面

rank.html --------------榜單頁面

category.html-----------分類頁面




綜合知識的運用情況

1、層的使用：在這次網(wǎng)頁設計過程中，使用了大量div層來實現(xiàn)圖文混排和列表布局。

2、使用鏈接：為方便讀者的查閱，在頂部導航欄設置了頁面鏈接。

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

4、設置水平循環(huán)滾動的圖片:首頁通過js實現(xiàn)了輪播圖

5、使用彈出信息行為:無

6、框架的使用：無




網(wǎng)頁中涉及的知識點

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

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

　　3、用photoshop軟件對圖片素材進行必要的處理；

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

遇到的問題及解決辦法

難點:

1. 頁面美觀度不夠高，Dreamewver CS6軟件應用不夠熟練，軟件中所涉及得制作方法以及工具沒有更好的應用。
2. 輪播圖片實現(xiàn)技術(shù)難度大

解決辦法：

1. 合適調(diào)整網(wǎng)站配色、字體，避免網(wǎng)頁雜、養(yǎng)成良好的開發(fā)習慣
2. 學習通過js來實現(xiàn)圖片輪播效果

網(wǎng)頁截圖

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

頭部:一個logo和一個nav頂部導航，一個使用js實現(xiàn)的圖片輪播




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




尾部:




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







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




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




5 單曲詳情頁：音樂圖文介紹上面通過audio標簽插入了音樂，可以一邊看歌曲介紹一邊聽音樂







心得與體會：

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




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




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




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




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




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




在準備材料的時候我們可以用到學習的flash知識來制作一些小的動畫和動態(tài)圖片，flash 提供了功能齊全的繪圖和編輯圖形工具。可以直接在編輯區(qū)里繪畫，編輯修改非常靈活，它的另一大特點是“交互性”強。在動畫播放時，可以用鼠標或鍵盤對動畫的播放進行控制，效果可以很直觀的反映出來。




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




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