靜態(tài)網(wǎng)頁(yè)設(shè)計(jì)報(bào)告

安徽冶金科技職業(yè)學(xué)院計(jì)算機(jī)系13網(wǎng)絡(luò)技術(shù)班By鄧天順靜態(tài)網(wǎng)頁(yè)設(shè)計(jì)——實(shí)訓(xùn)報(bào)告系部:計(jì)算機(jī)系班級(jí):13網(wǎng)絡(luò)技術(shù)教師:王若賢姓名:鄧天順天順旅游網(wǎng)站目錄網(wǎng)站簡(jiǎn)介 3網(wǎng)站整體效果 3網(wǎng)站概要介紹………………...…………………….………….4網(wǎng)站設(shè)計(jì) 4網(wǎng)站設(shè)計(jì)4網(wǎng)站內(nèi)容 4代碼設(shè)計(jì) 5分類菜單代碼設(shè)計(jì) 5搜索框代碼設(shè)計(jì) 6輪播圖片代碼設(shè)計(jì) 7實(shí)訓(xùn)心得 9天順旅游概要介紹

旅游電子商務(wù)是指以網(wǎng)絡(luò)為主體，以旅游信息庫(kù)、電子化商務(wù)銀行為基礎(chǔ)，利用最先進(jìn)的電子手段運(yùn)作旅游業(yè)及其分銷系統(tǒng)的商務(wù)體系。旅游電子商務(wù)就為廣大旅游業(yè)同行提供了一個(gè)互聯(lián)網(wǎng)的平臺(tái)

旅游門市最為專業(yè)的旅游買賣交易場(chǎng)，匯聚了大量的游客客源，旅游企業(yè)及旅游相關(guān)行業(yè)企業(yè)，將旅游行業(yè)進(jìn)行了細(xì)分，精致打造，為游客提供了專業(yè)的旅游服務(wù)。其強(qiáng)大的資源數(shù)據(jù)庫(kù)、交易平臺(tái)及多種游客出游必備的查詢功能，成為客人出游的專業(yè)指導(dǎo)網(wǎng)站，每天巨大的客流，是在網(wǎng)上開店展示、宣傳及銷售的最佳窗口。

旅游大賣場(chǎng)一個(gè)免費(fèi)的旅游廣告發(fā)布場(chǎng)所，匯聚大量的旅游業(yè)同行和出游者，每天發(fā)布旅游咨詢，詢價(jià)信息，

線路報(bào)價(jià)信息，尋找合作伙伴，等旅游相關(guān)信息。

天順旅游，驢友的

集結(jié)地，聚集所有出游者，上天入海任你游。

網(wǎng)站設(shè)計(jì)介紹網(wǎng)頁(yè)以橙色暖色系為基調(diào)，網(wǎng)頁(yè)頭部包含導(dǎo)航、站點(diǎn)圖標(biāo)和信息條，尾部包括版權(quán)和友情鏈接。網(wǎng)頁(yè)主題部分分為兩大塊，第一塊包括分類菜單和輪播展示圖片以及網(wǎng)站客戶服務(wù)信息，第二塊包括酒店預(yù)訂、旅行攻略、旅游新聞和網(wǎng)站幫助。分類菜單代碼設(shè)計(jì)以國(guó)內(nèi)游一級(jí)菜單為例：<divclass="select"id="sele1"onmouseover="MM_showHideLayers('s2','','hide','s3','','hide','s4','','hide','s5','','hide','s6','','hide','s7','','hide','s1','','hide');MM_showHideLayers('s1','','show');MM_changeProp('sele1','','style.backgroundImage','url(pic/fangk.png)','DIV');MM_changeProp('sele2','','style.backgroundImage','url(pic/fangk.png)','DIV');MM_changeProp('sele3','','style.backgroundImage','url(pic/fangk.png)','DIV');MM_changeProp('sele4','','style.backgroundImage','url(pic/fangk.png)','DIV');MM_changeProp('sele5','','style.backgroundImage','url(pic/fangk.png)','DIV');MM_changeProp('sele6','','style.backgroundImage','url(pic/fangk.png)','DIV');MM_changeProp('sele7','','style.backgroundImage','url(pic/fangk.png)','DIV');MM_changeProp('sele1','','style.backgroundImage','url(pic/fangkd.png)','DIV')">國(guó)內(nèi)游</div>只使用了兩類行為代碼對(duì)層控制：一個(gè)是顯示隱藏層，用來綁定對(duì)應(yīng)的二級(jí)菜單：onmouseover="MM_showHideLayers('s2','','hide','s3','','hide','s4','','hide','s5','','hide','s6','','hide','s7','','hide','s1','','hide');MM_showHideLayers('s1','','show');對(duì)層控制，顯示本類二級(jí)菜單，同時(shí)隱藏其它二級(jí)菜單?？梢跃?jiǎn)為一條onmouseover="MM_showHideLayers('s2','','hide','s3','','hide','s4','','hide','s5','','hide','s6','','hide','s7','','hide','s1','','show');另一個(gè)是改變層的背景屬性：MM_changeProp('sele2','','style.backgroundImage','url(pic/fangk.png)','DIV');將選定之外的一級(jí)菜單背景改為默認(rèn)的封口邊框背景。MM_changeProp('sele1','','style.backgroundImage','url(pic/fangkd.png)','DIV')">國(guó)內(nèi)游</div>;將選定的一級(jí)菜單背景改為敞開露口的邊框背景。以此實(shí)現(xiàn)一級(jí)條目和二級(jí)菜單的背景銜接，使得更加美觀自然。事件觸發(fā)條件均為onmouseover鼠標(biāo)經(jīng)過。搜索框代碼設(shè)計(jì)搜索框包含兩個(gè)表單項(xiàng)目：文本字段和提交按鈕<inputname="textfield"type="text"onclick="javascript:checknullclick()"onmouseout="javascript:checknull()"value="請(qǐng)輸入景點(diǎn)名稱、目的地"/><inputtype="submit"name="Submit"value="搜索"/>#form2input{#form2input{ height:38px; color:#FFFFFF; font-size:16px; font-weight:bolder; font-family:"微軟雅黑"; border-top-width:thin; border-right-width:thin; border-bottom-width:thin; border-left-width:thin; border-top-style:solid; border-right-style:solid; border-bottom-style:solid; border-left-style:none; border-top-color:#F8670F; border-right-color:#F8670F; border-bottom-color:#F8670F; border-left-color:#F8670F; background-color:#F8670F; width:100px;}并對(duì)兩個(gè)表單項(xiàng)目設(shè)置css#form1input{#form1input{ border:thinsolid#F8670F; width:340px; height:34px; color:#FF9900; text-indent:10px; font-family:"宋體"; line-height:34px;}functionchecknull(){varname=document.form1.textfield;if(name.value.length==0){functionchecknull(){varname=document.form1.textfield;if(name.value.length==0){ document.form1.textfield.value="請(qǐng)輸入景點(diǎn)名稱、目的地"; }}functionchecknullclick(){varname=document.form1.textfield;if(document.form1.textfield.value=="請(qǐng)輸入景點(diǎn)名稱、目的地"){ document.form1.textfield.value=""; }//置為空}}代碼編寫的函數(shù)，用來實(shí)現(xiàn)復(fù)雜的功能checknullclick()用來實(shí)現(xiàn)當(dāng)點(diǎn)擊文本框準(zhǔn)備輸入字符時(shí)，隱藏文本框的提示性文字checknull()用來實(shí)現(xiàn)當(dāng)鼠標(biāo)移出文本框但又沒輸入文字時(shí)恢復(fù)提示性文字。輪播圖片代碼設(shè)計(jì)vars=function(){ varinterv=3000;//切換間隔時(shí)間 varinterv2=15;//切換速速 varopac1=100;//文字背景的透明度 varsource="fade_focus"http://焦點(diǎn)輪換圖片容器的id名稱 //獲取對(duì)象 functiongetTag(tag,obj){if(obj==null){returndocument.getElementsByTagName(tag)}else{returnobj.getElementsByTagName(tag)}} functiongetid(id){returndocument.getElementById(id)}; varopac=0,j=0,t=63,num,scton=0,timer,timer2,timer3;varid=getid(source);id.removeChild(getTag("div",id)[0]);varli=getTag("li",id);vardiv=document.createElement("div");vartitle=document.createElement("div");varspan=document.createElement("span");varbutton=document.createElement("div");button.className="button";for(vari=0;i<li.length;i++){vara=document.createElement("a");a.innerHTML=i+1;a.onclick=function(){clearTimeout(timer);clearTimeout(timer2);clearTimeout(timer3);j=parseInt(this.innerHTML)-1;scton=0;t=63;opac=0;fadeon();};a.className="b1";a.onmouseover=function(){this.className="b2"};a.onmouseout=function(){this.className="b1";sc(j)};button.appendChild(a);}//控制圖層透明度 functionalpha(obj,n){if(document.all){obj.style.filter="alpha(opacity="+n+")";}else{obj.style.opacity=(n/100);}}//控制焦點(diǎn)按鈕 functionsc(n){for(vari=0;i<li.length;i++){button.childNodes[i].className="b1"};button.childNodes[n].className="b2";}title.className="num_list";title.appendChild(span);alpha(title,opac1);id.className="d1";div.className="d2";id.appendChild(div);id.appendChild(title);id.appendChild(button);//漸顯 varfadeon=function(){opac+=5;div.innerHTML=li[j].innerHTML;span.innerHTML=getTag("img",li[j])[0].alt;alpha(div,opac);if(scton==0){sc(j);num=-2;scrolltxt();scton=1};if(opac<100){timer=setTimeout(fadeon,interv2)}else{timer2=setTimeout(fadeout,interv);};}//漸隱 varfadeout=function(){opac-=5;div.innerHTML=li[j].innerHTML;alpha(div,opac);if(scton==0){num=2;scrolltxt();scton=1};if(opac>0){timer=setTimeout(fadeout,interv2)}else{if(j<li.length-1){j++}else{j=0};fadeon()};}//滾動(dòng)文字 varscrolltxt=function(){t+=num;span.style.marginTop=t+"px";if(num<0&&t>3){timer3=setTimeout(scrolltxt,interv2)}elseif(num>0&&t<62){timer3=setTimeout(scrolltxt,interv2)}else{scton=0}};fadeon();}<styletype="text/css"media="all">.d1{<styletype="text/css"media="all">.d1{ width:443px; height:auto; overflow:hidden; background-color:#000000; position:relative; border-top-style:none; border-right-style:none; border-bottom-style:none; border-left-style:none;}.loading{ width:443px; background-color:#000000; color:#FFCC00; font-size:12px; height:248px; text-align:center; font-family:Verdana,Arial,Helvetica,sans-serif; font-weight:bold; position:固定; left:14px; top:14px; padding-top:30px; border-top-style:none; border-right-style:none; border-bottom-style:none; border-left-style:none;}.d2{width:100%;height:278px;overflow:hidden;}.num_list{position:absolute;width:100%;left:0px;bottom:-1px;background-color:#000000;color:#FFFFFF;font-size:12px;padding:4px0px;height:20px;overflow:hidden;}.num_listspan{display:inline-block;height:16px;padding-left:6px;}.d2{width:100%;height:278px;overflow:hidden;}.num_list{position:absolute;width:100%;left:0px;bottom:-1px;background-color:#000000;color:#FFFFFF;font-size:12px;padding:4px0px;height:20px;overflow:hidden;}.num_listspan{display:inline-block;height:16px;padding-left:6px;}img{border:0px;}ul{display:none;}.button{position:absolute;z-index:1000;right:0px;bottom:2px;font-size:13px;font-weight