web网页设计专业课程设计方案报告.doc

web开发技术课程设计 学 院： 工学院 专 业： 软件工程 班 级： 1401 姓 名： 兰欣 学 号： 011029 指导老师： 姬广永 12月31日工学院课程设计评审表学生姓名兰欣专业软件工程年级学号设计题目新疆行旅游网站评价内容评价指标评分权值评定成绩业务水平（含答辩）有扎实基础理论知识和专业技能；能够综合利用所学HTML、CSS、JavaScript等知识和Dreamweaver开发工具进行WEB站点计划、设计和制作；能够依据网站计划，搜集、整理相关素材；独立进行试验工作，学会调试、公布、管理网站，并能利用所学知识和技能去发觉和处理实际问题；主页版面内容、结构和链接设计清楚合理；考虑页面整体布局、视觉效果、页面尺寸和框架等原因，保持网站整体设计风格一致。40课程设计汇报(设计说明书)质量综述简练完整；结论严谨合理；试验正确，分析处理科学；文字通顺，技术用语正确，符号统一，编号齐全，书写工整规范，图表完备、整齐、正确；结果有应用价值；工作中有创新意识；对前人工作有改善或突破，或有独特见解。30工作量、工作态度按期完成要求任务，工作量饱满，难度较大；工作努力，遵守纪律；工作作风严谨务实30累计100指导老师评语设计题目：新疆行旅游网站指 导老 师姬广永参 加学 生兰欣设 计目 综合利用所学HTML及CSS、JavaScript等知识，使用Dreamweaver编辑网页，Flash 设计动画，Photoshop或FireWorks处理图形，制作出专题鲜明、结构清楚、图文并茂、含有专业水平网站。设 计内 容1、确定所要制作网站类型、专题、规模和要使用技术。 2、计划网站栏目、风格，画出站点计划层次图，建立站点目录。 3、依据网站计划，搜集、整理相关素材。 4、对网站用到文本、图片、动画等多媒体素材进行处理。 5、制作设计网站首页、二级页面、三级页面。6、主页版面内容、结构和链接设计要清楚，醒目。7、考虑页面整体布局、视觉效果、页面尺寸和框架等原因，保持网站整体设计风格一致。 8、网站调试：网站各个页面完成后，对站点进行调试。 9、网站公布：网站建设好后，公布到网站服务器。设 计要 求web开发技术课程设计要求学生所制作网站，标准上一人一题。确需团体合作方能完成大型或较为复杂网站，可由多人进行共同合作开发，通常最多不超出3人，但需在课程设计汇报中写明分工，明确每名学生应独立完成任务，而且课程设计汇报关键介绍自己所做内容，和同组学生课程设计汇报70%以上不一样，使每名学生全部受到较全方面训练。web开发技术课程设计任务书新疆行网站设计1设计目标伴随中国经济快速发展，大家生活水平有了显著提升，假日经济和旅游经济已成为大家消费热点。各地也把旅游业看成当地经济发展关键支柱之一，从而带动别经济产业快速发展。旅游网站也就成为了各旅游胜地和旅行社对外宣传中不可缺乏工具，它内容对于旅游胜地宣传和旅游地项目标开发决议起着很关键作用。新疆拥有丰富地域优势和民族民俗文化旅游资源，该网站经过首页、新疆介绍、风土人情、吃在新疆、路线选择五个页面，文字和图片搭配来介绍新疆旅游。2网站计划网站类型：旅游网站网站专题：新疆行网站风格：网站以蓝色为主色调，以白色为辅色，布局简单明了，突出新疆风景秀丽原生态。使用技术：Html、Div、CSS、JavaScript、Photoshop网站栏目：首页、新疆介绍、风土人情、吃在新疆、路线选择网站结构示意图：banner导航条3站点首页设计首页采取导航在主视觉下方布局，导航放在banner下面好处是能够填补banner中设计素材截断缺点，让设计看上去完整、自然。在导航条下划分左中右三个内容区，分别用风景和简练文字来吸人眼球。在图片选择上，一是表现出新疆旅游景点特色，而是和主色调蓝色相呼应，是整体更协调。网站主页效果图首先在网上搜集大量图片和文档进行整理，对进行图像处理，并制作了部分图像，进行保留用于网页设计。用Div对页面进行布局，用CSS对页面进行控制，最终再添加超链接和特效。主页源代码新疆行function MM_swapImgRestore() /v3.0 var i,x,a=document.MM_sr; for(i=0;a&ia.length&(x=ai)&x.oSrc;i+) x.src=x.oSrc; 首页新疆介绍风土人情吃在新疆路线选择 今日推荐 喀纳斯河吐鲁番天山天池 var box =new PPTBox(); 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) box.show(); 美景寻踪 线路精选吐鲁番库尔勒库车塔中和田喀什乌鲁木齐天池克拉马依乌伦古湖喀纳斯乌鲁木齐奎屯乔尔玛那拉提巴音布鲁克乌鲁木齐五彩城将军隔壁吉木萨尔新疆风光特色小吃烤羊肉串大盘鸡抓饭酸奶疙瘩宾馆酒店天缘酒店海德酒店银全部大饭店鸿福大饭店友好大酒店南山庄园如家宾馆兰欣©版权全部 CSS代码charset utf-8;body margin:0px; padding:0px;text-align:center;font-size:12px;background:#2286c6;#containerposition:relative;margin:0px auto 0px auto;width:780px;text-align:left;div brdisplay:none;#globallinkmargin:0px; padding:0px;#globallink ul list-style:none;padding:0px; margin:0px;#globallink lifloat:left; text-align:center;width:156px;#globallink adisplay:block;padding:9px 6px 11px 6px;background:url(./images/button1.jpg) no-repeat;margin:0px;#globallink a:link, #globallink a:visitedcolor:#004a87;text-decoration:underline;#globallink a:hovercolor:#FFFFFF;text-decoration:underline;background:url(./images/button1_bg.jpg) no-repeat;#leftfloat:left;width:200px;background-color:#FFFFFF;margin:0px;padding:0px 0px 5px 0px;color:#d8ecff;#left divbackground-color:#5ea6eb;margin:0px 5px 0px 5px;.mapmargin:0px 5px 0px 5px; background-color:#5ea6eb;#left div h3font-size:12px;padding:4px 0px 2px 15px;color:#003973;margin:0px 0px 5px 0px;background:#bbddff url(./images/icon2.gif) no-repeat 5px 7px;#todaypadding:0px 0px 10px 0px;#today ullist-style:none;margin:-5px 0px 0px 0px;padding:0px;#today ul litext-align:center;#today ul li imgborder:1px solid #FFFFFF;margin:8px 0px 0px 0px;#today ul li a:link, #today ul li a:visitedcolor:#d8ecff;text-decoration:none;#today ul li a:hovercolor:#FFFF00;text-decoration:underline;#middlebackground-color:#FFFFFF;margin:0px 0px 0px 2px;padding:5px 0px 0px 0px;width:400px; float:left;#middle divmargin-left:5px;margin-right:5px;position:relative;#middle h3margin:0px; padding:0px;height:41px;#middle h3 spandisplay:none;/* 文字去掉，换成图片 */#beautymargin:15px 0px 0px 0px;padding:0px;#beauty h3background:url(./images/picture_h1.gif) no-repeat;#beauty ul, #route ullist-style:none;margin:8px 1px 0px 1px;padding:0px;#beauty ul lifloat:left;width:97px;text-align:center;#beauty ul li imgborder:1px solid #4ab0ff;#routeclear:both; margin:0px;padding:5px 0px 15px 0px;#route h3background:url(./images/route_h1.gif) no-repeat;#route ul lipadding:3px 0px 0px 30px;background:url(./images/icon1.gif) no-repeat 20px 7px;#route ul li a:link, #route ul li a:visitedcolor:#004e8a;text-decoration:none;#route ul li a:hovercolor:#000000;text-decoration:underline;#rightfloat:left;margin:0px 0px 1px 2px;width:176px;background-color:#FFFFFF;color:#d8ecff;#right divposition:relative;margin-left:5px;margin-right:5px;background-color:#5ea6eb;#right div h3font-size:12px;padding:4px 0px 2px 15px;color:#003973;margin:0px 0px 5px 0px;background:#bbddff url(./images/icon2.gif) no-repeat 5px 7px;#mapmargin-top:5px;#map ptext-align:center;margin:0px;padding:2px 0px 5px 0px;#map p imgborder:1px solid #FFFFFF;#foodpadding-top:10px;#food ul, #life ullist-style:none;padding:0px 0px 10px 0px;margin:10px 10px 0px 10px;#food ul li, #life ul libackground:url(./images/icon1.gif) no-repeat 3px 9px;padding:3px 0px 3px 12px;border-bottom:1px dashed #EEEEEE;#food ul li a:link, #food ul li a:visited, #life ul li a:link, #life ul li a:visitedcolor:#d8ecff;text-decoration:none;#food ul li a:hover, #life ul li a:hovercolor:#000000;text-decoration:none;#lifepadding-top:10px;padding-bottom:5px;margin-bottom:5px;#footerbackground-color:#FFFFFF;margin:1px 0px 0px 0px;clear:both;position:relative;padding:1px 0px 1px 0px;#footer ptext-align:center;padding:0px;margin:4px 5px 4px 5px;background-color:#5ea6eb;#footer p acolor:#FFFFFF;text-decoration:none;#jianjiefloat:left;padding:10px 10px 10px 10px;width:560px;background-color:#FFFFFF;.font1font-size: 14px;color: #000;line-height: 18px;text-indent: 2em;font-weight: normal;.font2font-size:18px;font-weight:bold;color:#000;text-indent:2em;.clear clear:both;.mainbox overflow:hidden; position:relative;.flashbox overflow:hidden; position:relative;.imagebox text-align:right;position:relative;z-index:999;.bitdivdisplay:inline-block;width:18px;height:18px;margin:0 10px 10px 0px;cursor:pointer;float:right;.defimgbackground-image:url(./images/02.png).curimgbackground-image:url(./images/01.png)JS代码 function PPTBox() this.uid = PPTBoxHelper.getId(); PPTBoxHelper.instancethis.uid = this; this._$ = function(id)return document.getElementById(id); this.width = 390;/宽度 this.height = 260;/高度 this.picWidth = 15;/小图宽度 this.picHeight = 12;/小图高度 this.autoplayer = 4;/自动播放间隔（秒） this.target = _blank; this._box = ; this._curIndex = 0; PPTBox.prototype = _createMainBox : function () var flashBoxWidth = this.width * this._box.length + 5; var html=; html += ; html += ; html += ; document.write(html); , _init : function () var picstyle= ; var eventstr = PPTBoxHelper.instance+this.uid+; var imageHTML=; var flashbox = ; for(var i=0;ithis._box.length;i+) var parame = this._boxi; flashbox += this.flashHTML(parame.url,this.width,this.height,i); imageHTML = + imageHTML; this._$(this.uid+_flashbox).innerHTML = flashbox; this._$(this.uid+_imagebox).innerHTML = imageHTML; , _play : function() clearInterval(this._autoplay); var idx = this._curIndex+1; if(idx=this._box.length)idx=0; this.changeIndex(idx); var eventstr = PPTBoxHelper.instance+this.uid+._play(); this._autoplay = setInterval(eventstr,this.autoplayer*1000); , flashHTML : function(url,width,height,idx) var isFlash = url.substring(url.lastIndexOf(.)+1).toLowerCase()=swf; var html = ; if(isFlash) html = + + + + + ; else var eventstr = PPTBoxHelper.instance+this.uid+; var style = ; if(this._boxidx.href) style = cursor:pointer html=; return html; , changeIndex : function(idx) var parame = this._boxidx; moveElement(this.uid+_flashbox,-(idx*this.width),1); var imgs = this._$(this.uid+_imagebox).getElementsByTagName(div); imgsthis._box.length-1-this._curIndex.className = bitdiv defimg; imgsthis._box.length-1-idx.className = bitdiv curimg; this._curIndex = idx; , mouseoverPic:function(idx) this.changeIndex(idx); if(this.autoplayer0) clearInterval(this._autoplay); var eventstr = PPTBoxHelper.instance+this.uid+._play(); this._autoplay = setInterval(eventstr,this.autoplayer*1000); , clickPic:function(idx) var parame = this._boxidx; if(parame.href¶me.href!=) window.open(parame.href,this.target); , add:function (imgParam) this._boxthis._box.length = imgParam; , show : function () this._createMainBox(); this._init(); if(this.autoplayer0) var events