《书帮网网页制作课程设计报告郭江涵》由会员分享，可在线阅读，更多相关《书帮网网页制作课程设计报告郭江涵（20页珍藏版）》请在金锄头文库上搜索。
1、山东理工大学计算机学院课课 程程 设设 计计（WEB开发基础）班 级 软件1304 姓 名 郭江涵学 号 131105721XX指导教师 XXX二一五年七月九日课程设计任务书及成绩评定课程设计任务书及成绩评定课题名称课题名称 书帮网网页制作 、题目的目的和要求、题目的目的和要求： 1 1、设计目的、设计目的巩固和加深对Web的理解，通过上机实验、调试代码，加深对课本知识的理解，最终使学生能够熟练应用Web的知识写网页。（1）通过本课程的学习，能熟练掌握几种基本网页设计的基本操作。（2）能针对给定题目，选择相应的Web知识，分析并设计代码，进而给出问题的正确求解过程并编写代码实现。 2 2、设计
2、题目要求、设计题目要求： 根据网站首页的页面布局自行设计【基本要求】图书库：内容分为左侧和右侧，左侧包含图书搜索、图书分类列表、图书周排行榜（十 大）、图书月排行榜（十大） 书帮客 作家天地 插画家 有书加入 帮助、设计进度及完成情况、设计进度及完成情况日 期内 容7.06-7.07选取参考书，查阅有关文献资料，完成资料搜集和系统分析 工作。7.077.08创建相关网页设计,录入源代码。7.087.09调试代码并记录调试中的问题，初步完成课程设计报告。7.097.10上交课程设计报告打印版并进行课程设计答辩，要求每个同 学针对自己的设计回答指导教师 3-4 个问题。 考核结束后将课程设计报告和
3、源代码的电子版交班长统一刻 光盘上。、主要参考文献及资料、主要参考文献及资料1 JAVA WEB 开发技术方案宝典(CD) 作者：明日科技2Web Services 原理与研发实践 作者：顾宁 等编著 出版社：机械工业出版社 出版时间：2006 年 01 月3网络工程师教程（第 2 版）作者：雷震甲 主编 出版社：清华大学出版社 出版时间：2006 年 06 月、成绩评定、成绩评定成绩： （教师填写）指导老师： （签字）二一五 年 七 月 十 日目目 录录第一章 概述1第二章 系统分析2第三章 概要设计 3第四章 详细设计4第五章 运行与测试13第六章 总结与心得14参考文献 15评分标准 1
4、61第一章 概述课程设计是实践性教学中的一个重要环节，它以某一课程为基础，可以涉及和课程相关的各个方面，是一门独立于课程之外的特殊课程。课程设计是让同学们对所学的课程更全面的学习和应用，理解和掌握课程的相关知识。网页设计是一门重要的专业基础课，是计算机理论和应用的核心基础课程。网页设计，要求学生在网页设计表示、网页设计的选择和应用、算法的设计及其实现等方面，加深对课程基本内容的理解。同时，在程序设计方法以及上机操作等基本技能和科学作风方面受到比较系统和严格的训练。在这次的课程设计中我负责的模块是作家天地网页设计。在作家天地网页中，向读者推荐作家，读者可以在网页中通过作家姓名进行检索，还会显示作
5、家的排名列表，会显示作家的创作及生活简历，和主要获奖情况，还有一个留言板，读者可以留下对作家的建议以及感想。2第二章 系统分析1 书帮网网页设计包括图书库：内容分为左侧和右侧，左侧包含图书搜索、图书分类 列表、图书周排行榜（十大）、图书月排行榜（十大）、书帮客、作家天地、插画家、 有书加入、帮助。 2 图书馆方面包括登录页面： 注册页面以及本网站拥有的图书及其推荐图书。分为左 右两个部分：左侧为图书搜索，可以让读者搜索到自己想要寻找的图书。右侧为图书分 类，将不同的图书按照相应的分类规划到一起，使读者可以更好的寻找自己想看的一类。3 图书周排行榜（十大）：此方面包括书帮网本周的图书销售量前十名
6、，更好地展示给 读者。 4 图书月排行榜（十大：此方面包括书帮网本月的图书销售量前十名，更好地展示给 读者。 5 书帮客： 本网站提供的书帮客服务，对希望可以出书却没有途径的读者提供帮助。 6 作家天地：本网站签约图书的作家一览表，帮助读者更好地了解自己喜欢书的作者 7 插画家：本网站提供的插画家服务 ，帮助作者及有出书意向的读者可以得到插画服 务。 8 有书加入 ：本网站提供的新书服务，让读者清楚地看到刚刚上架的新书有哪些。 9 帮助：当您浏览书帮网，遇到无法解决的问题可以点此项提供服务。3第三章 概要设计1、网页制作的设计 a)CSS 样式以及 JS 的某些属性 b)浏览器的兼容性问题2、
7、网站布局的设计4第四章 详细设计 1 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-
8、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;5left: 248px; top: 381px; #apDiv4 position:absolute; width:200px; height
9、: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:absolu
10、te; 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;6 #apDiv9 position:absolute; width:327px; height:43px; z-index:6; left: 887px; top: 314px; #apDiv10 position:absolute; width:350px; height:31px; z-i
11、ndex: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-s
12、ize: 16px; font-weight: bold; position:absolute; width:200px; height:25px; z-index:9; left: 1021px;7top: 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; #ap
13、Div16 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; l
14、eft: 246px; top: 777px; 8#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; fon
15、t-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;9height:36px; z-index:20; left: 1016px; top: 766px; #apDiv25 position:absolute; width:200px; height:35px; z-index:21; left: 1018px; top:
