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梦欢乐世界 .tw/top.html3. W3Cschool在线教程 /4.哆啦a梦百度百科 /view/6022.htm6）课程设计进度安排内容 天数地点构思及收集资料 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;.d