web课设模版.doc

课程设计(论文)任务书 软件学院 学院 会计 专业 (1) 班 一、课程设计(论文)题目 哆啦a梦简介 二、课程设计(论文)工作自 2010年 6 月 22 日起至 2010 年 7 月 8 日止。三、课程设计(论文) 地点: 创新大楼 306、308、310 机房 四、课程设计(论文)内容要求：1本课程设计的目的（1）加深web技术基本概念的了解；（2）灵活使用html标记，css技术，javascript技术；（3）巩固相关的理论知识；（4）培养学生分析、解决问题的能力；（5）提高学生的科技论文写作能力。 2课程设计的任务及要求1）基本要求：（1）分析各功能模块的需求；（2）要求使用HTML,CSS,JS制作静态网页；（3）提出合理的设计方案； （4）网页的外观要求美观；（5）每人至少完成510张页面的设计。 2）创新要求： 在基本要求达到后，可进行创新设计，如使用Flash, Js框架等。3）课程设计论文编写要求（1）理论设计部分以课程设计论文的形式提交，格式必须按照课程设计论文标准格式进行书写和装订。（2）课程设计报告（论文）包括目录、绪论、正文、设计小结、参考文献、附录等4）答辩与评分标准： （1）完成需求分析：20分； （2）完成设计过程：20分； （3）完成编码：20分；（4）回答问题：20分。（5）论文编写：20分。5）参考文献：1.web开发技术使用教程陈轶主编 清华大学出版社2.哆啦a梦欢乐世界 http:/www.dora-.tw/top.html3. W3Cschool在线教程 4.哆啦a梦百度百科 6）课程设计进度安排内容 天数地点构思及收集资料 3图书馆编码 3实验室撰写论文 2图书馆学生签名： 2010 年 6 月22 日课程设计(论文)评审意见（1）完成需求分析（20分）：优（）、良（）、中（）、一般（）、差（）； （2）设计分析（20分）：优（）、良（）、中（）、一般（）、差（）； （3）完成编码（20分）：优（）、良（）、中（）、一般（）、差（）；（4）回答问题（20分）：优（）、良（）、中（）、一般（）、差（）；（5）论文编写（20分）：优（）、良（）、中（）、一般（）、差（）；评阅人： 职称： 硕士 2010 年 7月 8日目录一绪论4网站主题4网站规划4二正文5网站网页部分5主页5哆啦a梦8野比大雄9作者10道具大比拼11三.设计小结12（1）设计中遇到的问题及解决12（2）心得体会12四.附录13Css13JavaScript17五.参考文献17一 绪论网站主题本网站介绍了日本经典动漫哆啦a梦的一些主要信息。相信每位同学在童年的时候都看过哆啦a梦 ，不知道现在还能否记得那只没有耳朵、脖子上挂着个大铃铛的蓝色的猫呢？还记不记得那个贪睡、常尿床、又懒又笨的大雄呢？哆啦a梦的作者又有什么样的传奇故事呢？哆啦a梦的道具到底有多少呢？相信这个网站能给大家一个满意的答案。网站规划网站共有5个板块，分别为主页、两位主人公（哆啦a梦和野比大雄）的详细介绍、道具大比拼以及作者的详细资料。共5个网页，每个网页定义了不同的css元素，每个网页都有它自己的独特的风格。主页的背景以黄白相间的图片填充，有种简单与温暖的感觉，符合了哆啦a梦这部动漫的整体风格。主页不仅具有横向导航栏，更添加了一个固定的竖向导航栏，这样使得阅览更加简易。哆啦a梦的简介中定义的背景为鸡蛋黄，这样能够凸显出哆啦a梦的活泼与可爱，野比大雄的简介与首页的风格有些相似，都定义了一个固定的导航栏，便于浏览。作者简介则用了table与块的结合，使页面更加美观。道具大比拼中定义了一个块，然后多次使用，但定义的border属性能清晰的把它们分开。二 正文网站网页部分主Css和JavaScript定义网站通过css文件定义了一些基本标签的样式该部分的JavaScript作用主要为对调入文件的控制网页实现主页主页分为三个部分，分别为横向导航栏、具体内容以及竖向导航栏。全部是通过定义css的id来实现相应区域的划分。其中：横向导航栏的css主要定义的一个menu的块以及menu一下的子模块，定义其向左浮动。具体内容的css主要包括对一些文本和图像显示方式的定义，定义了不同块的不同属性，比如border类的属性，用以区分块与块之间的不同，还有字体、颜色、链接等方面的属性。竖向导航栏主要包括了一个块，在块里头添加一个table，然后定义table的属性，然后再table的文本中添加了页面内的链接，方便浏览。效果图哆啦a梦哆啦a梦简介定义了一个大块，然后在块里头定义了两个小块，一个为首部的图片区，一个为文本区。图片区定义了一个table，讲两张图片整合为一张，效果不错。文本区只是定义了body的属性和strong的属性。效果图野比大雄跟主页风格有点相像，都定义了一个固定的竖向导航栏，只不过这里多家了张图片。效果图作者此部分定义了一个table和一个块，在table中加入的是四张小图片，这样便将它们聚在一起成为了一张大图。而在table的右边输入的便是文本了，文本中加了张作者的照片。效果图道具大比拼该部分比较简单，只是定义了一个块而已，同时定义了类来改变字体的属性。效果图三.设计小结（1）设计中遇到的问题及解决一开始并没有写过多的css方法，css也只是将基本的标签加以定义，而网页的各部分都是通过talbe标签来实现的，后来发现如果一个网页有多个衍生的网页，这样不但要反复的定义table而且如果发现错误，一点一点的修改也过于麻烦，因而采用了再css里定义各种区域的类和id的方法，结果是编译变的简单很多。由于写了过多的css文件，所以在调用的时候发现会有覆盖的现象出现，因此将各部分网页以及相应的css保存在同一个文件中，结果显示正常。（2）心得体会本次课设只做了5个网页，还是有许多想要实现的功能没有实现，同时还有许多问题没有解决。比如有些文字的排版还不够整齐。此次课程设计加深了我对css和javascript的认识。之前我也只是在课本上知道两者的主要特点和大致内容，但是这次实践之后，我更清楚了所谓的页面风格和函数功能的体现。通过本次课设我加深了对web编程的理解，能够比原来更为清晰的认识到网页的制作。四.附录主Css和JavaScript定义Css首页：body line-height:2em; background:url(背景.gif); color:olive; text-indent:2em; letter-spacing :1px;#head font-size:16px; font-weight:900; border-bottom-style:double; border-bottom-color:#66FF33; width:78%;#box float:left; margin:0 5em 0 0; width:78%; border-right-style:doubled; border-right-color:#66FF33;#right text-indent:1em; border-bottom-style:double; border-bottom-color:#66FF33; border-top-style:double; border-top-color:#66FF33; width:78%;#top border-top-style :double; border-top-color:#33FF00; border-bottom-style:double; border-bottom-color:#FF9900; width:78%;#menu height:50px;margin:0 10%;border-bottom:3px solid #CC0000;#menu ul list-style:none;#menu ul li float:left; margin:0 5%;#menu ul li a width:150px; height:40px; font-size:x-large;text-align:center;text-decoration:none;background:#FFFF99;display:block; #menu ul li ul display:none; position:absolute;#menu ul li ul li background:#33CCFF;#menu ul li ul li a background:none;#menu ul li ul li a:hover background:#FFFF33;color:#99FF00;#menu ul li:hover ul display:block;ullist-style-type:circle; .big font-size:18px; font-weight:800; letter-spacing :1em; color:#CC3333;#los position:fixed; left:82%; margin-top:90px; margin-right:5%;a:link text-decoration:line-through; color:#FFCC00;a:visited text-decoration:none; color:olive;a:hover text-decoration:none; color:#00CCFF;哆啦a梦：body background:#FFD200; font-size:16px; color:#0066FF; text-indent:2em;#mid margin:0 30% 0 30%; background:url(背景4.gif) repeat-y;strong font-weight:600;text-decoration:underline; color:#CC0000;.live text-align:left; width:90%;野比大雄：body background:url(背景.gif);#mainfloat:left; margin-right:20%;#right position:fixed; color:olive; margin:3% 5% 0 5%; left:80%;#boxborder-top-style:solid; border-color:#0000FF;a:linkcolor:#00CC99; text-decoration:underline;a:hovercolor:#FF9900; text-decoration:underline;作者：body font-size:16px; color:#00CC99; text-indent:2em; font-weight:600;line-height:1.25em;text-decoration:underline;#left margin-left:8%; float:left;#main margin-right:20%; border-right-style:double; border-top-style:double; border-color:#00CC99;#imgfloat:right; margin:5px 0;.op color:olive; font-size:14px;道具大比拼：bodybackground:url(背景.gif); color:#FFFF00; text-indent:2em; line-height:2em;#mainborder-color:#FFFF33;border-top-style:double;.daoletter-spacing:2px; text-decoration:underline; font-weight:600;JavaScript-搜索引擎-option value=option value=option value= 五.参考文献1.web开发技术使用教程陈轶主编 清华大学出版社2.哆啦a梦欢乐世界 http:/www.dora-.tw/top.html3. W3Cschool在线教程 4.哆啦a梦百度百科 附录资料：Ehcache缓存配置 简介 Cache的配置很灵活，官方提供的Cache配置方式有好几种。你可以通过声明配置、在xml中配置、在程序里配置或者调用构造方法时传入不同的参数。 你可以将Cache的配置从代码中剥离出来，也可以在使用运行时配置，所谓的运行时配置无非也就是在代码中配置。以下是运行时配置的好处： 在同一个地方配置所有的Cache，这样很容易管理Cache的内存和磁盘消耗。 发布时可更改Cache配置。 可再安装阶段就检查出配置错误信息，而避免了运行时错误。 本文将会对ehcache.xml配置文件进行详细的阐述。在配置的时可以拷贝一个现有的ehcache.xml，如果没有请点击这里去下载。 ehcache-failsafe.xml 如果你调用了CacheManager默认构造方法去创建CacheManager的实例，此方法会到classpath中找ehcache.xml文件，否则它会到类路径下找ehcache-failsafe.xml文件。而ehcache-failsafe.xml被包含在jar包中，所有它肯定能找的到。 ehcache-failsafe.xml提供了一个非常简单的默认配置，这样可以使用户在没有创建ehcache.xml的情况下使用Ehcache。 不过这样做Ehcache会提醒用户创建一个正确的Ehcache配置。 ehcache.xml片段： ehcache.xml和其他配置文件 在Ehcache-1.6之前的版本，只支持ASCII编码的ehcache.xml配置文件。在Ehcach-1.6之后版本中，支持UTF8编码的ehcache.xml配置文件。因为向后兼容，所有采用ASCII编码的配置文件完全没有必要转换为UTF8。 一个CacheManager必须要有一个XML配置。由于磁盘路径或是监听端口，多个CacheManager使用同一个配置文件时会出现错误。 下面是ehcache.xml具体实例以及配置指南 ehcache xmlns:xsi=http:/www.w3.org/2001/XMLSchema-instance CacheManager配置 DmulticastGroupPort=4446，这样可以配置监听端口。 DiskStore配置 如果你使用的DiskStore（磁盘缓存），你必须要配置DiskStore配置项。如果不配置，Ehcache将会使用java.io.tmpdir。 diskStroe的“path”属性是用来配置磁盘缓存使用的物理路径的，Ehcache磁盘缓存使用的文件后缀名是.data和.index。 CacheManagerEventListener配置 我们通过CacheManagerEventListenerFactory可以实例化一个CacheManagerPeerProvider，当我们从CacheManager中added和removed Cache时，将通知CacheManagerPeerProvider，这样一来，我们就可以很方面的对CacheManager中的Cache做一些统计。 注册到CacheManager的事件监听类名有： adding a Cache和removing a Cache CacheManagerPeerProvider配置 在集群中CacheManager配置CacheManagerPeerProviderFactory创建CacheManagerPeerProvider。具体的实例如下： CacheManagerPeerListener配置 CacheManagerPeerListener配置是用来监听集群中缓存消息的分发的。 Cache配置 name：Cache的唯一标识 maxElementsInMemory：内存中最大缓存对象数。 maxElementsOnDisk：磁盘中最大缓存对象数，若是0表示无穷大。 eternal：Element是否永久有效，一但设置了，timeout将不起作用。 overflowToDisk：配置此属性，当内存中Element数量达到maxElementsInMemory时，Ehcache将会Element写到磁盘中。 timeToIdleSeconds：设置Element在失效前的允许闲置时间。仅当element不是永久有效时使用，可选属性，默认值是0，也就是可闲置时间无穷大。 timeToLiveSeconds：设置Element在失效前允许存活时间。最大时间介于创建时间和失效时间之间。仅当element不是永久有效时使用，默认是0.，也就是element存活时间无穷大。 diskPersistent：是否缓存虚拟机重启期数据。（这个虚拟机是指什么虚拟机一直没看明白是什么,有高人还希望能指点一二）。 diskExpiryThreadIntervalSeconds：磁盘失效线程运行时间间隔，默认是120秒。 diskSpoolBufferSizeMB：这个参数设置DiskStore（磁盘缓存）的缓存区大小。默认是30MB。每个Cache都应该有自己的一个缓冲区。 memoryStoreEvictionPolicy：当达到maxElementsInMemory限制时，Ehcache将会根据指定的策略去清理内存。默认策略是LRU（最近最少使用）。你可以设置为FIFO（先进先出）或是LFU（较少使用）。这里比较遗憾，Ehcache并没有提供一个用户定制策略的接口，仅仅支持三种指定策略，感觉做的不够理想。 Cache Exception Handling配置 总结 这里只对通用缓存的配置做了详细的阐述，至于RMI缓存和集群缓存可以参考这里。 下面给出几个配置示例： Ehcache默认Cache配置 SampleCache1配置 简单配置，在ehcache.xml文件中有此配置，在使用Ehcache前最好将其删除掉，自己配置。 缓存名sampleCache1，内存中最多可缓存10000个Element，其中的element会在闲置5分钟或是存活10分钟之后失效。 超过10000element时，element将会输出到磁盘中，输出路径是java.io.tmpdir。 SampleCache2配置 Cache名为SampleCache2，内存中最多可以缓存1000个element，超出1000不能输出到磁盘中。缓存是永久有效的。 SampleCache3配置 Cache名为SampleCache3。可缓存到磁盘。磁盘缓存将会缓存虚拟机重启期的数据。磁盘缓存失效线程运行间隔时间是10分钟。 sampleDistributedCache1配置 Cache名为sampleDistributedCache1。 sampleDistributedCache2配置 sampleDistributedCache3配置 34