TCP课程设计论文.docx

河南理工大学设计(论文)说明书TCP/IP协议分析与应用课程论文 题目：学生学籍信息网页制作专业：计算机科学与技术班级：08-04姓名：流水轻柔学号：1234 2011年01月20日摘要 随着计算机技术的发展，网络管理及网页制作变得越来越重要。将学生信息管理和网络联系起来无疑是提高学校管理效率的必经之路。而作为当代大学生，网页制作及网站开发技术逐渐成为一项必备的基本技能。作者在HTML的基础上，利用DreamWeaver网页开发工具，结合CSS、JavaScript将众多的学生学籍信息布局到一张网页上，重点考虑网页的排版布局，以实现页面的美观整洁。在该网页上，使用者可以进行信息的录入，照片的上传，信息的纠错检测，而且可以在互联网上访问到该网页。在网页布局上，将相似的字段排在一起，以利于网页整体的美观。为了方便使用者正确输入，提高输入速度，作者特针对不同的字段创建了下拉列表及单选按钮。为了避免提交时出现必填信息为空的现象，作者加入了相关的纠错检验机制，提交时若有必填选项为空，则弹出一个对话框作为提示。最后，作者利用tomcat进行网页部署，在另一台计算机上实现了对该网页的访问。关键词： 网页制作 排版布局 美观整洁 纠错检验 网页部署目录第一章前言51.1 研究目的51.2 研究意义51.3 研究的范围51.4 力求达到的目标51.5 本课题应解决的主要问题5第二章 需求分析62.1 整体需求62.2 详细需求62.2.1 数据录入62.2.2 纠错检验62.2.3 照片放置62.2.4 网页部署62.2.5 打印要求6第三章 理论基础73.1 HTML基础73.1.1 HTML简介73.1.2 HTML 标签73.1.3 HTML表单83.1.4 表格83.1.5 HTML标题93.1.6 HTML 属性93.1.7 HTML头元素93.2 CSS技术103.2.1 CSS简介103.2.2 CSS的特点103.2.3 CSS的语法103.2.4 CSS的使用103.3 JavaScript脚本123.3.1 JavaScript简介123.3.2 JavaScript功能123.3.3 JavaScript的使用方法123.4 Tomcat简介143.5 DreamWeaver153.5.1 DreamWeaver 简介153.5.2 DreamWeaver 的缺点153.5.3 Dreamweaver的优点15第四章 系统总体设计与实现154.1 系统总体设计154.2 具体实现174.2.1 照片上传功能的实现174.2.2 纠错检验功能的实现174.2.3 Form表单及Table表格的实现194.2.4 文本框的实现194.2.5 单选按钮的实现194.2.6 下拉列表的实现204.2.7 文本域的实现204.2.8 按钮的实现20第五章 总结与展望21参考文献22致谢23第一章 前言 1.1 研究目的制作一张学生学籍信息网页。 1.2 研究意义可以实现学生学籍信息的便捷录入，方便用户管理档案信息，为用户提供一个美观整洁的界面。 1.3 研究的范围HTML,CSS,JavaScript以及tomcat. 1.4 力求达到的目标 网页整体的整洁美观，照片的上传，信息的录入，录入信息的纠错检验以及网页的上传发布。 1.5 本课题应解决的主要问题(1)如何使用JavaScript脚本语言实现录入信息的纠错检验；（2）如何使用CSS实现网页的整体排版布局；（3）如何安装配置tomcat实现网页的上传发布。第二章 需求分析2.1 整体需求根据客户（王老师）提供的内容字段，制作出一张网页。2.2 详细需求2.2.1 数据录入要求在表单中可以填写数据，如下中的一些内容：张三，男等内容。2.2.2 纠错检验填写的内容要有纠错检验机制。2.2.3 照片放置在照片放置区域，应该能放置适当大小的照片。2.2.4 网页部署用应用程序服务器部署起来，可以网上访问到。2.2.5 打印要求所有的内容应在一页中显示打印出来。第三章 理论基础3.1 HTML基础3.1.1 HTML简介 HTML（HyperText Mark-up Language）即超文本标记语言或超文本链接标示语言，是目前网络上应用最为广泛的语言，也是构成网页文档的主要语言。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字、图形、动画、声音、表格、链接等。HTML的结构包括头部（Head）、主体（Body）两大部分，其中头部描述浏览器所需的信息，而主体则包含所要说明的具体内容。3.1.2 HTML 标签HTML 标记标签通常被称为 HTML 标签 (HTML tag)。HTML标签是由尖括号包围起来的关键词，通常是成对出现的，分为开始标签和结束标签，如 和 .(1)HTML 标签 标签用于搜集用户信息。根据不同的 type 属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。(2)HTML 标签 标签为 input 元素定义标注（标记）。label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。 标签的 for 属性应当与相关元素的 id 属性相同。(3)HTML 标签定义和用法option 元素定义下拉列表中的一个选项（一个条目）。浏览器将 标签中的内容作为 标签的菜单或是滚动列表中的一个元素显示。option 元素位于 select 元素内部。(4)HTML 标签img 元素向网页中嵌入一幅图像。请注意，从技术上讲， 标签并不会在网页中插入图像，而是从网页上链接图像。 标签创建的是被引用图像的占位空间。 标签有两个必需的属性：src属性和 alt属性。语法：(5)HTML 标签 可定义文档中的分区或节（division/section），可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。如果用 id 或 class 来标记 ，那么该标签的作用会变得更加有效。语法：标题段落(6)HTML 标签 标签在 HTML 页面中创建一条水平线,水平分隔线（horizontal rule）可以在视觉上将文档分隔成各个部分。语法：3.1.3 HTML表单表单是一个包含表单元素的区域, 允许用户在表单中（比如：文本域、下拉列表、单选框、复选框等等）输入信息的元素。语法:input内容3.1.4 表格表格由 标签来定义。每个表格均有若干行（由 标签定义），每行被分割为若干单元格（由 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。语法：数据单元格内容3.1.5 HTML标题标题（Heading）是通过 - 等标签进行定义的。 定义最大的标题。 定义最小的标题。语法：标题3.1.6 HTML 属性HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息并且总是以名称/值对的形式出现。语法：This is a link3.1.7 HTML头元素头元素包含关于文档的概要信息，也称为元信息（meta-information）。Meta 意为“关于某方面的信息”。头元素内的元素不会被浏览器显示出来。根据 HTML 标准，仅有几个标签在 HTML 的头部分是合法的。它们是：, , , , 和 。3.2 CSS技术3.2.1 CSS简介CSS（Cascading Style Sheet，可译为“层叠样式表”或“级联样式表”）是一组格式设置规则，用于控制Web页面的外观。通过使用CSS样式设置页面的格式，可将页面的内容与表现形式分离。页面内容存放在HTML文档中，而用于定义表现形式的CSS规则则存放在另一个文件中或HTML文档的某一部分，通常为文件头部分。将内容与表现形式分离，不仅可使维护站点的外观更加容易，而且还可以使HTML文档代码更加简练，缩短浏览器的加载时间。3.2.2 CSS的特点（1）便于页面的修改。 （2）便于页面风格的统一。 （3）减少网页的体积。3.2.3 CSS的语法CSS的定义是由三个部分构成: 选择符(selector)，属性(properties)和属性的取值(value)。语法: selector property: value (选择符 属性:值)3.2.4 CSS的使用可以用以下三种方式将样式表加入网页。而最接近目标的样式定义优先权越高。高优先权样式将继承低优先权样式的未重叠定义但覆盖重叠的定义。（1）定义内部样式块对象可以在HTML文档的和标记之间插入一个.块对象。 定义方式请参阅样式表语法。示例如下： 文档标题 （2）内联定义 (Inline Styles)内联定义即是在对象的标记内使用对象的style属性定义适用其的样式表属性。示例如下： This is a paragraph （3）导入样式（Import Styles）与链入外部样式的功能基本相同，只是语法和实现方式上有差别 文档标题 import url(css.css); import url(csss.css) ;/单引号也可以 import css,css; import css.css;/单引号也可以 3.3 JavaScript脚本3.3.1 JavaScript简介JavaScript是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言。3.3.2 JavaScript功能（1）能使页面产生动感效果；（2）能根据使用者的操作执行相应的任务；（3）能获取用户和网页的信息；（4）可改变属性；（5）可控制各种表单。3.3.3 JavaScript的使用方法（1）嵌入至标签部分（2）嵌入到（3）在及标签部分均嵌入JavaScript3.4 Tomcat简介 Tomcat 是一个轻量级应用服务器，在中小型系统和并发访问用户不是很多的场合下被普遍使用，是开发和调试JSP 程序的首选。当在一台机器上配置好Apache 服务器，可利用它响应对HTML 页面的访问请求。当配置正确时，Apache 为HTML页面服务，而Tomcat 实际上运行JSP 页面和Servlet。另外，Tomcat和IIS、Apache等Web服务器一样，具有处理HTML页面的功能，它还是一个Servlet和JSP容器，独立的Servlet容器是Tomcat的默认模式3.5 DreamWeaver3.5.1 DreamWeaver 简介Dreamweaver(简称DW)是美国MACROMEDIA公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器，它是第一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。 DREAMWEAVER、FLASH以及在DREAMWEAVER之后推出的针对专业网页图像设计的FIREWORKS,三者被MACROMEDIA公司称为DREAMTEAM(梦之队)。3.5.2 DreamWeaver 的缺点 （1）难以精确达到与浏览器完全一致的显示效果。 （2）页面原始代码的难以控制性。3.5.3 Dreamweaver的优点（1）最佳的制作效率 （2）网站管理 （3）无可比拟的控制能力第四章 系统总体设计与实现4.1 系统总体设计如图4-1所示图4-1 系统的总体布局图4.2 具体实现4.2.1 照片上传功能的实现 为了实现上传照片的功能，我利用Javascrpt编写了一段代码来实现此功能，其代码如下：function show()var s=document.getElementById(src).value;document.getElementById(img).innerHTML=;然后为照片上传添加一个上传按钮，设置其id为src ,鼠标点击事件onclick=show( )即 最后为照片添加一个显示区域。 4.2.2 纠错检验功能的实现这段代码是DreamWeaver自动生成的，其代码如下：function MM_validateForm() /v4.0 if (document.getElementById) var i,p,q,nm,test,num,min,max,errors=,args=MM_validateForm.arguments; for (i=0; i(args.length-2); i+=3) test=argsi+2; val=document.getElementById(argsi); if (val) nm=; if (val=val.value)!=) if (test.indexOf(isEmail)!=-1) p=val.indexOf(); if (p1 | p=(val.length-1) errors+=- +nm+ must contain an e-mail address.n; else if (test!=R) num = parseFloat(val); if (isNaN(val) errors+=- +nm+ must contain a number.n; if (test.indexOf(inRange) != -1) p=test.indexOf(:); min=test.substring(8,p); max=test.substring(p+1); if (nummin | maxnum) errors+=- +nm+ must contain a number between +min+ and +max+.n; else if (test.charAt(0) = R) errors += - +nm+ 为必填！n; if (errors) alert(在填写过程中有些必填选项没填！n+errors); document.MM_returnValue = (errors = ); 当必填项为空时，会弹出提示对话框如表4-1所示表4-1 纠错信息提示表4.2.3 Form表单及Table表格的实现表格内容.4.2.4 文本框的实现学号：其他文本框的设计类似。4.2.5 单选按钮的实现性别： 男input type=radio name=RadioGroup7 value=女 id=RadioGroup7_1 /女单选按钮是否单亲，是否残疾，是否烈士子女，插班，是否贫困，是否申请贷款实现方式相同。4.2.6 下拉列表的实现培养层次： 大学本科 研究生 高职高专 下拉列表所在省，院系，政治面貌实现方式相同。4.2.7 文本域的实现家庭成员信息：文本域备注的实现方式相同。4.2.8 按钮的实现提交：重置按钮的实现方式相同。 第五章 总结与展望通过将近两周的网页设计，我收获许多。我从中了解了HTML语言的基本规则，学会了如何使用DreamWeaver，掌握了JavaScript和CSS的基本用法，同时也尝试了怎样使用tomcat来部署网页。在设计的过程中，我学到的最重要的一点不是如何制作网页，而是如何解决问题。在这期间，每逢遇到困惑与迷茫，我都尽全力通过各种渠道将之解决，如看视频，上网搜资料，查阅相关书籍，向同学请教。而且，在制作中间，我也和不少同学交流，相互借鉴，共同提高，如下拉列表单的选择，有位同学将所在省，院系字段都做成了下拉列表的形式，还添加了全国各个省、直辖市，以及咱学校的各个院系名称，我就觉得很不错，于是就借鉴过来，并且发挥了