《网页实训报告》word版.doc

网页设计与制作实训报告实训题目: 武功山旅游网制作 专 业： 软件工程技术 班 级： 10软件 3 班 姓 名： 指导教师： 二0一一年 十二 月 二十三 日目 录1、实训目的32、实训题目描述和要求43、实训报告内容53.1.网站框架53.2.网站主体的代码63.2.1.首页113.2.2.景区概况143.2.3.旅游路线153.2.4.温泉山庄163.2.5.旅游常识173.2.6酒店住宿184、总结19参考书目：20实训指导教师评语211、实训目的通过本次实训，让同学们对本学期的网页设计与制作这门课程有一个系统的认识，加强和巩固已有的知识，训练和培养学生获取信息和处理信息的能力，充分培养和提高学生的动手能力，学会通过网络、书籍、素材光盘等方式收集索需的文字资料、图像资料、flash动画和网页特效。能够运用所学的理论知识和技能解决网站开发过程中所遇到的实际问题，同时也能够体现自己的工作作风，认真学习的态度。主要是希望同学们能够熟练的掌握利用我们所学的知识来制作一个主题鲜明的网站。(1) 掌握创建Dreamweavercs3本地站点的方法,利用表格和层规划网页布局。(2) 掌握在网页中添加文本、图像、flash动画和音乐等页面元素。(3) 掌握制作AP Div和超级链接的的能力。(4) 掌握在创建网页中各种连接方式。(5) 掌握整合与发布网站的技术。(6) 综合运用所学软件进行网页材料准备。2、实训题目描述和要求同学们根据自己的兴趣，设计一个个人站点或介绍一个集体的站点，围绕一个主题并能够体现出自己的个性，有整体框架结构，表格布局，层次定位等。布局合理，色彩搭配协调统一，内容丰富多彩，页面风格独特。掌握网页设计基本概念和HTML的基本结构，了解网页技术要问、HTML的编辑和运行环境。掌握文字版面的编辑，掌握网页的超链接技术的应用。了解列表的各种使用，了解表格的基本语法，掌握整合与发布网站的技术，掌握表格的定义、控制、分组、标题等的应用，了解表单在网页中的应用，了解网页中CSS的基础知识，掌握CSS的各种属性应用，了解一个整体网站建立的过程。综合运用Photoshop、fierworks 8、flash等多媒体制作软件创作出多媒体作品，为网页制作充分准备材料下功夫。3、实训报告内容3.1.网站框架首页景区概况旅游路线温泉山庄旅游常识酒店住宿这是我做的整个武功山风景网站的主题结构可以看到下面的五个子页1、 顶端的是用动画logo.gif安放在上面的动画，是在一张底图上面加（武功山欢迎您）六个字分别闪出，这个我是用fireworks 8手动制作出来的。2、 在这张动画上面同学们可以看得到有鸟在飞，没错这就是我插个AP Div后，在这个Div中插入 flash动画02.swf，当然做这个我就不会亲自做咯，这个是我们以前学习中我在光盘中发现的，就拿来用了，我们要做到会利用东西。1、分别设置了两个地方可以链接；2、各个页面可以自由链接首页可以链接到其他五个，其他五个的子页也可以链接任意个网页中去。1、 1、以上的就是我做到网站的主体结构介绍，其他的五张子页就是根据这个然后在中间插入不同的东西一改变几张子页的不同内容，2、友情链接里面都链接了各个网站的网址，只要连接了英特网就可以登入去网页看见其他网页的内容这是模版的主样：3.2.网站主体的代码武功山欣赏 AC_FL_RunContent( codebase,/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0,width,983,height,202,src,./flash/02,quality,high,pluginspage,/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash,wmode,transparent,movie,./flash/02 ); /end AC code 首 页 景区概况道路指引旅游路线特色风景温泉山庄旅游常识酒店住宿      !- var today , hour ; today = new Date(),hour = today.getHours() ; if(hour 12)document.write( 上午好!) ; else if (hour 14)document.write( 中午好!) ; else if (hour    友情链接        首 页 | 景区概况 | 道路指引 | 旅游路线 | 特色风景 | 温泉山庄 | 旅游常识 | 酒店住宿        吉安市武功山风景名胜区管理委员会 邮箱： 赣ICP备05007532        Copyright2011-2016      版权所有  10软件3班 杨波 3.2.1.首页这是首页的重点部分我做了个截图，做个简要的解释1、我放了两个表格在里面其他的就是分隔单元格，嵌套表格等等；2、右侧图片是静图工具十四张，分两排每排七张，都做了大图链接；3、侧图的左边是一个动画的图片；4、中间是两个宾馆和武功山的特产腊肉，肥而不腻；5、下面这张底图是武功山介于三市之间的详细底图，滑动鼠标可以放大此图片。自动切换图片的代码： !- function objSP_Article() this.ImgUrl=; this.LinkUrl=; this.Title=; function SlidePic_Article(_id) this.ID=_id; this.Width=0;this.Height=0; this.TimeOut=5000; this.Effect=23; this.TitleLen=0; this.PicNum=-1; this.Img=null; this.Url=null; this.Title=null; this.AllPic=new Array(); this.Add=SlidePic_Article_Add; this.Show=SlidePic_Article_Show; this.LoopShow=SlidePic_Article_LoopShow; function SlidePic_Article_Add(_SP) this.AllPicthis.AllPic.length = _SP; function SlidePic_Article_Show() if(this.AllPic0 = null) return false; document.write(); if(this.TitleLen != 0) document.write(); elsedocument.write(); this.Img = document.getElementById(Img_ + this.ID); this.Url = document.getElementById(Url_ + this.ID); this.Title = document.getElementById(Title_ + this.ID); this.LoopShow(); function SlidePic_Article_LoopShow() if(this.PicNumthis.AllPic.length-1) this.PicNum+ ; else this.PicNum=0; this.Img.filters.revealTrans.Transition=this.Effect; this.Img.filters.revealTrans.apply(); this.Img.src=this.AllPicthis.PicNum.ImgUrl; this.Img.filters.revealTrans.play(); this.Url.href=this.AllPicthis.PicNum.LinkUrl; if(this.Title) this.Title.innerHTML= +this.AllPicthis.PicNum.Title+; this.Img.timer=setTimeout(this.ID+.LoopShow(),this.TimeOut); var SlidePic1= new SlidePic_Article(SlidePic1); SlidePic1.Width = 492; SlidePic1.Height = 310; SlidePic1.TimeOut = 5000; SlidePic1.Effect = 23; SlidePic1.TitleLen = 40; var oSP = new objSP_Article(); oSP.ImgUrl = images/wugongshan/images/01.jpg; oSP.LinkUrl = #; SlidePic1.Add(oSP); var oSP = new objSP_Article(); oSP.ImgUrl = images/wugongshan/images/02.jpg; oSP.LinkUrl = #; SlidePic1.Add(oSP); var oSP = new objSP_Article(); oSP.ImgUrl = images/wugongshan/images/03.jpg; oSP.LinkUrl = #; SlidePic1.Add(oSP); var oSP = new objSP_Article(); oSP.ImgUrl = images/wugongshan/images/04.jpg; oSP.LinkUrl = #; SlidePic1.Add(oSP);var oSP = new objSP_Article(); oSP.ImgUrl = images/wugongshan/images/05.jpg; oSP.LinkUrl = #; SlidePic1.Add(oSP);var oSP = new objSP_Article(); oSP.ImgUrl = images/wugongshan/images/06.jpg; oSP.LinkUrl = #; SlidePic1.Add(oSP);var oSP = new objSP_Article(); oSP.ImgUrl = images/wugongshan/images/07.jpg; oSP.LinkUrl = #; SlidePic1.Add(oSP); SlidePic1.Show(); /-  3.2.2.景区概况这是景区概述的重点部分我做了个截图，做个简要的解释1、插入一个一行一列的表格，居中；2、左侧是插入一个四行一列的嵌套的表格，表格宽度是0，然后将找好的材料对应插入就可以了；3、右侧是各个地方的索引，图片，文字都做了相应的链接，当然图片是看大图链接，而文字是网站链接。3.2.3.旅游路线这是旅游路线的重点部分我做了个截图，做个简要的解释1、这里插入了一个一行一列的表格，具体做法和景区概述类是；2、右侧是插入一个二行一列的嵌套的表格，表格宽度是0，然后将找好的材料对应插入就可以了，其中地图是可以滑动鼠标放大的，也可以点击观看大图；3、左侧是各个地方的索引，图片，文字都做了相应的链接，当然图片是看大图链接，而文字是网站链接。地图滑动鼠标放大的代码： function change_imageSize(e, img) var zoom = parseInt(img.style.zoom, 10) | 100; zoom += event.wheelDelta / 12; if (zoom 0) img.style.zoom = zoom + %; return false; 660) this.width=330 onmousewheel=return change_imageSize(event,this)3.2.4.温泉山庄这是温泉山庄的重点部分我做了个截图，做个简要的解释1、这里插入了一个两行两列的表格；2、上左插入了一段武功山温泉山庄的具体介绍；3、上右插入了一张温泉的图片，在图片上面再插入了一个AP Div，然后在这个Div中插入一个动画03.swf，出现以上效果；4、下左和下右是一样的功能，只是一个向左一个向右从中间一起向两边运动，当鼠标停留在该区域图片则就不运动了，还做了链接，点击图片可以进入一个专门的可以看得见图片动的网页；动图的代码： 3.2.5.旅游常识这是旅游常识的重点部分我做了个截图，做个简要的解释1、这里插入了一个一行两列的表格；2、左侧是插入了一张背景图片，然后在上面放置了一些文字；3、右侧和景区概述的右侧，旅游路线的左侧我就不做介绍了；3.2.6酒店住宿这是酒店住宿的重点部分我做了个截图，做个简要的解释1、这理主要是介绍了五个大小不等的酒店共旅客住宿，这里我是插入了一个一行两列的表格；2、左侧插入了一个五行一列的嵌套表格，插入了五张酒店的图片；3、右侧也插入了一个五行一列的嵌套表格，在这五行里又插入了一个一行两列的嵌套表格，然后对应这左边的酒店的图片对应的插入这五个酒店的简介；4、总结一个礼拜的实训课程这么快就结束了，此次实训检验了通过一学期的学习对知识进行了汇总，