【旅游網(wǎng)】網(wǎng)頁設(shè)計實訓報告

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

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

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

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

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

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

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

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

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

10、kgroundColor=#27B7CF;/改變鼠標滑過時的對應元素的背景;L：1片上一張下一張切換特效$(function()$(#back).toggle(function()此函數(shù)是當鼠標單擊#tp對象時依次切換圖片實$(#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誇鮒罠對為甘彌畫耳將皆S(爭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);)；瀏覽頁面2:內(nèi)地東菲潮鋼當鼠標滑過對應的地區(qū)時，下方會顯示對應地區(qū)的景點優(yōu)惠，報價，圖

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

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

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

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

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

19、Id(sl1)value;/通過getElementById(sl).對象的值varb=parseInt(a)-1;/每當點擊按鈕書對象的值減1documentgetElementById(sl1)value=b+;/將計算出了的值再付給原來的對if(bifo=!JBa)jo箸4XmuwN&sumui引護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對象vartr=document.getElementsByTagName(table)0.getElementsByTagName(tbody)0.getElementsByTagName(tr);for(z=0;zIKr&瀚m4220B宀5a2uua3)宀5a4ngthHHll)一一畐宀5a2NJSTSS一-+3-+ins:-+&+-SHM:+a2xwindowopen(dengchtm5、帳Bmst倉餡叭sDa、asmWNN:(D登陸界面：本章頁面主要是對用戶名和密碼的格式字符進行判斷，看書否符合用戶名或密碼要求新世界雄活遠住用戶名忘i己無？立即注冊密碼functiondenglu()vara1=document.ge