《旅游網(wǎng)》網(wǎng)頁設(shè)計-實(shí)訓(xùn)報告(共14頁)

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

2、訓(xùn)目的:1. 通過綜合實(shí)訓(xùn)進(jìn)一步鞏固,深化和加強(qiáng)學(xué)生的理論知識于專業(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)掌握表單的驗(yàn)證方法，計算等。2. 訓(xùn)練和培養(yǎng)學(xué)生獲取信息和處理信息的能力,充分培養(yǎng)和提高學(xué)生的動手能力,學(xué)會通過網(wǎng)站、書籍、素材光盤等方式收集所需的文字資料、圖像資料、Flash動畫和網(wǎng)頁特效等。3. 培養(yǎng)學(xué)生運(yùn)用所學(xué)的理論知識和技能解決網(wǎng)站開發(fā)過程中所遇到的實(shí)際問題的能力及基本工作素質(zhì)。4. 培養(yǎng)學(xué)生理論聯(lián)系實(shí)際的工作作風(fēng),嚴(yán)肅認(rèn)

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

4、制作網(wǎng)頁的素材，這樣就可以做好一個好的網(wǎng)站。3 網(wǎng)站規(guī)劃 我的網(wǎng)站共有7個主頁面：首頁、瀏覽頁面1、瀏覽頁面2、詳細(xì)頁面、購物車、登陸頁面、注冊頁面。每一個頁面都有著自己的獨(dú)特背景，以保證網(wǎng)站風(fēng)格多樣化，增加瀏覽者的好感。四、網(wǎng)站介紹一、首頁：/window.onload 含義為打開頁面自動頁面自動執(zhí)行語句。/利用getElementById方法獲取元素對象/ Math.random()函數(shù)獲取隨機(jī)數(shù)/ bg.src="images/bg"+xh+".jpg"此語句用來跟換圖片，實(shí)現(xiàn)圖片切效果。首頁前端采用的幻燈片播放特效，實(shí)現(xiàn)特效代碼如下<scr

5、ipt type="text/javascript">window.onload=(setInterval(function() var bg=document.getElementById("bg");var xh=Math.floor(Math.random()*5+1);bg.src="images/bg"+xh+".jpg",4000);<script>鼠標(biāo)滑過圖片圖特效：<script type="text/javascript">window.onloa

6、d=function() /打開頁面時自動執(zhí)行函數(shù)/用getElementById方法獲取對象/用“.”號獲取a 對象下所有的img對象/p.length 得到對象P 的長度/onmouseover鼠標(biāo)劃過時執(zhí)行函數(shù)/將未滑過的鼠標(biāo)的透明度改為1(不透明)/鼠標(biāo)滑過的圖片透明度改為0.5（半透明）var a=document.getElementById("xiamian"); var p=a.getElementsByTagName("img");for(var i=0;i<p.length;i+) pi.index=i;/給事件對象添加屬性值

7、pi.onmouseover=function() for(var i=0;i<p.length;i+) pi.style.opacity="1" this.style.opacity="0.5" ;</script>導(dǎo)航條特效：<script type="text/javascript" src="js/jquery.js"></script> /調(diào)用了外部JS文件，方面獲取對象和元素/鼠標(biāo)滑過那一項(xiàng)顯示那個項(xiàng)的下一級菜單 300 是用來控制顯示下級菜單的速度 時間$(f

8、unction()$('.nav').children("li:has(ul)").hover(function() $(this).children("ul").slideDown(300); ,function()$(this).children("ul").hide(); ););瀏覽頁面1：選項(xiàng)卡特效：<script type="text/javascript">window.onload=function() / window.onload 打開頁面時自動執(zhí)行函數(shù)var a=d

9、ocument.getElementById("xiamian"); /用 getElementById獲取id號來獲取對象var b=document.getElementById("cha"); /用 getElementById獲取id號來獲取對象var p=a.getElementsByTagName("input"); /用 getElementsByTagName獲取標(biāo)簽獲取對象var d=a.getElementsByTagName("div"); /用 getElementsByTagName獲取標(biāo)

10、簽獲取對象var c=b.getElementsByTagName("input"); /用 getElementsByTagName獲取標(biāo)簽獲取對象 for(var i=0;i<p.length;i+) pi.index=i; /給事件對象添加屬性值 pi.onmouseover=function() for(var i=0;i<p.length;i+) di.style.display="none" /將鼠標(biāo)未滑過時的對應(yīng)的div 全部隱藏起來 pi.className="" this.className="

11、bt2" dthis.index.style.display="block" /將鼠標(biāo)滑過時的對應(yīng)的div 顯示出來; for(var i=0;i<c.length;i+) ci.index=i; /給事件對象添加屬性值 ci.onmouseover=function() for(var i=0;i<p.length;i+) ci.style.backgroundColor="#FFFFFF" /改變鼠標(biāo)未滑過時的對應(yīng)元素的背景色 this.style.backgroundColor="#27B7CF" /改變鼠

12、標(biāo)滑過時的對應(yīng)元素的背景色; ;圖片上一張 下一張 切換特效$(function() $("#back").toggle(function() /此函數(shù)是當(dāng)鼠標(biāo)單擊#tp 對象時依次切換圖片實(shí) $("#tp").attr("src", "images/j7.jpg"); 現(xiàn)上一張的效果/ $("#tp").attr("title", this.src);, function() $("#tp").attr("src", "im

13、ages/j6.jpg"); $("#tp").attr("title", this.src);, function() $("#tp").attr("src", "images/j5.jpg"); $("#tp").attr("title", this.src);, function() $("#tp").attr("src", "images/j4.jpg"); $("im

14、g").attr("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"

15、;, this.src); , function() $("#tp").attr("src", "images/j1.jpg"); $("#tp").attr("title", this.src); ) $("#ff").toggle(function() /此函數(shù)是當(dāng)鼠標(biāo)單擊#tp 對象時依次切換圖片實(shí)現(xiàn) $("#tp").attr("src", "images/j7.jpg"); 下一張的效果/ $("

16、#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&qu

17、ot;, "images/j3.jpg"); $("#tp").attr("title", this.src);, function() $("#tp").attr("src", "images/j4.jpg"); $("#tp").attr("title", this.src);, function() $("#tp").attr("src", "images/j5.jpg"

18、); $("#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(&qu

19、ot;title", this.src); );</script>瀏覽頁面2：當(dāng)鼠標(biāo)滑過對應(yīng)的地區(qū)時，下方會顯示對應(yīng)地區(qū)的景點(diǎn) 優(yōu)惠，報價，圖片等信息，并且鼠標(biāo)滑到哪張圖片，該圖片會自動增添一個邊框。特效代碼：<script type="text/javascript">window.onload=function()var d=document.getElementById("w"); /用getElementById方法獲取對象var b=d.getElementsByClassName("id1"

20、;); /用.getElementsByClassName方法獲取d對象var p=document.getElementsByTagName("input"); 下的元素 /for(var i=0;i<p.length;i+) pi.index=i; /給事件對象添加屬性值 pi.onmouseover=function() /鼠標(biāo)滑過時執(zhí)行以下函數(shù) for(var i=0;i<p.length;i+) bi.style.display="none" /將鼠標(biāo)未滑過時的對應(yīng)的盒子全部隱藏起來 bthis.index.style.displa

21、y="block" /將鼠標(biāo)滑過時的對應(yīng)的盒子顯示出來; </script>詳細(xì)頁面：當(dāng)鼠標(biāo)滑過左側(cè)照片是 右側(cè)顯示對應(yīng)景點(diǎn)的相關(guān)信息，包過圖片 景點(diǎn)描述window.onload=function()var a=document.getElementById("zw").getElementsByTagName("img");/先用.getElementById方法獲取id 號 zw的對象 在用getElementsByTagName方法獲取zw對象下img 標(biāo)簽對象/var b=document.getElementB

22、yId("hezi").getElementsByTagName("div")/先用.getElementById方法獲取id 號hezi的對象 在用getElementsByTagName方法獲取zw對象下div標(biāo)簽對象/for(var i=0;i<a.length;i+) ai.index=i;/給事件對象添加屬性值 ai.onmouseover=function() for(var i=0;i<a.length;i+) bi.style.display="none" /將鼠標(biāo)未滑過時的對應(yīng)的div 全部隱藏起來 bt

23、his.index.style.display="block" /將鼠標(biāo)滑過時的對應(yīng)的div 顯示出來; </script>購物車頁面：購物車只要包括 全選特效 ，增加、減少特效 ，結(jié)算， 計算總價特效增加數(shù)量特效function jia()var a=document.getElementById("sl").value; /通過getElementById("sl").對象的值var b=parseInt(a)+1; /每當(dāng)點(diǎn)擊按鈕書對象的值加1 document.getElementById("sl&quo

24、t;).value=b+"" /將計算出了的值再付給原來的對 if(b>=20) 象顯示出來document.getElementById("sl").value=20; /通過if 語句來判斷值，從而來控制最大值減少數(shù)量特效function jian1()var a=document.getElementById("sl1").value; /通過getElementById("sl").對象的值var b=parseInt(a)-1;/每當(dāng)點(diǎn)擊按鈕書對象的值減1 document.getElementBy

25、Id("sl1").value=b+"" /將計算出了的值再付給原來的對if(b<=0) 象顯示出來 document.getElementById("sl1").value=0; /通過if 語句來判斷值，從而來控制最小值計算總價特效：function js()var jiage=document.getElementById("jiage").value; /獲取id對象的值var qx2=document.getElementsByName("xz"); /用getElementsB

26、yName方法獲取對象var a1=parseInt(document.getElementById("sl").value);/獲取id對象的值 var a2=parseInt(document.getElementById("sl1").value); /獲取id對象的值var a3=parseInt(document.getElementById("sl2").value); /獲取id對象的值var a4=parseInt(document.getElementById("sl3").value); /獲取

27、id對象的值var a5=parseInt(document.getElementById("sl4").value); /獲取id對象的值var a6=parseInt(document.getElementById("sl5").value); /獲取id對象的值var b1=0;var b2=0;var b3=0;var b4=0;var b5=0;var b6=0; var sum=0;if(qx20.checked=true) b1=a1*899; /計算第一行記錄的值elseb1=0;if(qx21.checked=true) b2=a2*1

28、888; /計算第二行記錄的值 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+b4+b5+b6+"" /將所有記錄行的值相加求和document.ge

29、tElementById("jiage").value="¥"+sum; /再將計算出來的值付給相應(yīng)的alert("結(jié)算成功！"+sum); /彈出提示對話框 對象全選特效：function quanxuan()var qx1=document.getElementById("qx"); /通過getElementById("sl").對象 var qx2=document.getElementsByName("xz"); /通過getElementsByName對

30、象 for(var i=0;i<qx2.length;i+) /利用循環(huán)語句判斷是否被選中，如未被選中，就 if(qx1.checked=true) 選中該對象，一次執(zhí)行從而實(shí)現(xiàn)全選效果/ qx2i.checked=true; elseqx2i.checked=false; 刪除記錄行功能var sc=document.getElementsByClassName("sc"); /通過getElementsByName對象 var tr=document.getElementsByTagName('table')0.getElementsByTagNa

31、me('tbody')0.getElementsByTagName('tr'); for(z=0;z<sc.length;z+)scz.index=z;scz.onclick=function()this.parentNode.parentNode.parentNode.removeChild(this.parentNode); /通過尋找父標(biāo)簽的方法找到需要刪除的記錄行，將其刪除注冊頁面：本張網(wǎng)頁這樣是對表單的數(shù)據(jù)判斷，計算，控制，將不符合規(guī)則的值攔截在外function zhuce()var a1=document.getElementById(&qu

32、ot;yong").value;/獲取id對象的值 var a2=document.getElementById("mima").value; /獲取id對象的值 var a3=document.getElementById("mima1").value; /獲取id對象的值 var a4=document.getElementById("mima2").value; /獲取id對象的值 var a5=document.getElementById("mima3").value; /獲取id對象的值 va

33、r a6=document.getElementById("xy").value; /獲取id對象的值 if(a1.length>=4&&a1.length<=20) if(a2.length>=4&&a2.length<=16) /控制用戶名必須在420位 if( a2=a3) /判斷第二次輸入的密碼與第一輸入的密碼是否一致 if(a4.length=11) /控制電話號碼必須在11位數(shù) if(a5!="") /判斷驗(yàn)證碼是否為空 alert("用戶注冊成功！"+"n"+"您的用戶名："+a1+"n"+"您的密碼為："+a2); window.open("denglu.html"); /當(dāng)用戶注冊成功之后自動跳到登陸界面 else alert("電話號碼格式錯誤！");/輸