静态网页设计报告

安徽冶金科技职业学院计算机系13网络技术班By邓天顺静态网页设计——实训报告系部:计算机系班级:13网络技术教师:王若贤姓名:邓天顺天顺旅游网站目录网站简介 3网站整体效果 3网站概要介绍………………...…………………….………….4网站设计 4网站设计4网站内容 4代码设计 5分类菜单代码设计 5搜索框代码设计 6轮播图片代码设计 7实训心得 9天顺旅游概要介绍

旅游电子商务是指以网络为主体，以旅游信息库、电子化商务银行为基础，利用最先进的电子手段运作旅游业及其分销系统的商务体系。旅游电子商务就为广大旅游业同行提供了一个互联网的平台

旅游门市最为专业的旅游买卖交易场，汇聚了大量的游客客源，旅游企业及旅游相关行业企业，将旅游行业进行了细分，精致打造，为游客提供了专业的旅游服务。其强大的资源数据库、交易平台及多种游客出游必备的查询功能，成为客人出游的专业指导网站，每天巨大的客流，是在网上开店展示、宣传及销售的最佳窗口。

旅游大卖场一个免费的旅游广告发布场所，汇聚大量的旅游业同行和出游者，每天发布旅游咨询，询价信息，

线路报价信息，寻找合作伙伴，等旅游相关信息。

天顺旅游，驴友的

集结地，聚集所有出游者，上天入海任你游。

网站设计介绍网页以橙色暖色系为基调，网页头部包含导航、站点图标和信息条，尾部包括版权和友情链接。网页主题部分分为两大块，第一块包括分类菜单和轮播展示图片以及网站客户服务信息，第二块包括酒店预订、旅行攻略、旅游新闻和网站帮助。分类菜单代码设计以国内游一级菜单为例：<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')">国内游</div>只使用了两类行为代码对层控制：一个是显示隐藏层，用来绑定对应的二级菜单：onmouseover="MM_showHideLayers('s2','','hide','s3','','hide','s4','','hide','s5','','hide','s6','','hide','s7','','hide','s1','','hide');MM_showHideLayers('s1','','show');对层控制，显示本类二级菜单，同时隐藏其它二级菜单。可以精简为一条onmouseover="MM_showHideLayers('s2','','hide','s3','','hide','s4','','hide','s5','','hide','s6','','hide','s7','','hide','s1','','show');另一个是改变层的背景属性：MM_changeProp('sele2','','style.backgroundImage','url(pic/fangk.png)','DIV');将选定之外的一级菜单背景改为默认的封口边框背景。MM_changeProp('sele1','','style.backgroundImage','url(pic/fangkd.png)','DIV')">国内游</div>;将选定的一级菜单背景改为敞开露口的边框背景。以此实现一级条目和二级菜单的背景衔接，使得更加美观自然。事件触发条件均为onmouseover鼠标经过。搜索框代码设计搜索框包含两个表单项目：文本字段和提交按钮<inputname="textfield"type="text"onclick="javascript:checknullclick()"onmouseout="javascript:checknull()"value="请输入景点名称、目的地"/><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;}并对两个表单项目设置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="请输入景点名称、目的地"; }}functionchecknullclick(){varname=document.form1.textfield;if(document.form1.textfield.value=="请输入景点名称、目的地"){ document.form1.textfield.value=""; }//置为空}}代码编写的函数，用来实现复杂的功能checknullclick()用来实现当点击文本框准备输入字符时，隐藏文本框的提示性文字checknull()用来实现当鼠标移出文本框但又没输入文字时恢复提示性文字。轮播图片代码设计vars=function(){ varinterv=3000;//切换间隔时间 varinterv2=15;//切换速速 varopac1=100;//文字背景的透明度 varsource="fade_focus"//焦点轮换图片容器的id名称 //获取对象 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);}}//控制焦点按钮 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()};}//滚动文字 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