個人主頁課程設(shè)計報告.doc

個人主頁 課程設(shè)計報告課 題: 火影之家 姓 名： 學(xué) 號： 同組姓名： 專業(yè)班級： 指導(dǎo)教師： 設(shè)計時間： 評閱意見：評定成績： 指導(dǎo)老師簽名： 年 月 日目 錄一、運行壞境3二、設(shè)計的目的和意義32.1課題的目的：32.2課題的意義：3三、設(shè)計步驟：43.1 準(zhǔn)備工作：43.2 Flash設(shè)計步驟：43.3 HTML的編寫步驟：63.4 Dreamweaver的設(shè)計步驟：6四、程序源代碼10五、調(diào)試過程分析18六、網(wǎng)頁的測試與發(fā)布18七、小結(jié)19參考文獻20個人主頁課程設(shè)計報告一、運行壞境 本網(wǎng)頁主要基于windows XP /2000 或其他系列操作系統(tǒng)，安裝有Flash播放器、網(wǎng)頁三劍客：Macromedia Dreamweaver 、Macromedia Fireworks 、Macromedia Flash 的運行壞境。二、設(shè)計的目的和意義2.1課題的目的 由于本人比較喜歡火影，所以本次課程設(shè)計中主要是以火影為主要的素材。本次課程設(shè)計的主題是個人網(wǎng)頁制作，我主要做了7個網(wǎng)頁。網(wǎng)頁主要是以flash為主，子網(wǎng)頁主要是以介紹為主，其中包含了人物的特點、擅長的技能、圖片，能夠幫助火影愛好者更清晰的了解劇情里面的人物關(guān)系和自身的特點！還有各種關(guān)于火影相關(guān)的連接，能夠比較系統(tǒng)的找到火影的相關(guān)信息，希望對廣大感興趣的人愛好者會有所幫助！ 個人網(wǎng)頁設(shè)計是采用HTML、Dreamweaver、Photoshop等結(jié)合開發(fā)的，要進行網(wǎng)頁的開發(fā)，必須對要Dreamweaver、flash、Photoshop等設(shè)計軟件有所了解。而且還要熟悉利用HTML語法來編寫網(wǎng)頁代碼。當(dāng)然，還要有一定美術(shù)功底。2.2課題的意義：理論意義隨著Internet在中國的迅速發(fā)展,人們?nèi)粘Ｉ钪性絹碓蕉嗟厥褂眠@項新的技術(shù)來為自己的工作和學(xué)習(xí)服務(wù).由于WEB頁面能把文本、圖像、聲音、動畫、視像等多種媒體信息集于一體，不但使信息的顯示更加生動，而且使信息的瀏覽更為方便,同時WEB頁能實現(xiàn)網(wǎng)上交易平臺、客戶信息反饋方便了企業(yè)與客戶之間信息交流，因此許多企業(yè)紛紛建設(shè)具有自己獨特風(fēng)格的網(wǎng)站以增強企業(yè)知名度.現(xiàn)實意義我們本次通過設(shè)計個人網(wǎng)頁主要是學(xué)習(xí)掌握HTML語言的用法，以及Dreamweaver的一些具體操作，還有學(xué)會運用一些Photoshop的知識。希望通過本次設(shè)計能夠熟悉以上知識，并能夠設(shè)計出好的網(wǎng)頁。三、設(shè)計步驟：3.1準(zhǔn)備工作：本站素材來源：火影中文網(wǎng)、百度、Google等，并結(jié)合Photoshop、123Flash等輔助軟件制作網(wǎng)頁背景、圖標(biāo)等素材。素材主要包括網(wǎng)站所需要的圖片、火影忍者相關(guān)的文字說明如作者岸本齊史簡介、火影忍者人物性格分析火影人忍者簡介及劇情介紹等。前期構(gòu)思，主要完成網(wǎng)站主題框架設(shè)計如首頁與分頁面的邏輯結(jié)構(gòu)、各分頁面框架布局、首頁框架布局、導(dǎo)航欄鏈接、完成基本的圖像文字排版及部分較為簡單的頁面構(gòu)思。在頭腦里完成網(wǎng)站“火影之家”規(guī)劃報告（草案）。3.2 Flash設(shè)計步驟：. 進入Flash軟件的運行環(huán)境設(shè)置背景顏色為黑色。如圖3-1所示： 圖3-1將下面的線條重復(fù)的放在黑色的背景上面，會出現(xiàn)有種漸變色的感覺。如下圖3-2所示：圖3-2 還有圖片的相應(yīng)的切換，每張圖片都是由模糊到清楚慢慢的變化。（需要編寫程序?qū)崿F(xiàn)這些功能）.在編程區(qū)域編寫程序，源代碼見程序源代碼中（style.css）：.效果圖如下： 圖3-1 圖3-2 圖3-3 圖3-4 圖3-5 圖3-63.3 HTML的編寫步驟： .新建一個記事本文件。 .在文本文檔中編輯自己的HTML代碼。 .將文本文檔的后綴名.txt改成.htm(或者 .html)。 .如果完成后的.htm文檔需要修改可以：1.用文本文檔的方式打開修改 2.選擇IE瀏覽器查看-源文件修改網(wǎng)頁中設(shè)計到的主要代碼：獲取圖片代碼:背景顏色設(shè)置： 文字鏈接設(shè)置：This text圖片鏈接設(shè)置：3.4 Dreamweaver的設(shè)計步驟： .打開Dreamweaver主界面，單擊菜單欄文件打開已經(jīng)編寫好index.Html等網(wǎng)頁文件。.然后對index.Html文件的排版進行設(shè)置，經(jīng)過一段時間的調(diào)整，主界面基本形成。效果圖如下所示： 圖3-7 歡迎頁面（1） 圖3-7 歡迎頁面（2）圖3-7 歡迎頁面（3）第21頁.子界面設(shè)置效果如下圖所示： 圖3-8 火影簡介截圖（1） 圖3-8 火影簡介截圖（2）圖3-8 火影簡介截圖（3） 圖3-9人物簡介頁面截圖（1） 圖3-9人物簡介頁面截圖（3）單擊logo 鏈接到海賊網(wǎng)的官方網(wǎng)界面，界面截圖下： 圖3-10 鏈接界面截圖四、程序源代碼. style.css中的源代碼如下：charset utf-8;/* CSS Document */body font-size: 12px;margin: 0px;padding: 0px;background-color: #000;background-image: url(./images/bg.jpg);background-repeat: repeat-x;a color: #362a00;text-decoration: none;a:hover color: #ea0000;text-decoration: underline;#indexmargin:0 auto;text-align:center;color:#ccff66;#index embedwidth:800px;height:600px;#index h1font-size:36px;#index h2 acolor:#02e3e3;font-size:24px;text-decoration:none;#index h2 a:hovercolor:#ccff66;#header height: 223px;width: auto;background-image: url(./images/header_bg.jpg);background-repeat: no-repeat;background-position: center;#nav height: 107px;background-image: url(./images/nav_bg.jpg);background-repeat: no-repeat;background-position: center;#nav .nav_main height: 107px;width: 931px;margin: auto;color: #FFC;#nav .nav_main ul margin: 0px;padding: 0px;#nav .nav_main ul li margin-left:45px;line-height:80px;display: inline;#nav .nav_main ul.u1 width: auto;font-size: 20px;font-weight: bold;text-align: center;padding-top: 25px;padding-bottom: 5px;color: #FC0;#nav .nav_main .u1 li a color: #FC0;text-decoration: none;padding-right: 5px;padding-left: 5px;#nav .nav_main .u1 li a:hover text-decoration: underline;color: #FC0;#nav .nav_main .u1 li .red color: #F00;#nav .nav_main .u1 li .red:hover color: #F00;#nav .nav_main ul.u2 text-indent: 25px;padding-top: 2px;padding-bottom: 2px;#nav .nav_main .u2 li a color: #FFC;text-decoration: none;padding-right: 5px;padding-left: 5px;#nav .nav_main .u2 li a:hover color: #FFC;text-decoration: underline;#main height:1200px;width: auto;background-image: url(./images/main_bg.jpg);background-position: center;background-repeat: repeat-y;#main_up background-image: url(./images/up_bg.jpg);background-repeat: no-repeat;background-position: center top;width: auto;#main_up_body width: 931px;margin: auto;height: 1200px;#news height: 1200px;width: 930px;#news .news_main background:#d5ad4b;height: 1200px;text-align:center;overflow:auto;#news .news_main ptext-align:left;font-size:16px;line-height:180%;margin:10px;text-indent:32px;#flink background-image: url(./images/flinkbg.jpg);background-repeat: no-repeat;background-position: center center;padding-top: 16px;padding-bottom: 16px;text-align: center;padding-left: 70px;#flink img padding-right: 3px;padding-left: 3px;border-top-width: 0px;border-right-width: 0px;border-bottom-width: 0px;border-left-width: 0px;.index.Html中的源代碼如下：火影忍者歡迎來到火影之家 ENTER.home.Html中的源代碼如下：火影忍者 火影簡介 三代班 卡卡西班 阿斯瑪班 凱班 紅班 火影忍者是日本漫畫家岸本齊史的代表作，作品自1999年開始在周刊少年JUMP上連載后，讀者反應(yīng)非常熱烈。隨后，火影忍者的TV動畫在日本東京電視臺播放，成為最受歡迎的動漫作品之一。故事成功地將原本隱藏在黑暗中，用世界上最強大的毅力和最艱辛的努力去做最密不可宣和隱諱殘酷的事情的忍者，描繪成了太陽下最值得驕傲最光明無限的的職業(yè)。在這個忍者的世界中，每一位年輕的主人翁都在開拓著屬于自己的忍道。這是一個忍者的世界。從小身上封印著邪惡的九尾妖狐，第一期鳴人受盡了村人的冷落，只是拼命用各種惡作劇試圖吸引大家的注意力。好在還是有依魯卡老師關(guān)心他，鳴人的性格才沒有變得扭曲，他總是干勁十足，超級樂觀。為了讓更多的人認(rèn)可自己，鳴人的目標(biāo)是成為第六代火影！鳴人的同伴，是由老師確定的同班同學(xué)，隨著共同的戰(zhàn)斗，終于成了互相認(rèn)可、信賴的好伙伴。 這是一個忍者的世界。在Naruto的世界中，忍者這個職業(yè)，就像HunterXHunter里的獵人、One Piece里的海盜一樣，是少年們的夢想！不過這回的主人公鳴人和自學(xué)成才的小岡、路飛不一樣，他是木葉忍者村的忍者學(xué)校中科班畢業(yè)的哦（雖然畢業(yè)得很有些勉強，是被稱為萬年吊車尾的“差生”，汗）。 從小身上封印著邪惡的九尾妖狐，無父無母的鳴人受盡了村人的冷落，但是他卻不知道原因，只是拼命用各種惡作劇試圖吸引大家的注意力，人們卻反而更遠離他。好在還是有依卡魯老師關(guān)心他，鳴人的性格才沒有變得扭曲，他總是干勁十足，嘻嘻哈哈，超級樂觀。為了讓更多的人認(rèn)可自己，鳴人的目標(biāo)是成為第五代火影！這可是很高的目標(biāo)哦，火影是世上最強的五位忍者之一的封號，也是木葉忍者村的首領(lǐng)。鳴人可不管，對于自己終有一天能成為火影，他可是超級自信的哦。努力吧，鳴人！ 鳴人的同伴，是由老師確定的同班同學(xué)，一開始大家互相看不順眼，不過隨著共同的戰(zhàn)斗，雖然面子上還是要斗一斗，但終于成了互相認(rèn)可、互相信賴的好伙伴。同伴中照例有酷酷的帥哥佐助（還背負著復(fù)仇者的使命）和聰明可愛的女孩小櫻，對手中有狡詐的超強Boss大蛇丸，孤獨的殺手再不斬、冷酷嗜血、沒人要的小孩我愛羅還有既有競爭又有互助的其他組的木葉同學(xué)們，雖然是少年漫畫的傳統(tǒng)設(shè)定，但是人物和故事都很精彩哦！ .one.Html中的源代碼如下：火影忍者 火影簡介 三代班 卡卡西班 阿斯瑪班 凱班 紅班 綱手 基本資料 姓名：千手綱手 日文平假名： 日文片假名： 羅馬拼音：tsu na te 忍者登記號碼：002302 級別：影級 現(xiàn)任：木葉村第五代火影 出生日期：8月2日 星座：獅子座 身高：163.1cm 體重：48.9kg 血型：B型 年齡：54歲 發(fā)型：黃色雙馬尾 擅長：醫(yī)療忍術(shù)、體術(shù) 派別：木葉忍者村醫(yī)療忍者 性格：好賭，豪爽，堅韌 喜歡的食物：嫩雞，酒 討厭的食物：甜食（丸子） 想挑戰(zhàn)的對手：第三代火影 最愛的人：斷（旦），繩樹 親人：初代目火影（爺爺）、二代目火影、斷（愛人）、繩樹（弟弟). 興趣：賭博、喝酒 自來也簡介 姓名：自來也自來也 日文名： 羅馬拼音：Jiraiya 查克拉屬性：火、土 籍貫：火之國的木葉忍者村 聲優(yōu)：大冢芳忠 忍者登記號碼：002301 出生日期：11/11（卒年54歲，天蝎座） 祭日：2007年12月21日 身高：191.5CM體重：89.5KG 血型：B 發(fā)型；白色刺猬頭 綽號：蛤蟆仙人，超級大色鬼，好色仙人（鳴人叫的），小自來也 喜愛的食物：蒜蓉紫酥，炸雞，腌蘿卜 討厭的食物：奇異果，奶汁烤菜，蘿卜沙拉、煎蛋 想挑戰(zhàn)的對手：第三代火影 想追回的伙伴：大蛇丸(因偷學(xué)禁術(shù),被發(fā)現(xiàn),逃出木葉)但自來也放棄了! 喜愛的字句：自由奔放 師傅：三代目火影 徒弟：四代目火影（鳴人父親），長門，彌彥，小南，鳴人 大蛇丸簡介姓名:大蛇丸 日文名: 大蛇丸羅馬音譯:Orochimaru 解讀:Orochi (大蛇）maru（丸） 忍者登陸番號:002300 曉中的搭檔:赤砂之蝎、宇智波鼬 師傅:三代目火影（猿飛日斬） 曉組織代號:空陳 戒指:空 戒指佩戴位置:右手小拇指 通靈獸:萬蛇 出生日期:10/27（54歲，天蝎座） 喜歡的食物:蘋果，雞蛋 討厭的食物:冷的東西 身高:179.4cm(50歲) 身高:172.0cm(54歲) 體重:57.3kg 血液型:B型 發(fā)型:黑色長發(fā) 所屬忍者村:木葉忍者村（以前）/音隱忍者村（現(xiàn)在） 所屬國:火之國（以前）/田之國（現(xiàn)在） 性格:有野心，殘忍，冷血、高傲 者之書中的大蛇丸 稱號:與自來也、綱手二人一同被稱為“三忍”。 忍具:草薙劍 特點:三代目火影的弟子，傳說中的三忍之一，為達目的不擇手段。習(xí)慣像蛇一樣吐舌頭。 想挑戰(zhàn)的對手:持有自己未知之術(shù)的人。 個人認(rèn)為最有魅力的是:烏黑的頭發(fā)與嫵媚的微笑，舔舌頭的動作。 喜愛的字句:破壞，混沌 興趣:開發(fā)新忍術(shù)（禁術(shù)） 忍者學(xué)校畢業(yè)年齡:6 中忍升級年齡:？ 人物經(jīng)驗:D-16、C-332、B-521、A-491、S-108 八項數(shù)值:忍-10 體-7 賢-10 幻-10 力-7 速-9 精-7 印10 總計70（滿分80） 日語聲優(yōu):松本和香子，少年時期：山口真弓，女人時：小島幸子 實力:超S .two.html,three.html,four.html,five.html的源代碼類似于home.html。五、調(diào)試過程分析在本次網(wǎng)頁設(shè)計過程中，出現(xiàn)了一些如下的問題，如網(wǎng)頁排版，模塊不顯示，鏈接不上等。對于網(wǎng)頁排版問題，在Dreamweaver中打開網(wǎng)頁文件，根據(jù)在預(yù)覽中模塊的位置修改，如logo偏右，就在Dreamweaver中把logo往右移，直到達到想要的效果。效果如圖5-1所示：模塊不顯示可能是引用文件格式不對，如在插入Falsh時插入的是FLV格式等，在Dreamweaver把模塊刪除再插入正確的格式即可。鏈接問題可能是引用文件時(如加入超鏈接，或者插入圖片等)，使用了錯誤的文件路徑，就會導(dǎo)致引用失效(無法瀏覽鏈接文件，或無法顯示插入的圖片等)六、網(wǎng)頁的測試與發(fā)布網(wǎng)頁制作完畢，最后要發(fā)布到Web服務(wù)器上，網(wǎng)站上傳以后，在瀏覽器中打開自己的網(wǎng)站，逐頁逐個鏈接的進行測試，發(fā)現(xiàn)問題，及時修改，然后再上傳測試。全部測試完畢就可以把網(wǎng)址告訴給朋友，讓他們來瀏覽。主要測試的方面有以下幾點：1. UI測試 看頁面是否美觀養(yǎng)眼(包括頁面的布局是否合理,策劃是否舒服美觀,頁面長度是否合理,前景色與背景色是否搭配,頁面風(fēng)格是否統(tǒng)一,色調(diào)是否適合人眼,會不會太刺眼,字體大小是否合適,字體的顏色是否與背景色搭配,字體鏈接時是否會出現(xiàn)設(shè)置怪異的背景色,字體顏色有沒有與背景色太接近或差距太大導(dǎo)致我們沒辦法看清字體或刺激了我們的視覺,點擊鏈接時圖片和字體會不會產(chǎn)生移位)等。 2 .鏈接測試 點擊鏈接時是否可以進入我們要找的頁面,進入了我們要找的頁面后能否正確返回,鏈接頁面會不會是空白頁面或孤立頁面或根本沒鏈接(也就是說鏈接的是自己本身),如果鏈接的是空白頁我們是否可以再正確返回,如果使用了框架或內(nèi)嵌框架是否可以正確在本框見頁內(nèi)顯示要查找的頁面,使用內(nèi)容置頂時是否可以正確實現(xiàn)七、小結(jié)跟學(xué)習(xí)別的東西一樣，學(xué)習(xí)網(wǎng)頁設(shè)計也需要興趣，所謂的興趣也不是三分鐘熱度，是一種執(zhí)著。學(xué)習(xí)網(wǎng)頁設(shè)計需要耐心，如果你沒有耐心，你學(xué)不好網(wǎng)頁設(shè)計，應(yīng)為當(dāng)你碰到一個問題時，如果不能立刻得到問題的答案，你可能需要很長時間去解決，我就碰到過一個問題，用了半個月時間才解決。學(xué)習(xí)網(wǎng)頁設(shè)計需要堅持，堅持不斷的學(xué)習(xí)，因為設(shè)計網(wǎng)頁的軟件在不斷的更新，你不斷的學(xué)習(xí)，不要掉入技術(shù)的陷阱，你的網(wǎng)頁設(shè)計技術(shù)一流，你對軟件的掌握程度已經(jīng)達到一定水平，但是你設(shè)計的網(wǎng)頁卻不堪目睹，這是因為網(wǎng)頁設(shè)計是是介于平面設(shè)計和編程技術(shù)兩者之間的邊緣科學(xué).不僅涉及到美學(xué),心理學(xué),平面構(gòu)成，色彩搭配等平面設(shè)計方面分知識，還涉及到很多編程語言技術(shù)方面的知識.只有綜合運用多種知識,才能設(shè)計出視聽特效,動感十足,富于個性的web頁面,才能全面展現(xiàn)互聯(lián)網(wǎng)這一新型媒體的獨特魅力和超強功能1.網(wǎng)頁應(yīng)易讀 網(wǎng)站設(shè)計最重要的訣竅，恐怕就是你的網(wǎng)頁要易讀 。這就意味著,你必須花點心思來規(guī)劃文字與背景顏色的搭配方案。 注意不要使背景的顏色沖淡了文字的視覺效果，別用花里胡哨的色彩組合，讓人看起來你的網(wǎng)頁來很費勁。一般來說，淺色背景下的深色文字為佳 。這個原則也意味著，你最好別把文字的規(guī)格設(shè)得太小、也不能太大。文字太小，人家讀起來難受；文字太大，或者文字視覺效果變化頻繁，像是沖著人大喊大叫，看起來不舒服。另外，最好讓文本左對齊，而不是居中。按當(dāng)代中文的閱讀習(xí)慣，文本大都居左的。當(dāng)然，標(biāo)題一般應(yīng)該居中，因為這符合讀者的閱讀習(xí)慣。2. 網(wǎng)站導(dǎo)航要清晰 所有的超鏈接應(yīng)清晰無誤地向讀者標(biāo)識出來，所有導(dǎo)航性