书签 分享 收藏 举报 版权申诉 / 32

类型酒店网站设计说明书.docx

  • 文档编号:18230611
  • 上传时间:2023-08-14
  • 格式:DOCX
  • 页数:32
  • 大小:2.11MB

3.2.2主页的设计(index.html)

图5主页

整个主页设计包括三部分:

页头、正文内容和版权内容。

背景使用花纹背景图,页面颜色以白色与黄色想搭配,网页整体采用垂直布局,实现网站整体风格统一。

如图5所示。

A.导航设计

导航是有效链接网站各页面的工具,它有效的分类网站内容并指向它所代表内容。

一个网站清晰的网站导航,可以让用户快速明了的找到自己想要了解的内容。

对于网站架构信息,以及用户的体验有着密不可分的关系。

海澜大酒店网站的导航项目设置为:

首页、酒店介绍、新闻中心、客房、餐饮、商务会议、娱乐休闲、在线预订、联系我们。

导航条的背景为黄色到白色的渐变背景图,导航项目超链接文字的颜色为白色,鼠标滑过时的文字为黄色,如图6所示:

图6导航

B.正文内容设计

分为客户预订、酒店新闻、酒店介绍、客房展示四个栏目,使浏览者了解网站概貌及重点内容,满足客户基本需求。

C.特效设计

主页有下拉菜单、图片自动切换、图片滚动三个js特效。

主页页面主要结构代码如下:

--头部-->

--logo--

--导航--

--头部-->

--正文内容-->

.....

--正文内容-->

--尾部-->

    .......

版权内容

--尾部-->

3.2.3二级子页面的设计

网站的二级页面将网站内容更加条理化,更加详细与方便的展现给浏览者。

二级页面基本采用相同的页面结构,相同的页头和页尾,正文内容分左右两栏,左栏为链接菜单,右栏为内容。

其中一个子页面效果图如图7所示。

二级页面最大特色是用CSS样式实现的带箭头的导航菜单,如图8所示。

二级子页面的主要结构代码为:

<!

--头部-->

......

<!

--头部-->

<!

--网页主体-->

...<!

--左栏-->...

...<!

--右栏-->...

<!

--网页主体-->

<!

--尾部-->

......

<!

--尾部-->

图7子页

 

图8带箭头的导航菜单

3.2.4特效设计

A.图片循环渐显特效(引导页):

varb=1;

varc=true;

functionfade(){

if(document.all);

if(c==true){

b++;

}

if(b==100){

b--;

c=false

}

if(b==10){

b++;

c=true;

}

if(c==false){

b--;

}

u.filters.alpha.opacity=0+b;

setTimeout("fade()",40);

}

B.左侧竖向滑动菜单特效(如图9所示):

图9左侧竖向滑动菜单特效

varopen=0;//设置初始打开的层序号

varopenState=newArray();//创建数组对像openState

varcloseState=newArray();//创建数组对像closeState

vardH=150;//声明变量dH,并赋值为150

function$(id){

if(document.getElementById(id))

{

returndocument.getElementById(id);

}

else

{

alert("没有找到!

");

}

}//判断是否存在指定id属性值的页面元素

function$tag(id,tagName){

return$(id).getElementsByTagName(tagName)

}//返回指定id的标签名为tagName的页面元素对象集合

functioncloseMe(Cid,Oid)

{//定义函数closeMe(),使用Cid,Oid两个形参

varh=parseInt(Ds[Cid].style.height);

if(h>0){

h=h-Math.ceil(h/3);

Ds[Cid].style.height=h+"px";

}

else

{

openMe(Oid);

clearTimeout(closeState[Cid]);

returnfalse;

}

closeState[Cid]=setTimeout("closeMe("+Cid+","+Oid+")");

}

functionopenMe(Oid){

varh=parseInt(Ds[Oid].style.height);

if(h

{

h=h+Math.ceil((dH-h)/3);

Ds[Oid].style.height=h+"px";

}

else

{

clearTimeout(openState[Oid]);

returnfalse;

}

openState[Oid]=setTimeout("openMe("+Oid+")");

}

varDs=$tag("menu","div");

varTs=$tag("menu","table");

if(Ds.length!

=Ts.length)

{

alert("标题和内容数目不相同!

");

}

for(vari=0;i

{

if(i==open){

Ds[i].style.height=dH+"px";

Ts[i].className="title01";

}

else

{

Ds[i].style.height="0px";

Ts[i].className="title02";

}

Ts[i].value=i;

Ts[i].onclick=function(){

if(open==this.value)

{

returnfalse;

}

Ts[open].className="title02";

Ts[this.value].className="title01";

for(vari=0;i

{

clearTimeout(openState[i]);

clearTimeout(closeState[i]);

}

closeMe(open,this.value);

//openMe(this.value);

open=this.value;

}

}//直接打开层函数

functionshowDiv(id){

Ds[id].style.height=dH+"px";

Ds[open].style.height="0px";

open=id;

}//渐渐打开层函数

 

C.图片轮换特效(如图10所示):

图10图片轮换特效

//主函数

vars=function(){

varinterv=2000;//切换间隔时间

varinterv2=10;//切换速速

varopac1=80;//文字背景的透明度

varsource="changebox"//焦点轮换图片容器的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

{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

{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=

举报
举报
版权申诉
版权申诉
word格式文档无特别注明外均可编辑修改;预览文档经过压缩,下载后原文更清晰! 立即下载
配套讲稿:

如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。

特殊限制:

部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。

关 键  词:
酒店 网站 设计 说明书
提示  冰点文库所有资源均是用户自行上传分享,仅供网友学习交流,未经上传用户书面授权,请勿作他用。
关于本文
本文标题:酒店网站设计说明书.docx
链接地址:https://www.bingdoc.com/p-18230611.html
关于我们 - 网站声明 - 网站地图 - 资源地图 - 友情链接 - 网站客服 - 联系我们

copyright@ 2008-2023 冰点文库 网站版权所有

经营许可证编号:鄂ICP备19020893号-2


收起
展开