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

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

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

姓名：

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

專業(yè):

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

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

1.人物介紹板塊

2.采訪視頻板塊

3.手稿欣賞板塊

4.主要作品模塊

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

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

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

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

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

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

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

index.html -----------人物介紹頁(yè)面

yinyue.html -----------采訪視頻頁(yè)面

shougao.html ---------手稿欣賞頁(yè)面

liuyan.html---------主要作品頁(yè)面

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

層的使用：在這次網(wǎng)頁(yè)設(shè)計(jì)過(guò)程中，使用了大量表格網(wǎng)格布局，便于有規(guī)則得排列尺寸相近的圖片
2、使用鏈接：為方便讀者的查閱，在各頁(yè)面nav導(dǎo)航欄都設(shè)置了頁(yè)面鏈接。

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

網(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):

1.body背景圖片顯示問(wèn)題

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

解決辦法：

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

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

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

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

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

網(wǎng)頁(yè)截圖

首頁(yè)（index.html）:使用了 <header><nav><footer>HTML5結(jié)構(gòu)標(biāo)簽，對(duì)宮崎駿的事跡進(jìn)行了高度概括。

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

中間

尾部

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

3手稿欣賞:使用無(wú)框線的三行兩列的表格對(duì)手稿進(jìn)行布局排列

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

心得與體會(huì)：

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

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

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

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

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

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