《web开发技术》课程设计学院:工学院专业:软件工程班级:1401姓名:兰欣学号:2014011029指导教师:姬广永2015年12月31日工学院课程设计评审表学生姓名兰欣专业软件工程年级2014学号2014011029设计题目新疆行旅游网站评价内容评价指标评分权值评定成绩业务水平(含答辩)有扎实的基础理论知识和专业技能;能够综合运用所学的HTML、CSS、JavaScript等知识和Dreamweaver开发工具进行WEB站点的规划、设计与制作;能够根据网站规划,搜集、整理相关素材;独立进行实验工作,学会调试、发布、管理网站,并能运用所学知识和技能去发现与解决实际问题;主页版面内容、结构和链接设计清晰合理;考虑页面整体布局、视觉效果、页面尺寸和框架等因素,保持网站的整体设计风格一致。40课程设计报告(设计说明书)质量综述简练完整;结论严谨合理;实验正确,分析处理科学;文字通顺,技术用语准确,符号统一,编号齐全,书写工整规范,图表完备、整洁、正确;结果有应用价值;工作中有创新意识;对前人工作有改进或突破,或有独特见解。30工作量、工作态度按期完成规定的任务,工作量饱满,难度较大;工作努力,遵守纪律;工作作风严谨务实30合计100指导教师评语3《web开发技术》课程设计任务书设计题目:新疆行旅游网站指导老师姬广永参加学生兰欣设计目的综合运用所学的HTML及CSS、JavaScript等知识,使用Dreamweaver编辑网页,Flash设计动画,Photoshop或FireWorks处理图形,制作出主题鲜明、结构清晰、图文并茂、具有专业水平的网站。设计内容1、确定所要制作网站的类型、主题、规模以及要使用的技术。2、规划网站的栏目、风格,画出站点规划层次图,建立站点目录。3、根据网站规划,搜集、整理相关素材。4、对网站用到的文本、图片、动画等多媒体素材进行处理。5、制作设计网站首页、二级页面、三级页面。6、主页版面内容、结构和链接设计要清晰,醒目。7、考虑页面整体布局、视觉效果、页面尺寸和框架等因素,保持网站的整体设计风格一致。8、网站调试:网站各个页面完成后,对站点进行调试。9、网站发布:网站建设好后,发布到网站服务器。设计要求《web开发技术》课程设计要求学生所制作网站,原则上一人一题。确需团队合作方能完成的大型或较为复杂的网站,可由多人进行共同合作开发,一般最多不超过3人,但需在课程设计报告中写明分工,明确每名学生应独立完成的任务,并且课程设计报告主要介绍自己所做内容,与同组学生的课程设计报告70%以上不同,使每名学生都受到较全面的训练。4新疆行网站的设计1设计目的随着我国经济的迅速发展,人们的生活水平有了显著提高,假日经济和旅游经济已成为人们消费的热点。各地也把旅游业当作本地经济发展的重要支柱之一,从而带动别的经济产业的快速发展。旅游网站也就成为了各旅游胜地和旅行社对外宣传中不可缺少的工具,它的内容对于旅游胜地的宣传和旅游地的项目的开发的决策起着非常重要的作用。新疆拥有丰富的地域优势和民族民俗文化旅游资源,该网站通过首页、新疆简介、风土人情、吃在新疆、路线选择五个页面,文字与图片搭配来介绍新疆旅游。2网站规划网站的类型:旅游网站网站主题:新疆行网站风格:网站以蓝色为主色调,以白色为辅色,布局简单明了,突出新疆风景秀丽原生态。使用的技术:Html、Div、CSS、JavaScript、Photoshop网站栏目:首页、新疆简介、风土人情、吃在新疆、路线选择网站结构示意图:banner导航条53站点首页设计首页采用导航在主视觉下方的布局,导航放在banner下面的好处是可以弥补banner中设计素材截断的缺点,让设计看上去完整、自然。在导航条下划分左中右三个内容区,分别用风景与简洁的文字来吸人眼球。在图片的选择上,一是体现出新疆旅游景点的特色,而是与主色调蓝色相呼应,是整体更协调。网站主页效果图首先在网上搜集大量的图片和文档进行整理,对进行图像处理,并制作了一些图像,进行保存用于网页设计。用Div对页面进行布局,用CSS对页面进行控制,最后再添加超链接以及特效。主页源代码!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Transitional//EN==Content-Typecontent=text/html;charset=utf-8/title新疆行/titlelinkhref=css/common.cssrel=stylesheettype=text/css/scripttype=text/javascriptfunctionMM_swapImgRestore(){//v3.0vari,x,a=document.MM_sr;for(i=0;a&&ia.length&&(x=a[i])&&x.oSrc;i++)x.src=x.oSrc;}/scriptlinkrel=stylesheettype=text/csshref=css/lrtk.css/scripttype=text/javascriptsrc=js/pptBox.js/script6/headbodydivid=containerdivid=bannerimgsrc=images/banner.jpg/divdivid=globallinkulliahref=index.html首页/a/liliahref=jianjie.html新疆简介/a/liliahref=fengtu.html风土人情/a/liliahref=eat.html吃在新疆/a/liliahref=route.html路线选择/a/li/ulbr/divdivid=leftdivclass=mapimgsrc=images/map1.gifwidth=190height=150/abr/divdivid=todayh3span今日推荐/span/h3ulliahref=#imgsrc=images/tuijian1.jpg/a/liliahref=#喀纳斯河/a/liliahref=#imgsrc=images/tuijian2.jpg/a/liliahref=#吐鲁番/a/liliahref=#imgsrc=images/tuijian3.jpg/a/liliahref=#天山天池/a/li/ulbr/div/divdivid=middle!--begin--divid=xxxscriptvarbox=newPPTBox();box.width=390;//宽度box.height=260;//高度box.autoplayer=3;//自动播放间隔时间//box.add({url:图片地址,title:悬浮标题,href:链接地址})box.add({url:images/1.jpg})box.add({url:images/2.jpg})box.add({url:images/3.jpg})box.add({url:images/4.jpg})7box.show();/script/div!--end--divid=beautyh3span美景寻踪/span/h3marqueeulliahref=#imgsrc=images/beauty1.jpg/a/liliahref=#imgsrc=images/beauty2.jpg/a/liliahref=#imgsrc=images/beauty3.jpg/a/liliahref=#imgsrc=images/beauty4.jpg/a/li/ul/marqueebr/divdivid=routeh3span线路精选/span/h3ulliahref=#吐鲁番——库尔勒——库车——塔中——和田——喀什/a/liliahref=#乌鲁木齐——天池——克拉马依——乌伦古湖——喀纳斯/a/liliahref=#乌鲁木齐——奎屯——乔尔玛——那拉提——巴音布鲁克/a/liliahref=#乌鲁木齐——五彩城——将军隔壁——吉木萨尔/a/li/ulbr/div/divdivid=rightdivid=maph3span新疆风光/span/h3pahref=#title=点击看大图imgsrc=images/fengguang1.jpg/a/ppahref=#title=点击看大图imgsrc=images/fengguang2.jpg/a/p/divdivid=foodh3span特色小吃/span/h3ulliahref=#烤羊肉串/a/liliahref=#大盘鸡/a/liliahref=#抓饭/a/liliahref=#酸奶疙瘩/a/li/ulbr8/divdivid=lifeh3span宾馆酒店/span/h3ulliahref=#天缘酒店/a/liliahref=#海德酒店/a/liliahref=#银都大饭店/a/liliahref=#鸿福大饭店/a/liliahref=#友好大酒店/a/liliahref=#南山庄园/a/liliahref=#如家宾馆/a/li/ulbr/div/divdivid=footerp兰欣©版权所有/p/divdivclass=clear/div/div/body/htmlCSS代码@charsetutf-8;body{margin:0px;padding:0px;text-align:center;font-size:12px;background:#2286c6;}#container{position:relative;margin:0pxauto0pxauto;width:780px;text-align:left;}divbr{display:none;}#globallink{margin:0px;padding:0px;}9#globallinkul{list-style:none;padding:0px;margin:0px;}#globallinkli{float:left;text-align:center;width:156px;}#globallinka{display:block;padding:9px6px11px6px;background:url(../images/button1.jpg)no-repeat;margin:0px;}#globallinka:link,#globallinka:visited{color:#004a87;text-decoration:underline;}#globallinka:hover{color:#FFFFFF;text-d