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）每人至少完成5~10张页面的设计。
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.html
3. 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
四.附录 13
Css 13
JavaScript 17
五.参考文献 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;}
ul{list-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);}
#main{float:left; margin-right:20%;}
#right{
position:fixed;
color:olive;
margin:3% 5% 0 5%;
left:80%;}
#box{
border-top-style:solid;
border-color:#0000FF;}
a:link{
color:#00CC99;
text-decoration:underline;}
a:hover{
color:#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;}
#img{float:right; margin:5px 0;}
.op{ color:olive; font-size:14px;}

道具大比拼：
body{
background:url(背景.gif);
color:#FFFF00;
text-indent:2em;
line-height:2em;}
#main{
border-color:#FFFF33;
border-top-style:double;}
.dao{
letter-spacing:2px;
text-decoration:underline;
font-weight:600;}
JavaScript
<form>
<div align="center">
<select name="select1" size="1"
onChange="javascript:window.open(this.options[this.selectedIndex].value)"
style="BACKGROUND-COLOR: #d9dcff; COLOR: rgb(0,0,128); ">
<option selected>--搜索引擎--</option>
<option value="
<option value="
<option value="
</slect>
</div>
</form>

五.参考文献
1.《web开发技术使用教程》陈轶主编 清华大学出版社
2.哆啦a梦欢乐世界 http://www.dora-.tw/top.html
3. 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>
    <diskStore path="java.io.tmpdir"/>
    <defaultCache
            maxElementsInMemory="10000"
            eternal="false"
            timeToIdleSeconds="120"
            timeToLiveSeconds="120"
            overflowToDisk="true"
            maxElementsOnDisk="10000000"
            diskPersistent="false"
            diskExpiryThreadIntervalSeconds="120"
            memoryStoreEvictionPolicy="LRU"
            />
</ehcache>
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。
<disStore path=”java.io.tmpdir”/>
·   CacheManagerEventListener配置
我们通过CacheManagerEventListenerFactory可以实例化一个CacheManagerPeerProvider，当我们从CacheManager中added和removed Cache时，将通知CacheManagerPeerProvider，这样一来，我们就可以很方面的对CacheManager中的Cache做一些统计。
注册到CacheManager的事件监听类名有： adding a Cache和removing a Cache
<cacheManagerEventListenerFacotory class=”” properties=””/>
·   CacheManagerPeerProvider配置
在集群中CacheManager配置CacheManagerPeerProviderFactory创建CacheManagerPeerProvider。具体的实例如下：

<cacheManagerPeerProviderFactoryclass="net.sf.ehcache.distribution.

RMICacheManagerPeerProviderFactory"

properties="peerDiscovery=manual, rmiUrls=//server1:40000/sampleCache1|//server2:40000/sampleCache1| //server1:40000/sampleCache2|//server2:40000/sampleCache2"
propertySeparator="," />

·   CacheManagerPeerListener配置
CacheManagerPeerListener配置是用来监听集群中缓存消息的分发的。
<cacheManagerPeerListenerFactory
    class="net.sf.ehcache.distribution.RMICacheManagerPeerListenerFactory"
    properties="hostName=fully_qualified_hostname_or_ip,
                port=40001,
               socketTimeoutMillis=120000"
                propertySeparator="," />

·   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配置

<cacheExceptionHandlerFactory class="com.example.ExampleExceptionHandlerFactory"                               properties="logLevel=FINE"/>

总结

这里只对通用缓存的配置做了详细的阐述，至于RMI缓存和集群缓存可以参考这里。

下面给出几个配置示例：
·   Ehcache默认Cache配置
<defaultCache
        maxElementsInMemory="10000"
        eternal="false"
        timeToIdleSeconds="120"
        timeToLiveSeconds="120"
        overflowToDisk="true"
        diskSpoolBufferSizeMB="30"
        maxElementsOnDisk="10000000"
        diskPersistent="false"
        diskExpiryThreadIntervalSeconds="120"
        memoryStoreEvictionPolicy="LRU"
        />
·   SampleCache1配置
简单配置，在ehcache.xml文件中有此配置，在使用Ehcache前最好将其删除掉，自己配置。
缓存名sampleCache1，内存中最多可缓存10000个Element，其中的element会在闲置5分钟或是存活10分钟之后失效。
超过10000element时，element将会输出到磁盘中，输出路径是java.io.tmpdir。
<cache name="sampleCache1"
       maxElementsInMemory="10000"
       maxElementsOnDisk="1000"
       eternal="false"
       overflowToDisk="true"
       diskSpoolBufferSizeMB="20"
       timeToIdleSeconds="300"
       timeToLiveSeconds="600"
       memoryStoreEvictionPolicy="LFU"
        />

·   SampleCache2配置
Cache名为SampleCache2，内存中最多可以缓存1000个element，超出1000不能输出到磁盘中。缓存是永久有效的。
<cache name="sampleCache2"
       maxElementsInMemory="1000"
       eternal="true"
       overflowToDisk="false"
       memoryStoreEvictionPolicy="FIFO"
        />
·   SampleCache3配置
Cache名为SampleCache3。可缓存到磁盘。磁盘缓存将会缓存虚拟机重启期的数据。磁盘缓存失效线程运行间隔时间是10分钟。
<cache name="sampleCache3"
       maxElementsInMemory="500"
       eternal="false"
       overflowToDisk="true"
       timeToIdleSeconds="300"
       timeToLiveSeconds="600"
       diskPersistent="true"
       diskExpiryThreadIntervalSeconds="1"
       memoryStoreEvictionPolicy="LFU"
        />

·   sampleDistributedCache1配置
Cache名为sampleDistributedCache1。
<cache name="sampleDistributedCache1"
       maxElementsInMemory="10"
       eternal="false"
       timeToIdleSeconds="100"
       timeToLiveSeconds="100"
       overflowToDisk="false">
    <cacheEventListenerFactory
            class="net.sf.ehcache.distribution.RMICacheReplicatorFactory"/>
    <bootstrapCacheLoaderFactory
            class="net.sf.ehcache.distribution.RMIBootstrapCacheLoaderFactory"/>
</cache>

·   sampleDistributedCache2配置
<cache name="sampleDistributedCache2"
       maxElementsInMemory="10"
       eternal="false"
       timeToIdleSeconds="100"
       timeToLiveSeconds="100"

       overflowToDisk="false">

    <cacheEventListenerFactory
            class="net.sf.ehcache.distribution.RMICacheReplicatorFactory"
            properties="replicateAsynchronously=false, replicatePuts=false,
                        replicateUpdates=true, replicateUpdatesViaCopy=true,
                       replicateRemovals=false"/>

</cache>
·   sampleDistributedCache3配置
<!--
Sample distributed cache named sampleDistributedCache3.
This cache replicates using defaults except that the asynchronous replication
interval is set to 200ms.
-->
<cache name="sampleDistributedCache3"
       maxElementsInMemory="10"
       eternal="false"
       timeToIdleSeconds="100"
       timeToLiveSeconds="100"
       overflowToDisk="false">
    <cacheEventListenerFactory
            class="net.sf.ehcache.distribution.RMICacheReplicatorFactory"
            properties="asynchronousReplicationIntervalMillis=200"/>
</cache>

34