《網(wǎng)頁設(shè)計與制作》

大作業(yè)報告

學院：**學院

姓名：

學號：

專業(yè):

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

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

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

1.首頁板塊

2.推薦板塊

3.榜單板塊

4.分類板塊

5.音樂詳情頁

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

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

一些低調(diào)的獨立歌手創(chuàng)作出很棒的音樂，但傳播的范圍受限，所以只能是一小部分人可以聽到，這些應(yī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)頁設(shè)計過程中，使用了大量div層來實現(xiàn)圖文混排和列表布局。

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

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

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

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

6、框架的使用：無

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

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

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

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

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

遇到的問題及解決辦法

難點:

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

合適調(diào)整網(wǎng)站配色、字體，避免網(wǎng)頁雜、養(yǎng)成良好的開發(fā)習慣
學習通過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)的多列表榜單布局

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

?

?

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

?

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

?

心得與體會：

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

優(yōu)秀網(wǎng)頁設(shè)計是要建立在平凡的`基礎(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)絡(luò)上收集，您只要到搜索引擎上查找相應(yīng)的關(guān)鍵字，就可以找到一大堆的資料。

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

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

通過個人網(wǎng)頁的制作最終把自己的網(wǎng)頁上傳到互聯(lián)網(wǎng)上，那種成就感是無法用語言形容的。在今后的閑余時間，我將會學習制作網(wǎng)頁的更多知識，使它成為自己的一項技能。
————————————————
版權(quán)聲明：本文為CSDN博主「科大云炬」的原創(chuàng)文章，遵循CC 4.0 BY-SA版權(quán)協(xié)議，轉(zhuǎn)載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/qq_39154376/article/details/125364542