网页编程课程设计报告

《网页编程课程设计报告》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、西安翻译学院课程设计报告院系：工程技术学院课程名称：网页编程设计题目：鲜花蛋糕礼品店专业：软件技术班级：113120701学号：11312070110学生姓名：杜奇指导教师：王艳丽设计时间：2012年6月二〇一二年六月二十六日5课程设计任务书设计题目鲜花蛋糕礼品店学生姓名杜奇专业软件技术班级11312070110设计要求：1.使用CSS布局网页，页面风格简洁、明快，设计新颖，紧扣主题。2.色彩搭配合理，线条流畅，色彩反映主题，重心稳。不滥用图片、动画。3.界面友好：操作方便，导航明确。4.层次清楚：整个站点风格一致。页面深度不超过3级，各级页面之间往返访问方便、有效。5.链

2、接有效：各网页链接有效，不出现显示不出的图片。没有无效链接、错误链接和非法链接。6.文件管理：站点内文件、文件夹的命名和存放规范合理。学生应完成的工作：1.素材收集。2.充分理解盒子模型。3.使用CSS+DIV布局一个电子商务网站。4.完成网站设计，使网站具有文化气息。5.完成课程设计报告。参考文献：[1]任小琦《网页设计与制作》西安：西安交通大学出版社2011,12[2]杨水清《Javascript动态网页开发详解》北京：电子工业出版社2008，1[3]CSS黑板报http://www.css-board.cn/工作计划：5.20——5.25构思网站主题，确定网站风格及重

3、构方案5.26——6.1用CSS进行网站布局，完成主页框架6.2——6.10完成网站基本元素，调整个别视觉效果6.10——6.15充实网站内容，完成整个网站6.15——6.20对网站进行兼容性等测试，完善各项细节任务下达日期：2012年5月14日任务完成日期：2012年6月20日指导教师（签名）：学生（签名）：5目录1.课程设计目的11.1课程设计目的12.课程设计题目描述和要求12.1课程设计题目描述12.2课程设计题目要求13.课程设计报告内容23.1网站的总体规划23.2网站风格定位23.3网站代码方案34.总结45.参考文献：451.课程设计目的1.1课程设计目的通

4、过课程设计，每个学生在指导教师的指导下，完成一定的任务，受到一次综合运用所学知识、独立完成某项技术工作的训练，从而培养和提高其独立工作能力，主要有以下四个方面的业务能力：1．综合运用所学专业基本理论，提高查阅文献和资料的能力。2．培养学生进行方案设计，分析比较和设计、计算的能力。3．培养学生网站开发，和调试计算机程序的能力。4．提高学生进行技术总结和撰写说明书的能力。2.课程设计题目描述和要求2.1课程设计题目描述本次课程设计的题目为《鲜花蛋糕礼品店》，这是一个以网上订花，订蛋糕为主体的文化网站。该网站不仅能完成网上订餐等便捷服务，还能使用户了解花艺文化，富有文化气息。2.

5、2课程设计题目要求本课程是为了配合《网页设计》课程开设，通过使用Dreamweaver完成设计。主要使学生在规定的时间内，完成课程内容涉及到的主要课题设计、实现和训练。使学生掌握网页制作的理论知识与实践结合，扩大加深对网站建设的理解，并提高学生的实践能力。对学生要求如下：1．要充分认识课程设计对培养自己的重要性，认真做好设计前的各项准备工作。2．既要虚心接受老师的指导，又要充分发挥主观能动性。结合课题，独立思考，努力钻研，勤于实践，勇于创新。3．独立按时完成规定的工作任务，不得弄虚作假，不准抄袭他人内容。54．在设计过程中，要严格要求自己，树立严肃、严密、严谨的科学态度，必

6、须按时、按质、按量完成课程设计。3.课程设计报告内容3.1网站的总体规划作为一个网上订花网站，需要有拥有花艺文化气息。在花样订购的基础上，贯穿花艺文化，使网站充满亲和力。网站结构图如下：鲜花蛋糕礼品店店铺首页付款帮助购物保证留言板信用评价卡通花束鲜花专区蛋糕专区买家须知关于本店3.2网站风格定位虽说本网站为一个电子商务功能的网站，但主题为销售，所以我并没有设计为商务感很强的风格，而是采用绿色和橙色为主色调的清新风格。绿色，粉色有花朵美好之义，从视觉上调动用户的喜爱。5网站首页预览图：图1图23.3网站代码方案本网站采用HTML+CSS布局排版，经测试，IE6.0版本以上浏览

7、器均可正常浏览。54.总结通过这次课程设计，学会了怎样使用Dreamweaver和手写代码制作静态网站，并且在查阅资料和请教他人的过程中掌握了许多课本上没有的内容。制作过程中，和同学老师相互交流，充分认识到团队精神的重要性。并且在专业知识的基础上，还了解了饮食文化，扩大了知识面。这次网站制作中，有以下心得经验：1.CSS布局用浮动时，margin在IE7.0以下得不到很好的兼容，容易出现层错位现象。2.使用定位方案来布局网页，能使得各层精准，并且兼容性强。3.充分利用Photoshop。4.背景图片用小尺寸图片进行