(完整)《旅游網(wǎng)》網(wǎng)頁(yè)設(shè)計(jì) 實(shí)訓(xùn)報(bào)告

1、（完整）旅游網(wǎng)網(wǎng)頁(yè)設(shè)計(jì)實(shí)訓(xùn)報(bào)告武漢交通職業(yè)學(xué)院網(wǎng)頁(yè)設(shè)計(jì)（二）綜合實(shí)訓(xùn)報(bào)告設(shè)計(jì)題目：“旅游網(wǎng)”制作系部：電子信息工程息專(zhuān)業(yè)班級(jí)：計(jì)算機(jī)應(yīng)用技術(shù)（1）班指導(dǎo)教師：*沃學(xué)生姓名：*學(xué)號(hào)：使用學(xué)期：2015年6月2016年1月旅游網(wǎng)實(shí)訓(xùn)報(bào)告一.實(shí)訓(xùn)意義：網(wǎng)頁(yè)設(shè)計(jì)與制作綜合實(shí)訓(xùn)是教學(xué)過(guò)程中重要的實(shí)踐性教學(xué)環(huán)節(jié)。它是根據(jù)專(zhuān)業(yè)教學(xué)計(jì)劃的要求。在教師的指導(dǎo)下對(duì)學(xué)生進(jìn)行網(wǎng)頁(yè)制作專(zhuān)業(yè)技能的訓(xùn)練，培養(yǎng)學(xué)生綜合運(yùn)用理論知識(shí)分析和解決實(shí)際問(wèn)題的能力，實(shí)現(xiàn)由理論知識(shí)向操作技能的培養(yǎng)過(guò)程。因此加強(qiáng)實(shí)踐教學(xué)環(huán)節(jié),搞好實(shí)訓(xùn)教學(xué),對(duì)實(shí)現(xiàn)本專(zhuān)業(yè)的培養(yǎng)目標(biāo)，提高學(xué)生的綜合素質(zhì)有著重要的作用。二.實(shí)訓(xùn)目的:通過(guò)綜合實(shí)訓(xùn)進(jìn)一步鞏固，深化

2、和加強(qiáng)學(xué)生的理論知識(shí)于專(zhuān)業(yè)技能.（1）掌握規(guī)劃網(wǎng)站的內(nèi)容結(jié)構(gòu)，目錄結(jié)構(gòu)，鏈接結(jié)構(gòu)的方法.（2）掌握表單網(wǎng)頁(yè)制作方法。（3）掌握網(wǎng)頁(yè)特效制作方法。（4）掌握js基本語(yǔ)法。（5）掌握獲取元素，元素值,子元素,父元素的方法。（6）掌握表單的驗(yàn)證方法,計(jì)算等。2。訓(xùn)練和培養(yǎng)學(xué)生獲取信息和處理信息的能力，充分培養(yǎng)和提高學(xué)生的動(dòng)手能力，學(xué)會(huì)通過(guò)網(wǎng)站、書(shū)籍素材光盤(pán)等方式收集所需的文字資料、圖像資料、Flash動(dòng)畫(huà)和網(wǎng)頁(yè)特效等。3。培養(yǎng)學(xué)生運(yùn)用所學(xué)的理論知識(shí)和技能解決網(wǎng)站開(kāi)發(fā)過(guò)程中所遇到的實(shí)際問(wèn)題的能力及基本工作素質(zhì)。培養(yǎng)學(xué)生理論聯(lián)系實(shí)際的工作作風(fēng),嚴(yán)肅認(rèn)真的科學(xué)態(tài)度以及獨(dú)立工作的能力,樹(shù)立自信心。三實(shí)驗(yàn)步驟

3、1。網(wǎng)站主題我的網(wǎng)站的主題在于從各個(gè)方面全面的介紹網(wǎng)絡(luò)游戲?qū)ｎ}，包括每個(gè)頁(yè)面都有介紹不同的游戲資料，、心得、圖片等內(nèi)容.同時(shí)，網(wǎng)站里的每一個(gè)網(wǎng)頁(yè)都有統(tǒng)一的風(fēng)格，每一個(gè)網(wǎng)頁(yè)的主題色彩都是淺藍(lán)色,給人帶來(lái)一種溫和舒適的感覺(jué)。最重要給瀏覽者好的欣賞感受。2網(wǎng)站材料網(wǎng)站材料主要在網(wǎng)站上搜集所要的網(wǎng)頁(yè)信息，包括圖片、文字、相關(guān)的資料。同時(shí)，查詢(xún)相關(guān)的書(shū)籍百度和素材光盤(pán)等方式收集所需的文字資料，圖像資料,網(wǎng)頁(yè)特效等，用以得來(lái)更加具有說(shuō)服力的頁(yè)面。想要做好自己的網(wǎng)站,就要盡量搜集材料,搜集材料越多，以后制作網(wǎng)站就越容易。精選自己收集的材料，作為自己制作網(wǎng)頁(yè)的素材，這樣就可以做好一個(gè)好的網(wǎng)站。3網(wǎng)站規(guī)劃我的網(wǎng)

4、站共有7個(gè)主頁(yè)面：首頁(yè)、瀏覽頁(yè)面1、瀏覽頁(yè)面2、詳細(xì)頁(yè)面、購(gòu)物車(chē)、登陸頁(yè)面、注冊(cè)頁(yè)面。每一個(gè)頁(yè)面都有著自己的獨(dú)特背景，以保證網(wǎng)站風(fēng)格多樣化，增加瀏覽者的好感.四、網(wǎng)站介紹(完整)旅游網(wǎng)網(wǎng)頁(yè)設(shè)計(jì)實(shí)訓(xùn)報(bào)告(完整)旅游網(wǎng)網(wǎng)頁(yè)設(shè)計(jì)實(shí)訓(xùn)報(bào)告旅店現(xiàn)新選揮膽遍11;水住自未盂業(yè)sfiWfibgosrc二”images/bg”+xh+”jpg”；,4000)；濫遍山:LzTFm.nm.芒二?；ァⅲ?ms:心：.我心的齊人罐區(qū)融熾SFJ&iSr:R1帀股window。onload=funetion()/打開(kāi)頁(yè)面時(shí)自動(dòng)執(zhí)行函數(shù)首頁(yè)前端采用的幻燈片播放特效，實(shí)現(xiàn)特效代碼如下scripttype二”text/java

5、script”/window.onload含義為打開(kāi)window.onload二(setinterval(function。頁(yè)面自動(dòng)頁(yè)面自動(dòng)執(zhí)行語(yǔ)句。varbg=document.getElementByid(bg”);利用getElementByid方法獲取varxh二Math.floor(Math。random()*5+1);元素對(duì)象/Mathorandom()函數(shù)獲取隨機(jī)數(shù)/bg.src二images/bg”+xh+”.jpg此語(yǔ)句用來(lái)跟換圖片，實(shí)現(xiàn)圖片切效果。vara=documentgetEtmentByldCxiamia/用;getElementByld方法獲取對(duì)象/用“。號(hào)獲取a

6、對(duì)象下所有的img對(duì)象（完整）旅游網(wǎng)網(wǎng)頁(yè)設(shè)計(jì)實(shí)訓(xùn)報(bào)告（完整）旅游網(wǎng)網(wǎng)頁(yè)設(shè)計(jì)實(shí)訓(xùn)報(bào)告varp二a.getElementsByTagName(img”);for(vari=0;ip.length;i+)pi.index=i;/給事件對(duì)象添加屬性值pi。onmouseover二function()for(vari=0;ip。length;i+)pi.style.opacity二”1”this.style.opacity二0.5;；/script導(dǎo)航條特效:/調(diào)用了外部JS文件，方面獲取對(duì)象和元素$(function()$(。nav).children(”li:has(ul).hove/(鼠標(biāo)滑o過(guò)那

7、一項(xiàng)顯示那個(gè)項(xiàng)的下一級(jí)$(this).children(”ul).slideDown(300);菜單300是用來(lái)控制顯示下級(jí)菜單的,funetion()$(this).children(ul)。h速度(時(shí)間)；)；瀏覽頁(yè)面仁查持蹭線(xiàn)現(xiàn)在ja為選項(xiàng)卡特效：scripttype=”text/javascript”window.onload二function()/window.onload打開(kāi)頁(yè)面時(shí)自動(dòng)執(zhí)行函數(shù)vara=document。getElementByld(xiamian);/用getElementByld獲取id號(hào)來(lái)獲取對(duì)象varb=document.getElementByld(cha

8、);/用getElementByld獲取id號(hào)來(lái)獲取對(duì)象varp=aogetElementsByTagName(”input”)；/用getElementsByTagName獲取標(biāo)簽獲取對(duì)象vard=aogetElementsByTagName(div);/用getElementsByTagName獲取標(biāo)簽獲取對(duì)象varc=b.getElementsByTagName(input”)；/用getElementsByTagName獲取標(biāo)簽獲取對(duì)象for(vari=0；ip。length;i+)pi.index=i；/給事件對(duì)象添加屬性值pi.onmouseover=function(;for(v

9、ari=0；ip.length；i+)diostyleodisplay二”none;/將鼠標(biāo)未滑過(guò)時(shí)的對(duì)應(yīng)的div全部隱藏起來(lái)pi.className=”；this.className=”bt2”；dthis。indexstyle.display二”block”/將鼠標(biāo)滑過(guò)時(shí)的對(duì)應(yīng)的div顯示出來(lái)；for(vari=0；ic。length；i+)ci.index二i;/給事件對(duì)象添加屬性值ci。onmouseover二function()for(vari=0;ip.length；i+)ci.styleobackgroundColor二”#FFFFFF/改變鼠標(biāo)未滑過(guò)時(shí)的對(duì)應(yīng)元素的背景色this

10、。style.backgroundColor二#27B7CF;/改變鼠標(biāo)滑過(guò)時(shí)的對(duì)應(yīng)元素的背景色;；圖片上一張下一張切換特效$(function()$(#back).toggle(funetion()/此函數(shù)是當(dāng)鼠標(biāo)單擊#tp對(duì)象時(shí)依次切換圖片實(shí)$(#tp).attr(src,images/j7。jpg);現(xiàn)上一張的效果/$(”#tp)。attr(title,this.src)；TOC o 1-5 h z,function。$(”#tp).attr(”src,”images/j6。jpg);$(”#tp).attr(title”，this。src);,function()$(#tp”).att

11、r(src,”images/j5.jpg”);$(#tp).attr(title”，this.src);,function()$(#tp”).attr(src,”images/j4.jpg)；$(img)oattr(”title,this。src);,function()$(#tp)。attr(src,images/j3.jpg);$(#tp”).attr(title,this.src);,function。$(#tp”)。attr(src,”images/j2。jpg);$(#tp).attr(title,this.src);,function。$(#tp).attr(src,images/

12、j1ojpg);$(#tp)。attr(title,this.src);)$(#ff)otoggle(funetion()/此函數(shù)是當(dāng)鼠標(biāo)單擊#tp對(duì)象時(shí)依次切換圖片實(shí)現(xiàn)$(#tp).attr(src,images/j7jpg)；下一張的效果/$(#tp)。attr(src,images/j1。jpg);$(#tp)。attr(title,this。src);,function。$(#tp).attr(src,images/j2.jpg);$(#tp)。attr(title,this.src);,function。$(#tp).attr(src,images/j3jpg);$(#tp).att

13、r(title,this。src);,function()$(#tp).attr(src,images/j4.jpg);$(#tp)。attr(title,this。src);,function()$(#tp)attr(src,images/j5jpg);$(#tp).attr(title,this.src);,function。$(#tp).attr(src,images/j6。jpg);$(#tp)。attr(title,this.src);,function。$(#tp)attr(src,images/j7。jpg);$(#tp)oattr(title,this.src););瀏覽頁(yè)面2

14、:飯傘劇凄尚（完整）旅游網(wǎng)網(wǎng)頁(yè)設(shè)計(jì)實(shí)訓(xùn)報(bào)告(完整)旅游網(wǎng)網(wǎng)頁(yè)設(shè)計(jì)實(shí)訓(xùn)報(bào)告當(dāng)鼠標(biāo)滑過(guò)對(duì)應(yīng)的地區(qū)時(shí)，下方會(huì)顯示對(duì)應(yīng)地區(qū)的景點(diǎn)優(yōu)惠，報(bào)價(jià)，圖片等信息,并且鼠標(biāo)滑到哪張圖片該圖片會(huì)自動(dòng)增添一個(gè)邊框。特效代碼：scripttype=”text/javascriptwindow.onload=function()vard=document。getElementByld(w);/用getElementByld方法獲取對(duì)象varb=dgetElementsByClassName(id1);/用。getElementsByClassName方法獲取d對(duì)象varp=document。getElementsByTa

15、gName(input”);下的元素/for(vari=0;ip。length；i+)pi。index二i;/給事件對(duì)象添加屬性值pi.onmouseover=function()/鼠標(biāo)滑過(guò)時(shí)執(zhí)行以下函數(shù)for(vari=0;ip.length;i+)bistyle.display二none;/將鼠標(biāo)未滑過(guò)時(shí)的對(duì)應(yīng)的盒子全部隱藏起來(lái)bthis。index.styledisplay二block”；/將鼠標(biāo)滑過(guò)時(shí)的對(duì)應(yīng)的盒子顯示出來(lái);/script詳細(xì)頁(yè)面：北京御馬前.中國(guó)東北轄名山朦,瞳東北三省東址-西童走向是中朝暮山舊頭山之名起源于申國(guó)，據(jù)李朝實(shí)錄卜肅宗十八年（1通2）條云：長(zhǎng)白山”険人或稱(chēng)白

16、頭山r以辰白如也.J，所渭胡人”播指即是衣真人、；駆人。可見(jiàn)白頭M同”長(zhǎng)白山”一樣,皆星由中國(guó)人命名的.舊頭送意,也是漢普肘黍謔萬(wàn)式，意即遠(yuǎn)里此山,所見(jiàn)之山頂為白魚(yú)恰如H魚(yú)的頭故名。全療七日游冀食、蹄、住stm800/當(dāng)鼠標(biāo)滑過(guò)左側(cè)照片是右側(cè)顯示對(duì)應(yīng)景點(diǎn)的相關(guān)信息，包過(guò)圖片景點(diǎn)描述windowoonload二function。vara=document.getElementByld(zw”)。getElementsByTagName(img);/先用.getElementByld方法獲取id號(hào)zw的對(duì)象在用getElementsByTagName方法獲取zw對(duì)象下img標(biāo)簽對(duì)象/varb=do

17、cument.getElementByld(”hezi)ogetElementsByTagName(”div)/先用。getElementByld方法獲取id號(hào)hezi的對(duì)象在用getElementsByTagName方法獲取zw對(duì)象下div標(biāo)簽對(duì)象/index=i；/給事件對(duì)象添加屬性值for(vari=0;ia。length;i+)ai。ai。onmouseover二function()for(vari=0;ia。length;i+)bi.styleodisplay二”none”；/將鼠標(biāo)未滑過(guò)時(shí)的對(duì)應(yīng)的div全部隱藏起來(lái)bthis.index。styledisplay二”block”/將

18、鼠標(biāo)滑過(guò)時(shí)的對(duì)應(yīng)的div顯示出來(lái)；/script購(gòu)物車(chē)頁(yè)面:【元BE爾】上紳刪耐出苣毛里歡斯注逅色7天Effif?QLj_【元旦E畫(huà)】上辭杭州耐出苣毛里農(nóng)斯注逅E/7天電曲疔1E胡T:-上禹自修_【元且/圧|擬上副討京也總毛里彌破研悲曰廳畑0八購(gòu)物車(chē)只要包括全選特效，增加、減少特效，結(jié)算，計(jì)算總價(jià)特效增加數(shù)量特效functionjia()vara=documentgetElementByld(”sl”).value;/通過(guò)getElementByld(sl).對(duì)象的值varb二parselnt(a)+1;/每當(dāng)點(diǎn)擊按鈕書(shū)對(duì)象的值加1document。getElementByld(”sl”)。v

19、alue二b+;/將計(jì)算出了的值再付給原來(lái)的對(duì)if(b=20)象顯示出來(lái)documentogetElementById(sl).value=20;/通過(guò)if語(yǔ)句來(lái)判斷值，從而來(lái)控制最大值減少數(shù)量特效functionjian1()vara=documentgetElementByld(”sl1).value;/通過(guò)getElementByld(sl).對(duì)象的值varb=parselnt(a)1;/每當(dāng)點(diǎn)擊按鈕書(shū)對(duì)象的值減1document.getElementByld(”sl1”)。value二b+;/將計(jì)算出了的值再付給原來(lái)的對(duì)if(b=0)象顯示出來(lái)documentgetElementByl

20、d(”sl1).value=0;/通過(guò)if語(yǔ)句來(lái)判斷值，從而來(lái)控制最小值計(jì)算總價(jià)特效：functionjs()varjiage二documentgetElementByld(jiage”).value;獲取id對(duì)象的值varqx2二document。getElementsByName(xz”)；用getElementsByName方法獲取對(duì)象vara1二parselnt(document.getElementByld(sl”).value);獲取id對(duì)象的值vara2=parselntvara3=parselntvara4=parselntvara5=parselntvara6=parseln

21、t(documentgetElementByld(sl1).value);獲取id對(duì)象的值(documentogetElementByld(sl2)。value);獲取id對(duì)象的值(document。getElementByld(sl3).value);獲取id對(duì)象的值(documentogetElementByld(sl4)。value);/獲取id對(duì)象的值(document.getElementByld(sl5).value);/獲取id對(duì)象的值varb1=0；varb2=0;varb3=0；varb4=0;varb5=0；varb6=0;varsum=0；if(qx20.checked=

22、true)b1=a1*899;/計(jì)算第一行記錄的值elseb1=0;if(qx21。checked=true)b2=a2*1888;/計(jì)算第二行記錄的值elseb2=0；if(qx22.checked=true)b3=a3*300;/計(jì)算第三行記錄的值elseb3=0;if(qx23.checked=true)b4=a4*600；/計(jì)算第四行記錄的值elseb4=0；if(qx24.checked=true)b5=a5*2094;/計(jì)算第五行記錄的值elseb5=0；if(qx25。checked二二true)b6=a6*1049；/計(jì)算第六行記錄的值elseb1=0;sum=b1+b2+b3

23、+b4+b5+b6+;/將所有記錄行的值相加求和documentogetElementByld(jiage)。value=+sum;再將計(jì)算出來(lái)的值付給相應(yīng)的alert(結(jié)算成功！+sum);彈出提示對(duì)話(huà)框?qū)ο笕x特效:functionquanxuan()varqx1=document.getElementByld(qx);/通過(guò)getElementByld(si).對(duì)象varqx2=document.getElementsByName(xz);/通過(guò)getElementsByName對(duì)象for(vari=0；i=4&a1.length=20)if(a2.length=4&a2.length=

24、16)控制用戶(hù)名必須在420位if(a2=a3)判斷第二次輸入的密碼與第一輸入的密碼是否一致if(a4length=11)/控制電話(huà)號(hào)碼必須在11位數(shù)汗(a5!=)/判斷驗(yàn)證碼是否為空alert(用戶(hù)注冊(cè)成功！”+”n”+”您的用戶(hù)名：+a1+”n”+”您的密碼為：+a2);window。open(denglu.html);/當(dāng)用戶(hù)注冊(cè)成功之后自動(dòng)跳到登陸界面elsealert(”電話(huà)號(hào)碼格式錯(cuò)誤!”)；/輸出提示信息elsealert(-密碼輸入不一致，請(qǐng)重新輸入“)；a3=;/輸出提示信息elsealert(”密碼最少4個(gè)字符，最多16字符);/輸出提示信息elsealert(”用戶(hù)名最少4個(gè)字符，最多16字符);/輸出提示信息；登陸界面:本章頁(yè)面主要是對(duì)用戶(hù)名和密碼的格式字符進(jìn)行判