《網(wǎng)頁制作》結(jié)課作業(yè)

201703考試批次《網(wǎng)頁制作》結(jié)課作業(yè)學(xué)生姓名 學(xué)號(hào)專

學(xué)習(xí)中心考 號(hào)年級(jí)層次《網(wǎng)頁制作》結(jié)課作業(yè)注意：本學(xué)期所布置的結(jié)課作業(yè)，請(qǐng)同學(xué)一律按照以下要求執(zhí)行：一、學(xué)生必須預(yù)約才能在學(xué)生平臺(tái)看見相關(guān)課程的“結(jié)課作業(yè)”按鈕；三、結(jié)課作業(yè)提交起止時(shí)間：2017121日--320（屆時(shí)平臺(tái)自動(dòng)關(guān)閉，逾期不）word五、嚴(yán)格按照課程名稱提交相應(yīng)課程結(jié)課作業(yè)，提交錯(cuò)誤的結(jié)課作業(yè)，按0分處理。一、設(shè)計(jì)題目（請(qǐng)?jiān)谝韵戮W(wǎng)頁設(shè)計(jì)作品中任選其一，最后整理一份網(wǎng)站設(shè)計(jì)與100）1、制作個(gè)人主頁4BBS10、制作美食天下網(wǎng)頁2、開發(fā)環(huán)境：DreamweaverCSCSSHTMLFlashCSFireworksCS等工具和語言，但動(dòng)態(tài)網(wǎng)頁制作不做硬性規(guī)定。3、內(nèi)容要求：①內(nèi)容不限，但要求主題思想明確；②具體的設(shè)計(jì)所需素材，可在網(wǎng)上查找，但不得有嚴(yán)重侵權(quán)行為，一經(jīng)發(fā)現(xiàn)按零分處理。4、技術(shù)要求：①選用Div、表格、框架、層等若干技術(shù)設(shè)計(jì)和布局網(wǎng)頁；②超級(jí)鏈接（一般鏈接、電子郵件、錨點(diǎn)等）的使用；④行為的運(yùn)用、時(shí)間軸動(dòng)畫、JavaScript特效等；⑤其他：按自己的喜好，添加的其他技術(shù)效果。5、網(wǎng)站結(jié)構(gòu)要求：元素要包括：文字、圖像、聲音、Flash6、網(wǎng)頁界面要求：①網(wǎng)頁頁面結(jié)構(gòu)清晰、美觀大方、形式新穎、內(nèi)容充實(shí)、瀏覽方便、鼓勵(lì)創(chuàng)新；②網(wǎng)頁中沒有錯(cuò)別字；③每頁均可以返回首頁和鏈接到其它頁，每頁都有導(dǎo)航條；④可以自己制作圖片、動(dòng)畫等以增加網(wǎng)頁展示效果。7、網(wǎng)站文件結(jié)構(gòu)：（index.html三、撰寫設(shè)計(jì)報(bào)告要求：內(nèi)容，內(nèi)容組織邏輯要合理，層次清晰，語言要準(zhǔn)確通順。其具體來講最好有以下內(nèi)容：3、網(wǎng)站頁面結(jié)構(gòu)規(guī)劃與設(shè)計(jì)、網(wǎng)站文件夾目錄規(guī)劃、網(wǎng)頁布局規(guī)劃與設(shè)計(jì)；4；5、總結(jié)；6、按合理的順序附主要源代碼。四、評(píng)分總則①內(nèi)容邏輯組織合理，層次清晰；②內(nèi)容充實(shí)，重點(diǎn)突出，詳略得當(dāng)；③觀點(diǎn)表達(dá)正確，語言準(zhǔn)確通順；④圖表制作正確規(guī)范；⑤排版規(guī)范美觀。制作個(gè)人主頁目 錄一、運(yùn)行壞境 5二、設(shè)計(jì)的目的和意義 5課題的目的： 5課題的意義： 5三、設(shè)計(jì)步驟： 6準(zhǔn)備工作： 6Flash設(shè)計(jì)步驟： 6HTML的編寫步驟： 6Dreamweaver的設(shè)計(jì)步驟： 6四、程序源代碼 10五、調(diào)試過程分析 錯(cuò)誤!未定義書簽。六、網(wǎng)頁的測試與發(fā)布 錯(cuò)誤!未定義書簽。七、小結(jié) 錯(cuò)誤!未定義書簽。參考文獻(xiàn) 20一、運(yùn)行壞境XPFlash播放器、網(wǎng)頁三劍客：MacromediaDreamweaver、MacromediaFireworks、MacromediaFlash的運(yùn)行壞境。二、設(shè)計(jì)的目的和意義課題的目的7flashHTML、Dreamweaver、PhotoshopDreamweaverflashPhotoshopHTML課題的意義：①．理論意義InternetWEBWEB名度.②．現(xiàn)實(shí)意義HTMLPhotoshop本次設(shè)計(jì)能夠熟悉以上知識(shí)，并能夠設(shè)計(jì)出好的網(wǎng)頁。三、設(shè)計(jì)步驟：準(zhǔn)備工作：①．本站素材來源：火影中文網(wǎng)、百度、GooglePhotoshop、123Flash等輔助軟件制作網(wǎng)頁背景、圖標(biāo)等素材。素材主要包括網(wǎng)站所需要的圖片、火影忍者相關(guān)的文字說明如作者岸本齊史簡介、火影忍者人物性格分析火影人忍者簡介及劇情介紹等。②．前期構(gòu)思，主要完成網(wǎng)站主題框架設(shè)計(jì)如首頁與分頁面的邏輯結(jié)構(gòu)、各（草案。Flash①.進(jìn)入Flash軟件的運(yùn)行環(huán)境設(shè)置背景顏色為黑色。如圖3-1所示：圖3-1將下面的線條重復(fù)的放在黑色的背景上面，會(huì)出現(xiàn)有種漸變色的感覺。如下圖3-2所示：圖3-2圖3-1圖圖3-5

圖圖3-4圖HTML①.新建一個(gè)記事本文件。②.在文本文檔中編輯自己的HTML代碼。③.將文本文檔的后綴名.txt改成.htm(或者.html)。④.如果完成后的.htm文檔需要修改可以：1.用文本文檔的方式打開修改2.選擇IE瀏覽器查看--》源文件修改網(wǎng)頁中設(shè)計(jì)到的主要代碼：獲取圖片代碼:<imgsrc="./images/#.gif"width="144"height="50">背景顏色設(shè)置：<bodybgcolor="#d0d0d0">文字鏈接設(shè)置：<ahref="lastpage.htm">Thistext</a>圖片鏈接設(shè)置：<u><ahref="index.htm"><imgsrc="./images/11.jpg"width="116"height="32"></a></u>DreamweaverDreamweaverindex.Html等網(wǎng)頁文件。index.Html本形成。效果圖如下所示：圖3-7—?dú)g迎頁面（1））圖 —?dú)g迎頁面（3丈丈，回開l心千亨老反和．貶后，丈·>示屯/1:'l,歡寸最受歡，，本陀意在凰諸中用吐榮上力力士紈最壑不可宣和九古0T江圖3-8—火影簡介截圖（2）廿都在開拓虧屬于口己的思m只是拚令月各種敖引大他可白，I，是由毛芹唷定的同班同共于成了互忖認(rèn)可信忱的奸伙!iiNm這．O議夢(mèng)I人公吐人和自竿成才不一拌．他是術(shù)斗見毛村的忍老學(xué)佼中補(bǔ)唗畢業(yè)的噴（雖然畢止需鑲石竺是被勹扦身上封印藝鄧怒的丸諤欽扎Jr-T，但是忔卻示郊避恩因，只是拚命用各種毯怍引試匣戙引大東的fll,畸人的性特才，也總是干勸十，火影I這可是＿有大影忳可是白

巴人的同伴是由老師溯定的同婦＊，一開沁六東互相看不敗民不過隧奢齊國的戰(zhàn)，Ii勸的好伙一同伴中庶刺），比衿酗嗜血．競爭又有互助的其他擔(dān)的和同學(xué)fl,雖生是少年漫田的傳邸一定，但是偽和哉摹t隔行和平I\ （今 已釭宅鄧軍嚇單l= 笠_圖 —火影簡介截圖（3

./"" 扛忱杉山竊（日譯）黃閉芳（凰行）井如黔義白柯） 年價(jià)Bl2-1J歲（竿一手），l6歲（疻戊E百打裳名由人匕也且回的曰詐儼夭歐 與撇芯午存的無才忍毛，死百雜的干虧枚一拉的后百．仔） “高15D.& l:J.2一（烹11<).迫已（死，懷） 廿衛(wèi)423一433屯（｀52書（安戊婦登記號(hào)1出的 紅ll？月lJ曰 ［父3.,.右諛盲云．寧古諛蔓琴 桿識(shí)鈕寧它祚ii湛祝心人，寄療慢，墳?zāi)颈灞逦鳎ㄘS一手，軍七班)鬼燈木月．虧磷，天開重否（齊只 沽，1從） 興們生·3麗增．丘性冷娑．執(zhí)著 喜受的力量 喜曼的食印蒼芍．木丘飯司寸民的言符3千攔[.祚言 布望交·對(duì)芍打不葉的幕后拓屢 ［任務(wù)敗挽甘J綬任務(wù)西·戲任務(wù)口B錢曬2回亟 務(wù)涸｀碟任務(wù)咂鏈接到海賊網(wǎng)的官方網(wǎng)界面，界面截圖下：ll陶～匠航囚吐馮優(yōu)了享他 作毆雯 氓貳王， 03潭一·1．區(qū)『把凹江頑l113！闖躲壬舅.,.謚『夏們芘貶龍日1－又是一個(gè)下可天m，它看曰的們漕」陀定如心l·0平 1年1志之急心h1J漕配婦如伍『巳狂硒了印覃吹心滾儼氐斗士」也 2填許特叭減百勸iii.l11也.,.．1年行量凸史上言改日本至述4呻：過111'1濬墅立...伍『葉撫烹，陽撩王鬟6兇識(shí)『蟲人竺的I'肚」厥泗 烽立響歸l1E...= :如三古睬叩··竺婦垣［如戲臥埔也“，猛抽賦東王開[l1[帽R＂"池燦笠石呻刁開伯—1心·"d曠集『止血念1..戊廿飛，圖 —四、程序源代碼①.style.css中的源代碼如下：@charset"utf-8";/*CSSDocument*/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;}#index{margin:0auto;text-align:center;color:#ccff66;}#indexembed{width:800px;height:600px;}#indexh1{font-size:36px;}#indexh2a{color:#02e3e3;font-size:24px;text-decoration:none;}#indexh2a:hover{color:#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_mainul{margin:0px;padding:0px;}#nav.nav_mainulli{margin-left:45px;line-height:80px;display:inline;}#nav.nav_mainul.u1{width:auto;font-size:20px;font-weight:bold;text-align:center;padding-top:25px;padding-bottom:5px;color:#FC0;}#nav.nav_main.u1lia{color:#FC0;text-decoration:none;padding-right:5px;padding-left:5px;}#nav.nav_main.u1lia:hover{text-decoration:underline;color:#FC0;}#nav.nav_main.u1li.red{color:#F00;}#nav.nav_main.u1li.red:hover{color:#F00;}#nav.nav_mainul.u2{text-indent:25px;padding-top:2px;padding-bottom:2px;}#nav.nav_main.u2lia{color:#FFC;text-decoration:none;padding-right:5px;padding-left:5px;}#nav.nav_main.u2lia: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:centertop;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_mainp{text-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:centercenter;padding-top:16px;padding-bottom:16px;text-align:center;padding-left:70px;}#flinkimg{padding-right:3px;padding-left:3px;border-top-width:0px;border-right-width:0px;border-bottom-width:0px;border-left-width:0px;}②.index.Html中的源代碼如下：<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"\h"/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html\hxmlns="/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>火影忍者</title><linkhref="style/style.css"rel="stylesheet"type="text/css"/></head><body><divid="index">

<h1>歡迎來到火影之家</h1><h1><ahref="home.html">ENTER</a></h1><embedsrc="images/index.swf"></embed></div>③.home.Html中的源代碼如下：<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"\h"/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html\hxmlns="/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>火影忍者</title><linkhref="style/style.css"rel="stylesheet"type="text/css"/></head><body><divid="header"></div><divid="nav"><divclass="nav_main"><ulclass="u1"><li><ahref="home.html">火影簡介</a></li><li><ahref="one.html">三代班</a></li><li><ahref="two.html">卡卡西班</a></li><li><ahref="three.html">阿斯瑪班</a></li><li><ahref="four.html">凱班</a></li><li><ahref="five.html">紅班</a></li></ul></div></div><divid="main"><divid="main_up"><divid="main_up_body"><divid="news"><divclass="news_main"><imgsrc="images/home.jpg"><p>《火影忍者》是日本漫畫家岸本齊史的代表作，作品自1999年開始在周刊JUMPTV動(dòng)畫在日本東京電視忍道。</p><p>這是一個(gè)忍者的世界。從小身上封印著邪惡的九尾妖狐，第一期鳴人斗，終于成了互相認(rèn)可、信賴的好伙伴。</p><pNaruto的世界中，忍者這個(gè)職業(yè)，就像HunterXHunterOnePiece得很有些勉強(qiáng)，是被稱為萬年吊車尾的“”，汗）——（還背負(fù)著復(fù)仇者的使命Boss</p></div></div></div></div></div><divid="flink"><a\hhref="/?hy"><imgsrc="images/1395332_op90.jpg"width="90"height="33"alt="logo"/></a><a\hhref="/"><imgsrc="images/1395332_zwdzjs.jpg"width="90"height="33"alt="logo"/></a><a\hhref="/"><imgsrc="images/logo.jpg"width="90"height="33"alt="logo"/></a><a\hhref="/"><imgsrc="images/logo.jpg"width="90"height="33"alt="logo"/></a><a\hhref="/"><imgsrc="images/1661963_17dm.jpg"width="90"height="30"alt="logo"/></a></div></body></html>④.one.Html中的源代碼如下：<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"\h"/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html\hxmlns="/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>火影忍者</title><linkhref="style/style.css"rel="stylesheet"type="text/css"/></head><body><divid="header"></div><divid="nav"><divclass="nav_main"><ulclass="u1"><li><ahref="home.html">火影簡介</a></li><li><ahref="one.html">三代班</a></li><li><ahref="two.html">卡卡西班</a></li><li><ahref="three.html">阿斯瑪班</a></li><li><ahref="four.html">凱班</a></li><li><ahref="five.html">紅班</a></li></ul></div></div><divid="main"><divid="main_up"><divid="main_up_body"><divid="news"><divclass="news_main"><imgsrc="images/gang.jpg"><p>手 基本資料 千手綱手 日文平假名つなで 日文片假名ツナデ 羅馬拼音nate 忍者登記號(hào)碼級(jí)別影級(jí) 現(xiàn)任影 82日 星座座 m 體重血型型 年齡歲 尾 體術(shù) 派別：木葉忍者村醫(yī)療忍者 韌 喜歡的食物：嫩雞，酒 討厭的食物：甜食（丸子） 想挑戰(zhàn)的對(duì)手：第三代火影 最愛的人：樹 弟).興趣：賭博、喝酒</p><imgsrc="images/zilai.jpg"><p>自來也簡介 姓名：自來也自來也 日文名：じらいや 羅馬拼音：查克拉屬性：火、土 籍貫：火之國的木葉忍者村 聲優(yōu)：大冢芳忠忍者登記號(hào)碼：002301 出生日期：11/11（卒年歲，天蝎座） 祭日：200712月21日 身高：191.5CM 體重：89.5KG ：B 發(fā)型；白色刺猬頭 綽號(hào)蛤蟆仙人，超級(jí)大色鬼，好色仙人（鳴人叫的），小自來也 喜愛的食物：蒜蓉紫酥，炸雞，腌蘿卜 討厭的食物：奇異果，奶汁烤菜，蘿卜沙拉、煎蛋 的對(duì)手：第三代火影 想追回的伙伴：大蛇丸因偷學(xué)禁,被發(fā)現(xiàn),逃出木葉但自來也放棄了!喜愛的字句自由奔放 師傅三代目火影 父親長門，彌彥，小南，鳴人</p><imgsrc="images/dashe.jpg"><p>大蛇丸簡介 〖姓名〗大蛇丸 〖日文名〗おろちまる 〖羅馬音譯〗:Orochimaru 〖解讀〗:Orochi大蛇）maru（丸） 〖忍者登陸番號(hào)〗:002300 〗赤砂之蝎、宇智波鼬 師傅〗三代目火影（猿飛日斬） 〖曉組織代號(hào)空陳 〖戒指:空 〖戒指佩戴位置:右手小拇指 靈獸萬蛇 〖出生日期） 〖討厭的食物:冷的東西 〖身高〗:179.4cm(50歲) 〖身高〗:172.0cm(54歲):57.3kg〖血液型〗:B（以前（現(xiàn)在）（以前（現(xiàn)在）〖性“”?！既叹摺?草薙劍〖特點(diǎn)〗:三代目火影的弟子，傳說中的三忍之）〖忍者學(xué)校畢業(yè)年齡〗〖中忍升級(jí)年齡〗:？〖人物經(jīng)驗(yàn)〗:D-16、C-332、B-521、A-491、S-108〖八項(xiàng)數(shù)值〗:忍-10體-7賢-10幻-10力-7速-9精-7印10總計(jì)70（滿分80）〖日語聲優(yōu)〗:松本和香子，少年時(shí)期：山口真弓，女人時(shí)：小島幸子〖實(shí)力〗:超S</p></div></div></div></div></div><divid="flink"><a\hhref="/?hy"><imgsrc="images/1395332_op90.jpg"width="90"height="33"alt="logo"/></a><a\hhref="/"><imgsrc="images/1395332_zwdzjs.jpg"width="90"height="33"alt="logo"/></a><a\hhref="/"><imgsrc="images/logo.jpg"width="90"height="33"alt="logo"/></a><a\hhref="/"><imgsrc="images/logo.jpg"width="90"height="33"alt="logo"/></a><a\hhref="/"><imgsrc="images/1661963_17dm.jpg"width="90"height="30"alt="logo"/></a></div></body></html>⑤.t