书帮网网页制作课程设计报告.doc

山东理工大学计算机学院课 程 设 计（WEB开发基础）班 级 软件1304 姓 名 学 号 指导教师 XXX二一五年七月九日课程设计任务书及成绩评定课题名称 书帮网网页制作 、题目的目的和要求： 1、设计目的巩固和加深对Web的理解，通过上机实验、调试代码，加深对课本知识的理解，最终使学生能够熟练应用Web的知识写网页。（1）通过本课程的学习，能熟练掌握几种基本网页设计的基本操作。（2）能针对给定题目，选择相应的Web知识，分析并设计代码，进而给出问题的正确求解过程并编写代码实现。2、设计题目要求： 根据网站首页的页面布局自行设计【基本要求】图书库：内容分为左侧和右侧，左侧包含图书搜索、图书分类列表、图书周排行榜（十大）、图书月排行榜（十大）书帮客作家天地插画家有书加入帮助、设计进度及完成情况日 期内 容7.06-7.07选取参考书，查阅有关文献资料，完成资料搜集和系统分析工作。7.077.08创建相关网页设计,录入源代码。7.087.09调试代码并记录调试中的问题，初步完成课程设计报告。7.097.10上交课程设计报告打印版并进行课程设计答辩，要求每个同学针对自己的设计回答指导教师3-4个问题。考核结束后将课程设计报告和源代码的电子版交班长统一刻光盘上。、主要参考文献及资料1 JAVA WEB开发技术方案宝典(CD) 作者：明日科技2Web Services 原理与研发实践 作者：顾宁 等编著 出版社：机械工业出版社 出版时间：2006年01月3网络工程师教程（第2版）作者：雷震甲 主编 出版社：清华大学出版社 出版时间：2006年06月、成绩评定 成绩： （教师填写） 指导老师： （签字） 二一五 年 七 月 十 日目 录第一章 概述1第二章 系统分析2第三章 概要设计 3第四章 详细设计4第五章 运行与测试13第六章 总结与心得14参考文献 15评分标准 16第一章 概述课程设计是实践性教学中的一个重要环节，它以某一课程为基础，可以涉及和课程相关的各个方面，是一门独立于课程之外的特殊课程。课程设计是让同学们对所学的课程更全面的学习和应用，理解和掌握课程的相关知识。网页设计是一门重要的专业基础课，是计算机理论和应用的核心基础课程。网页设计，要求学生在网页设计表示、网页设计的选择和应用、算法的设计及其实现等方面，加深对课程基本内容的理解。同时，在程序设计方法以及上机操作等基本技能和科学作风方面受到比较系统和严格的训练。在这次的课程设计中我负责的模块是作家天地网页设计。在作家天地网页中，向读者推荐作家，读者可以在网页中通过作家姓名进行检索，还会显示作家的排名列表，会显示作家的创作及生活简历，和主要获奖情况，还有一个留言板，读者可以留下对作家的建议以及感想。第二章 系统分析1 书帮网网页设计包括图书库：内容分为左侧和右侧，左侧包含图书搜索、图书分类列表、图书周排行榜（十大）、图书月排行榜（十大）、书帮客、作家天地、插画家、有书加入、帮助。2 图书馆方面包括登录页面： 注册页面以及本网站拥有的图书及其推荐图书。分为左右两个部分：左侧为图书搜索，可以让读者搜索到自己想要寻找的图书。右侧为图书分类，将不同的图书按照相应的分类规划到一起，使读者可以更好的寻找自己想看的一类。3 图书周排行榜（十大）：此方面包括书帮网本周的图书销售量前十名，更好地展示给读者。4 图书月排行榜（十大：此方面包括书帮网本月的图书销售量前十名，更好地展示给读者。5 书帮客： 本网站提供的书帮客服务，对希望可以出书却没有途径的读者提供帮助。6 作家天地：本网站签约图书的作家一览表，帮助读者更好地了解自己喜欢书的作者7 插画家：本网站提供的插画家服务 ，帮助作者及有出书意向的读者可以得到插画服务。8 有书加入 ：本网站提供的新书服务，让读者清楚地看到刚刚上架的新书有哪些。9 帮助：当您浏览书帮网，遇到无法解决的问题可以点此项提供服务。第三章 概要设计1、 网页制作的设计a) CSS样式以及JS的某些属性b) 浏览器的兼容性问题2、 网站布局的设计第四章 详细设计1作家天地网页详细设计 书帮网（首页） #apDiv1 background-color:#6FF;text-align:center;font-size: 20px;font-weight: bold;position:absolute;width:200px;height:37px;z-index:1;left: 28px;top: 379px;#apDiv2 text-align:center;line-height:2;background-color:#6FF;font-size: 20px;font-weight: bold;color:#000;position:absolute;width:200px;height:377px;z-index:1;left: 2px;top: 54px;#apDiv3 background-color:#6FF;font-size: 20px;font-weight: bold;position:absolute;width:1052px;height:27px;z-index:2;left: 248px;top: 381px;#apDiv4 position:absolute;width:200px;height:237px;z-index:3;left: 1015px;top: 433px;#apDiv5 line-height:1.5;font-size: 16px;font-weight: bold;position:absolute;width:690px;height:211px;z-index:4;left: 246px;top: 494px;#apDiv6 position:absolute;width:200px;height:47px;z-index:5;left: 248px;top: 437px;#apDiv7 position:absolute;width:578px;height:52px;z-index:6;left: 735px;top: 317px;#apDiv8 position:absolute;width:103px;height:33px;z-index:7;left: 476px;top: 0px;#apDiv9 position:absolute;width:327px;height:43px;z-index:6;left: 887px;top: 314px;#apDiv10 position:absolute;width:350px;height:31px;z-index:6;left: 866px;top: 328px;#apDiv11 position:absolute;width:67px;height:22px;z-index:7;left: 1229px;top: 332px;#apDiv12 font-size: 16px;font-weight: bold;position:absolute;width:108px;height:22px;z-index:8;left: 744px;top: 334px;#apDiv13 font-size: 16px;font-weight: bold;font-size: 16px;font-weight: bold;position:absolute;width:200px;height:25px;z-index:9;left: 1021px;top: 852px;#apDiv14 position:absolute;width:200px;height:115px;z-index:10;left: 1020px;top: 881px;#apDiv15 position:absolute;width:87px;height:22px;z-index:11;left: 1024px;top: 1052px;#apDiv16 position:absolute;width:100px;height:21px;z-index:12;left: 1121px;top: 1050px;#apDiv17 position:absolute;width:200px;height:51px;z-index:13;left: 248px;top: 714px;#apDiv18 line-height:2;font-size: 16px;font-weight: bold;position:absolute;width:689px;height:318px;z-index:14;left: 246px;top: 777px;#apDiv19 position:absolute;width:200px;height:40px;z-index:15;left: 26px;top: 755px;#apDiv20 position:absolute;width:200px;height:115px;z-index:16;#apDiv21 position:absolute;width:199px;height:350px;z-index:17;left: 28px;top: 808px;#apDiv22 line-height:2;font-size: 16px;font-weight: bold;background-color:#6FF;position:absolute;width:200px;height:158px;z-index:18;left: 1018px;top: 684px;#apDiv23 position:absolute;width:200px;height:38px;z-index:19;left: 1016px;top: 720px;#apDiv24 position:absolute;width:200px;height:36px;z-index:20;left: 1016px;top: 766px;#apDiv25 position:absolute;width:200px;height:35px;z-index:21;left: 1018px;top: 809px;#apDiv26 position:absolute;width:200px;height:46px;z-index:19;left: -216px;top: 334px;#apDiv27 background-color:#6FF;font-size: 20px;font-weight: bold;line-height:1.5;position:absolute;width:200px;height:154px;z-index:19;left: 32px;top: 887px;#apDiv28 background-color:#6FF;position:absolute;width:584px;height:43px;z-index:20;left: 748px;top: 333px; 陈忠实 余华 余秋雨 王蒙 贾平凹 王朔 韩寒 苏童 按作家更新情况排列 你好，欢迎来到书帮网 用户名 密 码      注册    下次自动登录 记住密码？ 设为首页 | 添加收藏                        莫言（1955年2月17日 ）,原名管谟业,生于山东高密县,中国当代著名作家.香港公开大学荣誉文学博士,青岛科技大学客座教授.1980年代中以乡土作品崛起,充满着“怀乡”以及“怨乡”的复杂情感,被归类为“寻根文学”作家.作品深受魔幻现实主义影响.莫言在小说中构造独特的主观感觉世界,天马行空的叙述,陌生化的处理,塑造神秘超验的对象世界,带有明显的“先锋”色彩.2011年8月,莫言凭长篇小说蛙获第八届茅盾文学奖.2012年10月11日,莫言因其“用魔幻现实主义将民间故事、历史和现代融为一体”获得2012年诺贝尔文学奖. 作家姓名检索您有什么想对他说？ 1997年，丰乳肥臀荣获“大家文学奖。 2000年，红高粱家族被亚洲周刊选为20世纪中文小说100强。 2001年，檀香刑获台湾联合报读书人年度文学类最佳书奖。 2003年，檀香刑获第1届鼎钧双年文学奖。 2005年，四十一炮获第2届华语文学传媒大奖年度杰出成就奖。 2006年，生死疲劳获颂福冈亚洲文化大奖。 2008年，生死疲劳获第2届红楼梦奖首奖。 2011年，蛙荣获茅盾文学奖。 姓名：管谟业 笔名：莫言 性别：男 籍贯：山东高密          因为命途中的你们，我才没有荒芜了青春。>>作家天地 今天推荐的是作家 莫言，主要发表作品29部，共获奖项7次。第五章 运行与测试1 设计遇到的问题 技术问题 CSS样式以及JS的某些属性 浏览器的兼容性问题 非技术问题 首页布局太多，易混 字体颜色的美观性2测试截图 第六章 总结与心得本次课程设计具有良好的扩展能力并且便于维护，使用较为便捷，对于管理人员来说是较好的管理工具，但是由于时间和其他方面的限制原因，系统还有很多的方面需要改进，我相信在以后的学习生活中定能一步一步的去克服这些，使在线图书商城系统的功能越来越完善。在实训的过程中，我发现了自己很多的不足，特别是这学期末，最后的实训报告中，我找到了自己很多知识点的欠缺，我会在后面的学习过程中会更有方向性。网页设计的过程中，我了解到了课本的重要性，我知道了以前的对课本的忽略，只有掌握最基本的东西，才能灵活全面的运用。再就是老师补充的课堂知识也是极为重要的，是以后学习中的捷径。在课程设计的这段时间，我学会了很多的东西，加深了自己的动手能力和学习能力，同时使我对Web数据库编程开发有了更深入的了解和认识，对过去所学的软件工程、数据库建立与连接等有了进一步的体会。在这个过程中，我遇到了很多的困难和问题，但在卓云亮老师和一些同学的热心帮助下，我克服了困难，解决了这些问题，在此我衷心的感谢你们，指导老师对工作的严谨和热诚，给我留下了深刻的印象，另外，同学