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

1、武漢交通職業(yè)學(xué)院網(wǎng)頁(yè)設(shè)計(jì)（二）綜合實(shí)訓(xùn)報(bào)告設(shè)計(jì)題目：“旅游網(wǎng)”制作系部：電子信息工程息專業(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é)過程中重要的實(shí)踐性教學(xué)環(huán)節(jié).它是根據(jù)專業(yè)教學(xué)計(jì)劃的要求.在教師的指導(dǎo)下對(duì)學(xué)生進(jìn)行網(wǎng)頁(yè)制作專業(yè)技能的訓(xùn)練,培養(yǎng)學(xué)生綜合運(yùn)用理論知識(shí)分析和解決實(shí)際問題的能力,實(shí)現(xiàn)由理論知識(shí)向操作技能的培養(yǎng)過程.因此加強(qiáng)實(shí)踐教學(xué)環(huán)節(jié),搞好實(shí)訓(xùn)教學(xué),對(duì)實(shí)現(xiàn)本專業(yè)的培養(yǎng)目標(biāo),提高學(xué)生的綜合素質(zhì)有著重要的作用.二.實(shí)訓(xùn)目的:通過綜合實(shí)訓(xùn)進(jìn)一步鞏固,深化和加強(qiáng)學(xué)生的理論知識(shí)于專業(yè)技能。掌握

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

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

4、注冊(cè)頁(yè)面。每一個(gè)頁(yè)面都有著自己的獨(dú)特背景，以保證網(wǎng)站風(fēng)格多樣化，增加瀏覽者的好感。一、首頁(yè)：別IE3.41劈1曲缶t歐之：旅居斥財(cái)新選擇濫且山水住自隸運(yùn)業(yè)耳擊iffS首頁(yè)前端采用的幻燈片播放特效，實(shí)現(xiàn)特效代碼如下/window.onload含義為打開window.onload=(setlnterval(function()頁(yè)面自動(dòng)頁(yè)面自動(dòng)執(zhí)行語(yǔ)句。利用getElementByld方法獲取元素對(duì)象Math.random()函數(shù)獲取隨機(jī)varbg=document.getElementById(bg);數(shù)/varxh=Mathfloor(Mathrandom()*5+1);bg.src=image

5、s/bg+xh+jpg;bg.src=images/bg+xh+.jpg此語(yǔ)句用來跟換圖片，實(shí)現(xiàn)圖片切效果。,4000);j&iriw-ri：I-.：i：b澇超赫I白家.-r:i.：mBiS-fii.：?-;：-.7：it我們的各大融聞鼠標(biāo)滑過圖片圖特效：window.onload=function（）/打開頁(yè)面時(shí)自動(dòng)執(zhí)行函數(shù)/用getElementByld方法獲取對(duì)象vara二document.getElementById(xiamian)用“”號(hào)獲取a對(duì)象下所有的img對(duì)象/p.length得到對(duì)象P的長(zhǎng)度varp=a.getElementsByTagName(img);/onmouseo

6、ver鼠標(biāo)劃過時(shí)執(zhí)行函數(shù)將未滑過的鼠標(biāo)的透明度改為1（不透明）for(vari=0;ip.length;i+)pi.index二i;給事件對(duì)象添加屬性值pi.onmouseover=function()鼠標(biāo)滑過的圖片透明度改為0.5（半透明）for(vari=O;ipength;i+)pi.style.opacity二Tthis.style.opacity二0.5;；導(dǎo)航條特效：調(diào)用了外部js文件，方面獲取對(duì)象和元素$(function()鼠標(biāo)滑過那一項(xiàng)顯示那個(gè)項(xiàng)的$(.nav).children(li:has(ul).hover(function()下一級(jí)菜單300是用來控制顯示下級(jí)菜單的速

7、度時(shí)間$(this).children(ul).slideDown(300);,function()$(this).children(ul).hide();););瀏覽頁(yè)面1：現(xiàn)在荻約與無側(cè)第n=1：J7;sH皆花江，si們江、函審?fù)鼋鷄m”初工兒孚與冰香輕孝地凹交當(dāng).誤施尢1和斧球空典里的白酒合體”選項(xiàng)卡特效：window.onload=function()/window.onload打開頁(yè)面時(shí)自動(dòng)執(zhí)行函數(shù)vara二document.getElementById(xiamian);用getElementByld獲取id號(hào)來獲取對(duì)象varb二document.getElementById(c

8、ha);用getElementByld獲取id號(hào)來獲取對(duì)象varp=a.getElementsByTagName(input);/用getElementsByTagName獲取標(biāo)簽獲取對(duì)象vard=a.getElementsByTagName(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(var

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

10、kgroundColor=#27B7CF;/改變鼠標(biāo)滑過時(shí)的對(duì)應(yīng)元素的背景;L：1片上一張下一張切換特效$(function()$(#back).toggle(function()此函數(shù)是當(dāng)鼠標(biāo)單擊#tp對(duì)象時(shí)依次切換圖片實(shí)$(#tp).attr(src,images/j7.jpg);現(xiàn)上一張的效果/$(#tp).attr(title,this.src);,function()$(#tp).attr(src,images/j6.jpg);S(善p=).atH=s-_e=、rhis.src)、functiono亠s(=#rp=).atH=srr=二mages/jwjpgjS(善p=).atH=s

11、-_e=、rhis.src)、functiono亠s(=#rp=).atH=srr=二mages/j4.jpg=)s(=img=).at=r(=ti-+_e_rhis.src)functiono亠s(=#rp=).atH=srr=二mages/jwjpgjS(善p=).atH=s-_e=、rhis.src)functiono亠s(=#rp=).atH=srr=二mages/j2.jpg=)S(善p=).atH=s-_e=、rhis.src)functiono亠s(=#rp=).atH=srr=二mages/jl.jpgjS(善p=).atH=s-_e=、rhis.src)s(=#ff=).-t

12、ogg-e(function()(、兵因磐砌味w4Bm=fctp誇鮒罠對(duì)為甘彌畫耳將皆S(爭(zhēng)p=).am(=sq=images/j7.jpgj-H崇吉毋廻、s(=#rp=).atH=srr=二mages/jl.jpgjS(善p=).atH=s-_e=、rhis.src)、functiono亠$(#tp).attr(src,images/j2.jpg);$(#tp).attr(title,this.src);,function()$(#tp).attr(src,images/j3.jpg);$(#tp).attr(title,this.src);,function()$(#tp).attr(sr

13、c,images/j4.jpg);$(#tp).attr(title,this.src);,function()$(#tp).attr(src,images/j5.jpg);$(#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).attr(title,this.src);)；瀏覽頁(yè)面2:內(nèi)地東菲潮鋼當(dāng)鼠標(biāo)滑過對(duì)應(yīng)的地區(qū)時(shí)，下方會(huì)顯示對(duì)應(yīng)地區(qū)的景點(diǎn)優(yōu)惠，報(bào)價(jià)，圖

14、片等信息，并且鼠標(biāo)滑到哪張圖片，該圖片會(huì)自動(dòng)增添一個(gè)邊框。特效代碼：window.onload=function()vard=documentgetElementById(w);/用getElementByid方法獲取對(duì)象varb=dgetElementsByClassName(id1);/用.getElementsByClassName方法獲取d對(duì)象varp=documentgetElementsByTagName(input);下的元素/for(vari=0;iplength;i+)piindex=i;/給事件對(duì)象添加屬性值pionmouseover=function()/鼠標(biāo)滑過時(shí)執(zhí)行以

15、下函數(shù)for(vari=0;iplength;i+)bi.style.display=none;/將鼠標(biāo)未滑過時(shí)的對(duì)應(yīng)的盒子全部隱藏起來bthis.index.style.display=block;/將鼠標(biāo)滑過時(shí)的對(duì)應(yīng)的盒子顯示出來;詳細(xì)頁(yè)面：金廉七日游葵氤卑注性令金包800/北京挪2前，中國(guó)東北的著容山棣，瞎東北三省東北-西南走向圣中朝顯山.”白頭nr之名起瀏于中國(guó)，屜勒李朝實(shí)錄肅宗十八年(1餌刀條云：“長(zhǎng)白山,眾人或稱白頭山r以長(zhǎng)白疲也.-所渭胡人質(zhì)指即是京真人、可見白頭di*同長(zhǎng)Bib樣,皆星曲中國(guó)人命名的，白頭之奩,也是漢語(yǔ)鬧恚謔萬(wàn)式，意即遠(yuǎn)至此山.所見之山頂為白色伽0魚旳頭故:已當(dāng)

16、鼠標(biāo)滑過左側(cè)照片是右側(cè)顯示對(duì)應(yīng)景點(diǎn)的相關(guān)信息，包過圖片景點(diǎn)描述window.onload=function()vara=document.getElementById(zw).getElementsByTagName(img);/先用.getElementByld方法獲取id號(hào)zw的對(duì)象在用getElementsByTgName方法獲取zw對(duì)象下img標(biāo)簽對(duì)象varb=document.getElementById(hezi).getElementsByTagName(div)/先用.getElementByld方法獲取id號(hào)hezi的對(duì)象在用getElementsByTgName方法獲取zw

17、對(duì)象下div標(biāo)簽對(duì)象for(vari=O;ia.length;i+)ai.index二i;給事件對(duì)象添加屬性值ai.onmouseover=function()for(vari=0;ia.length;i+)bi.style.display=none;/將鼠標(biāo)未滑過時(shí)的對(duì)應(yīng)的div全部隱藏起來bthis.index.style.display二block將鼠標(biāo)滑過時(shí)的對(duì)應(yīng)的div顯示出來;購(gòu)物車頁(yè)面：呂両品畠Wis地區(qū)期聽D【兀刃吞鬥據(jù)】上海用訓(xùn)京匕盪毎nQQ.莎一手聊送酚庁目白疔科99“1彌0【而刃毒三侵毘】上湯杭削/甬刊=1炭毛至viaafl.中敦聞珈天活行I1SB&-上耳:二*購(gòu)物車只要

18、包括全選特效，增加、減少特效，結(jié)算，計(jì)算總價(jià)特效增加數(shù)量特效functionjia()vara=documentgetElementById(sl)value;通過getElementById(sl)對(duì)象的值varb=parseInt(a)+1;/每當(dāng)點(diǎn)擊按鈕書對(duì)象的值加1documentgetElementById(sl)value=b+;/將計(jì)算出了的值再付給原if(b=20)來的對(duì)象顯示出來documentgetElementById(sl)value=20;通過if語(yǔ)句來判斷值，從而來控制最大值減少數(shù)量特效functionjian1()vara=documentgetElementBy

19、Id(sl1)value;/通過getElementById(sl).對(duì)象的值varb=parseInt(a)-1;/每當(dāng)點(diǎn)擊按鈕書對(duì)象的值減1documentgetElementById(sl1)value=b+;/將計(jì)算出了的值再付給原來的對(duì)if(bifo=!JBa)jo箸4XmuwN&sumui引護(hù)6R/：(zx.)3uieNAgs)u3ui3|3)36*U3uin3op=zxbjba箸趙(jsjpi心1U8LU引Bfflf/K.xb.)piAg;udui3|3；d6*;ueuin3op=TxbjbaJOuenxuenbuoipun鯽晦觀R瓏；(uins+.ifuins+.=en|eA(

20、.36eir.)piAg;ueuie|3；e6*;ueuin9opitti削融垛.-+9q+sq+w+Eq+zq+Tq=uins：O=Tqesp刖硏巻四埒紳44卩61巾J9“9q=papmip引乙xb“！U0=Sq9sp刖硏巻四!注紳446oz*se=sq(mn斗=papmip切乙xb“!elseqx2i.checked=false;刪除記錄行功能varsc=document.getElementsByClassName(sc);/通過getElementsByName對(duì)象vartr=document.getElementsByTagName(table)0.getElementsByTagName(tbody)0.getElementsByTagName(tr);for(z=0;zIKr&瀚m4220B宀5a2uua3)宀5a4ngthHHll)一一畐宀5a2NJSTSS一-+3-+ins:-+&+-SHM:+a2xwindowopen(dengchtm5、帳Bmst倉(cāng)餡叭sDa、asmWNN:(D登陸界面：本章頁(yè)面主要是對(duì)用戶名和密碼的格式字符進(jìn)行判斷，看書否符合用戶名或密碼要求新世界雄活遠(yuǎn)住用戶名忘i己無？立即注冊(cè)密碼functiondenglu()vara1=document.ge