(完整)《旅游網(wǎng)》網(wǎng)頁設計 實訓報告

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

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

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

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

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

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

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

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

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

10、。style.backgroundColor二#27B7CF;/改變鼠標滑過時的對應元素的背景色;；圖片上一張下一張切換特效$(function()$(#back).toggle(funetion()/此函數(shù)是當鼠標單擊#tp對象時依次切換圖片實$(#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ù)是當鼠標單擊#tp對象時依次切換圖片實現(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););瀏覽頁面2

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

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

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

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

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

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

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

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

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

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

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