《web网页设计课程设计报告》由会员分享，可在线阅读，更多相关《web网页设计课程设计报告（26页珍藏版）》请在金锄头文库上搜索。
1、 web 开发技术 课程设计学 院： 工学院 专 业： 软件工程 班 级： 1401 姓 名： 兰欣 学 号： 2014011029 指导教师： 姬广永 2015年 12月 31日工学院课程设计评审表学生姓名 兰欣 专业 软件工程 年级 2014 学号 2014011029设计题目 新疆行旅游网站评价内容 评价指标评分权值评定成绩业务水平（含答辩）有扎实的基础理论知识和专业技能；能够综合运用所学的HTML、 CSS、JavaScript 等知识和 Dreamweaver 开发工具进行 WEB站点的规划、设计与制作；能够根据网站规划，搜集、整理相关素材；独立进行实验工作，学会调试、发布、管理网站
2、，并能运用所学知识和技能去发现与解决实际问题；主页版面内容、结构和链接设计清晰合理；考虑页面整体布局、视觉效果、页面尺寸和框架等因素，保持网站的整体设计风格一致。40课程设计报告(设计说明书) 质量综述简练完整；结论严谨合理；实验正确，分析处理科学；文字通顺，技术用语准确，符号统一，编号齐全，书写工整规范，图表完备、整洁、正确；结果有应用价值；工作中有创新意识；对前人工作有改进或突破，或有独特见解。30工作量、工作态度按期完成规定的任务，工作量饱满，难度较大；工作努力，遵守纪律；工作作风严谨务实30合计 100指导教师评语2web 开发技术课程设计任务书设计题目：新疆行旅游网站指 导老 师姬广
3、永参 加学 生兰欣设 计目 的综合运用所学的 HTML 及 CSS、JavaScript 等知识，使用 Dreamweaver 编辑网页，Flash 设计动画，Photoshop 或 FireWorks 处理图形，制作出主题鲜明、结构清晰、图文并茂、具有专业水平的网站。设 计内 容1、确定所要制作网站的类型、主题、规模以及要使用的技术。 2、规划网站的栏目、风格，画出站点规划层次图，建立站点目录。 3、根据网站规划，搜集、整理相关素材。 4、对网站用到的文本、图片、动画等多媒体素材进行处理。 5、制作设计网站首页、二级页面、三级页面。6、主页版面内容、结构和链接设计要清晰，醒目。7、考虑页面整
4、体布局、视觉效果、页面尺寸和框架等因素，保持网站的整体设计风格一致。 8、网站调试：网站各个页面完成后，对站点进行调试。 9、网站发布：网站建设好后，发布到网站服务器。设 计要 求web 开发技术课程设计要求学生所制作网站，原则上一人一题。确需团队合作方能完成的大型或较为复杂的网站，可由多人进行共同合作开发，一般最多不超过 3人，但需在课程设计报告中写明分工，明确每名学生应独立完成的任务，并且课程设计报告主要介绍自己所做内容，与同组学生的课程设计报告70%以上不同，使每名学生都受到较全面的训练。 3新疆行网站的设计1 设计目的随着我国经济的迅速发展，人们的生活水平有了显著提高，假日经济和旅游经
5、济已成为人们消费的热点。各地也把旅游业当作本地经济发展的重要支柱之一，从而带动别的经济产业的快速发展。旅游网站也就成为了各旅游胜地和旅行社对外宣传中不可缺少的工具，它的内容对于旅游胜地的宣传和旅游地的项目的开发的决策起着非常重要的作用。新疆拥有丰富的地域优势和民族民俗文化旅游资源，该网站通过首页、新疆简介、风土人情、吃在新疆、路线选择五个页面，文字与图片搭配来介绍新疆旅游。2 网站规划网站的类型：旅游网站网站主题：新疆行网站风格：网站以蓝色为主色调，以白色为辅色，布局简单明了，突出新疆风景秀丽原生态。使用的技术：Html、Div、CSS、JavaScript、Photoshop网站栏目：首页、
6、新疆简介、风土人情、吃在新疆、路线选择网站结构示意图：banner导航条43 站点首页设计首页采用导航在主视觉下方的布局，导航放在 banner下面的好处是可以弥补banner中设计素材截断的缺点，让设计看上去完整、自然。在导航条下划分左中右三个内容区，分别用风景与简洁的文字来吸人眼球。在图片的选择上，一是体现出新疆旅游景点的特色，而是与主色调蓝色相呼应，是整体更协调。网站主页效果图首先在网上搜集大量的图片和文档进行整理，对进行图像处理，并制作了一些图像，进行保存用于网页设计。用 Div对页面进行布局，用 CSS对页面进行控制，最后再添加超链接以及特效。主页源代码新疆行function MM_
7、swapImgRestore() /v3.0var i,x,a=document.MM_sr; for(i=0;a5首页新疆简介风土人情吃在新疆路线选择今日推荐喀纳斯河吐鲁番天山天池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.a
8、dd(url:images/4.jpg)6box.show();美景寻踪线路精选吐鲁番库尔勒库车塔中和田喀什乌鲁木齐天池克拉马依乌伦古湖喀纳斯乌鲁木齐奎屯乔尔玛那拉提巴音布鲁克乌鲁木齐五彩城 将军隔壁吉木萨尔新疆风光特色小吃烤羊肉串大盘鸡抓饭酸奶疙瘩7宾馆酒店天缘酒店海德酒店银都大饭店鸿福大饭店友好大酒店南山庄园如家宾馆兰欣 版权所有CSS 代码charset utf-8;body margin:0px; padding:0px;text-align:center;font-size:12px;background:#2286c6;#containerposition:relative;mar
9、gin:0px auto 0px auto;width:780px;text-align:left;div brdisplay:none;#globallinkmargin:0px; padding:0px;8#globallink ullist-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.j
10、pg) 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 0
11、px;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;9color:#003973;margin:0px 0px 5px 0px;background:#bbddff url(./images/icon2.gif) no-repeat 5px 7px;#todaypadding:0px 0px
12、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:underlin
13、e;#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 span10display:none; /* 文字去掉，换成图片 */#beautymargin:15px 0px 0px 0px;padding:0p
14、x;#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 h3backgrou
15、nd: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;11margin: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;padd
