南昌大學網站設計報告

本文格式為Word版，下載可任意編輯——南昌大學網站設計報告

實驗報告

試驗課程：學生姓名：學號：專業(yè)班級：

網頁設計與制作123123456

123456789

2023年12月10日

目錄

試驗一網站規(guī)劃報告3試驗二網頁制作綜合試驗6

南昌大學試驗報告(一)

學生姓名：123學號：123456專業(yè)班級：123456789

試驗類型：□驗證□綜合■設計□創(chuàng)新試驗日期：試驗成績：

網站規(guī)劃報告

一．

網站的名稱：1號動畫室網站的Logo：

網站的網址：http://.77

網站的廣告語：動畫也是人生的一種寫照

網站的建站目標：為廣大愛好觀看動畫的觀眾以及對動畫不了解的觀眾提供一個觀看、了解動畫的網站

網站的受眾對象：廣大愛好動畫的人

二．

動畫行業(yè)網站目前狀況的介紹：目前互聯網上的動畫網站好多，譬如58動漫網、騰訊動漫等等，這些網站比較大型，全面，動漫資源相對豐富。

我選擇這個網站的原因：首先，我想收集一些關于歷年奧斯卡的得獎動畫長片，終究，奧斯卡的評獎標準在世界范圍內都是相當有水準的，十分有公信力，其對于影片的審核有一系列的硬標準，對于動畫電影特別如此，所以，我想收集這些動畫長片資料，便利任何想觀看動畫的人，讓他們可以在我們的網站上找到大量有關于優(yōu)秀奧斯卡得獎動畫的信息。我想收集這些優(yōu)秀影片，讓對動畫不太了解的人能夠體會到動畫長片的魅力，改變人們認為動畫只適合兒童觀看，而不適合大人觀看的陳舊觀念。

我做這個網站的風格及創(chuàng)意:風格主要是LOGO，圖片，文字，還有Flash。其中色調以綠色、紫色、藍色為主。網站名稱直接包含在Logo中，一目了然，主體以綠色為背景。創(chuàng)意是用老式的的膠卷方式展示了14張得獎影片，滾動展示，讓人大致了解本網站的內容，同時，也有一股懷舊之風；在5個主欄目的導航欄中暗藏了兩張圖片，設置了一個“鼠標經過對象〞事件，兩張圖片是一致文字不同字體，重疊在一起，當鼠標點擊時，會產生文字躍動的效果，并且，單擊后會前往相應的網頁；子網頁中設置了嵌入式框架，讓多張網頁可以在一個頁面中顯示；網頁中特地設置了一個經典語句欄目，中英文對照翻譯，也可以讓愛好英語的人可以在這里看到一些優(yōu)秀經典、有意義的句子，學習一些英語口語的特別用法；除此之外，我們網站還在“動畫長片〞欄目中還提供了下載資源的超鏈接，讓人們可以便捷的下載動畫電影；壁紙欄目的設計，可以讓人們下載自己所

鐘意的壁紙，設置自己的桌面壁紙；動畫配樂欄目的設置，讓愛好英文歌曲的用戶可以聽到一些頗為經典的音樂，感受一下動畫電影配樂的經典之處。每張網頁都設置了共享按鈕，用戶瀏覽網頁時，看到愛好的內容就可以共享至一些社交賬號，讓更多好友了解到這些動畫長片，同時，這也宣傳了我們的網站，為網站流量的增加創(chuàng)造了便利。

三．

網站的欄目設置：

網站的主要內容介紹：

本網站主要有5大部分：

1.首頁2.

動畫長片3.動畫壁紙4.動畫配樂5.經典語句

四.

網站首頁的設計和規(guī)劃草案：

五．

技術工具：Flash、Dreamweave、Ps、logomarker、flashcreator等

南昌大學試驗報告(二)

學生姓名：123學號：123456專業(yè)班級：123456789班試驗類型：□驗證□綜合■設計□創(chuàng)新試驗日期：2023.12.08試驗成績：

一、試驗項目名稱

試驗Dreamweaver網頁制作綜合試驗

二、試驗目的

用Dreamweaver制作一個簡單的網站,熟練把握這個網頁制作軟件的基本操作。

三、試驗基本原理

Dreamweaver包含一個嶄新、簡單、高效的界面。新增了大量功能，性能更加卓越，軟件的易用性也得到大步的改善。并且也易于用特效代碼來增加網頁的動態(tài)效果。還可以結合其他第三方軟件來完善網站內容。

四、主要儀器設備及耗材

計算機及相關網頁設計軟件軟件Dreamweaver、Flash、CSS3menu、photoshop等。

五、試驗步驟

1.確定網站目標：最正確動畫長片類

2.主題和風格遴選：本網站主題是最正確動畫長片，色調以嬌艷為主，綠色、紫色、藍色為主。主要采用的是一些相關的獲得奧斯卡的動畫片為主。

3.素材制作：相關制作涉及flash、photoshop、CSS3menu等；4.利用Dreamweaver進行網頁制作：

a.整個網站基本框架的建立。利用Dreamweaver建立起整個網站的基本框架，就宛如修建房屋一樣，先建立起整個外部結構，再進行內部結構的完善，主要是利用表格以及內嵌式框架搭建網站初步輪廓。

b.素材準備與制作。在百度上探尋最正確長片的有關資料，一些最正確電影得獎信息、下載資源、壁紙圖片、動畫原聲音樂、中英文臺詞劇本，利用Word進行文字整理工作，對于篇幅量大的文字先用Word進行文字預處理，再直接導入Dreamweaver，減少文字處理工序；利用Photoshop將一些圖片整理在一起，調整圖片大小以適應相應網頁預留位置的大小，將圖片與表格完美對齊，并利用PS中的一些特別字體制成圖片，使得可以在網頁中顯示一些特別字體，而不用考慮用戶的電腦中是否安裝有相應的字體，更好的浮現網頁，使得網頁中的文字更加豐富多彩；整理一些歌單以及歌曲的相關信息，下載相應的MP3歌曲；整理中英文臺詞劇本，找尋對應的句子，細細品味其語句的經典所在。

c.元素填充。將搜集的有關本網頁的相關素材全部放至網頁中，依照預先設置好的位置排放，并且為文字元素設置相應的CSS樣式、超鏈接；為圖片添加相應的超鏈接，以及設置圖片熱區(qū)，鏈接到相應的網站。

d.特效添加。利用flash將14張圖片制作成一張會自動播放的膠片式動畫；再另用一段Div代碼設置另一種形式的圖片滾動，鼠標移至圖片上會有暫停的效果，以讓觀看者更好的觀看圖片的詳細狀況；用“鼠標經過圖像〞事件將兩張不一樣字體一致顏色、大小的圖片放置在一起，當鼠標經過圖像時，產生文字躍動效果。

e.測試檢查。檢查所有的超鏈接，以及路徑的設置，路徑盡量設置為相對路徑，避免出現圖片找不到的狀況；將網頁在不同分辯率的顯示屏上進行顯示，檢驗網頁是否能在不同分辯率的屏幕上完全顯示以及頁面的留白狀況。

f.制作總結。網頁設計是一個十分繁雜的工作，前期的網頁規(guī)劃與設計是最為重要的地方，由于它是整個網站是否能夠得到用戶愛好的關鍵所在，特別是網站主題的確定這一塊十分難選擇，網站主題的選擇還是應當小而精，最好選擇自己擅長或者感興趣的內容，選題不要太濫，目標定位不要過高；除此之外，網站整體風格的設計也是十分難的，特別是作為一個動畫介紹類網站，其主題風格應當是輕快明白的，讓人能夠回歸到童年的感覺，所以，在選擇網站主色調之前，很難決定，最終還是選擇了綠色為主色調，輔之以藍色、紫色，這樣給人的感覺更舒暢一些。這些前期的準備工作花費了很長的時間，選題和素材的收集都是十分重要的工作。后期的網站的實現與測試反而沒有用太多的時間，依靠Dreamweaver這款“所見即所得〞的軟件，使得網站代碼的輸入工作量得到減少，讓網站設計人員有更多的時間放在網站的規(guī)劃與設計上，這是十分好的。一個好的網站制作成功，是需要多款軟件相互搭配的，譬如Photoshop、flash等軟件的靈活運用是可以為網站增光添彩的。網站還是應當本著“內容第一，形式其次；二者兼?zhèn)?，即為佳作〞的思想，以此來制作較為成功的網站。

六、試驗數據及處理結果

網站首頁展示：

“動畫長片〞子欄目：

“動畫壁紙〞子欄目：

“動畫配樂〞子欄目：

“經典語句〞子欄目：

在經典語句子欄目下設置了嵌套框架，讓多個網頁在一個網頁框架中顯示。如：

七、思考探討題或體會或對改進試驗的建議

第一次制作完整的網站，存在好多不足之處。在顏色搭配方面和特效制作方面存在不足。網站主題的選擇還是過于廣泛了點，還可以再精細點，其中，經典語句欄目下，應當還可以提供相應的中英文臺詞劇本的下載，這樣也可以讓用戶體會到原版英文臺詞的幽美所在；對于圖片的后期處理還不是很到位，有較為明顯的修圖痕跡；沒有較多的運用到flash動畫，這個原是可以為網站增加大量動態(tài)效果的；在本網站中使用的一些腳本代碼經常出現被瀏覽器自動屏蔽掉的問題，這個以后有待用更好的編程語言來解決，使用兼容性更好的編程語言來設計網頁，從而使得