南昌大學(xué)網(wǎng)站設(shè)計報告

本文格式為Word版，下載可任意編輯——南昌大學(xué)網(wǎng)站設(shè)計報告

實驗報告

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

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

123456789

2023年12月10日

目錄

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

南昌大學(xué)試驗報告(一)

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

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

網(wǎng)站規(guī)劃報告

一．

網(wǎng)站的名稱：1號動畫室網(wǎng)站的Logo：

網(wǎng)站的網(wǎng)址：http://.77

網(wǎng)站的廣告語：動畫也是人生的一種寫照

網(wǎng)站的建站目標(biāo)：為廣大愛好觀看動畫的觀眾以及對動畫不了解的觀眾提供一個觀看、了解動畫的網(wǎng)站

網(wǎng)站的受眾對象：廣大愛好動畫的人

二．

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

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

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

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

三．

網(wǎng)站的欄目設(shè)置：

網(wǎng)站的主要內(nèi)容介紹：

本網(wǎng)站主要有5大部分：

1.首頁2.

動畫長片3.動畫壁紙4.動畫配樂5.經(jīng)典語句

四.

網(wǎng)站首頁的設(shè)計和規(guī)劃草案：

五．

技術(shù)工具：Flash、Dreamweave、Ps、logomarker、flashcreator等

南昌大學(xué)試驗報告(二)

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

一、試驗項目名稱

試驗Dreamweaver網(wǎng)頁制作綜合試驗

二、試驗?zāi)康?/p>

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

三、試驗基本原理

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

四、主要儀器設(shè)備及耗材

計算機及相關(guān)網(wǎng)頁設(shè)計軟件軟件Dreamweaver、Flash、CSS3menu、photoshop等。

五、試驗步驟

1.確定網(wǎng)站目標(biāo)：最正確動畫長片類

2.主題和風(fēng)格遴選：本網(wǎng)站主題是最正確動畫長片，色調(diào)以嬌艷為主，綠色、紫色、藍色為主。主要采用的是一些相關(guān)的獲得奧斯卡的動畫片為主。

3.素材制作：相關(guān)制作涉及flash、photoshop、CSS3menu等；4.利用Dreamweaver進行網(wǎng)頁制作：

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

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

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

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

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

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

六、試驗數(shù)據(jù)及處理結(jié)果

網(wǎng)站首頁展示：

“動畫長片〞子欄目：

“動畫壁紙〞子欄目：

“動畫配樂〞子欄目：

“經(jīng)典語句〞子欄目：

在經(jīng)典語句子欄目下設(shè)置了嵌套框架，讓多個網(wǎng)頁在一個網(wǎng)頁框架中顯示。如：

七、思考探討題或體會或?qū)Ω倪M試驗的建議

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