網(wǎng)頁設(shè)計課程設(shè)計報告-動漫網(wǎng)站的設(shè)計與制作

1、網(wǎng)頁設(shè)計課程設(shè)計報告 系別： 信息工程系     班級： 網(wǎng)絡(luò)1002班      姓名：          指導(dǎo)教師：       成績：                    日期: &

2、#160;2021年12月24日  滄州職業(yè)技術(shù)學(xué)院 指導(dǎo)教師評語：指導(dǎo)教師簽字：年 月 日 設(shè)計成績：?網(wǎng)頁設(shè)計與制作?課程設(shè)計任務(wù)書題目動漫網(wǎng)站的設(shè)計與制作專業(yè)計算機網(wǎng)絡(luò)技術(shù)班級網(wǎng)絡(luò)1002班學(xué)號003姓名高希希所在系信息工程系指導(dǎo)教師王炳強導(dǎo)師職稱講師一、設(shè)計目的1、 訓(xùn)練學(xué)生的綜合實踐能力，培養(yǎng)學(xué)生周密的思考問題的能力；2、 全面的訓(xùn)練學(xué)生對網(wǎng)頁設(shè)計知識點的應(yīng)用與實踐；3、 訓(xùn)練并提高學(xué)生的動手能力和綜合應(yīng)用能力；二、根本要求1、設(shè)計網(wǎng)站的主題內(nèi)容與收集所需素材；2、布局網(wǎng)站主頁，并對網(wǎng)站的主頁進行內(nèi)容的插入與排版；3、布局與設(shè)計網(wǎng)站的子頁，并輸入所需內(nèi)容；4、在網(wǎng)

3、站的主頁上進行鏈接；5、在主頁上進行多媒體元素的插入與制作。三、主要技術(shù)指標或研究方法1、進行主頁的布局與排版；2、進行網(wǎng)站子頁的鏈接；3、對主頁進行多媒體的插入。四、應(yīng)收集的資料及參考文獻1、?網(wǎng)頁設(shè)計與制作?蔡伯峰 編著；2、相關(guān)網(wǎng)站五、進度方案 時間設(shè)計內(nèi)容備注2011-12-19確定網(wǎng)站主題與收集素材2011-12-202011-12-21對網(wǎng)站主頁和子頁進行制作2011-12-22對網(wǎng)站進行鏈接和最后的排版2011-12-23制作實習(xí)報告指導(dǎo)教師時間年 月 日目錄一、  網(wǎng)站設(shè)計目的和任務(wù)5二、  網(wǎng)站主題6三、  網(wǎng)站規(guī)劃思想7四、  網(wǎng)站頁

4、面鏈接總圖9五、  綜合知識的運用情況10六、網(wǎng)站頁面截圖及代碼11七、動態(tài)特效的使用12八、  課程設(shè)計心得與體會13九、參考文獻15十、 致謝16一、  網(wǎng)站設(shè)計目的和任務(wù)        一學(xué)期的網(wǎng)頁設(shè)計理論和實踐課程都結(jié)束了，根據(jù)老師的要求及指導(dǎo)，我設(shè)計了此網(wǎng)站，本網(wǎng)站屬于小型個人網(wǎng)站，目的在于簡單的介紹一下個人狀況，可以使老師和同學(xué)們更進一步的了解我現(xiàn)在以及局部過去的情況，加強老師和同學(xué)們對我的認識，深化我們大家的情誼，有利于以后在學(xué)習(xí)、工作生活當中的團結(jié)協(xié)作。 此外，這不僅是為了肩負學(xué)生的責(zé)任而

5、去完成老師交給我的任務(wù)，更是對過去學(xué)習(xí)的知識的溫習(xí)穩(wěn)固，是一個把理論轉(zhuǎn)化為實踐的過程，是一個把自己的設(shè)計思想轉(zhuǎn)化為實物的過程，是一個發(fā)揮自己創(chuàng)造力和想象力的過程。 再者，這是對自己在一學(xué)期內(nèi)該學(xué)習(xí)科目以來的成果的檢查，這是一個自我審視的過程：檢測我該學(xué)期的學(xué)習(xí)成果，衡量一期以來的收獲，更為重要的是揚長避短，發(fā)現(xiàn)自己的問題與缺點，使自己及時改正，覺察自身的優(yōu)點和長處并堅持發(fā)揚，有利于我以后的學(xué)習(xí)和開展。 二、  網(wǎng)站主題       本網(wǎng)站以東北虎和華南虎為主題介紹東北虎和華南虎的生活習(xí)性以及其瀕臨滅絕的危機倡導(dǎo)人們保護生態(tài)平衡。三、&

6、#160; 網(wǎng)站規(guī)劃思想       當今社會，靠什么成功?很多成功人士都說過這樣一句話：“成功來自百分之八十的人際關(guān)系和百分之二十的自身天分和努力。據(jù)此可以發(fā)現(xiàn)，擴大人際關(guān)系網(wǎng)是十分重要的一項活動，因此就需要一條聯(lián)系兩方的橋梁，這條橋梁是滿載信息的大流量的通道，在這信息時代，于是網(wǎng)絡(luò)成為了這當之無愧的橋梁。我設(shè)計這個網(wǎng)站的思路就來源于此。       怎樣讓更多人了解你？怎么使別人更了解你？怎樣擴大自己的接觸面？當代是繁忙的一代也是講究高效率的一代，當今面對這些問題，這時候的內(nèi)斂不會被認為是好

7、的，最好的解決方法我認為是把自己推銷出去，我想通過網(wǎng)絡(luò)把自己的概況晾曬，方便別人更快捷更省事地得到相關(guān)信息，通過這種方式，也可以交到志同道合的朋友，可以一起研究探討，相互促進，到達共贏。       既然這樣，那么網(wǎng)站的風(fēng)格自然是溫和、高雅、柔美的，這樣才能到達更高的親和力效果，同時也應(yīng)該具有喜悅性、創(chuàng)新性、活潑開朗性，展現(xiàn)個人品格及魅力。最重要的是要呈現(xiàn)一個真誠的自我在大家面前，樹立可信性、老實性，消除虛擬因素，獲得大家的真誠對待和好感。       在內(nèi)容和結(jié)構(gòu)上，具體如下： 整個網(wǎng)站分為九

8、個頁面，分別為：主頁面、根本信息、個人照片、成長階段概況童年、中學(xué)、大學(xué)、興趣愛好文學(xué)、書法、旅游。各個頁面間都是相互連接的，方便讀者更快捷地找到想了解的信息。 用表格表示如下： 編號 一級欄目 二級欄目 欄目內(nèi)容及功能說明 1 根本信息 陳列個人根本信息 2 成長階段 童年 講述童年的生活時光 3 中學(xué) 表達中學(xué)的堅強成長 4 大學(xué) 細數(shù)大學(xué)的豐富多彩 5 個人照片 展現(xiàn)個人形象 6 興趣愛好 文學(xué) 闡述對文學(xué)的看法和認識 7 書法 表達練習(xí)書法的感受 8 旅游 介紹某些旅游景點        網(wǎng)站的目錄結(jié)構(gòu)如下： Flyfish&

9、#160;               -網(wǎng)站根目錄 Css              -存放外置CSS文件 Flash             -存放Flash動畫 Images  

10、60;         -存放圖片文件 Bt           -存放所有標題或欄目標題的圖片文件 Content      -存放所有與網(wǎng)頁內(nèi)容相關(guān)的圖片文件 Design      -存放所有與網(wǎng)頁界面設(shè)計相關(guān)圖片文件 Menux      -存放所有與導(dǎo)航下拉菜

11、單相關(guān)圖片 Navigation   -存放導(dǎo)航欄目圖片文件 Sight         -存放景點圖片      Linkpages         -存放圖像或文本超鏈接的文件      Music            -存

12、放背景音樂      Nagvipages        -存放導(dǎo)航下拉菜單連接的網(wǎng)頁      Js                -存放外置JS圖片      Text       &#

13、160;      -存放文本文件      Video             -存放視頻文件 四、  網(wǎng)站頁面鏈接總圖 主頁 ff2.html 根本信息ff3.html 東北虎 東北虎圖片ff4.html 生活習(xí)性 物種特點ff5.html 華南虎華南虎圖片ff6.html 生活習(xí)性ff8.html 華南虎和東北虎面臨物種滅絕ff7.html 倡導(dǎo)人們維護生態(tài)平衡ff9.h

14、tml 返回主頁 五、  綜合知識的運用情況 1、層的使用        在這次網(wǎng)頁設(shè)計過程中，使用了大量層，因為它靈活好用，可以隨便拖動，變大變小都很方便，而框架雖然也能到達這個效果，但是，它不夠靈活，不利于我所需要表達的效果的呈現(xiàn)，也許是不習(xí)慣的原因吧，覺得太死板了，當然一些地方仍然要用到它，表達清晰的結(jié)構(gòu)。     2、運用Photoshop工具 圖片的插入和設(shè)置背景圖像是兩個不同的概念，當然可以到達相同的效果，這是很根本的知識運用，也用了很屢次，但是當圖像較小時在層中插入更方便些，因為作

15、為背景時圖片會重復(fù)出現(xiàn)造成混亂的局面，但圖片過小時，用層將之拉寬大就會使圖片變模糊、嚴重變形，不但沒能美化頁面反而帶來了負面影響，此時最好借助Photoshop工具來編輯圖片。文本的插入在層內(nèi)或框架內(nèi)完成較好，但不能設(shè)置為藝術(shù)字體，因此需要運用Photoshop工具來輔助完成，其實很多地方都可以用到Photoshop工具特別是一些要表現(xiàn)自己獨特的思想和設(shè)計畫面。      3、使用Flash工具        只要是動態(tài)效果都可以用Flash工具，音樂、閃動圖片等。 4、使用鏈接  &

16、#160; 為方便讀者的查閱，在各頁面底部都設(shè)置了頁面鏈接。 5、插入跳轉(zhuǎn)菜單 為了使讀者能快捷的回到自己感興趣的頁面，于是在各個頁面都插入了跳轉(zhuǎn)菜單。 6、設(shè)置交替圖像，鼠標放置停止圖片切換 7、使用彈出信息行為 8、框架的使用 9、插入音樂文件 六、網(wǎng)站頁面截圖及代碼1、網(wǎng)站主頁2、東北虎的簡介3華南虎的簡介4、 野生華南5、 彈出式菜單七、動態(tài)特效的使用 1每個頁面都設(shè)置了鏈接，有鏈接的地方就設(shè)置了鼠標放置時的顏色變化，還插入了Flash按鈕; 2)首頁有上下滾動的圖片，插入了背景音樂; 3)根本信息頁面使用了交替圖像插入了音樂文件; 4)書法頁面使用了浮動的圖片; 5)旅游頁面使用了上

17、下滾動的圖片; 6)文學(xué)頁面運用了滾動字幕； 7童年頁面插入了Flash動畫。 八、  課程設(shè)計心得與體會       這次網(wǎng)頁設(shè)計實戰(zhàn)篇個人網(wǎng)站設(shè)計完成后，我收獲了很多，感觸也很深。 我最大的感受就是理論不用于實踐終究是理論，說得難聽點那根本就是紙上談兵，止于理論的學(xué)習(xí)，將來是沒多少成績的，有前途開展的話也必將是少了更為之錦上添花的一筆。 當然也深刻認識了一點，那就是我們所學(xué)的知識雖說是很根底很根本，但沒有根基怎么能建好別墅呢?所以說根底知識是很重要的，我們在學(xué)習(xí)過程中不能小看而去忽略它，它是一筆財富，能引導(dǎo)我們看得更遠飛得更高。

18、通過這次設(shè)計，我發(fā)現(xiàn)一個很普遍的問題：我們往往是眼高手低，學(xué)習(xí)這些知識時覺得它就是小菜一樁，但現(xiàn)在真的驗證了“看花容易繡花難 這句話，當我們著手實踐時就不像我們想象中的那么簡單了，每一個細節(jié)都需要注意，稍有不慎頁面就在預(yù)覽中變了樣，因此更需要我們細心和耐心地去完成，也就兩個字概括認真，只有認真對待才會從骨子里學(xué)到東西，才學(xué)到心里去了。 我覺得這次確實是很有意義的一次檢測，本來自我感覺良好的，結(jié)果實戰(zhàn)時還是存在很多問題的，平時學(xué)起來覺得很輕松就以為掌握了所學(xué)知識，但現(xiàn)在都忘記很多細節(jié)是怎么樣的了，因此開始著手時有些障礙，但我下定決心把以前的實驗內(nèi)容都溫習(xí)一遍，遇到不懂的就及時查資料，比方翻閱資料

19、書，百度，也可以請教同學(xué)，一起討論，相互學(xué)習(xí)，于是最后也如魚得水，水到渠成，因此得到一個非常重要的結(jié)論只要自己想學(xué)只要自己有那份執(zhí)著與毅力，虛心的請教，勤于查閱相關(guān)資料就一定會有收獲的，真的當今沒有什么知識是用不著的，在哪，哪里都是知識，只要自己持有高度的學(xué)習(xí)熱忱。當然，我們在學(xué)習(xí)過程中一定要及時穩(wěn)固、練習(xí)，掌握了也不一定熟悉，熟能生巧啊！我們應(yīng)該吸取這個教訓(xùn)，否那么即使我們最終到達了目的，但我們走了很多彎路，而不是事半功倍的結(jié)果了。不過最終，經(jīng)過長久的堅持與不斷的琢磨，看到了自己辛苦后的成果，盡管這還有很多缺乏，但看著它我心里充滿著喜悅，一分耕耘一分收獲，這永遠是真理。 完成自己的作品后我也欣賞了其他同學(xué)的作品，比照起來，各有千秋，當然能從其中發(fā)現(xiàn)很多值得我去學(xué)習(xí)的地方，比方說有的頁面布局很好，有的頁面內(nèi)容很充實，看起來很有感覺，也可以稱之為網(wǎng)站了，而我的有些頁面看上去，可能使別人不會產(chǎn)生網(wǎng)站這一個概念，反而會覺得像是PPT演示文稿，這也反映了我的一個問題：心中還沒很清楚領(lǐng)悟建立網(wǎng)站的根本要點，還應(yīng)該加強這方面的知識儲