网页课程设计 报告_第1页
网页课程设计 报告_第2页
网页课程设计 报告_第3页
网页课程设计 报告_第4页
网页课程设计 报告_第5页
已阅读5页，还剩12页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

常州大学课程设计PAGE第10页共17页序号:03/29学号:12453118课程设计报告课程名称：课程设计（一）设计题目：课程设计管理系统学生姓名：郭宏宇学院（系）：信息数理学院专业班级：应数121校内指导教师：张燕新专业技术职务：讲师设计时间：2014年6月16日2014年6月27日目录简单介绍 2摘要 2背景知识 2HTML 2CSS 2JavaScript 3功能介绍 3登录界面 3学生首页 4课程中心 8教师首页 9发布任务 10注册界面 11联系管理员 13总结 16参考文献 16

简单摘要伴随着网络的出现，网页逐渐融入人们的生活，当今社会中，计算机的使用已经深入到日常工作和生活的方方面面。系统的推出使电脑从高雅的学术殿堂走入了寻常百姓家。网络开始成为人们眼里熟悉的名词。在这样的时代环境下，随着全球信息化技术的兴起，特别是Internet的日益普及，我国各大中专院校都建立了自己的校园网。参加课程设计的学生以班级为单位的原始手工报送的选题方式已经不能适应时代发展的需求，所以课程设计管理系统也就孕育而生了。

课程设计管理系统就是，让教师通过网络系统上传题目，，然后能够使学生通过互联网查看课程设计题目的选定。它采用Web方式，同时适用于局域网和Internet，它要实现学生/教师的区分功能，并能在学生用界面上提供题目查询等功能，在教师用界面上实现该系统同时拥有最开放的题库管理系统和最灵活的选题系统，能够自动进行权限的判断，对用户进行不同主页的展示。

我们采用了HTML技术为主要平台，同时涉及DIV+CSS网页布局技术，以及JavaScript脚本技术，实现了网上选题用户的基本需求。背景知识HTML超文本标记语言（英文：HyperTextMarkupLanguage，HTML）是为“网页创建和其它可在网页浏览器中看到的信息”设计的一种标记语言。HTML被用来结构化信息——例如标题、段落和列表等等，也可用来在一定程度上描述文档的外观和语义。1982年由蒂姆·伯纳斯-李创建，由IETF用简化的SGML（标准通用标记语言）语法进行进一步发展的HTML，后来成为国际标准，由万维网联盟（W3C）维护。HTML档案最常用的扩展名（扩展名）为.html，但是有如DOS等的旧操作系统限制扩展名最多为3个文字符号，所以.htm扩展名也允许使用。而如今.htm扩展名的使用较为减少。编者可以使用任何基本的文本编辑器（例如Notepad等）或所见即所得的HTML编辑器来编辑HTML文件。早期的HTML语法规则定义较为松散，这有助于不熟悉网络出版的人使用或变更。网页浏览器接受这类的文件，使之可以显示语法不严格的网页。随着时间的流逝，官方标准渐渐趋于严格的语法，但是浏览器继续显示一些仍不合乎标准的HTML。使用XML的严格规则的XHTML（可扩展超文本标记语言）是W3C计划中的HTML的接替者。虽然很多人认为它已经成为当前的HTML标准，但是它实际上是一个独立的、和HTML平行发展的标准。W3C目前建议使用XHTML1.1、XHTML1.0或者HTML4.01标准编写网页，但已有许多网页转用较新的HTML5编码撰写（如Google）。CSSCSS目前最新版本为CSS3，能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言，CSS能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象盒模型的能力，并能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语言。JavaScriptJavaScript，一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML网页上使用，用来给HTML网页增加动态功能。然而现在JavaScript也可被用于网络服务器，如Node.js。在1995年时，由网景公司的布兰登·艾克，在网景导航者浏览器上首次设计实现而成。因为网景公司与升阳公司合作，网景公司管理层次结构希望它外观看起来像Java，因此取名为JavaScript。但实际上它的语法风格与Self及Scheme较为接近。为了取得技术优势，微软推出了JScript，CEnvi推出ScriptEase，与JavaScript同样可在浏览器上运行。为了统一规格，1997年，在ECMA（欧洲计算机制造商协会）的协调下，由Netscape、Sun、微软、Borland组成的工作组确定统一标准：ECMA-262。因为JavaScript兼容于ECMA标准，因此也称为ECMAScript。功能介绍登录界面用户通过输入符合要求的密码登录到系统的首页，在此界面中，只有当输入正确的用户名称（即“student”，“teacher”）和密码（与用户名相同）时才可以登录到学生或教师的主要系统界面。学生首页进入到学生首页我们可以看到的第一部分由后续网页的超链接组成。其中的学生功能主要由“课程中心”实现，其他链接还有联系后台管理员的功能。该部分代码<body><divclass="shell"> <divclass="border"> <divid="header"> <h1id="logo"><ahref="#"class="notext">课程设计</a></h1> <divclass="socialsright"> <ul> <li><ahref="#"class="rss">RSS</a></li> <li><ahref="#"class="fb">Facebook</a></li> <li><ahref="#"class="twit">Twitter</a></li> </ul> </div> <divclass="cl"> </div> </div> <divid="navigation"> <ul> <li><ahref="#"class="active">查询主页</a></li> <li><ahref="kecheng.html">课程中心</a></li> <li><ahref="kecheng.html">课程简介</a></li> <li><ahref="book.html">联系管理员</a></li> </ul> <divclass="cl"> </div>第二部分，该部分是一个滑动展示部分该部分代码<divclass="slider"> <divclass="slider-nav"> <ahref="#"class="leftnotext">1</a> <ahref="#"class="leftnotext">2</a> <ahref="#"class="leftnotext">3</a> <ahref="#"class="leftnotext">4</a> <divclass="cl"> </div> </div> <ul> <li> <divclass="item"> <divclass="text"> <h3><em>工科方向</em></h3> <h2><em>课程设计</em></h2> </div> <imgsrc="css/images/slider01.gif"alt=""/> </div> </li> <li> <divclass="item"> <divclass="text"> <h3><em>理科方向</em></h3> <h2><em>课程设计</em></h2> </div> <imgsrc="css/images/slider01.gif"alt=""/> </div> </li> <li> <divclass="item"> <divclass="text"> <h3><em>文法艺术方向</em></h3> <h2><em>课程设计</em></h2> </div> <imgsrc="css/images/slider01.gif"alt=""/> </div> </li> <li> <divclass="item"> <divclass="text"> <h3><em>怀德学院</em></h3> <h2><em>课程设计</em></h2> </div> <imgsrc="css/images/slider01.gif"alt=""/> </div> </li> </ul> </div>第三部分，在这个部分实现了对课程设计部分的简单划分，分为四个入口。该部分代码<divclass="projects"> <h3>最新题目</h3> <divclass="item"> <divclass="imageleft"> <ahref="#"><imgsrc="css/images/project1.jpg"alt=""/></a> </div> <divclass="textleft"> <h4>工科方向</h4> <p>工科方向课程设计包含以下学院：石油化工学院，环境与安全工程学院，机械工程学院、城市轨道交通学院，材料科学与工程学院，石油工程学院。</p> <ahref="#"class="more">更多</a> </div> <divclass="cl"> </div> </div> <!--next--> <divclass="item"> <divclass="imageleft"> <ahref="#"><imgsrc="css/images/project2.jpg"alt=""/></a> </div> <divclass="textleft"> <h4>理科方向</h4> <p>理科方向课程设计包含以下学院：信息科学与工程学院，商学院，数理学院，华罗庚学院。</p> <ahref="#"class="more">更多</a> </div> <divclass="cl"> </div> </div> <!--next--> <divclass="item"> <divclass="imageleft"> <ahref="#"><imgsrc="css/images/project3.jpg"alt=""/></a> </div> <divclass="textleft"> <h4>文法艺术方向</h4> <p>文法艺术方向课程设计包含以下学院：外国语学院，国际教育交流学院，史良法学院，艺术学院。</p> <ahref="#"class="more">更多</a> </div> <divclass="cl"> </div> </div> <!--next--> <divclass="item"> <divclass="imageleft"> <ahref="#"><imgsrc="css/images/project4.jpg"alt=""/></a> </div> <divclass="textleft"> <h4>怀德学院</h4> <p>怀德学院课程设计入口</p> <ahref="#"class="more">更多</a> </div> <divclass="cl"> </div> </div></div></div>课程中心此链接以框架界面分别展示了部分课题和任务来让学生浏览。该部分代码：框架实现：<framesetrows="23%,*"><framesrc="top.html"name="topFrame"scrolling="No"noresize="noresize"><framesetcols="240,*"><framesrc="left.html"name="leftFrame"scrolling="No"noresize="noresize"/><framesrc="main.html"name="mainFrame"></frameset></frameset><noframes><BODY></BODY></noframes></HTML>导航界面：<bodyleftmargin="5"topmargin="5"bgcolor="12F0FF"alink="6600CC"><tablewidth="160"border="0"cellpadding="0"align="left"><tr><tdwidth="20"> </td><tdheight="25"><ahref="main.html"target="mainFrame">课程简介</a></td></tr><tr><tdwidth="20"> </td><tdheight="25"><ahref="main.html"target="mainFrame">教师简介</a></td></tr><tr><tdwidth="20"> </td><tdheight="25"><ahref="main.html"target="mainFrame">查看任务</a></td></tr></body></html>教师首页通过此网页，教师可以跳转至任务的发布页面，这也是学生页面无法查看的功能，在风格相近的情况下加以区分。该部分代码：<divid="navigation"> <ul> <li><ahref="#"class="active">查询主页</a></li> <li><ahref="kecheng.html">课程中心</a></li> <li><ahref="fabu.html">发布任务</a></li> <li><ahref="book.html">联系管理员</a></li> </ul> <divclass="cl"> </div> </div>教师界面的第二部分教师界面的第三部分发布任务教师用户可以通过该界面来发布具体的任务和要求，提交至后台后即可发布任务。该部分代码<html><head><title>发布任务</title></head><body><formaction="index.aspx"method="get">请发布您的课题和任务：<br><textareaname="yoursuggest"cols="50"rows="3"></textarea><br><inputtype="submit"value="提交"><inputtype="reset"value="重写"></form></body></html>注册界面针对没有用户名的新用户，课程设计管理系统提供了一个注册界面，可以使新用户在提交注册信息后，登录到管理系统内。在首页登录界面上的注册链接课程设计管理系统新用户注册界面部分代码：<body><br><h1>课程管理系统注册界面</h1><br><br><center><formaction="index.html"method="post"onsubmit="returnlogin()"><tablebgcolor="#ff9900"width="400"cellspacing=""cellpadding="1"border=""align="center"><tr><tdcolspan="2">新用户注册</td></tr><tr><td>用户名：</td><td> <inputtype="text"id="username"name="username"class="input"></td></tr><tr><td>密  码：</td><td> <inputtype="password"id="userpassword"name="userpassword"value=""class="input"></td></tr><tr><td>确认密码：</td><td> <inputtype="password"id="newpassword"name="newpassword"value=""class="input"></td></tr><tr><td>性  别：</td><td> <inputtype="radio"name="sex"value="">男 <inputtype="radio"name="sex"value="">女</td></tr><tr><tdcolspan="2"><inputtype="submit"value="注册并登录"><!--onClick="login()"onClick="reset()"--> <inputtype="reset"value="重填信息"> </td><tr></table></form><br><ahref="Denglu.html">返回</a></center></body>联系管理员该界面是学生首页和教师首页均具有的功能，以便用户联系后台，解决其他的问题。部分代码：<styletype="text/css">bodytable{font-size:12px;}.text{font-size:14px;font-weight:bold;}</style></head><body><tablewidth="700"border="0"align="center"cellpadding="5"cellspacing="1"bgcolor="#333333"> <trbgcolor="#C2BDD7"> <tdcolspan="2"align="center"bgcolor="#D2CEE1"class="text">留言簿</td></tr> <formaction=""method="post"name="book"> <trbgColor="#ebebeb"> <tdwidth="20%"height="30"align=right>您的姓名：</td> <td><inputtype=textname="UserName"size="30"maxlength=16><fontcolor="#FF0000">*</font></td> </tr> <trbgColor="#ebebeb"> <tdwidth="20%"height="30"align=right>您的邮箱：</td> <td><inputtype=textname="UserMail"size="30"maxlength=50><fontcolor="#FF0000">*</font></td> </tr> <trbgColor="#ebebeb"> <tdwidth="20%"height="30"align=right>您的网站：</td> <td><inputtype=textvalue="http://"name="url"size="30"maxlength=100></td> </tr> <trbgColor="#ebebeb"> <tdwidth="20%"height="30"align=right>其它联系方式：</td> <td><inputtype=textvalue=""name="QQ"size="30"maxlength=100><fontcolor="#FF0000">*</font>（如QQ、MSN、电话等）</td> </tr> <trbgColor="#ebebeb"> <tdwidth="20%"height="110"align=right>留言内容：<br><fontcolor=red>（200字以内）</font></td> <td><textareaname="Comments"rows="7"cols="66"style="overflow:auto;"></textarea><fontcolor="#FF0000">*</font></td> </tr> <trbgColor="#ebebeb"> <tdwidth="20%"height="80"align=right>请选择表情：</td> <td><inputtype="radio"value="1"name="face"checked> <imgborder=0src="css/images/face/face1.gif"> <inputtype="radio"value="2"name="face"> <imgborder=0src="css/images/face/face2.gif"> <inputtype="radio"value="3"name="face"> <imgborder=0src="css/images/face/face3.gif"> <inputtype="radio"value="4"name="face"> <imgborder=0src="css/images/face/face4.gif"> <inputtype="radio"value="5"name="face"> <imgborder=0src="css/images/face/face5.gif"> <inputtype="radio"value="6"name="face"> <imgborder=0src="css/images/face/face6.gif"> <inputtype="radio"value="7"name="face"> <imgborder=0src="css/images/face/face7.gif"> <inputtype="radio"value="8"name="face"> <imgborder=0src="css/images/face/face8.gif"> <inputtype="radio"value="9"name="face"> <imgborder=0src="css/images/face/face9.gif"> <inputtype="radio"value="10"name="face"> <imgborder=0src="css/images/face/face10.gif"><br> <inputtype="radio"value="11"name="face"> <imgborder=0src="css/images/face/face11.gif"> <inputtype="radio"value="12"name="face"> <imgborder=0src="css/images/face/face12.gif"> <inputtype="radio"value="13"name="face"> <imgborder=0src="css/images/face/face13.gif"> <inputtype="radio"value="14"name="face"> <imgborder=0src="css/i

人人文库> 全部分类> 应用文书 > 作业报告

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论