南昌大學(xué)網(wǎng)站設(shè)計(jì)報(bào)告

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

實(shí)驗(yàn)報(bào)告

試驗(yàn)課程：學(xué)生姓名：學(xué)號(hào)：專業(yè)班級(jí)：

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

123456789

2023年12月10日

目錄

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

南昌大學(xué)試驗(yàn)報(bào)告(一)

學(xué)生姓名：123學(xué)號(hào)：123456專業(yè)班級(jí)：123456789

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

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

一．

網(wǎng)站的名稱：1號(hào)動(dòng)畫室網(wǎng)站的Logo：

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

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

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

網(wǎng)站的受眾對(duì)象：廣大愛(ài)好動(dòng)畫的人

二．

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

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

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

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

三．

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

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

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

1.首頁(yè)2.

動(dòng)畫長(zhǎng)片3.動(dòng)畫壁紙4.動(dòng)畫配樂(lè)5.經(jīng)典語(yǔ)句

四.

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

五．

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

南昌大學(xué)試驗(yàn)報(bào)告(二)

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

一、試驗(yàn)項(xiàng)目名稱

試驗(yàn)Dreamweaver網(wǎng)頁(yè)制作綜合試驗(yàn)

二、試驗(yàn)?zāi)康?/p>

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

三、試驗(yàn)基本原理

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

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

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

五、試驗(yàn)步驟

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

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

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

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

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

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

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

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

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

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

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

“動(dòng)畫長(zhǎng)片〞子欄目：

“動(dòng)畫壁紙〞子欄目：

“動(dòng)畫配樂(lè)〞子欄目：

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

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

七、思考探討題或體會(huì)或?qū)Ω倪M(jìn)試驗(yàn)的建議

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