【旅游網(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)告1 .實(shí)訓(xùn)意義：網(wǎng)頁(yè)設(shè)計(jì)與制作綜合實(shí)訓(xùn)是教學(xué)過(guò)程中重要的實(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í)際問(wèn)題的能力，實(shí)現(xiàn)由理論知識(shí)向操作技能的培養(yǎng)過(guò)程.因此加強(qiáng)實(shí)踐教學(xué)環(huán)節(jié),搞好實(shí)訓(xùn)教學(xué)，對(duì)實(shí)現(xiàn)本專業(yè)的培養(yǎng)目標(biāo)，提高學(xué)生的綜合素質(zhì)有著重要的作用.2 .實(shí)訓(xùn)目的：3 .通過(guò)綜合實(shí)訓(xùn)進(jìn)一步鞏固，深化和加強(qiáng)

2、學(xué)生的理論知識(shí)于專業(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ì)算等。4 .訓(xùn)練和培養(yǎng)學(xué)生獲取信息和處理信息的能力，充分培養(yǎng)和提高學(xué)生的動(dòng)手能力，學(xué)會(huì)通過(guò)網(wǎng)站、書籍、素材光盤等方式收集所需的文字資料、圖像資料、Flash動(dòng)畫和網(wǎng)頁(yè)特效等。5 .培養(yǎng)學(xué)生運(yùn)用所學(xué)的理論知識(shí)和技能解決網(wǎng)站開(kāi)發(fā)過(guò)程中所遇到的實(shí)際問(wèn)題的能力及基本工作素質(zhì)。6 .培養(yǎng)學(xué)生理論聯(lián)系實(shí)際的工作作風(fēng)，嚴(yán)肅認(rèn)真的科學(xué)態(tài)度以及獨(dú)立工作的能力，樹(shù)立自信心。三.

3、實(shí)驗(yàn)步驟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í) ，查詢相關(guān)的書籍、百度和素材光盤等方式收集所需的文字資料，圖像資料，網(wǎng)頁(yè)特效等，用以得來(lái)更加具有說(shuō)服力的頁(yè)面。 想要做好自己的網(wǎng)站，就要盡量搜集材料，搜集材料越多， 以后制作網(wǎng)站就越容易。 精選自己收集的材料， 作為自己制作網(wǎng)頁(yè)的素材， 這樣就可以做

4、 好一個(gè)好的網(wǎng)站。3 .網(wǎng)站規(guī)劃我的網(wǎng)站共有7個(gè)主頁(yè)面：首頁(yè)、瀏覽頁(yè)面 1、瀏覽頁(yè)面2、詳細(xì)頁(yè)面、購(gòu)物車、 登陸頁(yè)面、注冊(cè)頁(yè)面。每一個(gè)頁(yè)面都有著自己的獨(dú)特背景，以保證網(wǎng)站風(fēng)格多樣化，增加 瀏覽者的好感。四、網(wǎng)站介紹扉居理財(cái)新選擇飾蜀山水住自辜H- - *也苗首頁(yè)前端采用的幻燈片播放特效，實(shí)現(xiàn)特效代碼如下script type="text/javascript">window.onload=(setInterval(function()var bg=document.getElementById("bg");var xh=Math.floor(Mat

5、h.random()*5+1);bg.src="images/bg"+xh+".jpg",4000)；<script>抑居藥H新老隹WfTM乜T- FF朽，R*禧吉龍山不住白家ST. #L=S.不三手/window.onload含義為打開(kāi)頁(yè)面自動(dòng)頁(yè)面自動(dòng)執(zhí)行語(yǔ)句。/利用getElementByld 方法獲取 元素對(duì)象/ Math.random() 函數(shù)獲取隨機(jī) 數(shù)/bg.src="images/bg"+xh+”.jpg"此語(yǔ)句用來(lái)跟換圖片，實(shí)現(xiàn) 圖片切效果。我力的各大景區(qū)鼠標(biāo)滑過(guò)圖片圖特效：script type

6、="text/javascript">window.onload=function（） /打開(kāi)頁(yè)面時(shí)自動(dòng)執(zhí)行函數(shù)用getElementByld方法獲取對(duì)象var a=document.getElementById("xiamian");var p=a.getElementsByT agName("img");for(var i=0;i<p.length;i+)pi.index=i;/給事件對(duì)象添加屬性值用“.”號(hào)獲取a對(duì)象下所有的img對(duì)象/p.length 得到對(duì)象P的長(zhǎng)度/onmouseover鼠標(biāo)戈U過(guò)時(shí)執(zhí)行函數(shù)將未

7、滑過(guò)的鼠標(biāo)的透明度改為1（不透明）pi.onmouseover=function()鼠標(biāo)滑過(guò)的圖片透明度改為0.5 （半透明）for(va門=0;i<p.length;i+)pi.style.opacity="1"this.style.opacity="0.5"；</script>導(dǎo)航條特效:調(diào)用了外部JS文件，方面獲script type="text/javascript" src="js/jquery.js"></script>取對(duì)象和元素/鼠標(biāo)滑過(guò)那一項(xiàng)顯示那個(gè)項(xiàng)的下一級(jí)菜

8、單300是用來(lái)控制顯示下級(jí)菜單的速度時(shí)間$(function()$('.nav').children("li:has(ul)").hover(function()$(this).children("ul").slideDown(300);,function()$(this).children("ul").hide();)；)；選項(xiàng)卡特效:script type="text/javascript">window.onload=function()/ window.onload打開(kāi)頁(yè)面時(shí)自動(dòng)執(zhí)行函

9、數(shù)var a=document.getElementById("xiamian");/ 用 getElementById獲取 id號(hào)來(lái)獲取對(duì)象var b=document.getElementById("cha");/ 用 getElementById 獲取 id號(hào)來(lái)獲取對(duì)象var p=a.getElementsByTagName("input");/ 用 getElementsByT agName獲取標(biāo)簽獲取對(duì)象var d=a.getElementsByTagName("div");/用 getElementsB

10、yTagName獲取標(biāo)簽獲取對(duì)象var c=b.getElementsByTagName("input");/ 用 getElementsByTagName獲取標(biāo)簽獲取對(duì)象for(var i=0;i<p.length;i+)pi.index=i;/給事件對(duì)象添加屬性值;pi.onmouseover=function()for(var i=0;i<p.length;i+)di.style.display="none"pi.className=""this.className="bt2"dthis.inde

11、x.style.display="block"/將鼠標(biāo)未滑過(guò)時(shí)的對(duì)應(yīng)的div全部隱藏起來(lái)/將鼠標(biāo)滑過(guò)時(shí)的對(duì)應(yīng)的div顯示出來(lái)for(va門=0;i<c.length;i+)ci.index=i; / 給事件對(duì)象添加屬性值ci.onmouseover=function()for(var i=0;i<p.length;i+)ci.style.backgroundColor="#FFFFFF"/改變鼠標(biāo)未滑過(guò)時(shí)的對(duì)應(yīng)元素的背景色this.style.backgroundColor="#27B7CF"/改變鼠標(biāo)滑過(guò)時(shí)的對(duì)應(yīng)元素的背

12、景色；圖片上一張 下一張切換特效$(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");$(&q

13、uot;#tp").attr("title", this.src);, function。$("#tp").attr("src", "images/j5.jpg");$("#tp").attr("title", this.src);, function。$("#tp").attr("src", "images/j4.jpg");$("img").attr("title"

14、;, 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&

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

16、.jpg");$("#tp").attr("title", this.src);, function。$("#tp").attr("src", "images/j2.jpg");$("#tp").attr("title", this.src);, function。$("#tp").attr("src", "images/j3.jpg");$("#tp").attr(

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

18、ion。$("#tp").attr("src", "images/j6.jpg");$("#tp").attr("title", this.src);, function。$("#tp").attr("src", "images/j7.jpg");$("#tp").attr("title", this.src);)；</script>瀏覽頁(yè)面2:PIE 本 Etfr 3%當(dāng)鼠標(biāo)滑過(guò)對(duì)應(yīng)

19、的地區(qū)時(shí)，下方會(huì)顯示對(duì)應(yīng)地區(qū)的景點(diǎn)優(yōu)惠，報(bào)價(jià)，圖片等信息，并且鼠標(biāo)滑到哪張圖片，該圖片會(huì)自動(dòng)增添一個(gè)邊框。特效代碼：script type="text/javascript">window.onload=function()var d=document.getElementById("w");用 getElementByld 方法獲取對(duì)象var b=d.getElementsByClassName("id1");/ 用.getElementsByClassName方法獲取d對(duì)象var p=document.getElements

20、ByTagName("input");下的元素 /for(va門=0;i<p.length;i+)pi.index=i;/ 給事件對(duì)象添加屬性值pi.onmouseover=function()/鼠標(biāo)滑過(guò)時(shí)執(zhí)行以下函數(shù) for(var i=0;i<p.length;i+)bi.style.display="none"/將鼠標(biāo)未滑過(guò)時(shí)的對(duì)應(yīng)的盒子全部隱藏起來(lái)bthis.index.style.display="block"/將鼠標(biāo)滑過(guò)時(shí)的對(duì)應(yīng)的盒子顯示出來(lái)；</script>詳細(xì)頁(yè)面:北岸林馬坊，中國(guó)東:匕品者名

21、山th 普樂(lè)北三客，東北-西南走向是中 朝界山，"白頭UT之名趣鼾中 國(guó)據(jù)李朝實(shí)錄甫宗十八年“長(zhǎng)白山，胡人家稱口頭 山1以長(zhǎng)白般也.a所趨.胡人.斯 指司空文真人、湍族人.可他"白頭 山同"長(zhǎng)白山" 一樣，音是由中國(guó) 人命名的.白頭之意，也是漢語(yǔ) 的再述萬(wàn)式 當(dāng)即遠(yuǎn)更曲山|所見(jiàn)? 山頂為臼魚(yú),恰如白色的頭，as.全媒匕日澹昊曹、易薄.住病全包 購(gòu)州/檢當(dāng)鼠標(biāo)滑過(guò)左側(cè)照片是 右側(cè)顯示對(duì)應(yīng)景點(diǎn)的相關(guān)信息，包過(guò)圖片景點(diǎn)描述window.onload=function()var a=document.getElementById("zw").

22、getElementsByTagName("img");/先用.getElementByld方法獲取id 號(hào)zw 的對(duì)象在用getElementsByT agName 方法獲取zw對(duì)象下img 標(biāo)簽象/var b=document.getElementById("hezi").getElementsByTagName("div")/ 先用.getElementByld方法獲取 id 號(hào) hezi 的對(duì)象 在用 getElementsByT agName 方法獲取zw對(duì)象下div標(biāo)簽象/for(va門=0;i<a.length;i

23、+)ai.index=i;/給事件對(duì)象添加屬性值ai.onmouseover=function()for(var i=0;i<a.length;i+)bi.style.display="none"/將鼠標(biāo)未滑過(guò)時(shí)的對(duì)應(yīng)的div全部隱藏起來(lái)bthis.index.style.display="block"/將鼠標(biāo)滑過(guò)時(shí)的對(duì)應(yīng)的div顯示出來(lái);</script>購(gòu)物車頁(yè)面:訴k，啊上皿由求斫陋5"天日由仃1 Jtw忻旦/告小嫂】LM.神/京七兩毛里M11f”.了斯睦占"天日用好'":元旦濤與薩】上海事字

24、門及毛手 不新心6"大三左打¥3口。_LuS購(gòu)物車只要包括 全選特效，增加、減少特效，結(jié)算，計(jì)算總價(jià)特效增加數(shù)量特效/ 通過(guò) getElementById("sl"). 對(duì)function jia()var a=document.getElementById("sl").value;象的值var b=parseInt(a)+1;/每當(dāng)點(diǎn)擊按鈕書對(duì)象的值加 1/將計(jì)算出了的值再付給原象顯不出來(lái)document.getElementById("sl").value=b+""來(lái)的對(duì)if(b>=2

25、0)document.getElementById("sl").value=20;通過(guò)if語(yǔ)句來(lái)判斷值，從而來(lái)控制最大值減少數(shù)量特效function jian1()var a=document.getElementById("sl1").value;通過(guò) getElementById("sl").對(duì)象的值var b=parseInt(a)-1;每當(dāng)點(diǎn)擊按鈕書對(duì)象的值減1document.getElementById("sl1").value=b+""/將計(jì)算出了 的值再付給原來(lái)的對(duì)if(b<

26、;=0)象顯示出來(lái)document.getElementById("sl1").value=0;通過(guò) if 語(yǔ)句來(lái)判斷值，從而來(lái)控制最小值計(jì)算總價(jià)特效：function js()var jiage=document.getElementById("jiage").value; 獲取 id 對(duì)象的值var qx2=document.getElementsByName("xz"); /用 getElementsByName獲取id對(duì)象的值法獲取對(duì)象var a1=parseInt(document.getElementById("

27、sl").value);var a2=parseInt(document.getElementById("sl1").value); /獲取id對(duì)象的值var a3=parseInt(document.getElementById("sl2").value); /族取id對(duì)象的值var a4=parseInt(document.getElementById("sl3").value); 族取id對(duì)象的值var a5=parseInt(document.getElementById("sl4").value

28、); 族取id對(duì)象的值var a6=parseInt(document.getElementById("sl5").value); /族取id對(duì)象的值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;/計(jì)算第一行記錄的值elseb1=0;if(qx21.checked=true)b2=a2*1888;/計(jì)算第二行記錄的值elseb2=0;if(qx22.checked=true)b3=a3*300;/計(jì)算第三行記錄的值elseb3=0

29、;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+b4+b5+b6+""/將所有記錄行的值相加求和document.getElementById("jiage").value="Y+sum; / 再將計(jì)算出來(lái)的值付給相應(yīng)的alert("結(jié)算成功！ "+

30、sum);/彈出提示對(duì)話框?qū)ο笕x特效：function quanxuan()var qx1=document.getElementById("qx");通過(guò) getElementById("sl"). 對(duì)象var qx2=document.getElementsByName("xz");通 過(guò)getElementsByName 對(duì)象for(var i=0;i<qx2.length;i+)利用循環(huán)語(yǔ)句判斷是否被選中，如未被選中，就if(qx1.checked=true)選中該對(duì)象，一次執(zhí)行從而實(shí)現(xiàn)全選效果qx2i.checked

31、=true;elseqx2i.checked=false; 刪除記錄行功能通過(guò)var sc=document.getElementsByClassName("sc");getElementsByName 對(duì)象vartr=document.getElementsByTagName('table')0.getElementsByTagName('tbo dy')0.getElementsByTagName('tr');for(z=0;z<sc.length;z+)scz.index=z;scz.onclick=functio

32、n() this.parentNode.parentNode.parentNode.removeChild(this.parentNode);通過(guò)尋找父標(biāo)簽的方法找到需要?jiǎng)h除的記錄行，將其刪除注冊(cè)頁(yè)面:ST制聲早區(qū)新喜口恃曲附拜中人中心本張網(wǎng)頁(yè)這樣是對(duì)表單的數(shù)據(jù)判斷，計(jì)算，控制，將不符合規(guī)則的值攔截在外function zhuce()var a1=document.getElementById("yong").value;獲取id對(duì)象的值var a2=document.getElementById("mima").value; 獲取id對(duì)象的值var a

33、3=document.getElementById("mima1").value; 獲取id對(duì)象的值var a4=document.getElementById("mima2").value; 獲取id對(duì)象的值獲取id對(duì)象的值var a5=document.getElementById("mima3").value; var a6=document.getElementById("xy").value;/獲取 id 對(duì)象的值if(a1.length>=4&&a1.length<=20)

34、if(a2.length>=4&&a2.length<=16)控制用戶名必須在 420 位 if( a2=a3)/判斷第二次輸入的密碼與第一輸入的密碼是否一致 if(a4.length=11) /控制電話號(hào)碼必須在11位數(shù) if(a5!="")/判斷驗(yàn)證碼是否為空alert("用戶注冊(cè)成功！"+"n"+" 您的用戶名："+a1+"n"+" 您的密碼為："+a2); window.open("denglu.html");/當(dāng)用戶注