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

上传人：精***

文档编号：2504541

上传时间：2024-05-30

格式：DOC

页数：39

大小：1.99MB

《web网页设计专业课程设计方案报告.doc》由会员分享，可在线阅读，更多相关《web网页设计专业课程设计方案报告.doc（39页珍藏版）》请在咨信网上搜索。

《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对页面进行控制，最终再添加超链接和特效。主页源代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""> <html xmlns=""> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>新疆行</title> <link href="css/common.css" rel="stylesheet" type="text/css" /> <script type="text/javascript"> function MM_swapImgRestore() { //v3.0 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc; } </script> <link rel="stylesheet" type="text/css" href="css/lrtk.css" /> <script type="text/javascript" src="js/pptBox.js"></script> </head> <body> <div id="container"> <div id="banner"><img src="images/banner.jpg"></div> <div id="globallink"> <ul> <li><a href="index.html">首页</a></li> <li><a href="jianjie.html">新疆介绍</a></li> <li><a href="fengtu.html">风土人情</a></li> <li><a href="eat.html">吃在新疆</a></li> <li><a href="route.html">路线选择</a></li> </ul> <br> </div> <div id="left"> <div class="map"> <img src="images/map1.gif" width="190" height="150" ></a><br> </div> <div id="today"> <h3><span>今日推荐</span></h3> <ul> <li><a href="#"><img src="images/tuijian1.jpg"></a></li> <li><a href="#">喀纳斯河</a></li> <li><a href="#"><img src="images/tuijian2.jpg"></a></li> <li><a href="#">吐鲁番</a></li> <li><a href="#"><img src="images/tuijian3.jpg"></a></li> <li><a href="#">天山天池</a></li> </ul> <br> </div> </div> <div id="middle">  <div id="xxx" > <script> 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(); </script> </div>  <div id="beauty"> <h3><span>美景寻踪</span></h3> <marquee><ul> <li><a href="#"><img src="images/beauty1.jpg"></a></li> <li><a href="#"><img src="images/beauty2.jpg"></a></li> <li><a href="#"><img src="images/beauty3.jpg"></a></li> <li><a href="#"><img src="images/beauty4.jpg"></a></li> </ul> </marquee> <br> </div> <div id="route"> <h3><span>线路精选</span></h3> <ul> <li><a href="#">吐鲁番——库尔勒——库车——塔中——和田——喀什</a></li> <li><a href="#">乌鲁木齐——天池——克拉马依——乌伦古湖——喀纳斯</a></li> <li><a href="#">乌鲁木齐——奎屯——乔尔玛——那拉提——巴音布鲁克</a></li> <li><a href="#">乌鲁木齐——五彩城——将军隔壁——吉木萨尔</a></li> </ul> <br> </div> </div> <div id="right"> <div id="map"> <h3><span>新疆风光</span></h3> <p><a href="#" title="点击看大图"><img src="images/fengguang1.jpg"></a></p> <p><a href="#" title="点击看大图"><img src="images/fengguang2.jpg"></a></p> </div> <div id="food"> <h3><span>特色小吃</span></h3> <ul> <li><a href="#">烤羊肉串</a></li> <li><a href="#">大盘鸡</a></li> <li><a href="#">抓饭</a></li> <li><a href="#">酸奶疙瘩</a></li> </ul> <br> </div> <div id="life"> <h3><span>宾馆酒店</span></h3> <ul> <li><a href="#">天缘酒店</a></li> <li><a href="#">海德酒店</a></li> <li><a href="#">银全部大饭店</a></li> <li><a href="#">鸿福大饭店</a></li> <li><a href="#">友好大酒店</a></li> <li><a href="#">南山庄园</a></li> <li><a href="#">如家宾馆</a></li> </ul> <br> </div> </div> <div id="footer"> <p>兰欣©版权全部</p> </div> <div class="clear"></div> </div> </body> </html> CSS代码 @charset "utf-8"; body { margin:0px; padding:0px; text-align:center; font-size:12px; background:#2286c6; } #container{ position:relative; margin:0px auto 0px auto; width:780px; text-align:left; } div br{ display:none; } #globallink{ margin:0px; padding:0px; } #globallink ul{ list-style:none; padding:0px; margin:0px; } #globallink li{ float:left; text-align:center; width:156px; } #globallink a{ display:block; padding:9px 6px 11px 6px; background:url(../images/button1.jpg) no-repeat; margin:0px; } #globallink a:link, #globallink a:visited{ color:#004a87; text-decoration:underline; } #globallink a:hover{ color:#FFFFFF; text-decoration:underline; background:url(../images/button1_bg.jpg) no-repeat; } #left{ float:left; width:200px; background-color:#FFFFFF; margin:0px; padding:0px 0px 5px 0px; color:#d8ecff; } #left div{ background-color:#5ea6eb; margin:0px 5px 0px 5px; } .map{ margin:0px 5px 0px 5px; background-color:#5ea6eb; } #left div h3{ font-size:12px; padding:4px 0px 2px 15px; color:#003973; margin:0px 0px 5px 0px; background:#bbddff url(../images/icon2.gif) no-repeat 5px 7px; } #today{ padding:0px 0px 10px 0px; } #today ul{ list-style:none; margin:-5px 0px 0px 0px; padding:0px; } #today ul li{ text-align:center; } #today ul li img{ border:1px solid #FFFFFF; margin:8px 0px 0px 0px; } #today ul li a:link, #today ul li a:visited{ color:#d8ecff; text-decoration:none; } #today ul li a:hover{ color:#FFFF00; text-decoration:underline; } #middle{ background-color:#FFFFFF; margin:0px 0px 0px 2px; padding:5px 0px 0px 0px; width:400px; float:left; } #middle div{ margin-left:5px; margin-right:5px; position:relative; } #middle h3{ margin:0px; padding:0px; height:41px; } #middle h3 span{ display:none; /* 文字去掉，换成图片 */ } #beauty{ margin:15px 0px 0px 0px; padding:0px; } #beauty h3{ background:url(../images/picture_h1.gif) no-repeat; } #beauty ul, #route ul{ list-style:none; margin:8px 1px 0px 1px; padding:0px; } #beauty ul li{ float:left; width:97px; text-align:center; } #beauty ul li img{ border:1px solid #4ab0ff; } #route{ clear:both; margin:0px; padding:5px 0px 15px 0px; } #route h3{ background:url(../images/route_h1.gif) no-repeat; } #route ul li{ padding:3px 0px 0px 30px; background:url(../images/icon1.gif) no-repeat 20px 7px; } #route ul li a:link, #route ul li a:visited{ color:#004e8a; text-decoration:none; } #route ul li a:hover{ color:#000000; text-decoration:underline; } #right{ float:left; margin:0px 0px 1px 2px; width:176px; background-color:#FFFFFF; color:#d8ecff; } #right div{ position:relative; margin-left:5px; margin-right:5px; background-color:#5ea6eb; } #right div h3{ font-size:12px; padding:4px 0px 2px 15px; color:#003973; margin:0px 0px 5px 0px; background:#bbddff url(../images/icon2.gif) no-repeat 5px 7px; } #map{ margin-top:5px; } #map p{ text-align:center; margin:0px; padding:2px 0px 5px 0px; } #map p img{ border:1px solid #FFFFFF; } #food{ padding-top:10px; } #food ul, #life ul{ list-style:none; padding:0px 0px 10px 0px; margin:10px 10px 0px 10px; } #food ul li, #life ul li{ background: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:visited{ color:#d8ecff; text-decoration:none; } #food ul li a:hover, #life ul li a:hover{ color:#000000; text-decoration:none; } #life{ padding-top:10px; padding-bottom:5px; margin-bottom:5px; } #footer{ background-color:#FFFFFF; margin:1px 0px 0px 0px; clear:both; position:relative; padding:1px 0px 1px 0px; } #footer p{ text-align:center; padding:0px; margin:4px 5px 4px 5px; background-color:#5ea6eb; } #footer p a{ color:#FFFFFF; text-decoration:none; } #jianjie{ float:left; padding:10px 10px 10px 10px; width:560px; background-color:#FFFFFF; } .font1{ font-size: 14px; color: #000; line-height: 18px; text-indent: 2em; font-weight: normal; } .font2{ font-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; } .bitdiv{display:inline-block;width:18px;height:18px;margin:0 10px 10px 0px;cursor:pointer;float:right;} .defimg{background-image:url(../images/02.png)} .curimg{background-image:url(../images/01.png)} JS代码 function PPTBox() { this.uid = PPTBoxHelper.getId(); PPTBoxHelper.instance[this.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="<div id='"+this.uid+"_mainbox' class='mainbox' style='width:"+(this.width)+"px;height:"+(this.height+2)+"px;'>"; html += "<div id='"+this.uid+"_flashbox' class='flashbox' style='width:"+flashBoxWidth+"px;height:"+(this.height+2)+"px;'></div>"; html += "<div id='"+this.uid+"_imagebox' class='imagebox' style='width:"+this.width+"px;height:"+(this.picHeight+2)+"px;top:-"+(this.picHeight+20)+"px;'></div>"; html += "</div>"; document.write(html); }, _init : function (){ var picstyle= ""; var eventstr = "PPTBoxHelper.instance['"+this.uid+"']"; var imageHTML=""; var flashbox = ""; for(var i=0;i<this._box.length;i++){ var parame = this._box[i]; flashbox += this.flashHTML(parame.url,this.width,this.height,i); imageHTML ="<div class='bitdiv "+((i==0)?"curimg":"defimg")+"' title ="+parame.title+" src='bit01.gif' "+picstyle+" onclick = \""+eventstr+".clickPic("+i+")\" onmouseover=\""+eventstr+".mouseoverPic("+i+")\"></div>" + 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 = "<object classid='clsid:D27CDB6E-AE6D-11cf-96B8-' " + "codebase=',0,19,0' width='"+width+"' height='"+height+"'>" + "<param name=\"movie\" value=\""+url+"\" />" + "<param name='quality' value='high' />" + "<param name='wmode' value='transparent'>" + "<embed src='"+url+"' quality='high' wmode='opaque' pluginspage=''" +" type='application/x-shockwave-flash' width="+width+" height='"+height+"'></embed>" +" </object>"; } else { var eventstr = "PPTBoxHelper.instance['"+this.uid+"']"; var style = ""; if(this._box[idx].href){ style = "cursor:pointer" } html="<img src='"+url+"' style='width:"+width+"px;height:"+height+"px;"+style+"' onclick = \""+eventstr+".clickPic("+idx+")\"/>"; } return html; }, changeIndex : function(idx){ var parame = this._box[idx]; moveElement(this.uid+"_flashbox",-(idx*this.width),1); var imgs = this._$(this.uid+"_imagebox").getElementsByTagName("div"); imgs[this._box.length-1-this._curIndex].className = "bitdiv defimg"; imgs[this._box.length-1-idx].className = "bitdiv curimg"; this._curIndex = idx; }, mouseoverPic:function(idx){ this.changeIndex(idx); if(this.autoplayer>0){ clearInterval(this._autoplay); var eventstr = "PPTBoxHelper.instance['"+this.uid+"']._play()"; this._autoplay = setInterval(eventstr,this.autoplayer*1000); } }, clickPic:function(idx){ var parame = this._box[idx]; if(parame.href&&parame.href!=""){ window.open(parame.href,this.target); } }, add:function (imgParam){ this._box[this._box.length] = imgParam; }, show : function () { this._createMainBox(); this._init(); if(this.autoplayer>0){ var events

文档加载中……请稍候！
如果长时间未打开，您也可以点击刷新试试。

下载文档保存到电脑，查找使用更方便

12 金币

申诉本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请申请举报、认领或删除 立即下载

配套讲稿：: 如PPT文件的首页显示word图标，表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
特殊限制：: 部分文档作品中含有的国旗、国徽等图片，仅作为作品整体效果示例展示，禁止商用。设计者仅对作品中独创性部分享有著作权。
关键词：: web 网页设计专业课程设计方案报告

咨信网温馨提示：
1、咨信平台为文档C2C交易模式，即用户上传的文档直接被用户下载，收益归上传人（含作者）所有；本站仅是提供信息存储空间和展示预览，仅对用户上传内容的表现方式做保护处理，对上载内容不做任何修改或编辑。所展示的作品文档包括内容和图片全部来源于网络用户和作者上传投稿，我们不确定上传用户享有完全著作权，根据《信息网络传播权保护条例》，如果侵犯了您的版权、权益或隐私，请联系我们，核实后会尽快下架及时删除，并可随时和客服了解处理情况，尊重保护知识产权我们共同努力。
2、文档的总页数、文档格式和文档大小以系统显示为准(内容中显示的页数不一定正确)，网站客服只以系统显示的页数、文件格式、文档大小作为仲裁依据，个别因单元格分列造成显示页码不一将协商解决，平台无法对文档的真实性、完整性、权威性、准确性、专业性及其观点立场做任何保证或承诺，下载前须认真查看，确认无误后再购买，务必慎重购买；若有违法违纪将进行移交司法处理，若涉侵权平台将进行基本处罚并下架。
3、本站所有内容均由用户上传，付费前请自行鉴别，如您付费，意味着您已接受本站规则且自行承担风险，本站不进行额外附加服务，虚拟产品一经售出概不退款（未进行购买下载可退充值款），文档一经付费（服务费）、不意味着购买了该文档的版权，仅供个人/单位学习、研究之用，不得用于商业用途，未经授权，严禁复制、发行、汇编、翻译或者网络传播等，侵权必究。
4、如你看到网页展示的文档有www.zixin.com.cn水印，是因预览和防盗链等技术需要对页面进行转换压缩成图而已，我们并不对上传的文档进行任何编辑或修改，文档下载后都不会有水印标识（原文档上传前个别存留的除外），下载后原文更清晰；试题试卷类文档，如果标题没有明确说明有答案则都视为没有答案，请知晓；PPT和DOC文档可被视为“模板”，允许上传人保留章节、目录结构的情况下删减部份的内容；PDF文档不管是原文档转换或图片扫描而得，本站不作要求视为允许，下载前自行私信或留言给上传者【精***】。
5、本文档所展示的图片、画像、字体、音乐的版权可能需版权方额外授权，请谨慎使用；网站提供的党政主题相关内容(国旗、国徽、党徽－－等)目的在于配合国家政策宣传，仅限个人学习分享使用，禁止用于任何广告和商用目的。
6、文档遇到问题，请及时私信或留言给本站上传会员【精***】，需本站解决可联系【微信客服】、【 QQ客服】，若有其他问题请点击或扫码反馈【服务填表】；文档侵犯商业秘密、侵犯著作权、侵犯人身权等，请点击“【版权申诉】”（推荐），意见反馈和侵权处理邮箱：1219186828@qq.com；也可以拔打客服电话：4008-655-100；投诉/维权电话：4009-655-100。

关于本文

本文标题：web网页设计专业课程设计方案报告.doc
链接地址：https://www.zixin.com.cn/doc/2504541.html

精***

内容提供者

实名认证

查看上传人更多文档

部分上传会员的收益排行 01、路***（￥15400+），
02、曲****（￥15300+），
03、wei****016（￥13200+）,
04、大***流（￥12600+），
05、Fis****915（￥4200+），
06、h****i（￥4100+），
07、Q**（￥3400+），
08、自******点（￥2400+），
09、h*****x（￥1400+），
10、c****e（￥1100+）,
11、be*****ha（￥800+），
12、13********8（￥800+）。

相似文档

自信AI助手