30個

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

大作業(yè)報告

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

姓名：

學(xué)號：

專業(yè):

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

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

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

1.人物介紹板塊

2.采訪視頻板塊

3.手稿欣賞板塊

4.主要作品模塊

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

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

作為宮崎駿的動畫迷，我結(jié)合課上所需的HTML網(wǎng)頁知識設(shè)計一個介紹宮崎駿的網(wǎng)頁，包含圖文、視頻等多種素材可以選擇。

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

css ------存放CSS文件

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

js -------存放js文件

index.html -----------人物介紹頁面

yinyue.html -----------采訪視頻頁面

shougao.html ---------手稿欣賞頁面

liuyan.html---------主要作品頁面

綜合知識的運用情況

層的使用：在這次網(wǎng)頁設(shè)計過程中，使用了大量表格網(wǎng)格布局，便于有規(guī)則得排列尺寸相近的圖片

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

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

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

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

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

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

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

遇到的問題及解決辦法

難點:

1.body背景圖片顯示問題

2.頁面美觀度不夠高，Dreamewver CS6軟件應(yīng)用不夠熟練，軟件中所涉及得制作方法以及工具沒有更好的應(yīng)用。

解決辦法：

1.配色原則：避免網(wǎng)頁雜、亂，有時候單一色彩不為也是一種獨特，用色柔和，減少視覺混亂，對比度強的色彩不能應(yīng)用于一般網(wǎng)站。

2.字體問題：字體是整個網(wǎng)頁最醒目的部分，若字體不協(xié)調(diào)會給人一種枯燥的感覺，避免用雜色字體，防止瀏覽者眼花繚亂。

3.制作習(xí)慣：制作一個網(wǎng)頁首要的是完美的構(gòu)思，應(yīng)該先構(gòu)思好再動手制作，素材搜集完整，根據(jù)主題選材，不能脫離主題，確保所用材料與主題相關(guān)。

4.完整性：網(wǎng)站的基本格式完整，相關(guān)鏈接，友情鏈接必不可少，這也增加了網(wǎng)頁的方便性

5.合適選取適當(dāng)尺寸的背景圖片非常重要

網(wǎng)頁截圖

首頁（index.html）:使用了

HTML5結(jié)構(gòu)標(biāo)簽，對宮崎駿的事跡進行了高度概括。

頭部:（一個頂部圖片和nav導(dǎo)航）

中間:

尾部:

2 采訪視頻:使用video標(biāo)簽嵌入一個本地mp4視頻

3手稿欣賞:使用無框線的三行兩列的表格對手稿進行布局排列

4 主要作品：使用帶有框線和背景色的表格對主要作品進行羅列，內(nèi)部文字居中，超鏈接加藍色下劃線。

心得與體會：

建立一個網(wǎng)站就像蓋一幢大樓一樣，它是一個系統(tǒng)工程，有自己特定的工作流程，你只有遵循這個步驟，按部就班地一步步來，才能設(shè)計出一個滿意的網(wǎng)站。首先，我們要確立網(wǎng)站主題。網(wǎng)站主題就是你建立的網(wǎng)站所要包含的主要內(nèi)容，一個網(wǎng)站必須要有一個明確的主題。特別是對于像我這樣的個人網(wǎng)站，你不可能像綜合網(wǎng)站那樣做得內(nèi)容大而全，包羅萬象。你沒有這個能力，也沒這個精力。網(wǎng)站的主題無定則，只要是你感興趣的，任何內(nèi)容都可以，但主題要鮮明，在你的主題范圍內(nèi)內(nèi)容做到大而全、精而深。

然后，我們要找材料。明確了網(wǎng)站的主題以后，你就要圍繞主題開始搜集材料了。常言道：“巧婦難為無米之炊”。要想讓自己的網(wǎng)站有血有肉，能夠吸引住用戶，你就要盡量搜集材料，搜集得材料越多，以后制作網(wǎng)站就越容易。材料既可以從圖書、報紙、光盤、多媒體上得來，也可以從互聯(lián)網(wǎng)上搜集，然后把搜集的材料去粗取精，去偽存真，作為自己制作網(wǎng)頁的素材。

找到材料后，我們還要規(guī)劃網(wǎng)站。一個網(wǎng)站設(shè)計得成功與否，很大程度上決定于設(shè)計者的規(guī)劃水平，規(guī)劃網(wǎng)站就像設(shè)計師設(shè)計大樓一樣，圖紙設(shè)計好了，才能建成一座漂亮的樓房。網(wǎng)站規(guī)劃包含的內(nèi)容很多，如網(wǎng)站的結(jié)構(gòu)、欄目的設(shè)置、網(wǎng)站的風(fēng)格、顏色搭配、版面布局、文字圖片的運用等，你只有在制作網(wǎng)頁之前把這些方面都考慮到了，才能在制作時駕輕就熟，胸有成竹。也只有如此制作出來的網(wǎng)頁才能有個性、有特色，具有吸引力。如何規(guī)劃網(wǎng)站的每一項具體內(nèi)容，我們在下面會有詳細介紹。

做好以上三步之后，我們就要選擇合適的制作工具。盡管選擇什么樣的工具并不會影響你設(shè)計網(wǎng)頁的好壞，但是一款功能強大、使用簡單的軟件往往可以起到事半功倍的效果。網(wǎng)頁制作涉及的工具比較多，首先就是網(wǎng)頁制作工具了，在這里，我們一般都是用有“網(wǎng)絡(luò)三劍客”之稱的Dreamweaver、Fireworks、flash來制作網(wǎng)頁，對于圖片部分的處理，個人覺得Photoshop比較好用。

最后，我們就需要按照規(guī)劃一步步地把自己的想法變成現(xiàn)實了，這是一個復(fù)雜而細致的過程，一定要按照先大后小、先簡單后復(fù)雜來進行制作。所謂先大后小，就是說在制作網(wǎng)頁時，先把大的結(jié)構(gòu)設(shè)計好，然后再逐步完善小的結(jié)構(gòu)設(shè)計。所謂先簡單后復(fù)雜，就是先設(shè)計出簡單的內(nèi)容，然后再設(shè)計復(fù)雜的內(nèi)容，以便出現(xiàn)問題時好修改。在制作網(wǎng)頁時要多靈活運用模板，這樣可以大大提高制作效率。網(wǎng)頁做好之后，就要發(fā)布到Web服務(wù)器上，才能夠讓全世界的朋友觀看，還要不斷地進行宣傳，這樣才能讓更多的朋友認識它。

以上就是我對于網(wǎng)頁制作的一些個人心得，由于本人的技術(shù)還不是很成熟，還存在很多的不足(如：背景過于單調(diào)和網(wǎng)頁布置不合理)。選擇學(xué)習(xí)這門課是很正確的選擇，雖然在以后不會再有機會去上了，但我還是會通過各種方式繼續(xù)頁設(shè)計和制作的，同時很感謝帶我入門的徐兵老師，讓我有機會去學(xué)習(xí)有關(guān)網(wǎng)頁的知識，謝謝！