可視化程序設(shè)計(jì)實(shí)踐報(bào)告

1、東北石油大學(xué)可視化程序設(shè)計(jì)實(shí)踐題 目精品動(dòng)漫集結(jié)院班系 電氣信息及其自動(dòng)化專業(yè)班級(jí)學(xué)生姓名學(xué)生學(xué)號(hào)指導(dǎo)教師2013年7月26日 TOC o 1-5 h z HYPERLINK l bookmark4 o Current Document 1設(shè)計(jì)目的1 HYPERLINK l bookmark7 o Current Document 2需求分析1 HYPERLINK l bookmark10 o Current Document 2.1用戶1 HYPERLINK l bookmark13 o Current Document 2.2主要功能1 HYPERLINK l bookmark16 o C

2、urrent Document 2.3基本流程1 HYPERLINK l bookmark19 o Current Document 3網(wǎng)站開(kāi)發(fā)過(guò)程2 HYPERLINK l bookmark22 o Current Document 3.1主頁(yè)面的設(shè)計(jì)2 HYPERLINK l bookmark25 o Current Document 3.2子頁(yè)面設(shè)計(jì)2 HYPERLINK l bookmark28 o Current Document 4心得體會(huì)4 HYPERLINK l bookmark31 o Current Document 5參考文獻(xiàn)41設(shè)計(jì)目的這次網(wǎng)頁(yè)課程設(shè)計(jì)，我們學(xué)計(jì)算機(jī)的首

3、先應(yīng)該對(duì)基本的網(wǎng)絡(luò)信息有著更深 入的了解，并且要懂得利用網(wǎng)絡(luò)資源，而不是成天的上網(wǎng)，并且有助于我們了 解一些知識(shí)文化。對(duì)于所搜集的資料我們要懂得如何的去篩選有價(jià)值的東西， 并且怎樣去整理所有的信息。并且，作為一款實(shí)用軟件，我們要學(xué)會(huì)網(wǎng)頁(yè)制作 中顏色的搭配，主題的確立，獨(dú)出心裁的設(shè)計(jì)和審美觀點(diǎn)。學(xué)會(huì)圖片和文字的 組織方式等等，要通過(guò)課程設(shè)計(jì)，能夠領(lǐng)會(huì)做出比較新穎的文件，并增強(qiáng)動(dòng)手 實(shí)踐能力，進(jìn)一步加強(qiáng)自身綜合素質(zhì)。在這里我設(shè)計(jì)的是一個(gè)“精品動(dòng)漫集結(jié)” 的網(wǎng)頁(yè)，以便讀者能夠了解幾部?jī)?yōu)秀的動(dòng)漫作品。2需求分析2.1用戶網(wǎng)站的主要瀏覽者是主要空閑娛樂(lè)者，美術(shù)愛(ài)好者，動(dòng)漫迷，社團(tuán)社員， 以及一些學(xué)生等等

4、。2.2主要功能建立經(jīng)典動(dòng)漫集結(jié)網(wǎng)站可以用經(jīng)典的宣傳海報(bào)向網(wǎng)友觀眾們展示幾部動(dòng)漫 的主線劇情，由動(dòng)漫之間的對(duì)比，可以讓大家對(duì)不同風(fēng)格的動(dòng)漫有不同的選擇。以圖文的方式向讀者展示每部作品的故事背景、主人公的經(jīng)歷、情節(jié)發(fā)展、 精彩片段，使讀者對(duì)此產(chǎn)生興趣，讓更多的人了解動(dòng)漫文化，認(rèn)識(shí)動(dòng)漫，能夠 學(xué)習(xí)其中的長(zhǎng)處，將來(lái)發(fā)展我們自己國(guó)家的動(dòng)漫事業(yè)。里面諸多的元素一一友 情、親情、青春、熱血、堅(jiān)忍、努力、和平、希望、夢(mèng)想，這些也是鼓勵(lì)我們 的重要因素。2.3基本流程確定主題為動(dòng)漫網(wǎng)站，為了使系統(tǒng)更明確，我建立了如jpg、flv、mp3等 文件夾用于分別管理需要的資源。對(duì)于主頁(yè)，為了使其不只單單是引導(dǎo)的作用，

5、 我插入了動(dòng)漫歌曲作為背景音樂(lè)，加入了超鏈接以豐富其功能。子頁(yè)方面，按 內(nèi)容分類格局大體相同，用數(shù)個(gè)超鏈接進(jìn)行相互連接，并在每一個(gè)子頁(yè)插入該 動(dòng)漫的片段方便讀者感受其中風(fēng)采。龍珠介紹（html）火影忍者（html）名偵探柯南（html）圖1網(wǎng)站具體結(jié)構(gòu)圖3網(wǎng)站開(kāi)發(fā)過(guò)程3.1主頁(yè)面的設(shè)計(jì)首頁(yè)（html）主要是提供導(dǎo)航功能，頁(yè)面內(nèi)容是對(duì)動(dòng)漫的大概介紹。主頁(yè) 中的圖像將各個(gè)動(dòng)漫的主角巧妙地融合在了一起，在這里他們的神態(tài)、特征、 衣著、裝飾、寵物等都聚集在了一起，生動(dòng)的反映出了每部作品的畫風(fēng)，人物 的性格也是栩栩如生；頁(yè)面上方是左右移動(dòng)的“動(dòng)漫之星圖標(biāo)”，為體現(xiàn)網(wǎng)頁(yè)的 動(dòng)感。左側(cè)和圖片下方各位五個(gè)子頁(yè)

6、面的鏈接，點(diǎn)擊即可進(jìn)入其他頁(yè)面。圖片 上方的中心區(qū)域用文本介紹了日本動(dòng)漫的特點(diǎn)。并用插入音頻的方式，插入了 三首日文動(dòng)漫歌曲，設(shè)置參數(shù)false使歌曲并不全部自動(dòng)播放而是而是只播放一 首供用戶選擇，感興趣的用戶可以單擊播放器下的超鏈接以獲取更多信息。圖2主頁(yè)面設(shè)計(jì)圖3.2子頁(yè)面設(shè)計(jì)1）龍珠（htmll）流傳在從小學(xué)生到大學(xué)之間的一部?jī)?yōu)秀作品，本網(wǎng)頁(yè)用幾幅不同時(shí)期的圖片介紹王人公不同時(shí)期的面貌。圖片的下方用文字把該作品的故事背景、人物 發(fā)展歷程、性格特點(diǎn)描述出來(lái)。上方用了五個(gè)鏈接，可以跳轉(zhuǎn)到主頁(yè)和其他四 部作品的網(wǎng)頁(yè)，最下方也同主頁(yè)一樣。這是精品動(dòng)漫集結(jié)網(wǎng)中非常受歡迎的一 部分，如有興趣的讀者可

7、以感受一下。A0m3wv5牧事介紹：獨(dú)自住在深山的少年孫悟空，遇上搜集七龍珠的少女科學(xué)家布瑪，布瑪為得到悟空擁有的四星七龍珠而帶 司吾空踏上找尋七龍珠的旅程。長(zhǎng)有尾巴的孫悟空天生神力，加上曾得到己過(guò)身的爺爺孫悟飯J訓(xùn)練武術(shù)，所以悟& 固.尋七龍珠的期間多次打敗作惡的壞人，并且認(rèn)識(shí)了烏龍、樂(lè)平、龜仙人、牛魔王及其女兒琪琪（琪琪成了他的未婚咨朋友。在找尋最后一顆七龍珠時(shí)閭進(jìn)及拉夫的城堡，后來(lái)悟空因月圓而變身成巨猿，被狗掉尾巴，七龍珠亦因?yàn)趿τ?jì)愿而四散。悟空拜武天老師（免仙人）為師學(xué)習(xí)武術(shù)，同時(shí)出身少林寺的庫(kù)林亦拜武天老師為師。兩人一起修 勇，由馨初的競(jìng)爭(zhēng)后來(lái)成為最要好的朋友。修練了八個(gè)月后兩人參加

8、了第二十一回天下一武道會(huì)，兩人在大會(huì)表現(xiàn)活躍，i分別在四強(qiáng)賽和決賽敗在變裝參賽的師傅手下。武道會(huì)結(jié)束后，悟空為找回屬於爺爺遺物的四星七龍珠而獨(dú)自踏上t 尋七龍珠之路。旅途中遇上了正在找尋七龍珠，意圖征服世界的黑綢軍，悟空數(shù)次破壞黑綢軍的陰謀，打倒多個(gè)黑綢軍於圖3龍珠頁(yè)面2）海賊王本網(wǎng)頁(yè)用分段式文字將不同時(shí)期的故事敘述一番，左側(cè)和主頁(yè)一樣設(shè)有五 個(gè)鏈接，可以跳轉(zhuǎn)到其他子頁(yè)面或首頁(yè)。鏈接下是漫畫海報(bào)，經(jīng)典的鏡頭介紹 了海上一部熱血和夢(mèng)想的故事。另外在網(wǎng)頁(yè)文字下方插入了一個(gè)超鏈接，連接 到該動(dòng)漫的官方網(wǎng)站，在上面可以欣賞到精彩的動(dòng)漫視頻，供有興趣的讀者觀 看。TF百：再由術(shù)即故事介紹：受到四皇紅發(fā)杰

9、克的影響，蒙其D魯夫開(kāi)始出海當(dāng)海賊。在冒險(xiǎn)途中，原賞金獵人羅羅亞與 賊的小偷騙人布以及海上餐廳巴拉蒂副主廚香吉士陸續(xù)入夥，草帽海賊團(tuán)就此成形。由於陸續(xù)擊倒了在東海惡名 們（包括鐵棒亞爾麗塔、小丑巴其、百計(jì)克洛、首領(lǐng)克利克、鋸齒惡龍等人），使魯夫以新人之姿， 萬(wàn)貝利的東海最高懸賞金。魯夫一伙人到達(dá)了羅格鎮(zhèn)，這是進(jìn)入偉大航道之前必經(jīng)的地方，也是海賊王哥爾D羅杰的 來(lái)被公開(kāi)處刑的 所在，因此這里又被稱為開(kāi)始與結(jié)束的城鎮(zhèn),在羅格鎮(zhèn)，他們同時(shí)受到管轄這里的海軍上校白獵人； 許多敵人的夾 擊，魯夫在奔走過(guò)程中撞見(jiàn)了海賊王被處死的高臺(tái)，興奮的爬上高臺(tái)眺望遠(yuǎn)方，卻不小心被小丑巴其給擒住 刀即將招呼到頸間的那一

10、瞬，他笑著對(duì)草帽海賊團(tuán)的眾人說(shuō)：對(duì)不起，我要死了！，此情此景令斯摩格回想起二十年 刑（死前能夠沒(méi)有遺憾的笑，這樣的人并不多）。也許是身處高處的緣故，巴其的刀湊巧引來(lái)了閃電劈向高臺(tái)，身為橡膠. 身體不導(dǎo)電而得救了，巴其則是暫時(shí)昏迷.返回船上的路上，魯夫在鎮(zhèn)上的入口處一度被斯摩格抓住，卻又受到父親:D多拉格的圖4海賊王頁(yè)面3）銀魂該子頁(yè)內(nèi)容大致如上，并且其中上方插入了音頻白夜叉降臨達(dá)到其獨(dú) 特效果。作者：空知英秋故事介紹：江戶時(shí)代末期（200年前），被稱為“天人”的謎之異星人來(lái)襲。于是地球人與天人之間的戰(zhàn)爭(zhēng)瞬即 眾多的武士和攘夷派志士都參與與天人的戰(zhàn)斗。幕府見(jiàn)識(shí)到天人強(qiáng)大的實(shí)力后，最終向天人低頭，

11、放棄武士4 與天人簽訂不平等條約，準(zhǔn)許他們?nèi)雵?guó)。其后更頒布了 “廢刀令”，奪走了武士的刀，使他們無(wú)力反抗。自此 霸道，幕府為天人所影響，甚至被控制，成為了 “傀儡政權(quán)”。在這樣的時(shí)代，有一個(gè)落魄，但是卻一直貫徹 的男入與同伴的生活的故事。主頁(yè)-龍珪-火影忍者-海臧王-銀燙-名偵探材南圖5銀魂頁(yè)面4心得體會(huì)在設(shè)計(jì)過(guò)程中還出現(xiàn)了很多的問(wèn)題，但通過(guò)看書，上網(wǎng)查詢，請(qǐng)教同學(xué)等 方式，便可以得到改善?？梢哉f(shuō)在自己動(dòng)手，不斷實(shí)踐的過(guò)程中，網(wǎng)頁(yè)設(shè)計(jì) 水平得到了很大的提高。就我而言，也在學(xué)習(xí)網(wǎng)頁(yè)中總結(jié)了如下經(jīng)驗(yàn)。關(guān)于網(wǎng) 頁(yè)設(shè)計(jì)的書太多了，林林總總的，而且有些亂。書看多了，花的時(shí)間比較多。 我覺(jué)得想學(xué)基本技巧的該不用太多地看書。初學(xué)者要清楚地了解網(wǎng)頁(yè)制作的基 本流程。就是第一步做什么下一步又該怎樣。從繪畫網(wǎng)頁(yè)框架圖到最后發(fā)布網(wǎng) 站，大概是怎樣的一個(gè)過(guò)程，怎樣實(shí)現(xiàn)的，應(yīng)該要心里有數(shù)。按流程的順序 學(xué)習(xí)，不要試著先把所有做網(wǎng)頁(yè)用到的軟件都吃透了再開(kāi)始做網(wǎng)頁(yè)，